From 865b98f659c4919b1c7b72f51ba7a31425bceceb Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 15:40:57 +0100 Subject: [PATCH] improve tabs --- common/gtk-3.0/3.20/gtk-dark.css | 98 +++++++++++---------- common/gtk-3.0/3.20/gtk-darker.css | 98 +++++++++++---------- common/gtk-3.0/3.20/gtk-solid-dark.css | 98 +++++++++++---------- common/gtk-3.0/3.20/gtk-solid-darker.css | 98 +++++++++++---------- common/gtk-3.0/3.20/gtk-solid.css | 98 +++++++++++---------- common/gtk-3.0/3.20/gtk.css | 98 +++++++++++---------- common/gtk-3.0/3.20/sass/_applications.scss | 4 + common/gtk-3.0/3.20/sass/_common.scss | 51 +++++------ 8 files changed, 328 insertions(+), 315 deletions(-) diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css index 994189c..3db2277 100644 --- a/common/gtk-3.0/3.20/gtk-dark.css +++ b/common/gtk-3.0/3.20/gtk-dark.css @@ -667,7 +667,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu menuitem.button.flat, modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:active, notebook > header tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1519,12 +1519,13 @@ cursor-handle { notebook { padding: 0; - background-color: #404552; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook.frame { border: 1px solid #2b2e39; } - notebook.frame header { + notebook.frame > header { margin: -1px; } + notebook > stack:not(:only-child) { + background-color: #404552; } notebook > header { padding: 3px; background-color: #383C4A; } @@ -1538,94 +1539,92 @@ notebook { box-shadow: inset -1px 0 #2b2e39; } notebook > header.top { padding-bottom: 0; } - notebook > header.top tab { - padding: 4px 15px; + notebook > header.top > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-bottom: none; margin-right: -1px; border-radius: 1px 1px 0 0; } - notebook > header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.bottom { padding-top: 0; } - notebook > header.bottom tab { - padding: 4px 15px; + notebook > header.bottom > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-top: none; margin-right: -1px; border-radius: 0 0 1px 1px; } - notebook > header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.right { padding-left: 0; } - notebook > header.right tab { - padding: 4px 15px; + notebook > header.right > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-left: none; margin-bottom: -1px; border-radius: 0 1px 1px 0; } - notebook > header.right tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.left { padding-right: 0; } - notebook > header.left tab { - padding: 4px 15px; + notebook > header.left > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-right: none; margin-bottom: -1px; border-radius: 1px 0 0 1px; } - notebook > header.left tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook > header.top tabs arrow.up, notebook > header.bottom tabs arrow.up { + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } - notebook > header.top tabs arrow.up:last-child, notebook > header.bottom tabs arrow.up:last-child { + notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } - notebook > header.top tabs arrow.down, notebook > header.bottom tabs arrow.down { + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } - notebook > header.top tabs arrow.down:first-child, notebook > header.bottom tabs arrow.down:first-child { + notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } - notebook > header.left tabs arrow.up, notebook > header.right tabs arrow.up { + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } - notebook > header.left tabs arrow.up:last-child, notebook > header.right tabs arrow.up:last-child { + notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } - notebook > header.left tabs arrow.down, notebook > header.right tabs arrow.down { + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } - notebook > header.left tabs arrow.down:first-child, notebook > header.right tabs arrow.down:first-child { + notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } - notebook > header tabs arrow { + notebook > header > tabs > arrow { color: rgba(211, 218, 227, 0.45); } - notebook > header tabs arrow:hover { + notebook > header > tabs > arrow:hover { color: rgba(211, 218, 227, 0.725); } - notebook > header tabs arrow:active { + notebook > header > tabs > arrow:active { color: #D3DAE3; } - notebook > header tabs arrow:disabled { + notebook > header > tabs > arrow:disabled { color: rgba(211, 218, 227, 0.15); } - notebook > header tab { + notebook > header > tabs > tab { + color: rgba(211, 218, 227, 0.45); background-color: rgba(64, 69, 82, 0); } - notebook > header tab label { - color: rgba(211, 218, 227, 0.45); } - notebook > header tab:hover { + notebook > header > tabs > tab:hover:not(:checked) { + color: rgba(211, 218, 227, 0.725); background-color: rgba(64, 69, 82, 0.5); - border-color: #2b2e39; } - notebook > header tab:hover label { - color: rgba(211, 218, 227, 0.725); } - notebook > header tab:checked { + border-color: #2b2e39; + box-shadow: inset 0 -1px #2b2e39; } + notebook > header > tabs > tab:checked { + color: #D3DAE3; background-color: #404552; border-color: #2b2e39; } - notebook > header tab:checked label { - color: #D3DAE3; } - notebook > header tab button { + notebook > header > tabs > tab button.flat, notebook > header > tabs > tab button.sidebar-button { min-height: 18px; min-width: 16px; padding: 0; color: #9da3ad; } - notebook > header tab button:hover { + notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover { color: #ff4d4d; } - notebook > header tab button:active, notebook > header tab button:active:hover { + notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover { color: #5294E2; } * { @@ -2770,6 +2769,9 @@ popover.background label.nautilus-canvas-item.separator, headerbar .nautilus-can background-color: #404552; border-bottom: 1px solid #2b2e39; } +.nautilus-window notebook { + background-color: #404552; } + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css index 8a5152b..167c088 100644 --- a/common/gtk-3.0/3.20/gtk-darker.css +++ b/common/gtk-3.0/3.20/gtk-darker.css @@ -666,7 +666,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu menuitem.button.flat, modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:active, notebook > header tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1518,12 +1518,13 @@ cursor-handle { notebook { padding: 0; - background-color: #ffffff; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook.frame { border: 1px solid #dcdfe3; } - notebook.frame header { + notebook.frame > header { margin: -1px; } + notebook > stack:not(:only-child) { + background-color: #ffffff; } notebook > header { padding: 3px; background-color: #F5F6F7; } @@ -1537,94 +1538,92 @@ notebook { box-shadow: inset -1px 0 #dcdfe3; } notebook > header.top { padding-bottom: 0; } - notebook > header.top tab { - padding: 4px 15px; + notebook > header.top > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-bottom: none; margin-right: -1px; border-radius: 1px 1px 0 0; } - notebook > header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.bottom { padding-top: 0; } - notebook > header.bottom tab { - padding: 4px 15px; + notebook > header.bottom > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-top: none; margin-right: -1px; border-radius: 0 0 1px 1px; } - notebook > header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.right { padding-left: 0; } - notebook > header.right tab { - padding: 4px 15px; + notebook > header.right > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-left: none; margin-bottom: -1px; border-radius: 0 1px 1px 0; } - notebook > header.right tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.left { padding-right: 0; } - notebook > header.left tab { - padding: 4px 15px; + notebook > header.left > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-right: none; margin-bottom: -1px; border-radius: 1px 0 0 1px; } - notebook > header.left tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook > header.top tabs arrow.up, notebook > header.bottom tabs arrow.up { + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } - notebook > header.top tabs arrow.up:last-child, notebook > header.bottom tabs arrow.up:last-child { + notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } - notebook > header.top tabs arrow.down, notebook > header.bottom tabs arrow.down { + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } - notebook > header.top tabs arrow.down:first-child, notebook > header.bottom tabs arrow.down:first-child { + notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } - notebook > header.left tabs arrow.up, notebook > header.right tabs arrow.up { + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } - notebook > header.left tabs arrow.up:last-child, notebook > header.right tabs arrow.up:last-child { + notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } - notebook > header.left tabs arrow.down, notebook > header.right tabs arrow.down { + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } - notebook > header.left tabs arrow.down:first-child, notebook > header.right tabs arrow.down:first-child { + notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } - notebook > header tabs arrow { + notebook > header > tabs > arrow { color: rgba(92, 97, 108, 0.55); } - notebook > header tabs arrow:hover { + notebook > header > tabs > arrow:hover { color: rgba(92, 97, 108, 0.775); } - notebook > header tabs arrow:active { + notebook > header > tabs > arrow:active { color: #5c616c; } - notebook > header tabs arrow:disabled { + notebook > header > tabs > arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook > header tab { + notebook > header > tabs > tab { + color: rgba(92, 97, 108, 0.55); background-color: rgba(255, 255, 255, 0); } - notebook > header tab label { - color: rgba(92, 97, 108, 0.55); } - notebook > header tab:hover { + notebook > header > tabs > tab:hover:not(:checked) { + color: rgba(92, 97, 108, 0.775); background-color: rgba(255, 255, 255, 0.5); - border-color: #dcdfe3; } - notebook > header tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook > header tab:checked { + border-color: #dcdfe3; + box-shadow: inset 0 -1px #dcdfe3; } + notebook > header > tabs > tab:checked { + color: #5c616c; background-color: #ffffff; border-color: #dcdfe3; } - notebook > header tab:checked label { - color: #5c616c; } - notebook > header tab button { + notebook > header > tabs > tab button.flat, notebook > header > tabs > tab button.sidebar-button { min-height: 18px; min-width: 16px; padding: 0; color: #92959d; } - notebook > header tab button:hover { + notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover { color: #ff4d4d; } - notebook > header tab button:active, notebook > header tab button:active:hover { + notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover { color: #5294E2; } * { @@ -2769,6 +2768,9 @@ popover.background label.nautilus-canvas-item.separator, headerbar .nautilus-can background-color: #ffffff; border-bottom: 1px solid #dcdfe3; } +.nautilus-window notebook { + background-color: #ffffff; } + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css index dd6b2e1..3d85156 100644 --- a/common/gtk-3.0/3.20/gtk-solid-dark.css +++ b/common/gtk-3.0/3.20/gtk-solid-dark.css @@ -667,7 +667,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu menuitem.button.flat, modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:active, notebook > header tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1519,12 +1519,13 @@ cursor-handle { notebook { padding: 0; - background-color: #404552; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook.frame { border: 1px solid #2b2e39; } - notebook.frame header { + notebook.frame > header { margin: -1px; } + notebook > stack:not(:only-child) { + background-color: #404552; } notebook > header { padding: 3px; background-color: #383C4A; } @@ -1538,94 +1539,92 @@ notebook { box-shadow: inset -1px 0 #2b2e39; } notebook > header.top { padding-bottom: 0; } - notebook > header.top tab { - padding: 4px 15px; + notebook > header.top > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-bottom: none; margin-right: -1px; border-radius: 1px 1px 0 0; } - notebook > header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.bottom { padding-top: 0; } - notebook > header.bottom tab { - padding: 4px 15px; + notebook > header.bottom > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-top: none; margin-right: -1px; border-radius: 0 0 1px 1px; } - notebook > header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.right { padding-left: 0; } - notebook > header.right tab { - padding: 4px 15px; + notebook > header.right > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-left: none; margin-bottom: -1px; border-radius: 0 1px 1px 0; } - notebook > header.right tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.left { padding-right: 0; } - notebook > header.left tab { - padding: 4px 15px; + notebook > header.left > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-right: none; margin-bottom: -1px; border-radius: 1px 0 0 1px; } - notebook > header.left tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook > header.top tabs arrow.up, notebook > header.bottom tabs arrow.up { + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } - notebook > header.top tabs arrow.up:last-child, notebook > header.bottom tabs arrow.up:last-child { + notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } - notebook > header.top tabs arrow.down, notebook > header.bottom tabs arrow.down { + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } - notebook > header.top tabs arrow.down:first-child, notebook > header.bottom tabs arrow.down:first-child { + notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } - notebook > header.left tabs arrow.up, notebook > header.right tabs arrow.up { + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } - notebook > header.left tabs arrow.up:last-child, notebook > header.right tabs arrow.up:last-child { + notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } - notebook > header.left tabs arrow.down, notebook > header.right tabs arrow.down { + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } - notebook > header.left tabs arrow.down:first-child, notebook > header.right tabs arrow.down:first-child { + notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } - notebook > header tabs arrow { + notebook > header > tabs > arrow { color: rgba(211, 218, 227, 0.45); } - notebook > header tabs arrow:hover { + notebook > header > tabs > arrow:hover { color: rgba(211, 218, 227, 0.725); } - notebook > header tabs arrow:active { + notebook > header > tabs > arrow:active { color: #D3DAE3; } - notebook > header tabs arrow:disabled { + notebook > header > tabs > arrow:disabled { color: rgba(211, 218, 227, 0.15); } - notebook > header tab { + notebook > header > tabs > tab { + color: rgba(211, 218, 227, 0.45); background-color: rgba(64, 69, 82, 0); } - notebook > header tab label { - color: rgba(211, 218, 227, 0.45); } - notebook > header tab:hover { + notebook > header > tabs > tab:hover:not(:checked) { + color: rgba(211, 218, 227, 0.725); background-color: rgba(64, 69, 82, 0.5); - border-color: #2b2e39; } - notebook > header tab:hover label { - color: rgba(211, 218, 227, 0.725); } - notebook > header tab:checked { + border-color: #2b2e39; + box-shadow: inset 0 -1px #2b2e39; } + notebook > header > tabs > tab:checked { + color: #D3DAE3; background-color: #404552; border-color: #2b2e39; } - notebook > header tab:checked label { - color: #D3DAE3; } - notebook > header tab button { + notebook > header > tabs > tab button.flat, notebook > header > tabs > tab button.sidebar-button { min-height: 18px; min-width: 16px; padding: 0; color: #9da3ad; } - notebook > header tab button:hover { + notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover { color: #ff4d4d; } - notebook > header tab button:active, notebook > header tab button:active:hover { + notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover { color: #5294E2; } * { @@ -2770,6 +2769,9 @@ popover.background label.nautilus-canvas-item.separator, headerbar .nautilus-can background-color: #404552; border-bottom: 1px solid #2b2e39; } +.nautilus-window notebook { + background-color: #404552; } + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css index be54980..fb8ee12 100644 --- a/common/gtk-3.0/3.20/gtk-solid-darker.css +++ b/common/gtk-3.0/3.20/gtk-solid-darker.css @@ -666,7 +666,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu menuitem.button.flat, modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:active, notebook > header tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1518,12 +1518,13 @@ cursor-handle { notebook { padding: 0; - background-color: #ffffff; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook.frame { border: 1px solid #dcdfe3; } - notebook.frame header { + notebook.frame > header { margin: -1px; } + notebook > stack:not(:only-child) { + background-color: #ffffff; } notebook > header { padding: 3px; background-color: #F5F6F7; } @@ -1537,94 +1538,92 @@ notebook { box-shadow: inset -1px 0 #dcdfe3; } notebook > header.top { padding-bottom: 0; } - notebook > header.top tab { - padding: 4px 15px; + notebook > header.top > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-bottom: none; margin-right: -1px; border-radius: 1px 1px 0 0; } - notebook > header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.bottom { padding-top: 0; } - notebook > header.bottom tab { - padding: 4px 15px; + notebook > header.bottom > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-top: none; margin-right: -1px; border-radius: 0 0 1px 1px; } - notebook > header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.right { padding-left: 0; } - notebook > header.right tab { - padding: 4px 15px; + notebook > header.right > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-left: none; margin-bottom: -1px; border-radius: 0 1px 1px 0; } - notebook > header.right tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.left { padding-right: 0; } - notebook > header.left tab { - padding: 4px 15px; + notebook > header.left > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-right: none; margin-bottom: -1px; border-radius: 1px 0 0 1px; } - notebook > header.left tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook > header.top tabs arrow.up, notebook > header.bottom tabs arrow.up { + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } - notebook > header.top tabs arrow.up:last-child, notebook > header.bottom tabs arrow.up:last-child { + notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } - notebook > header.top tabs arrow.down, notebook > header.bottom tabs arrow.down { + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } - notebook > header.top tabs arrow.down:first-child, notebook > header.bottom tabs arrow.down:first-child { + notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } - notebook > header.left tabs arrow.up, notebook > header.right tabs arrow.up { + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } - notebook > header.left tabs arrow.up:last-child, notebook > header.right tabs arrow.up:last-child { + notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } - notebook > header.left tabs arrow.down, notebook > header.right tabs arrow.down { + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } - notebook > header.left tabs arrow.down:first-child, notebook > header.right tabs arrow.down:first-child { + notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } - notebook > header tabs arrow { + notebook > header > tabs > arrow { color: rgba(92, 97, 108, 0.55); } - notebook > header tabs arrow:hover { + notebook > header > tabs > arrow:hover { color: rgba(92, 97, 108, 0.775); } - notebook > header tabs arrow:active { + notebook > header > tabs > arrow:active { color: #5c616c; } - notebook > header tabs arrow:disabled { + notebook > header > tabs > arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook > header tab { + notebook > header > tabs > tab { + color: rgba(92, 97, 108, 0.55); background-color: rgba(255, 255, 255, 0); } - notebook > header tab label { - color: rgba(92, 97, 108, 0.55); } - notebook > header tab:hover { + notebook > header > tabs > tab:hover:not(:checked) { + color: rgba(92, 97, 108, 0.775); background-color: rgba(255, 255, 255, 0.5); - border-color: #dcdfe3; } - notebook > header tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook > header tab:checked { + border-color: #dcdfe3; + box-shadow: inset 0 -1px #dcdfe3; } + notebook > header > tabs > tab:checked { + color: #5c616c; background-color: #ffffff; border-color: #dcdfe3; } - notebook > header tab:checked label { - color: #5c616c; } - notebook > header tab button { + notebook > header > tabs > tab button.flat, notebook > header > tabs > tab button.sidebar-button { min-height: 18px; min-width: 16px; padding: 0; color: #92959d; } - notebook > header tab button:hover { + notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover { color: #ff4d4d; } - notebook > header tab button:active, notebook > header tab button:active:hover { + notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover { color: #5294E2; } * { @@ -2769,6 +2768,9 @@ popover.background label.nautilus-canvas-item.separator, headerbar .nautilus-can background-color: #ffffff; border-bottom: 1px solid #dcdfe3; } +.nautilus-window notebook { + background-color: #ffffff; } + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css index 30c5bad..4894e1d 100644 --- a/common/gtk-3.0/3.20/gtk-solid.css +++ b/common/gtk-3.0/3.20/gtk-solid.css @@ -666,7 +666,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu menuitem.button.flat, modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:active, notebook > header tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1522,12 +1522,13 @@ cursor-handle { notebook { padding: 0; - background-color: #ffffff; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook.frame { border: 1px solid #dcdfe3; } - notebook.frame header { + notebook.frame > header { margin: -1px; } + notebook > stack:not(:only-child) { + background-color: #ffffff; } notebook > header { padding: 3px; background-color: #F5F6F7; } @@ -1541,94 +1542,92 @@ notebook { box-shadow: inset -1px 0 #dcdfe3; } notebook > header.top { padding-bottom: 0; } - notebook > header.top tab { - padding: 4px 15px; + notebook > header.top > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-bottom: none; margin-right: -1px; border-radius: 1px 1px 0 0; } - notebook > header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.bottom { padding-top: 0; } - notebook > header.bottom tab { - padding: 4px 15px; + notebook > header.bottom > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-top: none; margin-right: -1px; border-radius: 0 0 1px 1px; } - notebook > header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.right { padding-left: 0; } - notebook > header.right tab { - padding: 4px 15px; + notebook > header.right > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-left: none; margin-bottom: -1px; border-radius: 0 1px 1px 0; } - notebook > header.right tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.left { padding-right: 0; } - notebook > header.left tab { - padding: 4px 15px; + notebook > header.left > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-right: none; margin-bottom: -1px; border-radius: 1px 0 0 1px; } - notebook > header.left tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook > header.top tabs arrow.up, notebook > header.bottom tabs arrow.up { + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } - notebook > header.top tabs arrow.up:last-child, notebook > header.bottom tabs arrow.up:last-child { + notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } - notebook > header.top tabs arrow.down, notebook > header.bottom tabs arrow.down { + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } - notebook > header.top tabs arrow.down:first-child, notebook > header.bottom tabs arrow.down:first-child { + notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } - notebook > header.left tabs arrow.up, notebook > header.right tabs arrow.up { + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } - notebook > header.left tabs arrow.up:last-child, notebook > header.right tabs arrow.up:last-child { + notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } - notebook > header.left tabs arrow.down, notebook > header.right tabs arrow.down { + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } - notebook > header.left tabs arrow.down:first-child, notebook > header.right tabs arrow.down:first-child { + notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } - notebook > header tabs arrow { + notebook > header > tabs > arrow { color: rgba(92, 97, 108, 0.55); } - notebook > header tabs arrow:hover { + notebook > header > tabs > arrow:hover { color: rgba(92, 97, 108, 0.775); } - notebook > header tabs arrow:active { + notebook > header > tabs > arrow:active { color: #5c616c; } - notebook > header tabs arrow:disabled { + notebook > header > tabs > arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook > header tab { + notebook > header > tabs > tab { + color: rgba(92, 97, 108, 0.55); background-color: rgba(255, 255, 255, 0); } - notebook > header tab label { - color: rgba(92, 97, 108, 0.55); } - notebook > header tab:hover { + notebook > header > tabs > tab:hover:not(:checked) { + color: rgba(92, 97, 108, 0.775); background-color: rgba(255, 255, 255, 0.5); - border-color: #dcdfe3; } - notebook > header tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook > header tab:checked { + border-color: #dcdfe3; + box-shadow: inset 0 -1px #dcdfe3; } + notebook > header > tabs > tab:checked { + color: #5c616c; background-color: #ffffff; border-color: #dcdfe3; } - notebook > header tab:checked label { - color: #5c616c; } - notebook > header tab button { + notebook > header > tabs > tab button.flat, notebook > header > tabs > tab button.sidebar-button { min-height: 18px; min-width: 16px; padding: 0; color: #92959d; } - notebook > header tab button:hover { + notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover { color: #ff4d4d; } - notebook > header tab button:active, notebook > header tab button:active:hover { + notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover { color: #5294E2; } * { @@ -2773,6 +2772,9 @@ popover.background label.nautilus-canvas-item.separator, headerbar .nautilus-can background-color: #ffffff; border-bottom: 1px solid #dcdfe3; } +.nautilus-window notebook { + background-color: #ffffff; } + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css index a150c0b..3d9ce93 100644 --- a/common/gtk-3.0/3.20/gtk.css +++ b/common/gtk-3.0/3.20/gtk.css @@ -666,7 +666,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu menuitem.button.flat, modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header tab button, notebook > header tab button:hover, notebook > header tab button:active, notebook > header tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1522,12 +1522,13 @@ cursor-handle { notebook { padding: 0; - background-color: #ffffff; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook.frame { border: 1px solid #dcdfe3; } - notebook.frame header { + notebook.frame > header { margin: -1px; } + notebook > stack:not(:only-child) { + background-color: #ffffff; } notebook > header { padding: 3px; background-color: #F5F6F7; } @@ -1541,94 +1542,92 @@ notebook { box-shadow: inset -1px 0 #dcdfe3; } notebook > header.top { padding-bottom: 0; } - notebook > header.top tab { - padding: 4px 15px; + notebook > header.top > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-bottom: none; margin-right: -1px; border-radius: 1px 1px 0 0; } - notebook > header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.bottom { padding-top: 0; } - notebook > header.bottom tab { - padding: 4px 15px; + notebook > header.bottom > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-top: none; margin-right: -1px; border-radius: 0 0 1px 1px; } - notebook > header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.right { padding-left: 0; } - notebook > header.right tab { - padding: 4px 15px; + notebook > header.right > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-left: none; margin-bottom: -1px; border-radius: 0 1px 1px 0; } - notebook > header.right tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } notebook > header.left { padding-right: 0; } - notebook > header.left tab { - padding: 4px 15px; + notebook > header.left > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + outline-offset: -4px; border: 1px solid transparent; border-right: none; margin-bottom: -1px; border-radius: 1px 0 0 1px; } - notebook > header.left tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook > header.top tabs arrow.up, notebook > header.bottom tabs arrow.up { + notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } - notebook > header.top tabs arrow.up:last-child, notebook > header.bottom tabs arrow.up:last-child { + notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child { margin-left: 2px; } - notebook > header.top tabs arrow.down, notebook > header.bottom tabs arrow.down { + notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } - notebook > header.top tabs arrow.down:first-child, notebook > header.bottom tabs arrow.down:first-child { + notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child { margin-right: 2px; } - notebook > header.left tabs arrow.up, notebook > header.right tabs arrow.up { + notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } - notebook > header.left tabs arrow.up:last-child, notebook > header.right tabs arrow.up:last-child { + notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child { margin-top: 2px; } - notebook > header.left tabs arrow.down, notebook > header.right tabs arrow.down { + notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } - notebook > header.left tabs arrow.down:first-child, notebook > header.right tabs arrow.down:first-child { + notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child { margin-bottom: 2px; } - notebook > header tabs arrow { + notebook > header > tabs > arrow { color: rgba(92, 97, 108, 0.55); } - notebook > header tabs arrow:hover { + notebook > header > tabs > arrow:hover { color: rgba(92, 97, 108, 0.775); } - notebook > header tabs arrow:active { + notebook > header > tabs > arrow:active { color: #5c616c; } - notebook > header tabs arrow:disabled { + notebook > header > tabs > arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook > header tab { + notebook > header > tabs > tab { + color: rgba(92, 97, 108, 0.55); background-color: rgba(255, 255, 255, 0); } - notebook > header tab label { - color: rgba(92, 97, 108, 0.55); } - notebook > header tab:hover { + notebook > header > tabs > tab:hover:not(:checked) { + color: rgba(92, 97, 108, 0.775); background-color: rgba(255, 255, 255, 0.5); - border-color: #dcdfe3; } - notebook > header tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook > header tab:checked { + border-color: #dcdfe3; + box-shadow: inset 0 -1px #dcdfe3; } + notebook > header > tabs > tab:checked { + color: #5c616c; background-color: #ffffff; border-color: #dcdfe3; } - notebook > header tab:checked label { - color: #5c616c; } - notebook > header tab button { + notebook > header > tabs > tab button.flat, notebook > header > tabs > tab button.sidebar-button { min-height: 18px; min-width: 16px; padding: 0; color: #92959d; } - notebook > header tab button:hover { + notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover { color: #ff4d4d; } - notebook > header tab button:active, notebook > header tab button:active:hover { + notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover { color: #5294E2; } * { @@ -2773,6 +2772,9 @@ popover.background label.nautilus-canvas-item.separator, headerbar .nautilus-can background-color: #ffffff; border-bottom: 1px solid #dcdfe3; } +.nautilus-window notebook { + background-color: #ffffff; } + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 6872d60..f47a285 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -117,6 +117,10 @@ border-bottom: 1px solid $borders_color; } +.nautilus-window notebook { + background-color: $base_color; +} + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 0602b21..4c92a7d 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1603,18 +1603,19 @@ cursor-handle { // notebook { padding: 0; - background-color: $base_color; transition: all 200ms $ease-out-quad; &.frame { border: 1px solid $borders_color; - header { margin: -1px; } // ugly hack to hide the borders around the header + > header { margin: -1px; } // ugly hack to hide the borders around the header + } + + > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks + background-color: $base_color; } > header { - $vpadding: 4px; - $hpadding: 15px; padding: 3px; background-color: $bg_color; @@ -1628,16 +1629,16 @@ notebook { &.#{$_pos} { padding-#{$_bpos}: 0; - tab { - padding: $vpadding $hpadding; + > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + + outline-offset: -4px; + border: 1px solid transparent; border-#{$_bpos}: none; - // nicer close button placement - &.reorderable-page { - padding-left: 12px; - padding-right: 12px; - } // tab overlap @if $_pos==top or $_pos==bottom { margin-right: -1px; } @else { margin-bottom: -1px; } @@ -1652,26 +1653,26 @@ notebook { } // overflow arrows &.top, &.bottom { - tabs arrow.up { + > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:last-child { margin-left: 2px; } } - tabs arrow.down { + > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); &:first-child { margin-right: 2px; } } } &.left, &.right { - tabs arrow.up { + > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); &:last-child { margin-top: 2px; } } - tabs arrow.down { + > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); &:first-child { margin-bottom: 2px; } } } - tabs arrow { + > tabs > arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } @@ -1679,32 +1680,28 @@ notebook { &:disabled { color: transparentize($insensitive_fg_color,0.3); } } // tab colors - tab { + > tabs > tab { + color: $insensitive_fg_color; background-color: transparentize($base_color, 1); - label { color: $insensitive_fg_color; } - - &:hover { + &:hover:not(:checked) { + color: mix($fg_color, $insensitive_fg_color, 50%); background-color: transparentize($base_color, 0.5); border-color: $borders_color; - - label { color: mix($fg_color, $insensitive_fg_color, 50%); } + box-shadow: inset 0 -1px $borders_color; } &:checked { + color: $fg_color; background-color: $base_color; border-color: $borders_color; - - label { color: $fg_color; } } // close button - button { + button.flat { min-height: 18px; min-width: 16px; padding: 0; color: mix($bg_color, $fg_color, 35%); - @extend %undecorated_button; - &:hover { @extend %undecorated_button; color: lighten(red, 15%);