From e2bd5989d463c7e7c66b12d0bd7e552d8e017a6a Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: [PATCH] update notebook styling --- common/gtk-3.0/3.20/gtk-dark.css | 162 +++++++++++------------ common/gtk-3.0/3.20/gtk-darker.css | 162 +++++++++++------------ common/gtk-3.0/3.20/gtk-solid-dark.css | 162 +++++++++++------------ common/gtk-3.0/3.20/gtk-solid-darker.css | 162 +++++++++++------------ common/gtk-3.0/3.20/gtk-solid.css | 162 +++++++++++------------ common/gtk-3.0/3.20/gtk.css | 162 +++++++++++------------ common/gtk-3.0/3.20/sass/_common.scss | 144 ++++++++------------ 7 files changed, 519 insertions(+), 597 deletions(-) diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css index 61b22c1..996754a 100644 --- a/common/gtk-3.0/3.20/gtk-dark.css +++ b/common/gtk-3.0/3.20/gtk-dark.css @@ -746,7 +746,7 @@ NemoWindow .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > b 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 tab button, notebook tab button:hover, notebook tab button:active, notebook tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { +.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, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { border-color: transparent; background-color: transparent; background-image: none; @@ -1624,17 +1624,8 @@ notebook { notebook.frame { border: 1px solid #2b2e39; } notebook header { + padding: 2px; background-color: #383C4A; } - .frame notebook header { - border: 0px solid #2b2e39; } - .frame notebook header.top { - border-bottom-width: 0; } - .frame notebook header.bottom { - border-top-width: 0; } - .frame notebook header.right { - border-left-width: 0; } - .frame notebook header.left { - border-right-width: 0; } notebook header.top { box-shadow: inset 0 -1px #2b2e39; } notebook header.bottom { @@ -1643,72 +1634,66 @@ notebook { box-shadow: inset 1px 0 #2b2e39; } notebook header.left { box-shadow: inset -1px 0 #2b2e39; } - notebook header.top tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-top: 2px solid transparent; - padding-top: 6px; - border-radius: 3.5px 2px 0 0; } - notebook header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.top tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.top tab:active, notebook header.top tab:active:hover { - background-color: #404552; - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #404552, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.bottom tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-bottom: 2px solid transparent; - padding-bottom: 6px; - border-radius: 0 0 2px 3.5px; } - notebook header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.bottom tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.bottom tab:active, notebook header.bottom tab:active:hover { - background-color: #404552; - box-shadow: inset 0 -1px #404552, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.right tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-right: 2px solid transparent; - padding-right: 17px; - border-radius: 0 3.5px 3.5px 0; } - notebook header.right tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.right tab:active, notebook header.right tab:active:hover { - background-color: #404552; - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #404552, inset -1px 0 #2b2e39; } - notebook header.left tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-left: 2px solid transparent; - padding-left: 17px; - border-radius: 3.5px 0 0 3.5px; } - notebook header.left tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.left tab:active, notebook header.left tab:active:hover { - background-color: #404552; - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #404552; } + notebook header.top { + padding-bottom: 0; } + notebook header.top tab { + padding: 4px 15px; + 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; + 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; + 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; + 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 { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook header.left tabs arrow.down:first-child, notebook header.right tabs arrow.down:first-child { + margin-bottom: 2px; } notebook header tabs arrow { color: rgba(211, 218, 227, 0.45); } notebook header tabs arrow:hover { @@ -1717,22 +1702,29 @@ notebook { color: #D3DAE3; } notebook header tabs arrow:disabled { color: rgba(211, 218, 227, 0.15); } - notebook tab label { - padding: 0 2px; - color: rgba(211, 218, 227, 0.45); } - notebook tab:hover label { - color: rgba(211, 218, 227, 0.725); } - notebook tab:active label { - color: #D3DAE3; } - notebook tab button { - min-height: 18px; - min-width: 16px; - padding: 0; - color: #9da3ad; } - notebook tab button:hover { - color: #ff4d4d; } - notebook tab button:active, notebook tab button:active:hover { - color: #5294E2; } + notebook header tab { + background-color: rgba(64, 69, 82, 0); } + notebook header tab label { + color: rgba(211, 218, 227, 0.45); } + notebook header tab:hover { + 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:active { + background-color: #404552; + border-color: #2b2e39; } + notebook header tab:active label { + color: #D3DAE3; } + notebook header tab button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: #9da3ad; } + notebook header tab button:hover { + color: #ff4d4d; } + notebook header tab button:active, notebook header tab button:active:hover { + color: #5294E2; } * { -GtkRange-slider-width: 13; diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css index 592e0f1..9c7d946 100644 --- a/common/gtk-3.0/3.20/gtk-darker.css +++ b/common/gtk-3.0/3.20/gtk-darker.css @@ -745,7 +745,7 @@ NemoWindow .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > b 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 tab button, notebook tab button:hover, notebook tab button:active, notebook tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { +.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, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { border-color: transparent; background-color: transparent; background-image: none; @@ -1627,17 +1627,8 @@ notebook { notebook.frame { border: 1px solid #dcdfe3; } notebook header { + padding: 2px; background-color: #F5F6F7; } - .frame notebook header { - border: 0px solid #dcdfe3; } - .frame notebook header.top { - border-bottom-width: 0; } - .frame notebook header.bottom { - border-top-width: 0; } - .frame notebook header.right { - border-left-width: 0; } - .frame notebook header.left { - border-right-width: 0; } notebook header.top { box-shadow: inset 0 -1px #dcdfe3; } notebook header.bottom { @@ -1646,72 +1637,66 @@ notebook { box-shadow: inset 1px 0 #dcdfe3; } notebook header.left { box-shadow: inset -1px 0 #dcdfe3; } - notebook header.top tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-top: 2px solid transparent; - padding-top: 6px; - border-radius: 3.5px 2px 0 0; } - notebook header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.top tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.top tab:active, notebook header.top tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #ffffff, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-bottom: 2px solid transparent; - padding-bottom: 6px; - border-radius: 0 0 2px 3.5px; } - notebook header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.bottom tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab:active, notebook header.bottom tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 -1px #ffffff, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-right: 2px solid transparent; - padding-right: 17px; - border-radius: 0 3.5px 3.5px 0; } - notebook header.right tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab:active, notebook header.right tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #ffffff, inset -1px 0 #dcdfe3; } - notebook header.left tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-left: 2px solid transparent; - padding-left: 17px; - border-radius: 3.5px 0 0 3.5px; } - notebook header.left tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.left tab:active, notebook header.left tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #ffffff; } + notebook header.top { + padding-bottom: 0; } + notebook header.top tab { + padding: 4px 15px; + 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; + 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; + 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; + 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 { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook header.left tabs arrow.down:first-child, notebook header.right tabs arrow.down:first-child { + margin-bottom: 2px; } notebook header tabs arrow { color: rgba(92, 97, 108, 0.55); } notebook header tabs arrow:hover { @@ -1720,22 +1705,29 @@ notebook { color: #5c616c; } notebook header tabs arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook tab label { - padding: 0 2px; - color: rgba(92, 97, 108, 0.55); } - notebook tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook tab:active label { - color: #5c616c; } - notebook tab button { - min-height: 18px; - min-width: 16px; - padding: 0; - color: #92959d; } - notebook tab button:hover { - color: #ff4d4d; } - notebook tab button:active, notebook tab button:active:hover { - color: #5294E2; } + notebook header tab { + background-color: rgba(255, 255, 255, 0); } + notebook header tab label { + color: rgba(92, 97, 108, 0.55); } + notebook header tab:hover { + 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:active { + background-color: #ffffff; + border-color: #dcdfe3; } + notebook header tab:active label { + color: #5c616c; } + notebook header tab button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: #92959d; } + notebook header tab button:hover { + color: #ff4d4d; } + notebook header tab button:active, notebook header tab button:active:hover { + color: #5294E2; } * { -GtkRange-slider-width: 13; 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 f9e06aa..05d02a6 100644 --- a/common/gtk-3.0/3.20/gtk-solid-dark.css +++ b/common/gtk-3.0/3.20/gtk-solid-dark.css @@ -746,7 +746,7 @@ NemoWindow .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > b 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 tab button, notebook tab button:hover, notebook tab button:active, notebook tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { +.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, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { border-color: transparent; background-color: transparent; background-image: none; @@ -1624,17 +1624,8 @@ notebook { notebook.frame { border: 1px solid #2b2e39; } notebook header { + padding: 2px; background-color: #383C4A; } - .frame notebook header { - border: 0px solid #2b2e39; } - .frame notebook header.top { - border-bottom-width: 0; } - .frame notebook header.bottom { - border-top-width: 0; } - .frame notebook header.right { - border-left-width: 0; } - .frame notebook header.left { - border-right-width: 0; } notebook header.top { box-shadow: inset 0 -1px #2b2e39; } notebook header.bottom { @@ -1643,72 +1634,66 @@ notebook { box-shadow: inset 1px 0 #2b2e39; } notebook header.left { box-shadow: inset -1px 0 #2b2e39; } - notebook header.top tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-top: 2px solid transparent; - padding-top: 6px; - border-radius: 3.5px 2px 0 0; } - notebook header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.top tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.top tab:active, notebook header.top tab:active:hover { - background-color: #404552; - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #404552, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.bottom tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-bottom: 2px solid transparent; - padding-bottom: 6px; - border-radius: 0 0 2px 3.5px; } - notebook header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.bottom tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.bottom tab:active, notebook header.bottom tab:active:hover { - background-color: #404552; - box-shadow: inset 0 -1px #404552, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.right tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-right: 2px solid transparent; - padding-right: 17px; - border-radius: 0 3.5px 3.5px 0; } - notebook header.right tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.right tab:active, notebook header.right tab:active:hover { - background-color: #404552; - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #404552, inset -1px 0 #2b2e39; } - notebook header.left tab { - border-width: 0; - background-color: rgba(64, 69, 82, 0); - padding: 4px 15px; - border-left: 2px solid transparent; - padding-left: 17px; - border-radius: 3.5px 0 0 3.5px; } - notebook header.left tab:hover { - background-color: rgba(64, 69, 82, 0.5); - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #2b2e39; } - notebook header.left tab:active, notebook header.left tab:active:hover { - background-color: #404552; - box-shadow: inset 0 1px #2b2e39, inset 0 -1px #2b2e39, inset 1px 0 #2b2e39, inset -1px 0 #404552; } + notebook header.top { + padding-bottom: 0; } + notebook header.top tab { + padding: 4px 15px; + 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; + 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; + 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; + 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 { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook header.left tabs arrow.down:first-child, notebook header.right tabs arrow.down:first-child { + margin-bottom: 2px; } notebook header tabs arrow { color: rgba(211, 218, 227, 0.45); } notebook header tabs arrow:hover { @@ -1717,22 +1702,29 @@ notebook { color: #D3DAE3; } notebook header tabs arrow:disabled { color: rgba(211, 218, 227, 0.15); } - notebook tab label { - padding: 0 2px; - color: rgba(211, 218, 227, 0.45); } - notebook tab:hover label { - color: rgba(211, 218, 227, 0.725); } - notebook tab:active label { - color: #D3DAE3; } - notebook tab button { - min-height: 18px; - min-width: 16px; - padding: 0; - color: #9da3ad; } - notebook tab button:hover { - color: #ff4d4d; } - notebook tab button:active, notebook tab button:active:hover { - color: #5294E2; } + notebook header tab { + background-color: rgba(64, 69, 82, 0); } + notebook header tab label { + color: rgba(211, 218, 227, 0.45); } + notebook header tab:hover { + 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:active { + background-color: #404552; + border-color: #2b2e39; } + notebook header tab:active label { + color: #D3DAE3; } + notebook header tab button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: #9da3ad; } + notebook header tab button:hover { + color: #ff4d4d; } + notebook header tab button:active, notebook header tab button:active:hover { + color: #5294E2; } * { -GtkRange-slider-width: 13; 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 d86b4c7..11652b7 100644 --- a/common/gtk-3.0/3.20/gtk-solid-darker.css +++ b/common/gtk-3.0/3.20/gtk-solid-darker.css @@ -745,7 +745,7 @@ NemoWindow .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > b 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 tab button, notebook tab button:hover, notebook tab button:active, notebook tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { +.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, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { border-color: transparent; background-color: transparent; background-image: none; @@ -1627,17 +1627,8 @@ notebook { notebook.frame { border: 1px solid #dcdfe3; } notebook header { + padding: 2px; background-color: #F5F6F7; } - .frame notebook header { - border: 0px solid #dcdfe3; } - .frame notebook header.top { - border-bottom-width: 0; } - .frame notebook header.bottom { - border-top-width: 0; } - .frame notebook header.right { - border-left-width: 0; } - .frame notebook header.left { - border-right-width: 0; } notebook header.top { box-shadow: inset 0 -1px #dcdfe3; } notebook header.bottom { @@ -1646,72 +1637,66 @@ notebook { box-shadow: inset 1px 0 #dcdfe3; } notebook header.left { box-shadow: inset -1px 0 #dcdfe3; } - notebook header.top tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-top: 2px solid transparent; - padding-top: 6px; - border-radius: 3.5px 2px 0 0; } - notebook header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.top tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.top tab:active, notebook header.top tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #ffffff, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-bottom: 2px solid transparent; - padding-bottom: 6px; - border-radius: 0 0 2px 3.5px; } - notebook header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.bottom tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab:active, notebook header.bottom tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 -1px #ffffff, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-right: 2px solid transparent; - padding-right: 17px; - border-radius: 0 3.5px 3.5px 0; } - notebook header.right tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab:active, notebook header.right tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #ffffff, inset -1px 0 #dcdfe3; } - notebook header.left tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-left: 2px solid transparent; - padding-left: 17px; - border-radius: 3.5px 0 0 3.5px; } - notebook header.left tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.left tab:active, notebook header.left tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #ffffff; } + notebook header.top { + padding-bottom: 0; } + notebook header.top tab { + padding: 4px 15px; + 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; + 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; + 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; + 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 { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook header.left tabs arrow.down:first-child, notebook header.right tabs arrow.down:first-child { + margin-bottom: 2px; } notebook header tabs arrow { color: rgba(92, 97, 108, 0.55); } notebook header tabs arrow:hover { @@ -1720,22 +1705,29 @@ notebook { color: #5c616c; } notebook header tabs arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook tab label { - padding: 0 2px; - color: rgba(92, 97, 108, 0.55); } - notebook tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook tab:active label { - color: #5c616c; } - notebook tab button { - min-height: 18px; - min-width: 16px; - padding: 0; - color: #92959d; } - notebook tab button:hover { - color: #ff4d4d; } - notebook tab button:active, notebook tab button:active:hover { - color: #5294E2; } + notebook header tab { + background-color: rgba(255, 255, 255, 0); } + notebook header tab label { + color: rgba(92, 97, 108, 0.55); } + notebook header tab:hover { + 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:active { + background-color: #ffffff; + border-color: #dcdfe3; } + notebook header tab:active label { + color: #5c616c; } + notebook header tab button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: #92959d; } + notebook header tab button:hover { + color: #ff4d4d; } + notebook header tab button:active, notebook header tab button:active:hover { + color: #5294E2; } * { -GtkRange-slider-width: 13; diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css index 8dd5886..9db47d2 100644 --- a/common/gtk-3.0/3.20/gtk-solid.css +++ b/common/gtk-3.0/3.20/gtk-solid.css @@ -745,7 +745,7 @@ NemoWindow .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > b 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 tab button, notebook tab button:hover, notebook tab button:active, notebook tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { +.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, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { border-color: transparent; background-color: transparent; background-image: none; @@ -1631,17 +1631,8 @@ notebook { notebook.frame { border: 1px solid #dcdfe3; } notebook header { + padding: 2px; background-color: #F5F6F7; } - .frame notebook header { - border: 0px solid #dcdfe3; } - .frame notebook header.top { - border-bottom-width: 0; } - .frame notebook header.bottom { - border-top-width: 0; } - .frame notebook header.right { - border-left-width: 0; } - .frame notebook header.left { - border-right-width: 0; } notebook header.top { box-shadow: inset 0 -1px #dcdfe3; } notebook header.bottom { @@ -1650,72 +1641,66 @@ notebook { box-shadow: inset 1px 0 #dcdfe3; } notebook header.left { box-shadow: inset -1px 0 #dcdfe3; } - notebook header.top tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-top: 2px solid transparent; - padding-top: 6px; - border-radius: 3.5px 2px 0 0; } - notebook header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.top tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.top tab:active, notebook header.top tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #ffffff, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-bottom: 2px solid transparent; - padding-bottom: 6px; - border-radius: 0 0 2px 3.5px; } - notebook header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.bottom tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab:active, notebook header.bottom tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 -1px #ffffff, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-right: 2px solid transparent; - padding-right: 17px; - border-radius: 0 3.5px 3.5px 0; } - notebook header.right tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab:active, notebook header.right tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #ffffff, inset -1px 0 #dcdfe3; } - notebook header.left tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-left: 2px solid transparent; - padding-left: 17px; - border-radius: 3.5px 0 0 3.5px; } - notebook header.left tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.left tab:active, notebook header.left tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #ffffff; } + notebook header.top { + padding-bottom: 0; } + notebook header.top tab { + padding: 4px 15px; + 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; + 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; + 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; + 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 { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook header.left tabs arrow.down:first-child, notebook header.right tabs arrow.down:first-child { + margin-bottom: 2px; } notebook header tabs arrow { color: rgba(92, 97, 108, 0.55); } notebook header tabs arrow:hover { @@ -1724,22 +1709,29 @@ notebook { color: #5c616c; } notebook header tabs arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook tab label { - padding: 0 2px; - color: rgba(92, 97, 108, 0.55); } - notebook tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook tab:active label { - color: #5c616c; } - notebook tab button { - min-height: 18px; - min-width: 16px; - padding: 0; - color: #92959d; } - notebook tab button:hover { - color: #ff4d4d; } - notebook tab button:active, notebook tab button:active:hover { - color: #5294E2; } + notebook header tab { + background-color: rgba(255, 255, 255, 0); } + notebook header tab label { + color: rgba(92, 97, 108, 0.55); } + notebook header tab:hover { + 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:active { + background-color: #ffffff; + border-color: #dcdfe3; } + notebook header tab:active label { + color: #5c616c; } + notebook header tab button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: #92959d; } + notebook header tab button:hover { + color: #ff4d4d; } + notebook header tab button:active, notebook header tab button:active:hover { + color: #5294E2; } * { -GtkRange-slider-width: 13; diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css index 477b5b1..a1aac63 100644 --- a/common/gtk-3.0/3.20/gtk.css +++ b/common/gtk-3.0/3.20/gtk.css @@ -745,7 +745,7 @@ NemoWindow .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > b 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 tab button, notebook tab button:hover, notebook tab button:active, notebook tab button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { +.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, TerminalWindow .notebook tab:active button, TerminalWindow .notebook tab:hover button, TerminalWindow .notebook tab:active button:hover, TerminalWindow .notebook tab:hover button:hover, TerminalWindow .notebook tab:active button:active, TerminalWindow .notebook tab:hover button:active { border-color: transparent; background-color: transparent; background-image: none; @@ -1631,17 +1631,8 @@ notebook { notebook.frame { border: 1px solid #dcdfe3; } notebook header { + padding: 2px; background-color: #F5F6F7; } - .frame notebook header { - border: 0px solid #dcdfe3; } - .frame notebook header.top { - border-bottom-width: 0; } - .frame notebook header.bottom { - border-top-width: 0; } - .frame notebook header.right { - border-left-width: 0; } - .frame notebook header.left { - border-right-width: 0; } notebook header.top { box-shadow: inset 0 -1px #dcdfe3; } notebook header.bottom { @@ -1650,72 +1641,66 @@ notebook { box-shadow: inset 1px 0 #dcdfe3; } notebook header.left { box-shadow: inset -1px 0 #dcdfe3; } - notebook header.top tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-top: 2px solid transparent; - padding-top: 6px; - border-radius: 3.5px 2px 0 0; } - notebook header.top tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.top tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.top tab:active, notebook header.top tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #ffffff, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-bottom: 2px solid transparent; - padding-bottom: 6px; - border-radius: 0 0 2px 3.5px; } - notebook header.bottom tab.reorderable-page { - padding-left: 12px; - padding-right: 12px; } - notebook header.bottom tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.bottom tab:active, notebook header.bottom tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 -1px #ffffff, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-right: 2px solid transparent; - padding-right: 17px; - border-radius: 0 3.5px 3.5px 0; } - notebook header.right tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.right tab:active, notebook header.right tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #ffffff, inset -1px 0 #dcdfe3; } - notebook header.left tab { - border-width: 0; - background-color: rgba(255, 255, 255, 0); - padding: 4px 15px; - border-left: 2px solid transparent; - padding-left: 17px; - border-radius: 3.5px 0 0 3.5px; } - notebook header.left tab:hover { - background-color: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #dcdfe3; } - notebook header.left tab:active, notebook header.left tab:active:hover { - background-color: #ffffff; - box-shadow: inset 0 1px #dcdfe3, inset 0 -1px #dcdfe3, inset 1px 0 #dcdfe3, inset -1px 0 #ffffff; } + notebook header.top { + padding-bottom: 0; } + notebook header.top tab { + padding: 4px 15px; + 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; + 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; + 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; + 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 { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + 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 { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + notebook header.left tabs arrow.down:first-child, notebook header.right tabs arrow.down:first-child { + margin-bottom: 2px; } notebook header tabs arrow { color: rgba(92, 97, 108, 0.55); } notebook header tabs arrow:hover { @@ -1724,22 +1709,29 @@ notebook { color: #5c616c; } notebook header tabs arrow:disabled { color: rgba(92, 97, 108, 0.25); } - notebook tab label { - padding: 0 2px; - color: rgba(92, 97, 108, 0.55); } - notebook tab:hover label { - color: rgba(92, 97, 108, 0.775); } - notebook tab:active label { - color: #5c616c; } - notebook tab button { - min-height: 18px; - min-width: 16px; - padding: 0; - color: #92959d; } - notebook tab button:hover { - color: #ff4d4d; } - notebook tab button:active, notebook tab button:active:hover { - color: #5294E2; } + notebook header tab { + background-color: rgba(255, 255, 255, 0); } + notebook header tab label { + color: rgba(92, 97, 108, 0.55); } + notebook header tab:hover { + 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:active { + background-color: #ffffff; + border-color: #dcdfe3; } + notebook header tab:active label { + color: #5c616c; } + notebook header tab button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: #92959d; } + notebook header tab button:hover { + color: #ff4d4d; } + notebook header tab button:active, notebook header tab button:active:hover { + color: #5294E2; } * { -GtkRange-slider-width: 13; diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index b85d450..8169509 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1785,106 +1785,71 @@ notebook { background-color: $base_color; transition: all 200ms $ease-out-quad; - &.frame { - border: 1px solid $borders_color; - } + &.frame { border: 1px solid $borders_color; } + header { - // tab sizing $vpadding: 4px; $hpadding: 15px; - + padding: 2px; background-color: $bg_color; - .frame & { - border: 0px solid $borders_color; - &.top { border-bottom-width: 0; } - &.bottom { border-top-width: 0; } - &.right { border-left-width: 0; } - &.left { border-right-width: 0; } - } - $_header_border: $borders_color; - &.top { box-shadow: inset 0 -1px $_header_border; } - &.bottom { box-shadow: inset 0 1px $_header_border; } - &.right { box-shadow: inset 1px 0 $_header_border; } - &.left { box-shadow: inset -1px 0 $_header_border; } + // FIXME use borders and margins + &.top { box-shadow: inset 0 -1px $_header_border; } + &.bottom { box-shadow: inset 0 1px $_header_border; } + &.right { box-shadow: inset 1px 0 $_header_border; } + &.left { box-shadow: inset -1px 0 $_header_border; } - @each $_pos in (top, bottom, right, left) { - &.#{$_pos} tab { - border-width: 0; - background-color: transparentize($base_color, 1); - padding: $vpadding $hpadding; + @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) { - border-#{$_pos}: 2px solid transparent; + &.#{$_pos} { + padding-#{$_bpos}: 0; - @if $_pos==top or $_pos==bottom { - padding-#{$_pos}: $vpadding + 2; + tab { + padding: $vpadding $hpadding; + border: 1px solid transparent; + border-#{$_bpos}: none; &.reorderable-page { padding-left: 12px; // for a nicer close button padding-right: 12px; // placement } - } - @else if $_pos==left or $_pos==right { - padding-#{$_pos}: $hpadding + 2; // FIXME + // Tab overlap + @if $_pos==top or $_pos==bottom { margin-right: -1px; } + @else { margin-bottom: -1px; } - } - - @if $_pos==top { border-radius: 3.5px 2px 0 0; } - @else if $_pos==bottom { border-radius: 0 0 2px 3.5px; } - @else if $_pos==left { border-radius: 3.5px 0 0 3.5px; } - @else if $_pos==right { border-radius: 0 3.5px 3.5px 0; } - - &:hover { - background-color: transparentize($base_color, 0.5); - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - - &:active, &:active:hover { - background-color: $base_color; - - @if $_pos==top { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $base_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - @else if $_pos==bottom { - box-shadow: inset 0 -1px $base_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - @else if $_pos==left { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $base_color; - } - @else if $_pos==right { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $base_color, - inset -1px 0 $borders_color; - } + // Tab border radius + @if $_pos==top { border-radius: 1px 1px 0 0; } + @else if $_pos==bottom { border-radius: 0 0 1px 1px; } + @else if $_pos==left { border-radius: 1px 0 0 1px; } + @else if $_pos==right { border-radius: 0 1px 1px 0; } } } } &.top, &.bottom { - & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } - & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } + tabs arrow.up { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:last-child { margin-left: 2px; } + } + tabs arrow.down { + -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); + &:first-child { margin-right: 2px; } + } } &.left, &.right { - & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + tabs arrow.up { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + &:last-child { margin-top: 2px; } + } + 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%); } @@ -1893,20 +1858,25 @@ notebook { } } - tab { - label { //tab text - padding: 0 2px; // needed for a nicer focus ring - color: $insensitive_fg_color; + header tab { + background-color: transparentize($base_color, 1); + + label { color: $insensitive_fg_color; } + + &:hover { + background-color: transparentize($base_color, 0.5); + border-color: $borders_color; + + label { color: mix($fg_color, $insensitive_fg_color, 50%); } } - &:hover label { - // prelight tab text - color: mix($fg_color, $insensitive_fg_color, 50%); + &:active { + background-color: $base_color; + border-color: $borders_color; + + label { color: $fg_color; } } - &:active label { - // active tab text - color: $fg_color; - } - button { //tab close button + + button { // close button min-height: 18px; min-width: 16px; padding: 0;