diff options
Diffstat (limited to 'common/gtk-3.0/3.20')
| -rw-r--r-- | common/gtk-3.0/3.20/gtk-dark.css | 248 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/gtk-darker.css | 248 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/gtk-solid-dark.css | 248 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/gtk-solid-darker.css | 248 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/gtk-solid.css | 248 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/gtk.css | 248 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_common.scss | 293 |
7 files changed, 974 insertions, 807 deletions
diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css index c0cbf7b..d440046 100644 --- a/common/gtk-3.0/3.20/gtk-dark.css +++ b/common/gtk-3.0/3.20/gtk-dark.css @@ -1327,22 +1327,22 @@ window.csd > .titlebar:not(headerbar):backdrop { opacity: 0.75; } .primary-toolbar scale slider, headerbar scale slider { - background-image: linear-gradient(to bottom, #454c5c); + background-color: #454c5c; border-color: rgba(21, 23, 28, 0.67); } .primary-toolbar scale slider:hover, headerbar scale slider:hover { - background-image: linear-gradient(to bottom, #50586b); + background-color: #50586b; border-color: rgba(21, 23, 28, 0.67); } .primary-toolbar scale slider:active, headerbar scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); + background-color: #5294E2; border-color: #5294E2; } .primary-toolbar scale slider:disabled, headerbar scale slider:disabled { - background-image: linear-gradient(to bottom, rgba(63, 69, 84, 0.991)); + background-color: rgba(63, 69, 84, 0.991); border-color: rgba(21, 23, 28, 0.67); } .primary-toolbar scale trough, headerbar scale trough { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.37)); } + background-color: rgba(21, 23, 28, 0.37); } .primary-toolbar scale trough:disabled, headerbar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.27)); } + background-color: rgba(21, 23, 28, 0.27); } .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 6px; @@ -2046,132 +2046,152 @@ radio { margin: 0; } scale { - min-height: 9px; - min-width: 9px; - padding: 5px; } - scale value { - color: alpha(currentColor,0.4); } - scale marks { - color: alpha(currentColor,0.4); } - scale marks.top { - margin-bottom: -2px; - margin-top: 2px; } - scale marks.bottom { - margin-top: -2px; - margin-bottom: 2px; } - scale marks.top { - margin-right: -2px; - margin-left: 2px; } - scale marks.bottom { - margin-left: -2px; - margin-right: 2px; } - scale.fine-tune marks { - color: alpha(currentColor,0.4); } - scale.fine-tune marks.top { - margin-bottom: -4px; - margin-top: 4px; } - scale.fine-tune marks.bottom { - margin-top: -4px; - margin-bottom: 4px; } - scale.fine-tune marks.top { - margin-right: -4px; - margin-left: 4px; } - scale.fine-tune marks.bottom { - margin-left: -4px; - margin-right: 4px; } - scale.horizontal indicator { - min-height: 3px; - min-width: 1px; } - scale.vertical indicator { - min-height: 1px; - min-width: 3px; } - scale.fine-tune { - padding: 3px; } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; } - scale.fine-tune slider { - margin: -4px; } - scale trough, scale fill, scale highlight { - border-radius: 2.5px; } + min-height: 10px; + min-width: 10px; } + scale.horizontal { + padding: 6px 0; } + scale.horizontal trough { + padding: 0 7px; } + scale.horizontal highlight, scale.horizontal fill { + margin: 0 -7px; } + scale.vertical { + padding: 0 6px; } + scale.vertical trough { + padding: 7px 0; } + scale.vertical highlight, scale.vertical fill { + margin: -7px 0; } scale slider { - min-width: 15px; min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, #444a58); + min-width: 15px; + margin: -6px; } + scale.fine-tune.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; } + scale.fine-tune.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; } + scale.fine-tune slider { + margin: -4px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + border-radius: 2.5px; + background-color: #2d303b; } + scale trough:disabled { + background-color: rgba(45, 48, 59, 0.55); } + .osd scale trough { + background-color: rgba(69, 74, 89, 0.95); } + .osd scale trough highlight { + background-color: #5294E2; } + row:selected scale trough, + infobar scale trough { + background-color: rgba(0, 0, 0, 0.2); } + row:selected scale trough highlight, + infobar scale trough highlight { + background-color: #ffffff; } + row:selected scale trough highlight:disabled, + infobar scale trough highlight:disabled { + background-color: #b1cff2; } + row:selected scale trough:disabled, + infobar scale trough:disabled { + background-color: rgba(0, 0, 0, 0.1); } + scale highlight { + border-radius: 2.5px; + background-color: #5294E2; } + scale highlight:disabled { + background-color: rgba(82, 148, 226, 0.55); } + scale fill { + border-radius: 2.5px; + background-color: rgba(82, 148, 226, 0.5); } + scale fill:disabled { + background-color: transparent; } + scale slider { + background-color: #444a58; border: 1px solid #262933; - border-radius: 50%; - box-shadow: none; } + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border; } scale slider:hover { - background-image: linear-gradient(to bottom, #505666); - border-color: #262933; } - scale slider:disabled { - background-image: linear-gradient(to bottom, #3c414e); - border-color: rgba(38, 41, 51, 0.8); } + background-color: #505666; } scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); - border-color: #5294E2; } - .osd scale slider { - min-width: 11px; - min-height: 11px; - margin: -4px; - background-image: linear-gradient(to bottom, #5294E2); + background-clip: border-box; + background-color: #5294E2; border-color: #5294E2; } - .osd scale slider:hover { - background-image: linear-gradient(to bottom, #7eafe9); - border-color: #7eafe9; } - .osd scale slider:active { - background-image: linear-gradient(to bottom, #2679db); - border-color: #2679db; } + scale slider:disabled { + background-color: #3c414e; + border-color: rgba(38, 41, 51, 0.8); } row:selected scale slider, infobar scale slider { - background-image: linear-gradient(to bottom, #ffffff); + background-clip: border-box; + background-color: #ffffff; border-color: #ffffff; } row:selected scale slider:hover, infobar scale slider:hover { - background-image: linear-gradient(to bottom, #e5effb); + background-color: #e5effb; border-color: #e5effb; } row:selected scale slider:active, infobar scale slider:active { - background-image: linear-gradient(to bottom, #a9caf1); + background-color: #a9caf1; border-color: #a9caf1; } row:selected scale slider:disabled, infobar scale slider:disabled { - background-image: linear-gradient(to bottom, #b1cff2); + background-color: #b1cff2; border-color: #b1cff2; } - scale trough { - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, #2d303b); } - scale trough highlight { - background-image: linear-gradient(to bottom, #5294E2); } - scale trough highlight:disabled { - background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); } - scale trough fill { - background: none; - background-color: rgba(82, 148, 226, 0.5); } - scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(45, 48, 59, 0.55)); } - .osd scale trough { - background-image: linear-gradient(to bottom, rgba(69, 74, 89, 0.95)); - outline-color: rgba(186, 195, 207, 0.2); } - .osd scale trough highlight { - background-image: none; - background-image: linear-gradient(to bottom, #5294E2); } - row:selected scale trough, - infobar scale trough { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); } - row:selected scale trough highlight, - infobar scale trough highlight { - background-image: linear-gradient(to bottom, #ffffff); } - row:selected scale trough highlight:disabled, - infobar scale trough highlight:disabled { - background-image: linear-gradient(to bottom, #b1cff2); } - row:selected scale trough:disabled, - infobar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); } + .osd scale slider { + background-clip: border-box; + background-color: #5294E2; + border-color: #5294E2; } + .osd scale slider:hover { + background-color: #7eafe9; + border-color: #7eafe9; } + .osd scale slider:active { + background-color: #2679db; + border-color: #2679db; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 1px; + margin-top: -4px; } + scale marks.bottom { + margin-top: 1px; + margin-bottom: -4px; } + scale marks.top { + margin-right: 1px; + margin-left: -4px; } + scale marks.bottom { + margin-left: 1px; + margin-right: -4px; } + scale.fine-tune marks.top { + margin-bottom: 0px; + margin-top: -2px; } + scale.fine-tune marks.bottom { + margin-top: 0px; + margin-bottom: -2px; } + scale.fine-tune marks.top { + margin-right: 0px; + margin-left: -2px; } + scale.fine-tune marks.bottom { + margin-left: 0px; + margin-right: -2px; } + scale.horizontal indicator { + min-height: 3px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 2px; } + scale.vertical indicator { + min-height: 1px; + min-width: 3px; } + scale.vertical.fine-tune indicator { + min-width: 2px; } progressbar { padding: 0; diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css index e363054..b299672 100644 --- a/common/gtk-3.0/3.20/gtk-darker.css +++ b/common/gtk-3.0/3.20/gtk-darker.css @@ -1326,22 +1326,22 @@ window.csd > .titlebar:not(headerbar):backdrop { opacity: 0.75; } .primary-toolbar scale slider, headerbar scale slider { - background-image: linear-gradient(to bottom, #454c5c); + background-color: #454c5c; border-color: rgba(21, 23, 28, 0.67); } .primary-toolbar scale slider:hover, headerbar scale slider:hover { - background-image: linear-gradient(to bottom, #50586b); + background-color: #50586b; border-color: rgba(21, 23, 28, 0.67); } .primary-toolbar scale slider:active, headerbar scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); + background-color: #5294E2; border-color: #5294E2; } .primary-toolbar scale slider:disabled, headerbar scale slider:disabled { - background-image: linear-gradient(to bottom, rgba(63, 69, 84, 0.991)); + background-color: rgba(63, 69, 84, 0.991); border-color: rgba(21, 23, 28, 0.67); } .primary-toolbar scale trough, headerbar scale trough { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.37)); } + background-color: rgba(21, 23, 28, 0.37); } .primary-toolbar scale trough:disabled, headerbar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.27)); } + background-color: rgba(21, 23, 28, 0.27); } .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 6px; @@ -2045,132 +2045,152 @@ radio { margin: 0; } scale { - min-height: 9px; - min-width: 9px; - padding: 5px; } - scale value { - color: alpha(currentColor,0.4); } - scale marks { - color: alpha(currentColor,0.4); } - scale marks.top { - margin-bottom: -2px; - margin-top: 2px; } - scale marks.bottom { - margin-top: -2px; - margin-bottom: 2px; } - scale marks.top { - margin-right: -2px; - margin-left: 2px; } - scale marks.bottom { - margin-left: -2px; - margin-right: 2px; } - scale.fine-tune marks { - color: alpha(currentColor,0.4); } - scale.fine-tune marks.top { - margin-bottom: -4px; - margin-top: 4px; } - scale.fine-tune marks.bottom { - margin-top: -4px; - margin-bottom: 4px; } - scale.fine-tune marks.top { - margin-right: -4px; - margin-left: 4px; } - scale.fine-tune marks.bottom { - margin-left: -4px; - margin-right: 4px; } - scale.horizontal indicator { - min-height: 3px; - min-width: 1px; } - scale.vertical indicator { - min-height: 1px; - min-width: 3px; } - scale.fine-tune { - padding: 3px; } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; } - scale.fine-tune slider { - margin: -4px; } - scale trough, scale fill, scale highlight { - border-radius: 2.5px; } + min-height: 10px; + min-width: 10px; } + scale.horizontal { + padding: 6px 0; } + scale.horizontal trough { + padding: 0 7px; } + scale.horizontal highlight, scale.horizontal fill { + margin: 0 -7px; } + scale.vertical { + padding: 0 6px; } + scale.vertical trough { + padding: 7px 0; } + scale.vertical highlight, scale.vertical fill { + margin: -7px 0; } scale slider { - min-width: 15px; min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, #fbfbfc); + min-width: 15px; + margin: -6px; } + scale.fine-tune.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; } + scale.fine-tune.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; } + scale.fine-tune slider { + margin: -4px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + border-radius: 2.5px; + background-color: #cfd6e6; } + scale trough:disabled { + background-color: rgba(207, 214, 230, 0.55); } + .osd scale trough { + background-color: rgba(69, 74, 89, 0.95); } + .osd scale trough highlight { + background-color: #5294E2; } + row:selected scale trough, + infobar scale trough { + background-color: rgba(0, 0, 0, 0.2); } + row:selected scale trough highlight, + infobar scale trough highlight { + background-color: #ffffff; } + row:selected scale trough highlight:disabled, + infobar scale trough highlight:disabled { + background-color: #b1cff2; } + row:selected scale trough:disabled, + infobar scale trough:disabled { + background-color: rgba(0, 0, 0, 0.1); } + scale highlight { + border-radius: 2.5px; + background-color: #5294E2; } + scale highlight:disabled { + background-color: rgba(82, 148, 226, 0.55); } + scale fill { + border-radius: 2.5px; + background-color: rgba(82, 148, 226, 0.5); } + scale fill:disabled { + background-color: transparent; } + scale slider { + background-color: #fbfbfc; border: 1px solid rgba(123, 142, 186, 0.5); - border-radius: 50%; - box-shadow: none; } + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border; } scale slider:hover { - background-image: linear-gradient(to bottom, white); - border-color: rgba(123, 142, 186, 0.5); } - scale slider:disabled { - background-image: linear-gradient(to bottom, #fbfbfb); - border-color: rgba(123, 142, 186, 0.3); } + background-color: white; } scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); - border-color: #5294E2; } - .osd scale slider { - min-width: 11px; - min-height: 11px; - margin: -4px; - background-image: linear-gradient(to bottom, #5294E2); + background-clip: border-box; + background-color: #5294E2; border-color: #5294E2; } - .osd scale slider:hover { - background-image: linear-gradient(to bottom, #7eafe9); - border-color: #7eafe9; } - .osd scale slider:active { - background-image: linear-gradient(to bottom, #2679db); - border-color: #2679db; } + scale slider:disabled { + background-color: #fbfbfb; + border-color: rgba(123, 142, 186, 0.3); } row:selected scale slider, infobar scale slider { - background-image: linear-gradient(to bottom, #ffffff); + background-clip: border-box; + background-color: #ffffff; border-color: #ffffff; } row:selected scale slider:hover, infobar scale slider:hover { - background-image: linear-gradient(to bottom, #e5effb); + background-color: #e5effb; border-color: #e5effb; } row:selected scale slider:active, infobar scale slider:active { - background-image: linear-gradient(to bottom, #a9caf1); + background-color: #a9caf1; border-color: #a9caf1; } row:selected scale slider:disabled, infobar scale slider:disabled { - background-image: linear-gradient(to bottom, #b1cff2); + background-color: #b1cff2; border-color: #b1cff2; } - scale trough { - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, #cfd6e6); } - scale trough highlight { - background-image: linear-gradient(to bottom, #5294E2); } - scale trough highlight:disabled { - background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); } - scale trough fill { - background: none; - background-color: rgba(82, 148, 226, 0.5); } - scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); } - .osd scale trough { - background-image: linear-gradient(to bottom, rgba(69, 74, 89, 0.95)); - outline-color: rgba(186, 195, 207, 0.2); } - .osd scale trough highlight { - background-image: none; - background-image: linear-gradient(to bottom, #5294E2); } - row:selected scale trough, - infobar scale trough { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); } - row:selected scale trough highlight, - infobar scale trough highlight { - background-image: linear-gradient(to bottom, #ffffff); } - row:selected scale trough highlight:disabled, - infobar scale trough highlight:disabled { - background-image: linear-gradient(to bottom, #b1cff2); } - row:selected scale trough:disabled, - infobar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); } + .osd scale slider { + background-clip: border-box; + background-color: #5294E2; + border-color: #5294E2; } + .osd scale slider:hover { + background-color: #7eafe9; + border-color: #7eafe9; } + .osd scale slider:active { + background-color: #2679db; + border-color: #2679db; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 1px; + margin-top: -4px; } + scale marks.bottom { + margin-top: 1px; + margin-bottom: -4px; } + scale marks.top { + margin-right: 1px; + margin-left: -4px; } + scale marks.bottom { + margin-left: 1px; + margin-right: -4px; } + scale.fine-tune marks.top { + margin-bottom: 0px; + margin-top: -2px; } + scale.fine-tune marks.bottom { + margin-top: 0px; + margin-bottom: -2px; } + scale.fine-tune marks.top { + margin-right: 0px; + margin-left: -2px; } + scale.fine-tune marks.bottom { + margin-left: 0px; + margin-right: -2px; } + scale.horizontal indicator { + min-height: 3px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 2px; } + scale.vertical indicator { + min-height: 1px; + min-width: 3px; } + scale.vertical.fine-tune indicator { + min-width: 2px; } progressbar { padding: 0; 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 98a9b14..d7caa74 100644 --- a/common/gtk-3.0/3.20/gtk-solid-dark.css +++ b/common/gtk-3.0/3.20/gtk-solid-dark.css @@ -1327,22 +1327,22 @@ window.csd > .titlebar:not(headerbar):backdrop { opacity: 0.75; } .primary-toolbar scale slider, headerbar scale slider { - background-image: linear-gradient(to bottom, #454c5c); + background-color: #454c5c; border-color: rgba(21, 23, 28, 0.7); } .primary-toolbar scale slider:hover, headerbar scale slider:hover { - background-image: linear-gradient(to bottom, #50586b); + background-color: #50586b; border-color: rgba(21, 23, 28, 0.7); } .primary-toolbar scale slider:active, headerbar scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); + background-color: #5294E2; border-color: #5294E2; } .primary-toolbar scale slider:disabled, headerbar scale slider:disabled { - background-image: linear-gradient(to bottom, #3e4553); + background-color: #3e4553; border-color: rgba(21, 23, 28, 0.7); } .primary-toolbar scale trough, headerbar scale trough { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.4)); } + background-color: rgba(21, 23, 28, 0.4); } .primary-toolbar scale trough:disabled, headerbar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.3)); } + background-color: rgba(21, 23, 28, 0.3); } .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 6px; @@ -2046,132 +2046,152 @@ radio { margin: 0; } scale { - min-height: 9px; - min-width: 9px; - padding: 5px; } - scale value { - color: alpha(currentColor,0.4); } - scale marks { - color: alpha(currentColor,0.4); } - scale marks.top { - margin-bottom: -2px; - margin-top: 2px; } - scale marks.bottom { - margin-top: -2px; - margin-bottom: 2px; } - scale marks.top { - margin-right: -2px; - margin-left: 2px; } - scale marks.bottom { - margin-left: -2px; - margin-right: 2px; } - scale.fine-tune marks { - color: alpha(currentColor,0.4); } - scale.fine-tune marks.top { - margin-bottom: -4px; - margin-top: 4px; } - scale.fine-tune marks.bottom { - margin-top: -4px; - margin-bottom: 4px; } - scale.fine-tune marks.top { - margin-right: -4px; - margin-left: 4px; } - scale.fine-tune marks.bottom { - margin-left: -4px; - margin-right: 4px; } - scale.horizontal indicator { - min-height: 3px; - min-width: 1px; } - scale.vertical indicator { - min-height: 1px; - min-width: 3px; } - scale.fine-tune { - padding: 3px; } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; } - scale.fine-tune slider { - margin: -4px; } - scale trough, scale fill, scale highlight { - border-radius: 2.5px; } + min-height: 10px; + min-width: 10px; } + scale.horizontal { + padding: 6px 0; } + scale.horizontal trough { + padding: 0 7px; } + scale.horizontal highlight, scale.horizontal fill { + margin: 0 -7px; } + scale.vertical { + padding: 0 6px; } + scale.vertical trough { + padding: 7px 0; } + scale.vertical highlight, scale.vertical fill { + margin: -7px 0; } scale slider { - min-width: 15px; min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, #444a58); + min-width: 15px; + margin: -6px; } + scale.fine-tune.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; } + scale.fine-tune.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; } + scale.fine-tune slider { + margin: -4px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + border-radius: 2.5px; + background-color: #2d303b; } + scale trough:disabled { + background-color: rgba(45, 48, 59, 0.55); } + .osd scale trough { + background-color: #454a59; } + .osd scale trough highlight { + background-color: #5294E2; } + row:selected scale trough, + infobar scale trough { + background-color: rgba(0, 0, 0, 0.2); } + row:selected scale trough highlight, + infobar scale trough highlight { + background-color: #ffffff; } + row:selected scale trough highlight:disabled, + infobar scale trough highlight:disabled { + background-color: #b1cff2; } + row:selected scale trough:disabled, + infobar scale trough:disabled { + background-color: rgba(0, 0, 0, 0.1); } + scale highlight { + border-radius: 2.5px; + background-color: #5294E2; } + scale highlight:disabled { + background-color: rgba(82, 148, 226, 0.55); } + scale fill { + border-radius: 2.5px; + background-color: rgba(82, 148, 226, 0.5); } + scale fill:disabled { + background-color: transparent; } + scale slider { + background-color: #444a58; border: 1px solid #262933; - border-radius: 50%; - box-shadow: none; } + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border; } scale slider:hover { - background-image: linear-gradient(to bottom, #505666); - border-color: #262933; } - scale slider:disabled { - background-image: linear-gradient(to bottom, #3c414e); - border-color: rgba(38, 41, 51, 0.8); } + background-color: #505666; } scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); - border-color: #5294E2; } - .osd scale slider { - min-width: 11px; - min-height: 11px; - margin: -4px; - background-image: linear-gradient(to bottom, #5294E2); + background-clip: border-box; + background-color: #5294E2; border-color: #5294E2; } - .osd scale slider:hover { - background-image: linear-gradient(to bottom, #7eafe9); - border-color: #7eafe9; } - .osd scale slider:active { - background-image: linear-gradient(to bottom, #2679db); - border-color: #2679db; } + scale slider:disabled { + background-color: #3c414e; + border-color: rgba(38, 41, 51, 0.8); } row:selected scale slider, infobar scale slider { - background-image: linear-gradient(to bottom, #ffffff); + background-clip: border-box; + background-color: #ffffff; border-color: #ffffff; } row:selected scale slider:hover, infobar scale slider:hover { - background-image: linear-gradient(to bottom, #e5effb); + background-color: #e5effb; border-color: #e5effb; } row:selected scale slider:active, infobar scale slider:active { - background-image: linear-gradient(to bottom, #a9caf1); + background-color: #a9caf1; border-color: #a9caf1; } row:selected scale slider:disabled, infobar scale slider:disabled { - background-image: linear-gradient(to bottom, #b1cff2); + background-color: #b1cff2; border-color: #b1cff2; } - scale trough { - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, #2d303b); } - scale trough highlight { - background-image: linear-gradient(to bottom, #5294E2); } - scale trough highlight:disabled { - background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); } - scale trough fill { - background: none; - background-color: rgba(82, 148, 226, 0.5); } - scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(45, 48, 59, 0.55)); } - .osd scale trough { - background-image: linear-gradient(to bottom, #454a59); - outline-color: rgba(186, 195, 207, 0.2); } - .osd scale trough highlight { - background-image: none; - background-image: linear-gradient(to bottom, #5294E2); } - row:selected scale trough, - infobar scale trough { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); } - row:selected scale trough highlight, - infobar scale trough highlight { - background-image: linear-gradient(to bottom, #ffffff); } - row:selected scale trough highlight:disabled, - infobar scale trough highlight:disabled { - background-image: linear-gradient(to bottom, #b1cff2); } - row:selected scale trough:disabled, - infobar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); } + .osd scale slider { + background-clip: border-box; + background-color: #5294E2; + border-color: #5294E2; } + .osd scale slider:hover { + background-color: #7eafe9; + border-color: #7eafe9; } + .osd scale slider:active { + background-color: #2679db; + border-color: #2679db; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 1px; + margin-top: -4px; } + scale marks.bottom { + margin-top: 1px; + margin-bottom: -4px; } + scale marks.top { + margin-right: 1px; + margin-left: -4px; } + scale marks.bottom { + margin-left: 1px; + margin-right: -4px; } + scale.fine-tune marks.top { + margin-bottom: 0px; + margin-top: -2px; } + scale.fine-tune marks.bottom { + margin-top: 0px; + margin-bottom: -2px; } + scale.fine-tune marks.top { + margin-right: 0px; + margin-left: -2px; } + scale.fine-tune marks.bottom { + margin-left: 0px; + margin-right: -2px; } + scale.horizontal indicator { + min-height: 3px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 2px; } + scale.vertical indicator { + min-height: 1px; + min-width: 3px; } + scale.vertical.fine-tune indicator { + min-width: 2px; } progressbar { padding: 0; 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 10e3f31..80c9c64 100644 --- a/common/gtk-3.0/3.20/gtk-solid-darker.css +++ b/common/gtk-3.0/3.20/gtk-solid-darker.css @@ -1326,22 +1326,22 @@ window.csd > .titlebar:not(headerbar):backdrop { opacity: 0.75; } .primary-toolbar scale slider, headerbar scale slider { - background-image: linear-gradient(to bottom, #454c5c); + background-color: #454c5c; border-color: rgba(21, 23, 28, 0.7); } .primary-toolbar scale slider:hover, headerbar scale slider:hover { - background-image: linear-gradient(to bottom, #50586b); + background-color: #50586b; border-color: rgba(21, 23, 28, 0.7); } .primary-toolbar scale slider:active, headerbar scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); + background-color: #5294E2; border-color: #5294E2; } .primary-toolbar scale slider:disabled, headerbar scale slider:disabled { - background-image: linear-gradient(to bottom, #3e4553); + background-color: #3e4553; border-color: rgba(21, 23, 28, 0.7); } .primary-toolbar scale trough, headerbar scale trough { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.4)); } + background-color: rgba(21, 23, 28, 0.4); } .primary-toolbar scale trough:disabled, headerbar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(21, 23, 28, 0.3)); } + background-color: rgba(21, 23, 28, 0.3); } .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 6px; @@ -2045,132 +2045,152 @@ radio { margin: 0; } scale { - min-height: 9px; - min-width: 9px; - padding: 5px; } - scale value { - color: alpha(currentColor,0.4); } - scale marks { - color: alpha(currentColor,0.4); } - scale marks.top { - margin-bottom: -2px; - margin-top: 2px; } - scale marks.bottom { - margin-top: -2px; - margin-bottom: 2px; } - scale marks.top { - margin-right: -2px; - margin-left: 2px; } - scale marks.bottom { - margin-left: -2px; - margin-right: 2px; } - scale.fine-tune marks { - color: alpha(currentColor,0.4); } - scale.fine-tune marks.top { - margin-bottom: -4px; - margin-top: 4px; } - scale.fine-tune marks.bottom { - margin-top: -4px; - margin-bottom: 4px; } - scale.fine-tune marks.top { - margin-right: -4px; - margin-left: 4px; } - scale.fine-tune marks.bottom { - margin-left: -4px; - margin-right: 4px; } - scale.horizontal indicator { - min-height: 3px; - min-width: 1px; } - scale.vertical indicator { - min-height: 1px; - min-width: 3px; } - scale.fine-tune { - padding: 3px; } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; } - scale.fine-tune slider { - margin: -4px; } - scale trough, scale fill, scale highlight { - border-radius: 2.5px; } + min-height: 10px; + min-width: 10px; } + scale.horizontal { + padding: 6px 0; } + scale.horizontal trough { + padding: 0 7px; } + scale.horizontal highlight, scale.horizontal fill { + margin: 0 -7px; } + scale.vertical { + padding: 0 6px; } + scale.vertical trough { + padding: 7px 0; } + scale.vertical highlight, scale.vertical fill { + margin: -7px 0; } scale slider { - min-width: 15px; min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, #fbfbfc); + min-width: 15px; + margin: -6px; } + scale.fine-tune.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; } + scale.fine-tune.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; } + scale.fine-tune slider { + margin: -4px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + border-radius: 2.5px; + background-color: #cfd6e6; } + scale trough:disabled { + background-color: rgba(207, 214, 230, 0.55); } + .osd scale trough { + background-color: #454a59; } + .osd scale trough highlight { + background-color: #5294E2; } + row:selected scale trough, + infobar scale trough { + background-color: rgba(0, 0, 0, 0.2); } + row:selected scale trough highlight, + infobar scale trough highlight { + background-color: #ffffff; } + row:selected scale trough highlight:disabled, + infobar scale trough highlight:disabled { + background-color: #b1cff2; } + row:selected scale trough:disabled, + infobar scale trough:disabled { + background-color: rgba(0, 0, 0, 0.1); } + scale highlight { + border-radius: 2.5px; + background-color: #5294E2; } + scale highlight:disabled { + background-color: rgba(82, 148, 226, 0.55); } + scale fill { + border-radius: 2.5px; + background-color: rgba(82, 148, 226, 0.5); } + scale fill:disabled { + background-color: transparent; } + scale slider { + background-color: #fbfbfc; border: 1px solid rgba(123, 142, 186, 0.5); - border-radius: 50%; - box-shadow: none; } + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border; } scale slider:hover { - background-image: linear-gradient(to bottom, white); - border-color: rgba(123, 142, 186, 0.5); } - scale slider:disabled { - background-image: linear-gradient(to bottom, #fbfbfb); - border-color: rgba(123, 142, 186, 0.3); } + background-color: white; } scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); - border-color: #5294E2; } - .osd scale slider { - min-width: 11px; - min-height: 11px; - margin: -4px; - background-image: linear-gradient(to bottom, #5294E2); + background-clip: border-box; + background-color: #5294E2; border-color: #5294E2; } - .osd scale slider:hover { - background-image: linear-gradient(to bottom, #7eafe9); - border-color: #7eafe9; } - .osd scale slider:active { - background-image: linear-gradient(to bottom, #2679db); - border-color: #2679db; } + scale slider:disabled { + background-color: #fbfbfb; + border-color: rgba(123, 142, 186, 0.3); } row:selected scale slider, infobar scale slider { - background-image: linear-gradient(to bottom, #ffffff); + background-clip: border-box; + background-color: #ffffff; border-color: #ffffff; } row:selected scale slider:hover, infobar scale slider:hover { - background-image: linear-gradient(to bottom, #e5effb); + background-color: #e5effb; border-color: #e5effb; } row:selected scale slider:active, infobar scale slider:active { - background-image: linear-gradient(to bottom, #a9caf1); + background-color: #a9caf1; border-color: #a9caf1; } row:selected scale slider:disabled, infobar scale slider:disabled { - background-image: linear-gradient(to bottom, #b1cff2); + background-color: #b1cff2; border-color: #b1cff2; } - scale trough { - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, #cfd6e6); } - scale trough highlight { - background-image: linear-gradient(to bottom, #5294E2); } - scale trough highlight:disabled { - background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); } - scale trough fill { - background: none; - background-color: rgba(82, 148, 226, 0.5); } - scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); } - .osd scale trough { - background-image: linear-gradient(to bottom, #454a59); - outline-color: rgba(186, 195, 207, 0.2); } - .osd scale trough highlight { - background-image: none; - background-image: linear-gradient(to bottom, #5294E2); } - row:selected scale trough, - infobar scale trough { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); } - row:selected scale trough highlight, - infobar scale trough highlight { - background-image: linear-gradient(to bottom, #ffffff); } - row:selected scale trough highlight:disabled, - infobar scale trough highlight:disabled { - background-image: linear-gradient(to bottom, #b1cff2); } - row:selected scale trough:disabled, - infobar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); } + .osd scale slider { + background-clip: border-box; + background-color: #5294E2; + border-color: #5294E2; } + .osd scale slider:hover { + background-color: #7eafe9; + border-color: #7eafe9; } + .osd scale slider:active { + background-color: #2679db; + border-color: #2679db; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 1px; + margin-top: -4px; } + scale marks.bottom { + margin-top: 1px; + margin-bottom: -4px; } + scale marks.top { + margin-right: 1px; + margin-left: -4px; } + scale marks.bottom { + margin-left: 1px; + margin-right: -4px; } + scale.fine-tune marks.top { + margin-bottom: 0px; + margin-top: -2px; } + scale.fine-tune marks.bottom { + margin-top: 0px; + margin-bottom: -2px; } + scale.fine-tune marks.top { + margin-right: 0px; + margin-left: -2px; } + scale.fine-tune marks.bottom { + margin-left: 0px; + margin-right: -2px; } + scale.horizontal indicator { + min-height: 3px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 2px; } + scale.vertical indicator { + min-height: 1px; + min-width: 3px; } + scale.vertical.fine-tune indicator { + min-width: 2px; } progressbar { padding: 0; diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css index 5a8c07f..9602e3c 100644 --- a/common/gtk-3.0/3.20/gtk-solid.css +++ b/common/gtk-3.0/3.20/gtk-solid.css @@ -1330,22 +1330,22 @@ window.csd > .titlebar:not(headerbar):backdrop { opacity: 0.75; } .primary-toolbar scale slider, headerbar scale slider { - background-image: linear-gradient(to bottom, #fbfbfc); + background-color: #fbfbfc; border-color: rgba(82, 93, 118, 0.3); } .primary-toolbar scale slider:hover, headerbar scale slider:hover { - background-image: linear-gradient(to bottom, white); + background-color: white; border-color: rgba(82, 93, 118, 0.3); } .primary-toolbar scale slider:active, headerbar scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); + background-color: #5294E2; border-color: #5294E2; } .primary-toolbar scale slider:disabled, headerbar scale slider:disabled { - background-image: linear-gradient(to bottom, #f5f5f7); + background-color: #f5f5f7; border-color: rgba(82, 93, 118, 0.3); } .primary-toolbar scale trough, headerbar scale trough { - background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.15)); } + background-color: rgba(82, 93, 118, 0.15); } .primary-toolbar scale trough:disabled, headerbar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.1)); } + background-color: rgba(82, 93, 118, 0.1); } .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 6px; @@ -2049,132 +2049,152 @@ radio { margin: 0; } scale { - min-height: 9px; - min-width: 9px; - padding: 5px; } - scale value { - color: alpha(currentColor,0.4); } - scale marks { - color: alpha(currentColor,0.4); } - scale marks.top { - margin-bottom: -2px; - margin-top: 2px; } - scale marks.bottom { - margin-top: -2px; - margin-bottom: 2px; } - scale marks.top { - margin-right: -2px; - margin-left: 2px; } - scale marks.bottom { - margin-left: -2px; - margin-right: 2px; } - scale.fine-tune marks { - color: alpha(currentColor,0.4); } - scale.fine-tune marks.top { - margin-bottom: -4px; - margin-top: 4px; } - scale.fine-tune marks.bottom { - margin-top: -4px; - margin-bottom: 4px; } - scale.fine-tune marks.top { - margin-right: -4px; - margin-left: 4px; } - scale.fine-tune marks.bottom { - margin-left: -4px; - margin-right: 4px; } - scale.horizontal indicator { - min-height: 3px; - min-width: 1px; } - scale.vertical indicator { - min-height: 1px; - min-width: 3px; } - scale.fine-tune { - padding: 3px; } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; } - scale.fine-tune slider { - margin: -4px; } - scale trough, scale fill, scale highlight { - border-radius: 2.5px; } + min-height: 10px; + min-width: 10px; } + scale.horizontal { + padding: 6px 0; } + scale.horizontal trough { + padding: 0 7px; } + scale.horizontal highlight, scale.horizontal fill { + margin: 0 -7px; } + scale.vertical { + padding: 0 6px; } + scale.vertical trough { + padding: 7px 0; } + scale.vertical highlight, scale.vertical fill { + margin: -7px 0; } scale slider { - min-width: 15px; min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, #fbfbfc); + min-width: 15px; + margin: -6px; } + scale.fine-tune.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; } + scale.fine-tune.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; } + scale.fine-tune slider { + margin: -4px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + border-radius: 2.5px; + background-color: #cfd6e6; } + scale trough:disabled { + background-color: rgba(207, 214, 230, 0.55); } + .osd scale trough { + background-color: #454a59; } + .osd scale trough highlight { + background-color: #5294E2; } + row:selected scale trough, + infobar scale trough { + background-color: rgba(0, 0, 0, 0.2); } + row:selected scale trough highlight, + infobar scale trough highlight { + background-color: #ffffff; } + row:selected scale trough highlight:disabled, + infobar scale trough highlight:disabled { + background-color: #b1cff2; } + row:selected scale trough:disabled, + infobar scale trough:disabled { + background-color: rgba(0, 0, 0, 0.1); } + scale highlight { + border-radius: 2.5px; + background-color: #5294E2; } + scale highlight:disabled { + background-color: rgba(82, 148, 226, 0.55); } + scale fill { + border-radius: 2.5px; + background-color: rgba(82, 148, 226, 0.5); } + scale fill:disabled { + background-color: transparent; } + scale slider { + background-color: #fbfbfc; border: 1px solid rgba(123, 142, 186, 0.5); - border-radius: 50%; - box-shadow: none; } + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border; } scale slider:hover { - background-image: linear-gradient(to bottom, white); - border-color: rgba(123, 142, 186, 0.5); } - scale slider:disabled { - background-image: linear-gradient(to bottom, #fbfbfb); - border-color: rgba(123, 142, 186, 0.3); } + background-color: white; } scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); - border-color: #5294E2; } - .osd scale slider { - min-width: 11px; - min-height: 11px; - margin: -4px; - background-image: linear-gradient(to bottom, #5294E2); + background-clip: border-box; + background-color: #5294E2; border-color: #5294E2; } - .osd scale slider:hover { - background-image: linear-gradient(to bottom, #7eafe9); - border-color: #7eafe9; } - .osd scale slider:active { - background-image: linear-gradient(to bottom, #2679db); - border-color: #2679db; } + scale slider:disabled { + background-color: #fbfbfb; + border-color: rgba(123, 142, 186, 0.3); } row:selected scale slider, infobar scale slider { - background-image: linear-gradient(to bottom, #ffffff); + background-clip: border-box; + background-color: #ffffff; border-color: #ffffff; } row:selected scale slider:hover, infobar scale slider:hover { - background-image: linear-gradient(to bottom, #e5effb); + background-color: #e5effb; border-color: #e5effb; } row:selected scale slider:active, infobar scale slider:active { - background-image: linear-gradient(to bottom, #a9caf1); + background-color: #a9caf1; border-color: #a9caf1; } row:selected scale slider:disabled, infobar scale slider:disabled { - background-image: linear-gradient(to bottom, #b1cff2); + background-color: #b1cff2; border-color: #b1cff2; } - scale trough { - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, #cfd6e6); } - scale trough highlight { - background-image: linear-gradient(to bottom, #5294E2); } - scale trough highlight:disabled { - background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); } - scale trough fill { - background: none; - background-color: rgba(82, 148, 226, 0.5); } - scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); } - .osd scale trough { - background-image: linear-gradient(to bottom, #454a59); - outline-color: rgba(186, 195, 207, 0.2); } - .osd scale trough highlight { - background-image: none; - background-image: linear-gradient(to bottom, #5294E2); } - row:selected scale trough, - infobar scale trough { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); } - row:selected scale trough highlight, - infobar scale trough highlight { - background-image: linear-gradient(to bottom, #ffffff); } - row:selected scale trough highlight:disabled, - infobar scale trough highlight:disabled { - background-image: linear-gradient(to bottom, #b1cff2); } - row:selected scale trough:disabled, - infobar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); } + .osd scale slider { + background-clip: border-box; + background-color: #5294E2; + border-color: #5294E2; } + .osd scale slider:hover { + background-color: #7eafe9; + border-color: #7eafe9; } + .osd scale slider:active { + background-color: #2679db; + border-color: #2679db; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 1px; + margin-top: -4px; } + scale marks.bottom { + margin-top: 1px; + margin-bottom: -4px; } + scale marks.top { + margin-right: 1px; + margin-left: -4px; } + scale marks.bottom { + margin-left: 1px; + margin-right: -4px; } + scale.fine-tune marks.top { + margin-bottom: 0px; + margin-top: -2px; } + scale.fine-tune marks.bottom { + margin-top: 0px; + margin-bottom: -2px; } + scale.fine-tune marks.top { + margin-right: 0px; + margin-left: -2px; } + scale.fine-tune marks.bottom { + margin-left: 0px; + margin-right: -2px; } + scale.horizontal indicator { + min-height: 3px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 2px; } + scale.vertical indicator { + min-height: 1px; + min-width: 3px; } + scale.vertical.fine-tune indicator { + min-width: 2px; } progressbar { padding: 0; diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css index 87b6e62..127966a 100644 --- a/common/gtk-3.0/3.20/gtk.css +++ b/common/gtk-3.0/3.20/gtk.css @@ -1330,22 +1330,22 @@ window.csd > .titlebar:not(headerbar):backdrop { opacity: 0.75; } .primary-toolbar scale slider, headerbar scale slider { - background-image: linear-gradient(to bottom, #fbfbfc); + background-color: #fbfbfc; border-color: rgba(82, 93, 118, 0.3); } .primary-toolbar scale slider:hover, headerbar scale slider:hover { - background-image: linear-gradient(to bottom, white); + background-color: white; border-color: rgba(82, 93, 118, 0.3); } .primary-toolbar scale slider:active, headerbar scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); + background-color: #5294E2; border-color: #5294E2; } .primary-toolbar scale slider:disabled, headerbar scale slider:disabled { - background-image: linear-gradient(to bottom, rgba(245, 246, 247, 0.985)); + background-color: rgba(245, 246, 247, 0.985); border-color: rgba(82, 93, 118, 0.3); } .primary-toolbar scale trough, headerbar scale trough { - background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.15)); } + background-color: rgba(82, 93, 118, 0.15); } .primary-toolbar scale trough:disabled, headerbar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(82, 93, 118, 0.1)); } + background-color: rgba(82, 93, 118, 0.1); } .path-bar button.text-button, .path-bar button.image-button, .path-bar button { padding-left: 6px; @@ -2049,132 +2049,152 @@ radio { margin: 0; } scale { - min-height: 9px; - min-width: 9px; - padding: 5px; } - scale value { - color: alpha(currentColor,0.4); } - scale marks { - color: alpha(currentColor,0.4); } - scale marks.top { - margin-bottom: -2px; - margin-top: 2px; } - scale marks.bottom { - margin-top: -2px; - margin-bottom: 2px; } - scale marks.top { - margin-right: -2px; - margin-left: 2px; } - scale marks.bottom { - margin-left: -2px; - margin-right: 2px; } - scale.fine-tune marks { - color: alpha(currentColor,0.4); } - scale.fine-tune marks.top { - margin-bottom: -4px; - margin-top: 4px; } - scale.fine-tune marks.bottom { - margin-top: -4px; - margin-bottom: 4px; } - scale.fine-tune marks.top { - margin-right: -4px; - margin-left: 4px; } - scale.fine-tune marks.bottom { - margin-left: -4px; - margin-right: 4px; } - scale.horizontal indicator { - min-height: 3px; - min-width: 1px; } - scale.vertical indicator { - min-height: 1px; - min-width: 3px; } - scale.fine-tune { - padding: 3px; } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; } - scale.fine-tune slider { - margin: -4px; } - scale trough, scale fill, scale highlight { - border-radius: 2.5px; } + min-height: 10px; + min-width: 10px; } + scale.horizontal { + padding: 6px 0; } + scale.horizontal trough { + padding: 0 7px; } + scale.horizontal highlight, scale.horizontal fill { + margin: 0 -7px; } + scale.vertical { + padding: 0 6px; } + scale.vertical trough { + padding: 7px 0; } + scale.vertical highlight, scale.vertical fill { + margin: -7px 0; } scale slider { - min-width: 15px; min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, #fbfbfc); + min-width: 15px; + margin: -6px; } + scale.fine-tune.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; } + scale.fine-tune.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; } + scale.fine-tune slider { + margin: -4px; } + scale.fine-tune fill, + scale.fine-tune highlight, + scale.fine-tune trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } + scale trough { + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + border-radius: 2.5px; + background-color: #cfd6e6; } + scale trough:disabled { + background-color: rgba(207, 214, 230, 0.55); } + .osd scale trough { + background-color: rgba(69, 74, 89, 0.95); } + .osd scale trough highlight { + background-color: #5294E2; } + row:selected scale trough, + infobar scale trough { + background-color: rgba(0, 0, 0, 0.2); } + row:selected scale trough highlight, + infobar scale trough highlight { + background-color: #ffffff; } + row:selected scale trough highlight:disabled, + infobar scale trough highlight:disabled { + background-color: #b1cff2; } + row:selected scale trough:disabled, + infobar scale trough:disabled { + background-color: rgba(0, 0, 0, 0.1); } + scale highlight { + border-radius: 2.5px; + background-color: #5294E2; } + scale highlight:disabled { + background-color: rgba(82, 148, 226, 0.55); } + scale fill { + border-radius: 2.5px; + background-color: rgba(82, 148, 226, 0.5); } + scale fill:disabled { + background-color: transparent; } + scale slider { + background-color: #fbfbfc; border: 1px solid rgba(123, 142, 186, 0.5); - border-radius: 50%; - box-shadow: none; } + border-radius: 100%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background, border; } scale slider:hover { - background-image: linear-gradient(to bottom, white); - border-color: rgba(123, 142, 186, 0.5); } - scale slider:disabled { - background-image: linear-gradient(to bottom, #fbfbfb); - border-color: rgba(123, 142, 186, 0.3); } + background-color: white; } scale slider:active { - background-image: linear-gradient(to bottom, #5294E2); - border-color: #5294E2; } - .osd scale slider { - min-width: 11px; - min-height: 11px; - margin: -4px; - background-image: linear-gradient(to bottom, #5294E2); + background-clip: border-box; + background-color: #5294E2; border-color: #5294E2; } - .osd scale slider:hover { - background-image: linear-gradient(to bottom, #7eafe9); - border-color: #7eafe9; } - .osd scale slider:active { - background-image: linear-gradient(to bottom, #2679db); - border-color: #2679db; } + scale slider:disabled { + background-color: #fbfbfb; + border-color: rgba(123, 142, 186, 0.3); } row:selected scale slider, infobar scale slider { - background-image: linear-gradient(to bottom, #ffffff); + background-clip: border-box; + background-color: #ffffff; border-color: #ffffff; } row:selected scale slider:hover, infobar scale slider:hover { - background-image: linear-gradient(to bottom, #e5effb); + background-color: #e5effb; border-color: #e5effb; } row:selected scale slider:active, infobar scale slider:active { - background-image: linear-gradient(to bottom, #a9caf1); + background-color: #a9caf1; border-color: #a9caf1; } row:selected scale slider:disabled, infobar scale slider:disabled { - background-image: linear-gradient(to bottom, #b1cff2); + background-color: #b1cff2; border-color: #b1cff2; } - scale trough { - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, #cfd6e6); } - scale trough highlight { - background-image: linear-gradient(to bottom, #5294E2); } - scale trough highlight:disabled { - background-image: linear-gradient(to bottom, rgba(82, 148, 226, 0.55)); } - scale trough fill { - background: none; - background-color: rgba(82, 148, 226, 0.5); } - scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(207, 214, 230, 0.55)); } - .osd scale trough { - background-image: linear-gradient(to bottom, rgba(69, 74, 89, 0.95)); - outline-color: rgba(186, 195, 207, 0.2); } - .osd scale trough highlight { - background-image: none; - background-image: linear-gradient(to bottom, #5294E2); } - row:selected scale trough, - infobar scale trough { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)); } - row:selected scale trough highlight, - infobar scale trough highlight { - background-image: linear-gradient(to bottom, #ffffff); } - row:selected scale trough highlight:disabled, - infobar scale trough highlight:disabled { - background-image: linear-gradient(to bottom, #b1cff2); } - row:selected scale trough:disabled, - infobar scale trough:disabled { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)); } + .osd scale slider { + background-clip: border-box; + background-color: #5294E2; + border-color: #5294E2; } + .osd scale slider:hover { + background-color: #7eafe9; + border-color: #7eafe9; } + .osd scale slider:active { + background-color: #2679db; + border-color: #2679db; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 1px; + margin-top: -4px; } + scale marks.bottom { + margin-top: 1px; + margin-bottom: -4px; } + scale marks.top { + margin-right: 1px; + margin-left: -4px; } + scale marks.bottom { + margin-left: 1px; + margin-right: -4px; } + scale.fine-tune marks.top { + margin-bottom: 0px; + margin-top: -2px; } + scale.fine-tune marks.bottom { + margin-top: 0px; + margin-bottom: -2px; } + scale.fine-tune marks.top { + margin-right: 0px; + margin-left: -2px; } + scale.fine-tune marks.bottom { + margin-left: 0px; + margin-right: -2px; } + scale.horizontal indicator { + min-height: 3px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 2px; } + scale.vertical indicator { + min-height: 1px; + min-width: 3px; } + scale.vertical.fine-tune indicator { + min-width: 2px; } progressbar { padding: 0; diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index b093fa6..b045b74 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -323,12 +323,11 @@ $_dot_color: $selected_bg_color; } } + $button_transition: all 200ms $ease-out-quad; button { - $_button_transition: all 200ms $ease-out-quad; - min-height: 22px; min-width: 20px; - transition: $_button_transition; + transition: $button_transition; border: 1px solid; border-radius: 3px; padding: 2px 6px; @@ -346,10 +345,10 @@ button { transition: none; &:hover { - transition: $_button_transition; + transition: $button_transition; transition-duration: 350ms; - &:active { transition: $_button_transition; } + &:active { transition: $button_transition; } } } @@ -1341,26 +1340,26 @@ headerbar { $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3)); $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%)); - background-image: linear-gradient(to bottom, $_slider_bg); + background-color: $_slider_bg; border-color: $_slider_border; &:hover { - background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%)); + background-color: lighten($_slider_bg, 5%); border-color: $_slider_border; } &:active { - background-image: linear-gradient(to bottom, $selected_bg_color); + background-color: $selected_bg_color; border-color: $selected_bg_color; } &:disabled { - background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%)); + background-color: mix($_slider_bg, $header_bg, 70%); border-color: $_slider_border; } } trough { - background-image: linear-gradient(to bottom, $_trough_bg); + background-color: $_trough_bg; - &:disabled { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); } + &:disabled { background-color: if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1)); } } } } @@ -2052,175 +2051,223 @@ radio { // scale { $_marks_length: 3px; - $_marks_margin: -2px; + $_marks_distance: 1px; - min-height: 9px; - min-width: 9px; - padding: 5px; + min-height: 10px; + min-width: 10px; - value { color: gtkalpha(currentColor, 0.4); } + &.horizontal { + padding: 6px 0; - marks { - color: gtkalpha(currentColor, 0.4); + trough { padding: 0 7px; } + highlight, fill { margin: 0 -7px; } + } + &.vertical { + padding: 0 6px; - @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), - (bottom, bottom, top), - (top, left, right), - (bottom, right, left) { - &.#{$marks_class} { - margin-#{$marks_margin}: $_marks_margin; - margin-#{$marks_pos}: -$_marks_margin; - } + trough { padding: 7px 0; } + highlight, fill { margin: -7px 0; } + } + + // The slider is inside the trough, negative margin to make it bigger + slider { + min-height: 15px; + min-width: 15px; + margin: -6px; + } + + // Click-and-hold the slider to activate + &.fine-tune { + &.horizontal { + padding-top: 4px; + padding-bottom: 4px; + min-height: 15px; + } + + &.vertical { + padding-left: 4px; + padding-right: 4px; + min-width: 15px; + } + + // Make the trough grow in fine-tune mode + slider { margin: -4px; } + + fill, + highlight, + trough { + border-radius: 5px; + -gtk-outline-radius: 7px; } } - &.fine-tune marks { - color: gtkalpha(currentColor, 0.4); + // Trough + trough { + $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); - @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), - (bottom, bottom, top), - (top, left, right), - (bottom, right, left) { - &.#{$marks_class} { - margin-#{$marks_margin}: $_marks_margin - 2px; - margin-#{$marks_pos}: -$_marks_margin + 2px; + outline-offset: 2px; + -gtk-outline-radius: 4.5px; + + border-radius: 2.5px; + background-color: $_scale_trough_bg; + + &:disabled { background-color: transparentize($_scale_trough_bg, 0.45); } + + //OSD troughs + .osd & { + background-color: lighten($osd_bg_color, 7%); + + highlight { + background-color: $selected_bg_color; + + &:disabled { } } + + &:disabled { } } - } - &.horizontal indicator { - min-height: $_marks_length; - min-width: 1px; - } - &.vertical indicator { - min-height: 1px; - min-width: $_marks_length; - } + // Troughs in selected list-rows and infobars + row:selected &, + infobar & { + background-color: transparentize(black, 0.8); - &.fine-tune { - padding: 3px; + highlight { + background-color: $selected_fg_color; - trough, fill, highlight { border-radius: 5px; } + &:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); } + } - slider { margin: -4px; } + &:disabled { background-color: transparentize(black, 0.9); } + } } - trough, fill, highlight { + // The colored part of trough + highlight { border-radius: 2.5px; + background-color: $selected_bg_color; + + &:disabled { background-color: transparentize($selected_bg_color, 0.45); } + } + + // this is another differently styled part of the trough, the most relevant use case is for example + // in media player to indicate how much video stream as been cached + fill { + border-radius: 2.5px; + background-color: transparentize($selected_bg_color, 0.5); + + &:disabled { background-color: transparent; } } slider { $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%)); - min-width: 15px; - min-height: 15px; - margin: -6px; - background-clip: border-box; - background-image: linear-gradient(to bottom, $button_bg); + background-color: $button_bg; border: 1px solid $_slider_border; - border-radius: 50%; - box-shadow: none; + border-radius: 100%; + + transition: $button_transition; + transition-property: background, border; + + &:hover { background-color: lighten($button_bg, 5%); } - &:hover { - background-image: linear-gradient(to bottom, lighten($button_bg, 5%)); - border-color: $_slider_border; - } - &:disabled { - background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%)); - border-color: transparentize($_slider_border, 0.2); - } &:active { - background-image: linear-gradient(to bottom, $selected_bg_color); + background-clip: border-box; + background-color: $selected_bg_color; border-color: $selected_bg_color; } - //OSD sliders - .osd & { - min-width: 11px; - min-height: 11px; - margin: -4px; - - background-image: linear-gradient(to bottom, $selected_bg_color); - border-color: $selected_bg_color; - &:hover { - background-image: linear-gradient(to bottom, lighten($selected_bg_color, 10%)); - border-color: lighten($selected_bg_color, 10%) -; - } - &:active { - background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%)); - border-color: darken($selected_bg_color, 10%); - } + &:disabled { + background-color: mix($entry_bg, $bg_color, 55%); + border-color: transparentize($_slider_border, 0.2); } - //selected list-row and infobar sliders + + // Selected list-row and infobar sliders row:selected &, infobar & { - background-image: linear-gradient(to bottom, $selected_fg_color); + background-clip: border-box; + background-color: $selected_fg_color; border-color: $selected_fg_color; &:hover { - background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 85%)); + background-color: mix($selected_fg_color, $selected_bg_color, 85%); border-color: mix($selected_fg_color, $selected_bg_color, 85%); } &:active { - background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 50%)); + background-color: mix($selected_fg_color, $selected_bg_color, 50%); border-color: mix($selected_fg_color, $selected_bg_color, 50%); } &:disabled{ - background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); + background-color: mix($selected_fg_color, $selected_bg_color, 55%); border-color: mix($selected_fg_color, $selected_bg_color, 55%); } } - } - trough { - $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); - outline-offset: 2px; - -gtk-outline-radius: 2px; - margin: 5px; - border: none; - background-image: linear-gradient(to bottom, $_scale_trough_bg); - highlight { - background-image: linear-gradient(to bottom, $selected_bg_color); + // OSD sliders + .osd & { + background-clip: border-box; + background-color: $selected_bg_color; + border-color: $selected_bg_color; - &:disabled { - background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 0.45)); + &:hover { + background-color: lighten($selected_bg_color, 10%); + border-color: lighten($selected_bg_color, 10%) } - } - fill { - background: none; - background-color: transparentize($selected_bg_color, 0.5); - } - &:disabled { - background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45)); - } - - //OSD troughs - .osd & { - background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%)); - outline-color: transparentize($osd_fg_color, 0.8); - highlight { - background-image: none; - background-image: linear-gradient(to bottom, $selected_bg_color); + &:active { + background-color: darken($selected_bg_color, 10%); + border-color: darken($selected_bg_color, 10%); } + &:disabled { } } - // troughs in selected list-rows and infobars - row:selected &, - infobar & { - background-image: linear-gradient(to bottom, transparentize(black, 0.8)); + } - highlight { - background-image: linear-gradient(to bottom, $selected_fg_color); + value { color: gtkalpha(currentColor, 0.4); } + + marks { + color: gtkalpha(currentColor, 0.4); - &:disabled { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); } + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: $_marks_distance; + margin-#{$marks_pos}: -($_marks_distance + $_marks_length); } - &:disabled { background-image: linear-gradient(to bottom, transparentize(black, 0.9)); } } } + + &.fine-tune marks { + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: ($_marks_distance - 1px); + margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px); + } + } + } + &.horizontal { + indicator { + min-height: $_marks_length; + min-width: 1px; + } + + &.fine-tune indicator { min-height: ($_marks_length - 1px); } + } + &.vertical { + indicator { + min-height: 1px; + min-width: $_marks_length; + } + + &.fine-tune indicator { min-width: ($_marks_length - 1px); } + } } + // // Progress bars // |