diff options
Diffstat (limited to 'desktop-themes')
| -rw-r--r-- | desktop-themes/ContrastHigh/gtk-3.0/gtk-widgets.css | 2979 | ||||
| -rw-r--r-- | desktop-themes/ContrastHigh/gtk-3.0/gtk.css | 6 | ||||
| -rw-r--r-- | desktop-themes/ContrastHigh/gtk-3.0/settings.ini | 1 | ||||
| -rw-r--r-- | desktop-themes/ContrastHigh/metacity-1/metacity-theme-1.xml | 18 | ||||
| -rw-r--r-- | desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css | 3086 | ||||
| -rw-r--r-- | desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css | 8 |
6 files changed, 3568 insertions, 2530 deletions
diff --git a/desktop-themes/ContrastHigh/gtk-3.0/gtk-widgets.css b/desktop-themes/ContrastHigh/gtk-3.0/gtk-widgets.css index 66a9b4ab..cce99eec 100644 --- a/desktop-themes/ContrastHigh/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/ContrastHigh/gtk-3.0/gtk-widgets.css @@ -49,7 +49,7 @@ color: #000; } .gtkstyle-fallback:disabled { background-color: white; - color: #7f7f7f; } + color: gray; } .gtkstyle-fallback:selected { background-color: #000; color: #fff; } @@ -75,7 +75,17 @@ flowbox flowboxchild { outline-offset: -2px; } label:disabled, label:backdrop:disabled { - color: #7f7f7f; } + color: gray; } + +popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.osd, .csd popover.background.osd, .osd { + color: #fff; + border: none; + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + outline-color: rgba(255, 255, 255, 0.3); } + popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; } /********************* * Spinner Animation * @@ -96,210 +106,235 @@ spinner { /**************** * Text Entries * ****************/ -entry, spinbutton { - padding: 7px 4px; +spinbutton:not(.vertical), +entry { + min-height: 32px; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; border-radius: 3px; - border-width: 1px; - transition: all 200ms ease-out; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #7f7f7f; } - entry.flat, entry.flat:focus, spinbutton.flat, spinbutton.flat:focus { - padding: 2px; + border-color: gray; + box-shadow: inset 0 2px 2px -2px gray; } + spinbutton:not(.vertical) image.left, + entry image.left { + padding-left: 0; + padding-right: 6px; } + spinbutton:not(.vertical) image.right, + entry image.right { + padding-left: 6px; + padding-right: 0; } + spinbutton:not(.vertical) undershoot.left, + entry undershoot.left { background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #7f7f7f; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-left: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: left center; + border: none; + box-shadow: none; } + spinbutton:not(.vertical) undershoot.right, + entry undershoot.right { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-right: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: right center; border: none; + box-shadow: none; } + spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), + entry.flat:focus, + entry.flat { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; border-radius: 0; } - entry:focus, spinbutton:focus { + spinbutton:focus:not(.vertical), + entry:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); border-color: #000; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc; } - entry:disabled, spinbutton:disabled { + box-shadow: inset 0 2px 2px -2px gray, inset 0 0 0 1px #000; } + spinbutton:disabled:not(.vertical), + entry:disabled { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - border-color: #7f7f7f; + color: gray; + border-color: gray; background-image: linear-gradient(to bottom, white); box-shadow: none; } - entry:backdrop, spinbutton:backdrop { + spinbutton:backdrop:not(.vertical), + entry:backdrop { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); color: #000; background-image: linear-gradient(to bottom, #fff); box-shadow: 0 1px rgba(255, 255, 255, 0); } - entry:backdrop:disabled, spinbutton:backdrop:disabled { + spinbutton:backdrop:disabled:not(.vertical), + entry:backdrop:disabled { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; + color: gray; background-image: linear-gradient(to bottom, #fff); box-shadow: 0 1px rgba(255, 255, 255, 0); } - entry selection, entry selection:backdrop, spinbutton selection, spinbutton selection:backdrop { - background-color: #000; - color: #fff; } - entry progress, spinbutton progress { - margin: 1px; - border-radius: 0; - border-width: 0 0 2px; - border-color: #000; - border-style: solid; - background-image: none; - background-color: transparent; - box-shadow: none; } - entry progress:backdrop, spinbutton progress:backdrop { - background-color: transparent; } - .linked entry:first-child, .linked spinbutton:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .linked entry:first-child:dir(rtl), .linked spinbutton:first-child:dir(rtl) { - border-right-style: none; } - .linked entry:last-child, .linked spinbutton:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-style: none; } - .linked entry:last-child:dir(rtl), .linked spinbutton:last-child:dir(rtl) { - border-left-style: solid; } - .linked.vertical entry, .linked.vertical spinbutton { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #7f7f7f; - background-image: linear-gradient(to bottom, #fff); - border-bottom-color: #d8d8d8; - box-shadow: none; } - .linked.vertical entry:focus, .linked.vertical spinbutton:focus { - border-color: #000; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; } - .linked.vertical entry:disabled, .linked.vertical spinbutton:disabled { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, white); - box-shadow: none; - border-bottom-color: #d8d8d8; } - .linked.vertical entry:disabled:backdrop, .linked.vertical spinbutton:disabled:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - background-image: linear-gradient(to bottom, #fff); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: gainsboro; } - .linked.vertical entry:backdrop, .linked.vertical spinbutton:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #000; - background-image: linear-gradient(to bottom, #fff); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: gainsboro; } - .linked.vertical entry:first-child, .linked.vertical spinbutton:first-child { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #7f7f7f; - border-bottom-color: #d8d8d8; } - .linked.vertical entry:first-child:focus, .linked.vertical spinbutton:first-child:focus { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #000; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc; } - .linked.vertical entry:first-child:disabled, .linked.vertical spinbutton:first-child:disabled { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, white); - box-shadow: none; - border-bottom-color: gainsboro; } - .linked.vertical entry:first-child:disabled:backdrop, .linked.vertical spinbutton:first-child:disabled:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - background-image: linear-gradient(to bottom, #fff); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: gainsboro; - border-top-style: solid; } - .linked.vertical entry:first-child:backdrop, .linked.vertical spinbutton:first-child:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #000; - background-image: linear-gradient(to bottom, #fff); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: gainsboro; } - .linked.vertical entry:last-child, .linked.vertical spinbutton:last-child { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #7f7f7f; - border-top-width: 0; - background-image: linear-gradient(to bottom, #fff); - box-shadow: none; } - .linked.vertical entry:last-child:focus, .linked.vertical spinbutton:last-child:focus { - border-color: #000; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; } - .linked.vertical entry:last-child:disabled, .linked.vertical spinbutton:last-child:disabled { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, white); - box-shadow: none; } - .linked.vertical entry:last-child:disabled:backdrop, .linked.vertical spinbutton:last-child:disabled:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #7f7f7f; - background-image: linear-gradient(to bottom, #fff); - box-shadow: 0 1px rgba(255, 255, 255, 0); } - .linked.vertical entry:last-child:backdrop, .linked.vertical spinbutton:last-child:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - color: #000; - background-image: linear-gradient(to bottom, #fff); - box-shadow: 0 1px rgba(255, 255, 255, 0); } - entry.error, spinbutton.error { + spinbutton.error:not(.vertical), + entry.error { color: #cc0000; border-color: #cc0000; } - entry.error:focus, spinbutton.error:focus { + spinbutton.error:focus:not(.vertical), + entry.error:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); border-color: #cc0000; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc; } - entry.error:selected, entry.error:selected:focus, spinbutton.error:selected, spinbutton.error:selected:focus { + box-shadow: inset 0 2px 2px -2px gray, inset 0 0 0 1px #cc0000; } + spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), + entry.error:selected:focus, + entry.error:selected { background-color: #cc0000; } - entry.warning, spinbutton.warning { + spinbutton.warning:not(.vertical), + entry.warning { color: #f57900; border-color: #f57900; } - entry.warning:focus, spinbutton.warning:focus { + spinbutton.warning:focus:not(.vertical), + entry.warning:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); border-color: #f57900; - box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc; } - entry.warning:selected, entry.warning:selected:focus, spinbutton.warning:selected, spinbutton.warning:selected:focus { + box-shadow: inset 0 2px 2px -2px gray, inset 0 0 0 1px #f57900; } + spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), + entry.warning:selected:focus, + entry.warning:selected { background-color: #f57900; } + spinbutton:not(.vertical) image, + entry image { + color: #333333; } + spinbutton:not(.vertical) image:hover, + entry image:hover { + color: #000; } + spinbutton:not(.vertical) image:active, + entry image:active { + color: #000; } + spinbutton:not(.vertical) image:backdrop, + entry image:backdrop { + color: #333333; } + spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), + entry:drop(active):focus, + entry:drop(active) { + border-color: #000; + box-shadow: inset 0 0 0 1px #000; } + .osd spinbutton:not(.vertical), .osd + entry { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); } + .osd spinbutton:focus:not(.vertical), .osd + entry:focus { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); } + .osd spinbutton:backdrop:not(.vertical), .osd + entry:backdrop { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); } + .osd spinbutton:disabled:not(.vertical), .osd + entry:disabled { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); } +spinbutton:not(.vertical) progress, +entry progress { + margin: 2px -6px; + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: #000; + border-style: solid; + box-shadow: none; } + spinbutton:not(.vertical) progress:backdrop, + entry progress:backdrop { + background-color: transparent; } +.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:focus + button, .linked:not(.vertical) > +entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + +entry, .linked:not(.vertical) > +entry:focus + +entry { + border-left-color: #000; } +.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:drop(active) + button, .linked:not(.vertical) > +entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + +entry, .linked:not(.vertical) > +entry:drop(active) + +entry { + border-left-color: #000; } +.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > +entry:not(:disabled) + entry:not(:disabled), .linked.vertical > +entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { + border-top-color: #d9d9d9; + background-image: linear-gradient(to bottom, #fff); } + .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > + entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > + entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { + border-top-color: #dddddd; + background-image: linear-gradient(to bottom, #fff); } +.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > +entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > +entry:disabled + entry:disabled { + border-top-color: #d9d9d9; } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > +entry + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:focus:not(:only-child) { + border-top-color: #000; } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > +entry + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:drop(active):not(:only-child) { + border-top-color: #000; } +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:focus:not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:focus:not(:only-child) + entry, +.linked.vertical > +entry:focus:not(:only-child) + button, +.linked.vertical > +entry:focus:not(:only-child) + combobox > box > button.combo { + border-top-color: #000; } +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:drop(active):not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:drop(active):not(:only-child) + entry, +.linked.vertical > +entry:drop(active):not(:only-child) + button, +.linked.vertical > +entry:drop(active):not(:only-child) + combobox > box > button.combo { + border-top-color: #000; } /*********** * Buttons * @@ -309,7 +344,7 @@ entry, spinbutton { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#000), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)); } } - +/* button.default, button.text-button.default, button.text-button.default:focus, @@ -323,212 +358,485 @@ button.default:hover:active, button.default:focus:hover:active { color: #fff; } - -button { - border-radius: 3px; - transition: all 200ms ease-out; - padding: 4px 6px; - border-width: 2px; - border-style: solid; - color: #000; - background-image: none; - background-color: #fff; - border-color: #7f7f7f; } - button:hover, button.flat:hover, button.sidebar-button:hover { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #7f7f7f; - background-image: none; - -gtk-icon-effect: highlight; } - button:active, button.flat:active, button.sidebar-button:active, button:checked, button.flat:checked, button.sidebar-button:checked { - border-width: 2px; - border-style: solid; - background-image: none; - color: white; - background-color: black; - border-color: #7f7f7f; - transition-duration: 50ms; } - button:backdrop, button.flat:backdrop, button.sidebar-button:backdrop { +*/ +button.titlebutton, button { + min-height: 24px; + min-width: 16px; + padding: 4px 8px; + border: 1px solid; + border-radius: 3px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-width: 2px; + border-style: solid; + color: #000; + background-image: none; + background-color: #fff; + border-color: gray; } + button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: #000; - background-color: #fff; - border-color: #8b8b8b; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button:backdrop:active, button:backdrop:checked, button.flat:backdrop:active, button.sidebar-button:backdrop:active, button.flat:backdrop:checked, button.sidebar-button:backdrop:checked { - border-width: 2px; - border-style: solid; - color: white; - background-color: #8b8b8b; - border-color: #8b8b8b; - background-image: none; } - button:backdrop:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; - background-image: none; } - button:backdrop:disabled:active, button.flat:backdrop:disabled:active, button.sidebar-button:backdrop:disabled:active { + border-color: transparent; + transition: none; } + button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-duration: 500ms; } + button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - border-color: #8b8b8b; + color: gray; + background-color: transparent; background-image: none; - background-color: whitesmoke; } - button:disabled { + border-color: transparent; } + button.titlebutton:hover, button:hover { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: gray; + background-image: none; + -gtk-icon-effect: highlight; } + button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { + border-width: 2px; + border-style: solid; + background-image: none; + color: white; + background-color: black; + border-color: gray; + transition-duration: 50ms; } + button.titlebutton:backdrop, button:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: #8d8d8d; + background-image: none; + -gtk-icon-effect: none; } + button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked { + border-width: 2px; + border-style: solid; + color: white; + background-color: #8d8d8d; + border-color: #8d8d8d; + background-image: none; } + button.titlebutton:backdrop:disabled, button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; + background-color: #f6f6f6; } + button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button:disabled:active, button:disabled.flat:active, button.sidebar-button:disabled:active { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #7f7f7f; - background-image: none; + border-color: silver; + background-image: none; } + button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; background-color: white; } - .osd button { - padding: 6px; - border-width: 1px 1px 2px 1px; + button.image-button.titlebutton, button.image-button { + min-width: 24px; + padding-left: 4px; + padding-right: 4px; } + button.text-button.titlebutton, button.text-button { + padding-left: 16px; + padding-right: 16px; } + button.text-button.image-button.titlebutton, button.text-button.image-button { + padding-left: 8px; + padding-right: 8px; } + button.text-button.image-button.titlebutton label, button.text-button.image-button label { + padding-left: 8px; + padding-right: 8px; } + combobox:drop(active) button.combo, button.titlebutton:drop(active), button:drop(active) { + color: #000; + border-color: #000; + box-shadow: inset 0 0 0 1px #000; } +row:selected button { + border-color: #000; } + row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { + color: #fff; + border-color: transparent; } + row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { + color: #fff; } +button.osd { + color: #fff; + border-radius: 5px; + outline-color: rgba(255, 255, 255, 0.3); + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); + border: none; + box-shadow: none; } + button.osd.image-button { + min-height: 48px; + min-width: 48px; } + button.osd:hover { border-width: 2px; border-style: solid; color: #fff; - background-image: none; - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(77, 77, 77, 0.8); border-color: rgba(255, 255, 255, 0.2); + border: none; box-shadow: none; } - .osd button:hover { + button.osd:active, button.osd:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; + border: none; + box-shadow: none; } + button.osd:disabled:backdrop, button.osd:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; + border: none; } + button.osd:backdrop { + border-width: 2px; + border-style: solid; + border: none; } +popover.background.touch-selection button, popover.background.magnifier button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, .osd button { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { + border-width: 2px; + border-style: solid; } + popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { border-width: 2px; border-style: solid; color: #fff; background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { + border-width: 2px; + border-style: solid; border-color: rgba(255, 255, 255, 0.2); + color: gray; + background-image: none; + border-color: transparent; box-shadow: none; } - .osd button:active, .osd button:checked { + popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd button.flat:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; } + popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { border-width: 2px; border-style: solid; color: rgba(0, 0, 0, 0.8); background-color: #fff; border-color: rgba(255, 255, 255, 0.2); box-shadow: none; } - .osd button:disabled { - border-width: 2px; - border-style: solid; - border-color: rgba(255, 255, 255, 0.2); - color: #7f7f7f; } - .osd button:backdrop { - border-width: 2px; - border-style: solid; } - button.suggested-action { +button.suggested-action { + border-width: 2px; + border-style: solid; + color: white; + background-image: none; + background-color: #000; + border-color: black; } + button.suggested-action.flat { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #000; } + button.suggested-action:hover { border-width: 2px; border-style: solid; color: white; + background-color: #000; + border-color: black; + background-image: none; } + button.suggested-action:active, button.suggested-action:checked { + border-width: 2px; + border-style: solid; background-image: none; - background-color: #4a90d9; - border-color: #1c5187; } - button.suggested-action:hover { + color: black; + background-color: white; + border-color: black; } + button.suggested-action:backdrop, button.suggested-action.flat:backdrop { + border-width: 2px; + border-style: solid; + color: white; + background-color: #000; + border-color: #000; + background-image: none; } + button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { border-width: 2px; border-style: solid; color: white; - background-color: #4a90d9; - border-color: #1c5187; + background-color: #8d8d8d; + border-color: #8d8d8d; background-image: none; } - button.suggested-action:active, button.suggested-action:checked { + button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { border-width: 2px; border-style: solid; - background-image: none; - color: black; - background-color: #b56f26; - border-color: #1c5187; } - button.suggested-action:backdrop { - border-width: 2px; - border-style: solid; - color: white; - background-color: #4a90d9; - border-color: #4a90d9; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.suggested-action:backdrop:disabled { + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; - background-image: none; } - button.suggested-action:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.destructive-action { + color: gray; + border-color: silver; + background-image: none; + background-color: #f6f6f6; } + button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-width: 2px; border-style: solid; - color: white; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(0, 0, 0, 0.8); } + button.suggested-action:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + button.suggested-action:disabled:active, button.suggested-action:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; + background-color: white; } + .osd button.suggested-action { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd button.suggested-action:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd button.suggested-action:backdrop { + border-width: 2px; + border-style: solid; } +button.destructive-action { + border-width: 2px; + border-style: solid; + color: white; + background-image: none; + background-color: #ef2929; + border-color: #8e0b0b; } + button.destructive-action.flat { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; background-image: none; + border-color: transparent; + color: #ef2929; } + button.destructive-action:hover { + border-width: 2px; + border-style: solid; + color: white; background-color: #ef2929; + border-color: #8e0b0b; + background-image: none; } + button.destructive-action:active, button.destructive-action:checked { + border-width: 2px; + border-style: solid; + background-image: none; + color: black; + background-color: #10d6d6; border-color: #8e0b0b; } - button.destructive-action:hover { - border-width: 2px; - border-style: solid; - color: white; - background-color: #ef2929; - border-color: #8e0b0b; - background-image: none; } - button.destructive-action:active, button.destructive-action:checked { - border-width: 2px; - border-style: solid; - background-image: none; - color: black; - background-color: #10d6d6; - border-color: #8e0b0b; } - button.destructive-action:backdrop { - border-width: 2px; - border-style: solid; - color: white; - background-color: #ef2929; - border-color: #ef2929; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.destructive-action:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; - background-image: none; } - button.destructive-action:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; + button.destructive-action:backdrop, button.destructive-action.flat:backdrop { + border-width: 2px; + border-style: solid; + color: white; + background-color: #ef2929; + border-color: #ef2929; + background-image: none; } + button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { + border-width: 2px; + border-style: solid; + color: white; + background-color: #8d8d8d; + border-color: #8d8d8d; + background-image: none; } + button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.image-button { - padding: 8px; } - button.text-button { - padding: 6px 8px 5px; } - .inline-toolbar button, .inline-toolbar button:backdrop { - border-radius: 2px; - border-width: 1px; } - .primary-toolbar button { - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } + button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; + background-color: #f6f6f6; } + button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(239, 41, 41, 0.8); } + button.destructive-action:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + button.destructive-action:disabled:active, button.destructive-action:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; + background-color: white; } + .osd button.destructive-action { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd button.destructive-action:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd button.destructive-action:backdrop { + border-width: 2px; + border-style: solid; } +.stack-switcher > button { + outline-offset: -3px; } + .stack-switcher > button > label { + padding-left: 6px; + padding-right: 6px; } + .stack-switcher > button > image { + padding-left: 6px; + padding-right: 6px; + padding-top: 3px; + padding-bottom: 3px; } + .stack-switcher > button.text-button { + padding-left: 10px; + padding-right: 10px; } + .stack-switcher > button.image-button { + padding-left: 2px; + padding-right: 2px; } + .stack-switcher > button.needs-attention:active > label, + .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, + .stack-switcher > button.needs-attention:checked > image { + animation: none; + background-image: none; } +.inline-toolbar button, .inline-toolbar button:backdrop { + border-radius: 2px; + border-width: 1px; } +.primary-toolbar button { + -gtk-icon-shadow: none; } + +.stack-switcher > button.needs-attention > label, +.stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)); + background-size: 6px 6px; + background-repeat: no-repeat; + background-position: right 3px; } + .stack-switcher > button.needs-attention > label:backdrop, + .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { + background-size: 6px 6px; } + .stack-switcher > button.needs-attention > label:dir(rtl), + .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { + background-position: left 3px; } .inline-toolbar toolbutton > button { border-width: 2px; @@ -536,129 +844,117 @@ button { color: #000; background-image: none; background-color: #fff; - border-color: #7f7f7f; } + border-color: gray; } .inline-toolbar toolbutton > button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #7f7f7f; + border-color: gray; background-image: none; } - .inline-toolbar toolbutton > button:active { + .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: black; - border-color: #7f7f7f; } + border-color: gray; } .inline-toolbar toolbutton > button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - .inline-toolbar toolbutton > button:disabled:active { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #7f7f7f; - background-image: none; - background-color: white; } + border-color: silver; + background-image: none; } + .inline-toolbar toolbutton > button:disabled:active, .inline-toolbar toolbutton > button:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; + background-color: white; } .inline-toolbar toolbutton > button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - .inline-toolbar toolbutton > button:backdrop:active { - border-width: 2px; - border-style: solid; - color: white; - background-color: #8b8b8b; - border-color: #8b8b8b; - background-image: none; } - .inline-toolbar toolbutton > button:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; + border-color: #8d8d8d; background-image: none; } - .inline-toolbar toolbutton > button:backdrop:disabled:active { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #8b8b8b; - background-image: none; - background-color: whitesmoke; } + .inline-toolbar toolbutton > button:backdrop:active, .inline-toolbar toolbutton > button:backdrop:checked { + border-width: 2px; + border-style: solid; + color: white; + background-color: #8d8d8d; + border-color: #8d8d8d; + background-image: none; } + .inline-toolbar toolbutton > button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > button:backdrop:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: silver; + background-image: none; + background-color: #f6f6f6; } -toolbar.inline-toolbar toolbutton > button.flat, searchbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton > button.sidebar-button, searchbar.inline-toolbar toolbutton > button.sidebar-button { +toolbar.inline-toolbar toolbutton > button.flat, searchbar.inline-toolbar toolbutton > button.flat, +toolbar.inline-toolbar toolbutton:backdrop > button.flat, +searchbar.inline-toolbar toolbutton:backdrop > button.flat, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > +entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 0; - border-left-style: none; } -toolbar.inline-toolbar toolbutton:first-child > button.flat, searchbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:first-child > button.sidebar-button, searchbar.inline-toolbar toolbutton:first-child > button.sidebar-button { - border-radius: 3px 0 0 3px; - border-left-style: solid; } -toolbar.inline-toolbar toolbutton:last-child > button.flat, searchbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar toolbutton:last-child > button.sidebar-button, searchbar.inline-toolbar toolbutton:last-child > button.sidebar-button { - border-radius: 0 3px 3px 0; } -toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.flat, searchbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.flat, toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.sidebar-button, searchbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.sidebar-button { + border-right-style: none; } + +.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat, searchbar.inline-toolbar toolbutton:first-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, +searchbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } +.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat, searchbar.inline-toolbar toolbutton:last-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, +searchbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; border-right-style: solid; } -toolbar.inline-toolbar toolbutton:only-child > button.flat, searchbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar toolbutton:only-child > button.sidebar-button, searchbar.inline-toolbar toolbutton:only-child > button.sidebar-button { - border-radius: 3px; - border-style: solid; } - -stacksidebar row.needs-attention > label { - animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - background-position: right 3px, right 4px; } - stacksidebar row.needs-attention > label:backdrop { - background-size: 6px 6px, 0 0; } - stacksidebar row.needs-attention > label:dir(rtl) { - background-position: left 3px, left 4px; } - -.osd button, .osd button:hover, .osd button:active, .osd button:checked, .osd button:disabled, .osd button:backdrop, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked > combobox > button.combo:dir(ltr) { - border-radius: 0; - border-left-style: none; } - .osd button:dir(rtl), .inline-toolbar button:dir(rtl), .linked > button:dir(rtl), .linked > combobox > button.combo:dir(rtl) { - border-radius: 0; - border-right-style: none; - border-left-style: solid; } - -.osd button:first-child, .inline-toolbar button:first-child, .linked > button:first-child, .linked > combobox:first-child > button.combo { - border-radius: 3px 0 0 3px; - border-left-style: solid; } -.osd button:last-child, .inline-toolbar button:last-child, .linked > button:last-child, .linked > combobox:last-child > button.combo { - border-radius: 0 3px 3px 0; } - .osd button:last-child:dir(rtl), .inline-toolbar button:last-child:dir(rtl), .linked > button:last-child:dir(rtl), .linked > combobox:last-child > button.combo:dir(rtl) { - border-right-style: solid; } -.osd button:only-child, .inline-toolbar button:only-child, .linked > button:only-child, .linked > combobox:only-child > button.combo { +.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, searchbar.inline-toolbar toolbutton:only-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, +searchbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > button.combo { border-radius: 3px; border-style: solid; } -.linked.vertical entry, .linked.vertical spinbutton, .linked.vertical entry:focus, .linked.vertical spinbutton:focus, .linked.vertical entry:disabled, .linked.vertical spinbutton:disabled, .linked.vertical entry:disabled:backdrop, .linked.vertical spinbutton:disabled:backdrop, .linked.vertical entry:backdrop, .linked.vertical spinbutton:backdrop, .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > combobox > button.combo { - border-left-style: solid; - border-top-style: none; +.linked.vertical > spinbutton:not(.vertical), .linked.vertical > +entry, .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > combobox > box > button.combo { + border-style: solid solid none solid; border-radius: 0; } -.linked.vertical entry:first-child, .linked.vertical spinbutton:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > button.combo { - border-style: solid; - border-radius: 3px 3px 0 0; } -.linked.vertical entry:last-child, .linked.vertical spinbutton:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > button.combo { - border-radius: 0 0 3px 3px; } -.linked.vertical entry:only-child, .linked.vertical spinbutton:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > button.combo { +.linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > +entry:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } +.linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > +entry:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-style: solid; } +.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > +entry:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo { border-radius: 3px; border-style: solid; } -button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, -.menuitem.button.flat, modelbutton.flat:backdrop, -.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, +popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, +popover.background radiobutton:backdrop:hover, +.menuitem.button.flat:backdrop, +.menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, row.activatable:backdrop, row.activatable:backdrop:active, row.activatable:backdrop:checked, @@ -667,29 +963,62 @@ row.activatable:backdrop:disabled:active, row.activatable:backdrop:disabled:checked, row.activatable:disabled:active, row.activatable:disabled:checked, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:backdrop:hover { - border-color: transparent; background-color: transparent; background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ -modelbutton.flat, +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, .menuitem.button.flat { - outline-offset: -1px; } - modelbutton.flat:backdrop, - .menuitem.button.flat:backdrop { - color: #000; } - modelbutton.flat:backdrop:hover, - .menuitem.button.flat:backdrop:hover { - color: #fff; - background-color: #000; } - modelbutton.flat:disabled, - .menuitem.button.flat:disabled { - color: #7f7f7f; } + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; } + modelbutton.flat:hover, popover.background checkbutton:hover, + popover.background radiobutton:hover, + .menuitem.button.flat:hover { + background-color: white; } + modelbutton.flat check:last-child, popover.background checkbutton check:last-child, + popover.background radiobutton check:last-child, + modelbutton.flat radio:last-child, + popover.background checkbutton radio:last-child, + popover.background radiobutton radio:last-child, + .menuitem.button.flat check:last-child, + .menuitem.button.flat radio:last-child { + margin-left: 8px; } + modelbutton.flat check:first-child, popover.background checkbutton check:first-child, + popover.background radiobutton check:first-child, + modelbutton.flat radio:first-child, + popover.background checkbutton radio:first-child, + popover.background radiobutton radio:first-child, + .menuitem.button.flat check:first-child, + .menuitem.button.flat radio:first-child { + margin-right: 8px; } + +modelbutton.flat arrow, popover.background checkbutton arrow, +popover.background radiobutton arrow { + background: none; } + modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, + popover.background radiobutton arrow:hover { + background: none; } + modelbutton.flat arrow.left, popover.background checkbutton arrow.left, + popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + modelbutton.flat arrow.right, popover.background checkbutton arrow.right, + popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } + button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop { + box-shadow: none; } /********* * Links * @@ -714,193 +1043,178 @@ button:link, button:visited { /***************** * GtkSpinButton * *****************/ -spinbutton { - /* This is to fix spinbuttons in entries, but I feel like hiding code issues - * hence it's commented atm. - * treeview.view & { - * & entry, & entry:focus { - * padding: 1px; - * border-width: 1px 0; - * border-color: $selected_bg_color; - * border-radius: 0; - * box-shadow: none; - * } - * } - */ } - spinbutton button { +spinbutton:not(.vertical) { + border-width: 2px; + border-color: gray; + box-shadow: none; + padding: 0; } + spinbutton:not(.vertical) entry { + min-width: 28px; + margin: 0; + background: none; + border: none; + box-shadow: none; } + spinbutton:not(.vertical) button { + min-height: 16px; + margin: 0; + padding-bottom: 0; + padding-top: 0; + color: #1a1a1a; background-image: none; - border-color: rgba(127, 127, 127, 0.3); - color: #0c0c0c; + border-style: none none none solid; border-radius: 0; } - spinbutton button:dir(ltr) { - border-style: none none none solid; } - spinbutton button:dir(rtl) { + spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; } - spinbutton button:hover { + spinbutton:not(.vertical) button:hover { color: #000; - background-color: rgba(0, 0, 0, 0.05); } - spinbutton button:hover:dir(ltr) { - border-style: none none none solid; } - spinbutton button:hover:dir(rtl) { - border-style: none solid none none; } - spinbutton button:disabled { - box-shadow: none; - color: rgba(127, 127, 127, 0.3); } - spinbutton button:disabled:dir(ltr) { - border-style: none none none solid; } - spinbutton button:disabled:dir(rtl) { - border-style: none solid none none; } - spinbutton button:active { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); - background-color: rgba(0, 0, 0, 0.1); } - spinbutton button:backdrop { - border-color: rgba(139, 139, 139, 0.3); - background-color: #fff; - box-shadow: none; } - spinbutton button:backdrop:dir(ltr) { - border-style: none none none solid; } - spinbutton button:backdrop:dir(rtl) { - border-style: none solid none none; } - spinbutton button:backdrop:disabled { - box-shadow: none; - color: rgba(127, 127, 127, 0.3); } - spinbutton button:backdrop:disabled:dir(rtl) { - border-width: 0 1px 0 0; } - spinbutton button:backdrop:disabled:dir(ltr) { - border-style: none none none solid; } - spinbutton button:backdrop:disabled:dir(rtl) { + background-color: #fff; } + spinbutton:not(.vertical) button:disabled { + color: rgba(128, 128, 128, 0.3); } + spinbutton:not(.vertical) button:active { + background-color: rgba(0, 0, 0, 0.8); + color: #fff; } + spinbutton:not(.vertical) button:backdrop { + color: #000; + background-color: transparent; + border-color: rgba(141, 141, 141, 0.3); } + spinbutton:not(.vertical) button:backdrop:disabled { + color: white; + background-image: none; + border-style: none none none solid; } + spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } - spinbutton.vertical button:first-child { +.osd spinbutton:not(.vertical) { + border-color: rgba(255, 255, 255, 0.2); + color: #000; + box-shadow: none; } + .osd spinbutton:not(.vertical):focus, .osd spinbutton:not(.vertical):active { + border-color: rgba(255, 255, 255, 0.7); + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + .osd spinbutton:not(.vertical) entry { + box-shadow: none; + color: #000; + text-shadow: none; } + .osd spinbutton:not(.vertical) entry:focus, .osd spinbutton:not(.vertical) entry:active { + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + .osd spinbutton:not(.vertical) button { border-width: 2px; border-style: solid; color: #000; + background-color: transparent; background-image: none; - background-color: #fff; - border-color: #7f7f7f; } - spinbutton.vertical button:first-child:active { - border-width: 2px; - border-style: solid; - background-image: none; - color: white; - background-color: black; - border-color: #7f7f7f; } - spinbutton.vertical button:first-child:hover { + border-color: transparent; + color: #000; + border-style: none none none solid; + border-color: rgba(128, 128, 128, 0.2); + border-radius: 0; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:dir(rtl) { + border-style: none solid none none; } + .osd spinbutton:not(.vertical) button:active { + background-color: rgba(0, 0, 0, 0.8); + color: #fff; } + .osd spinbutton:not(.vertical) button:hover { border-width: 2px; border-style: solid; color: #000; - background-color: #fff; - border-color: #7f7f7f; - background-image: none; } - spinbutton.vertical button:first-child:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #7f7f7f; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:first-child:backdrop { + border-color: transparent; + border-style: none none none solid; + border-color: rgba(128, 128, 128, 0.2); + background-color: rgba(255, 255, 255, 0.1); + box-shadow: none; } + .osd spinbutton:not(.vertical) button:backdrop { border-width: 2px; border-style: solid; color: #000; - background-color: #fff; - border-color: #8b8b8b; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:last-child { + border-color: transparent; + color: gray; + border-color: rgba(128, 128, 128, 0.1); + box-shadow: none; + border-style: none none none solid; } + .osd spinbutton:not(.vertical) button:disabled { + color: gray; + border-color: rgba(128, 128, 128, 0.1); + border-style: none none none solid; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:last-child { + border-radius: 0 3px 3px 0; } + .osd spinbutton:not(.vertical) button:dir(rtl):first-child { + border-radius: 3px 0 0 3px; } +spinbutton.vertical { + border-width: 2px; + border-color: gray; } + spinbutton.vertical:disabled { + color: gray; } + spinbutton.vertical:backdrop:disabled { + color: gray; } + spinbutton.vertical:drop(active) { + border-color: transparent; + box-shadow: none; } + spinbutton.vertical entry { + min-height: 32px; + min-width: 32px; + padding: 0; + border-radius: 0; + border-color: gray; } + spinbutton.vertical button { + min-height: 32px; + min-width: 32px; + padding: 0; } + spinbutton.vertical button.up { + border-radius: 3px 3px 0 0; + border-style: solid solid none solid; } + spinbutton.vertical button.down { + border-radius: 0 0 3px 3px; + border-style: none solid solid solid; } +.osd spinbutton.vertical button:first-child { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd spinbutton.vertical button:first-child:hover { border-width: 2px; border-style: solid; - color: #000; - background-image: none; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd spinbutton.vertical button:first-child:active { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); background-color: #fff; - border-color: #7f7f7f; } - spinbutton.vertical button:last-child:active { - border-width: 2px; - border-style: solid; - background-image: none; - color: white; - background-color: black; - border-color: #7f7f7f; } - spinbutton.vertical button:last-child:hover { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #7f7f7f; - background-image: none; } - spinbutton.vertical button:last-child:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:last-child:backdrop { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:backdrop:disabled { + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd spinbutton.vertical button:first-child:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; - background-image: none; } - spinbutton.vertical.entry { - border-radius: 0; } - spinbutton.vertical button:first-child, spinbutton.vertical button:first-child:active, spinbutton.vertical button:first-child:hover, spinbutton.vertical button:first-child:disabled, spinbutton.vertical button:first-child:backdrop { - border-radius: 3px 3px 0 0; - border-bottom-width: 0; } - spinbutton.vertical button:last-child, spinbutton.vertical button:last-child:active, spinbutton.vertical button:last-child:hover, spinbutton.vertical button:last-child:disabled, spinbutton.vertical button:last-child:backdrop { - border-radius: 0 0 3px 3px; - border-top-width: 0; } + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd spinbutton.vertical button:first-child:backdrop { + border-width: 2px; + border-style: solid; } +treeview spinbutton entry, +treeview spinbutton entry:focus { + padding: 1px; + border-width: 1px 0; + border-color: #000; + border-radius: 0; + box-shadow: none; } /************** * ComboBoxes * **************/ -combobox { - text-shadow: 0 1px white; - -gtk-icon-shadow: 0 1px white; } - combobox > button.combo { - padding-left: 8px; - padding-right: 8px; } - combobox:disabled { - color: #7f7f7f; - text-shadow: none; - -gtk-icon-shadow: none; } - combobox:backdrop { - color: #000; - text-shadow: none; - -gtk-icon-shadow: none; } - combobox:backdrop:disabled { - color: #7f7f7f; } - combobox arrow { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - min-height: 16px; - min-width: 16px; } - combobox .menuitem { - text-shadow: none; } - combobox > entry.combo { - border-radius: 3px 0 0 3px; } - combobox > entry.combo:dir(rtl) { - border-radius: 0 3px 3px 0; } - combobox > button.combo:not(:only-child):dir(ltr) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-style: none; } - combobox > button.combo:not(:only-child):dir(rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-style: none; } +combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; } +combobox:drop(active) { + box-shadow: none; } /************ * Toolbars * @@ -919,25 +1233,25 @@ toolbar, searchbar { padding: 3px; border-radius: 0 0 4px 4px; } toolbar.vertical, searchbar.vertical { - border-right: 1px solid #7f7f7f; } + border-right: 1px solid gray; } toolbar.vertical:dir(rtl), searchbar.vertical:dir(rtl) { border-right: none; - border-left: 1px solid #7f7f7f; } + border-left: 1px solid gray; } searchbar { border-width: 0 0 1px; - border-color: #7f7f7f; + border-color: gray; border-style: none none solid none; padding: 3px; } toolbar.inline-toolbar, searchbar.inline-toolbar { border-style: solid; - border-color: #7f7f7f; - background-color: #d8d8d8; - box-shadow: inset 0 2px 3px -1px #a2a2a2; } + border-color: gray; + background-color: #d9d9d9; + box-shadow: inset 0 2px 3px -1px #a4a4a4; } toolbar.inline-toolbar:backdrop, searchbar.inline-toolbar:backdrop { - border-color: #8b8b8b; - background-color: #d6d6d6; + border-color: #8d8d8d; + background-color: #d7d7d7; box-shadow: none; } /*************** @@ -947,15 +1261,15 @@ toolbar.inline-toolbar, searchbar.inline-toolbar { headerbar { border-width: 0 0 1px; border-style: solid; - border-color: #7f7f7f; + border-color: gray; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, white, #fff); - box-shadow: inset 0 -1px #d8d8d8, inset 0 1px #fff; + box-shadow: inset 0 -1px #d9d9d9, inset 0 1px #fff; padding: 6px; } .titlebar:backdrop, headerbar:backdrop { - border-color: #8b8b8b; + border-color: #8d8d8d; background-color: #fff; background-image: none; box-shadow: none; } @@ -968,11 +1282,7 @@ headerbar { font-size: 80%; padding: 0 12px; } .titlebar > GtkBox > separator.vertical, - headerbar > GtkBox > separator.vertical, - placessidebar .view headerbar > GtkBox > separator.vertical:backdrop, - placessidebar textview text headerbar > GtkBox > separator.vertical:backdrop, - textview placessidebar text headerbar > GtkBox > separator.vertical:backdrop, - placessidebar iconview headerbar > GtkBox > separator.vertical:backdrop { + headerbar > GtkBox > separator.vertical { border-width: 0 1px; border-color: #000; border-style: solid; } @@ -981,7 +1291,7 @@ headerbar { color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #0d0d0d, #050505); - box-shadow: inset 0 -1px #d8d8d8, inset 0 1px #7f7f7f; } + box-shadow: inset 0 -1px #d9d9d9, inset 0 1px gray; } .titlebar.selection-mode button, headerbar.selection-mode button { border-width: 2px; @@ -1010,12 +1320,10 @@ headerbar { headerbar.selection-mode button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } .titlebar.selection-mode button:backdrop, headerbar.selection-mode button:backdrop { border-width: 2px; @@ -1024,16 +1332,14 @@ headerbar { background-color: #000; border-color: #000; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; border-color: black; } .titlebar.selection-mode button:backdrop:disabled, headerbar.selection-mode button:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #8b8b8b; + border-color: silver; background-image: none; } .titlebar.selection-mode button.suggested-action, headerbar.selection-mode button.suggested-action { @@ -1042,14 +1348,14 @@ headerbar { color: #000; background-image: none; background-color: #fff; - border-color: #7f7f7f; } + border-color: gray; } .titlebar.selection-mode button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #7f7f7f; + border-color: gray; background-image: none; } .titlebar.selection-mode button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { @@ -1058,34 +1364,30 @@ headerbar { background-image: none; color: white; background-color: black; - border-color: #7f7f7f; } + border-color: gray; } .titlebar.selection-mode button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } .titlebar.selection-mode button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: #8d8d8d; + background-image: none; } .titlebar.selection-mode button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #8b8b8b; + border-color: silver; background-image: none; } .titlebar.selection-mode .selection-menu, headerbar.selection-mode .selection-menu { @@ -1128,27 +1430,27 @@ treeview.view { -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; - border-left-color: #7f7f7f; + border-left-color: gray; border-top-color: #fff; } treeview.view:selected { border-radius: 0; } treeview.view:selected, treeview.view:backdrop:selected { - border-left-color: #7f7f7f; + border-left-color: gray; border-top-color: rgba(0, 0, 0, 0.1); } treeview.view:disabled { - color: #7f7f7f; } + color: gray; } treeview.view:disabled:selected { color: #666666; } treeview.view:disabled:selected:backdrop { - color: #7f7f7f; } + color: gray; } treeview.view:disabled:backdrop { - color: #7f7f7f; } + color: gray; } treeview.view.separator:backdrop { min-height: 2px; color: rgba(0, 0, 0, 0.1); } treeview.view:backdrop { color: #000; - border-left-color: #7f7f7f; + border-left-color: gray; border-top: #fff; } treeview.view.dnd { border-style: solid none; @@ -1156,21 +1458,21 @@ treeview.view { border-color: black; } treeview.view.expander { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); - color: #4c4c4c; } + color: #4d4d4d; } treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } treeview.view.expander:hover { color: #000; } treeview.view.expander:selected { - color: #b2b2b2; } + color: #b3b3b3; } treeview.view.expander:selected:hover { color: #fff; } treeview.view.expander:selected:backdrop { - color: #b2b2b2; } + color: #b3b3b3; } treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } treeview.view.expander:backdrop { - color: #4c4c4c; } + color: #4d4d4d; } treeview.view.progressbar { color: #fff; border: 1px solid #000; @@ -1191,12 +1493,12 @@ treeview.view { border-style: solid; border-color: #000; } treeview.view header button { - color: #7f7f7f; + color: gray; font-weight: bold; text-shadow: none; box-shadow: none; } treeview.view header button:hover { - color: #3f3f3f; + color: #404040; box-shadow: none; } treeview.view header button:active { color: #fff; } @@ -1209,15 +1511,15 @@ treeview.view header button, treeview.view header button:hover, treeview.view he border-radius: 0; border-width: 1px; background-image: none; - border-color: #7f7f7f; + border-color: gray; text-shadow: none; } treeview.view header button:disabled { border-color: #fff; background-image: none; } treeview.view header button:backdrop { - border-color: #7f7f7f; + border-color: gray; border-style: none solid solid none; - color: #7f7f7f; + color: gray; background-image: none; background-color: #fff; } treeview.view header button:backdrop:disabled { @@ -1249,7 +1551,8 @@ treeview.view.separator { *********/ menubar, .menubar { - padding: 0px; } + padding: 0px; + box-shadow: inset 0 -1px gray; } menubar > menuitem, .menubar > menuitem { padding: 4px 8px; } @@ -1259,7 +1562,7 @@ menubar, color: #000; } menubar > menuitem:disabled, .menubar > menuitem:disabled { - color: #7f7f7f; + color: gray; box-shadow: none; } menu, @@ -1267,7 +1570,7 @@ menu, margin: 4px; padding: 0px; background-color: #fff; - border: 1px solid #7f7f7f; } + border: 1px solid gray; } menu menuitem, .menu menuitem { text-shadow: none; @@ -1279,10 +1582,10 @@ menu, background-color: #000; } menu menuitem:disabled, .menu menuitem:disabled { - color: #7f7f7f; } + color: gray; } menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop { - color: #7f7f7f; } + color: gray; } menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover { @@ -1312,71 +1615,30 @@ menuitem check, menuitem radio { /*************** * Popovers * ***************/ -popover { - margin: 10px; +popover.background { padding: 2px; - border-color: #7f7f7f; - border-width: 1px; - border-style: solid; border-radius: 5px; background-color: #fff; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } - popover:backdrop { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + popover.background, .csd popover.background { + border: 1px solid gray; } + popover.background:backdrop { + background-color: #fff; box-shadow: none; } - popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar { + popover.background > list, + popover.background > .view, + textview popover.background > text, + popover.background > iconview, + popover.background > toolbar, + popover.background > searchbar { + border-style: none; background-color: transparent; } - popover separator, popover placessidebar .view separator, placessidebar .view popover separator, popover placessidebar textview text separator, placessidebar textview text popover separator, popover textview placessidebar text separator, textview placessidebar text popover separator, popover placessidebar iconview separator, placessidebar iconview popover separator, - popover placessidebar .view separator:backdrop, - placessidebar .view popover separator:backdrop, - popover placessidebar textview text separator:backdrop, - placessidebar textview text popover separator:backdrop, - popover textview placessidebar text separator:backdrop, - textview placessidebar text popover separator:backdrop, - popover placessidebar iconview separator:backdrop, - placessidebar iconview popover separator:backdrop { - color: #000; - background-color: transparent; - border: 0; } - popover button.flat, popover button.sidebar-button, - popover button.flat:hover, - popover button.sidebar-button:hover { - color: #000; - text-shadow: none; - transition: none; } - popover.magnifier, popover.osd { - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border: 1px solid #7f7f7f; - color: #fff; } - popover.magnifier button, popover.osd button { - color: white; - text-shadow: none; - border-width: 2px; - border-style: solid; - color: #fff; - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:hover, popover.osd button:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:active, popover.osd button:active { - border-width: 2px; - border-style: solid; - color: rgba(0, 0, 0, 0.8); - background-color: #fff; - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:disabled, popover.osd button:disabled { - border-width: 2px; - border-style: solid; - border-color: rgba(255, 255, 255, 0.2); - color: #7f7f7f; } + popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier { + border: 1px solid rgba(255, 255, 255, 0.1); } + popover.background separator { + margin: 3px; } + popover.background list separator { + margin: 0px; } /***************** * Notebooks and * @@ -1389,13 +1651,13 @@ notebook { notebook:backdrop { background-color: #fff; } notebook.frame { - border: 1px solid #7f7f7f; } + border: 1px solid gray; } notebook.frame:backdrop { - border-color: #8b8b8b; } + border-color: #8d8d8d; } notebook header { - background-color: #d8d8d8; } + background-color: #d9d9d9; } .frame notebook header { - border: 1px solid #7f7f7f; } + border: 1px solid gray; } .frame notebook header.top { border-bottom-width: 0; } .frame notebook header.bottom { @@ -1405,34 +1667,34 @@ notebook { .frame notebook header.left { border-right-width: 0; } .frame notebook header:backdrop { - border-color: #8b8b8b; } + border-color: #8d8d8d; } notebook header.top { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px gray; } notebook header.top:backdrop { - box-shadow: inset 0 -1px #8b8b8b; } + box-shadow: inset 0 -1px #8d8d8d; } notebook header.bottom { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px gray; } notebook header.bottom:backdrop { - box-shadow: inset 0 1px #8b8b8b; } + box-shadow: inset 0 1px #8d8d8d; } notebook header.right { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 gray; } notebook header.right:backdrop { - box-shadow: inset 1px 0 #8b8b8b; } + box-shadow: inset 1px 0 #8d8d8d; } notebook header.left { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 gray; } notebook header.left:backdrop { - box-shadow: inset -1px 0 #8b8b8b; } + box-shadow: inset -1px 0 #8d8d8d; } notebook header:backdrop { - background-color: #d6d6d6; + background-color: #d7d7d7; box-shadow: none; } notebook header tabs arrow { - color: #7f7f7f; } + color: gray; } notebook header tabs arrow:hover { - color: #3f3f3f; } + color: #404040; } notebook header tabs arrow:checked { color: #000; } notebook header tabs arrow:disabled { - color: rgba(127, 127, 127, 0.3); } + color: rgba(128, 128, 128, 0.3); } notebook header tabs arrow:backdrop { color: rgba(0, 0, 0, 0.4); } notebook header.top tab { @@ -1470,7 +1732,7 @@ notebook { background-color: transparent; outline-offset: 0; } notebook tab:hover { - border-color: #7f7f7f; } + border-color: gray; } notebook tab:checked, notebook tab:backdrop:checked { border-color: #000; } notebook tab:backdrop { @@ -1479,17 +1741,17 @@ notebook { .top notebook tab.reorderable-page { border-color: transparent; } .top notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-bottom-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-bottom-color: gray; background-color: rgba(255, 255, 255, 0.2); } .top notebook tab.reorderable-page:checked { background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-bottom-color: #000; } .top notebook tab.reorderable-page:checked:hover { background-color: rgba(255, 255, 255, 0.7); } .top notebook tab.reorderable-page:checked:backdrop { - border-color: #8b8b8b; + border-color: #8d8d8d; background-color: #fff; border-bottom-color: #000; } .top notebook tab.reorderable-page:backdrop { @@ -1498,17 +1760,17 @@ notebook { .bottom notebook tab.reorderable-page { border-color: transparent; } .bottom notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-top-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-top-color: gray; background-color: rgba(255, 255, 255, 0.2); } .bottom notebook tab.reorderable-page:checked { background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-top-color: #000; } .bottom notebook tab.reorderable-page:checked:hover { background-color: rgba(255, 255, 255, 0.7); } .bottom notebook tab.reorderable-page:checked:backdrop { - border-color: #8b8b8b; + border-color: #8d8d8d; background-color: #fff; border-top-color: #000; } .bottom notebook tab.reorderable-page:backdrop { @@ -1517,17 +1779,17 @@ notebook { .left notebook tab.reorderable-page { border-color: transparent; } .left notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-right-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-right-color: gray; background-color: rgba(255, 255, 255, 0.2); } .left notebook tab.reorderable-page:checked { background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-right-color: #000; } .left notebook tab.reorderable-page:checked:hover { background-color: rgba(255, 255, 255, 0.7); } .left notebook tab.reorderable-page:checked:backdrop { - border-color: #8b8b8b; + border-color: #8d8d8d; background-color: #fff; border-right-color: #000; } .left notebook tab.reorderable-page:backdrop { @@ -1536,17 +1798,17 @@ notebook { .right notebook tab.reorderable-page { border-color: transparent; } .right notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-left-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-left-color: gray; background-color: rgba(255, 255, 255, 0.2); } .right notebook tab.reorderable-page:checked { background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-left-color: #000; } .right notebook tab.reorderable-page:checked:hover { background-color: rgba(255, 255, 255, 0.7); } .right notebook tab.reorderable-page:checked:backdrop { - border-color: #8b8b8b; + border-color: #8d8d8d; background-color: #fff; border-left-color: #000; } .right notebook tab.reorderable-page:backdrop { @@ -1555,12 +1817,12 @@ notebook { notebook tab label { padding: 0 2px; font-weight: bold; - color: #7f7f7f; + color: gray; /* color: inherit doesn't work here */ } notebook tab label:backdrop { - color: #7f7f7f; } + color: gray; } notebook tab:hover label { - color: #3f3f3f; } + color: #404040; } notebook tab:checked label { color: #000; } notebook tab:checked label:backdrop { @@ -1576,7 +1838,7 @@ notebook { border-style: solid; color: #000; background-color: #fff; - border-color: #7f7f7f; + border-color: gray; background-image: none; border-width: 2px; background-image: none; @@ -1587,7 +1849,7 @@ notebook { background-image: none; color: white; background-color: black; - border-color: #7f7f7f; + border-color: gray; border-width: 2px; } notebook tab button:backdrop, notebook tab button:backdrop:hover { color: rgba(0, 0, 0, 0.3); @@ -1599,307 +1861,626 @@ notebook { /************** * Scrollbars * **************/ -scrollbar { - background-clip: padding-box; - background-image: none; - border-style: solid; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false } + scrollbar { + background-color: #f2f2f2; + transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; } + scrollbar.top { + border-bottom: 1px solid gray; } + scrollbar.bottom { + border-top: 1px solid gray; } + scrollbar.left { + border-right: 1px solid gray; } + scrollbar.right { + border-left: 1px solid gray; } + scrollbar:backdrop { + background-color: #f7f7f7; + border-color: #8d8d8d; } + scrollbar slider { + min-width: 14px; + min-height: 14px; + margin: -1px; + border: 4px solid transparent; + border-radius: 12px; + background-clip: padding-box; + background-color: #666666; } + scrollbar slider:hover { + background-color: #333333; } + scrollbar slider:hover:active { + background-color: black; } + scrollbar slider:backdrop { + background-color: #999999; } + scrollbar slider:disabled { + background-color: transparent; } + scrollbar.fine-tune slider { + min-width: 4px; + min-height: 4px; } + scrollbar.fine-tune.horizontal slider { + border-width: 5px 4px; } + scrollbar.fine-tune.vertical slider { + border-width: 4px 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { + margin: 0; + min-width: 3px; + min-height: 3px; + background-color: #000; + border: 1px solid white; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { + min-width: 5px; + min-height: 5px; + background-color: #000; + background-clip: padding-box; + border-radius: 100%; + border: 1px solid white; + -gtk-icon-source: none; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + margin: 0 2px; + min-width: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { + margin: 1px 2px; + min-width: 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + margin: 2px 0; + min-height: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { + margin: 2px 1px; + min-height: 5px; } + scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { + opacity: 0.8; } + scrollbar.horizontal slider { + min-width: 40px; } + scrollbar.vertical slider { + min-height: 40px; } scrollbar button { - border: none; } - -scrollbar slider { - min-width: 6px; - min-height: 64px; -} - -scrollbar.horizontal slider { - min-height: 6px; - min-width: 64px; -} + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #666666; } + scrollbar button:hover { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #333333; } + scrollbar button:active, scrollbar button:checked { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: black; } + scrollbar button:disabled { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(102, 102, 102, 0.2); } + scrollbar button:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #999999; } + scrollbar button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(153, 153, 153, 0.2); } + scrollbar.vertical button.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + scrollbar.vertical button.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + scrollbar.horizontal button.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } + scrollbar.horizontal button.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } - scrollbar slider { - border-radius: 20px; - border: 5px solid transparent; - background-color: #7f7f7f; } - scrollbar slider:backdrop, scrollbar slider:disabled { - background-color: #e5e5e5; } - scrollbar slider:hover { - background-color: #4c4c4c; } - scrollbar slider:hover:active { - background-color: #000; } - scrollbar slider.fine-tune { - border-width: 8px; } - scrollbar slider.fine-tune:hover:active { - background-color: #000; } +treeview ~ scrollbar.vertical { + border-top: 1px solid gray; + margin-top: -1px; } /********** * Switch * **********/ -switch { - font: bold condensed 9; - outline-offset: -4px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: #7f7f7f; - background-color: #cbcbcb; - box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); - /*outset not working*/ - text-shadow: 0 1px rgba(0, 0, 0, 0.1); } - switch:active { - color: white; + switch { + font-size: smaller; + font-stretch: condensed; + font-weight: bold; + outline-offset: -4px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: gray; + background-color: #cccccc; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); + /*outset not working*/ + text-shadow: 0 1px rgba(0, 0, 0, 0.1); } + switch:active { + color: white; border-color: #000; background-color: #000; text-shadow: 0 0 2px white; } switch:disabled { - color: #7f7f7f; - border-color: #7f7f7f; + color: gray; + border-color: gray; background-color: white; text-shadow: none; } switch:backdrop { color: #000; - border-color: #8b8b8b; + border-color: #8d8d8d; background-color: #fff; box-shadow: none; text-shadow: none; } switch:backdrop:active { color: #fff; - border-color: #8b8b8b; - background-color: #8b8b8b; + border-color: #8d8d8d; + background-color: #8d8d8d; box-shadow: none; } switch:backdrop:disabled, switch:backdrop:disabled:active { background-color: white; - color: #7f7f7f; - border-color: #7f7f7f; } + color: gray; + border-color: gray; } switch slider { margin: -1px; min-width: 45px; min-height: 27px; - border: 1px solid; + border: 2px solid; border-radius: 3px; border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #fff; - border-color: #7f7f7f; - box-shadow: inset 0 1px white, inset 0 -2px rgba(255, 255, 255, 0.6), inset 0 -1px #bfbfbf; } - switch slider:hover { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #7f7f7f; - background-image: none; - box-shadow: inset 0 1px white, inset 0 -2px rgba(255, 255, 255, 0.6), inset 0 -1px #bfbfbf; } - switch slider:active { - border-color: #000; } - switch slider:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - switch slider:backdrop { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - switch slider:backdrop:active { - border-color: #8b8b8b; } - switch slider:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; - background-image: none; } + border-color: gray; } + switch:hover slider { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: gray; + background-image: none; } + switch:active slider { + border: 2px solid #000; } + switch:disabled slider { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + switch:backdrop slider { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: #8d8d8d; + background-image: none; } + switch:backdrop:active slider { + border-color: #000; } + switch:backdrop:disabled slider { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } /************************* * Check and Radio items * *************************/ -GtkCheckButton.text-button, GtkRadioButton.text-button { - padding: 1px; +checkbutton.text-button, radiobutton.text-button { + padding: 2px 0; outline-offset: 0; } - -check { - color: #000; - background-image: none; - -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); } - check:hover { - color: #000; } - check:checked, check:active { - -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); } - check:checked:disabled, check:active:disabled { - color: #7f7f7f; } - check:checked:disabled:backdrop, check:active:disabled:backdrop { - color: #7f7f7f; } - check:checked:backdrop, check:active:backdrop { - color: #000; } - check:disabled { - color: #7f7f7f; } - check:disabled:backdrop { - color: #7f7f7f; } - check:indeterminate { - -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); } - check:backdrop { - color: #000; } - check:backdrop:selected { - color: #000; } - + checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { + margin-left: 4px; } + checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { + margin-right: 4px; } + checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled { + color: gray; } + checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop { + color: gray; } + +check, radio { + margin: 0 4px; + min-height: 14px; + min-width: 14px; + border: 1px solid; + -gtk-icon-source: none; + border-width: 2px; + border-style: solid; color: #000; background-image: none; - -gtk-icon-source: -gtk-icontheme("radio-symbolic"); } - radio:hover { - color: #000; } - radio:checked, radio:active { - -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); } - radio:checked:disabled, radio:active:disabled { - color: #7f7f7f; } - radio:checked:disabled:backdrop, radio:active:disabled:backdrop { - color: #7f7f7f; } - radio:checked:backdrop, radio:active:backdrop { - color: #000; } - radio:disabled { - color: #7f7f7f; } - radio:disabled:backdrop { - color: #7f7f7f; } - radio:indeterminate { - -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); } - radio:backdrop { - color: #000; } - radio:backdrop:selected { - color: #000; } - -radiobutton radio, -checkbutton check { - min-width: 16px; - min-height: 16px; - margin: 0 2px 0 2px; } - radiobutton radio:only-child, - checkbutton check:only-child { + background-color: #fff; + border-color: gray; } + check:only-child, + radio:only-child { margin: 0; } - -/************ - * GtkScale * - ************/ -scale, -scale.scale-has-marks-above.scale-has-marks-below, -scale.vertical.scale-has-marks-above.scale-has-marks-below { -/* -GtkScale-slider-length: 20; - -GtkRange-slider-width: 20;*/ - outline-offset: -9px; - -gtk-outline-radius: 4px; } - scale.fine-tune, - scale.scale-has-marks-above.scale-has-marks-below.fine-tune, - scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune { - outline-offset: -7px; - -gtk-outline-radius: 6px; } - scale.fine-tune trough, - scale.scale-has-marks-above.scale-has-marks-below.fine-tune trough, - scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune trough { - border-radius: 4px; - margin: 8px; } - scale trough slider, - scale.scale-has-marks-above.scale-has-marks-below trough slider, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider { + check:hover, + radio:hover { border-width: 2px; border-style: solid; color: #000; - background-image: none; background-color: #fff; - border-color: #7f7f7f; - border-radius: 50%; - border-color: #777777; } - scale trough slider:hover, - scale.scale-has-marks-above.scale-has-marks-below trough slider:hover, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:hover { + border-color: gray; + background-image: none; } + check:active, + radio:active { + border-width: 2px; + border-style: solid; + background-image: none; + color: white; + background-color: black; + border-color: gray; } + check:disabled, + radio:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + check:backdrop, + radio:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: #8d8d8d; + background-image: none; } + check:backdrop:disabled, + radio:backdrop:disabled { border-width: 2px; border-style: solid; - color: #000; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + row:selected check, row:selected + radio { + border-color: #000; } + .osd check, .osd + radio { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd check:hover, .osd + radio:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd check:active, .osd + radio:active { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); background-color: #fff; - border-color: #7f7f7f; - background-image: none; - border-color: #777777; - border-radius: 50%; } - scale trough slider:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough slider:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:disabled { - border-style: solid; - border-radius: 50%; - background-image: none; - box-shadow: none; } - scale trough slider:backdrop, - scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop { - border-style: solid; - border-radius: 50%; - border-color: #838383; - background-image: none; + border-color: rgba(255, 255, 255, 0.2); box-shadow: none; } - scale trough slider:backdrop:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled { + .osd check:backdrop, .osd + radio:backdrop { border-width: 2px; - border-style: solid; - color: #7f7f7f; + border-style: solid; } + .osd check:disabled, .osd + radio:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + menu menuitem check, menu menuitem + radio { + margin: 0; } + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem + radio, menu menuitem + radio:hover, menu menuitem + radio:disabled { + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + animation: none; } + +treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected, + check { + border-radius: 3px; } + treeview.view check:checked:selected, + check:checked { + -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); } + treeview.view check:indeterminate:selected, + check:indeterminate { + -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } + +treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected, + radio { + border-radius: 100%; } + treeview.view radio:checked:selected, + radio:checked { + -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); } + treeview.view radio:indeterminate:selected, + radio:indeterminate { + -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } + +@keyframes check_check { + from { + -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } + to { + -gtk-icon-transform: unset; } } +@keyframes check_radio { + from { + -gtk-icon-transform: scale(0); } + to { + -gtk-icon-transform: unset; } } +@keyframes check_indeterminate { + from { + -gtk-icon-transform: scale(0, 1); } + to { + -gtk-icon-transform: unset; } } +check:not(:indeterminate):checked { + animation: check_check 400ms; } + +radio:not(:indeterminate):checked { + animation: check_radio 400ms; } + +check:indeterminate:checked, radio:indeterminate:checked { + animation: check_indeterminate 400ms; } + +menu menuitem check:not(:indeterminate):checked, +menu menuitem radio:not(:indeterminate):checked, +menu menuitem check:indeterminate:checked:active, +menu menuitem radio:indeterminate:checked { + animation: none; } + +treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected, +treeview.view radio:selected:focus, +treeview.view radio:selected:hover, +treeview.view radio:selected { + color: #fff; } +treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop, +treeview.view radio:selected:backdrop:hover, +treeview.view radio:selected:backdrop { + color: #fff; + border-color: #fff; } +treeview.view check:selected:backdrop:disabled, +treeview.view radio:selected:backdrop:disabled { + color: gray; + border-color: gray; } +treeview.view check:selected:disabled, +treeview.view radio:selected:disabled { + color: gray; } + + /************ + * GtkScale * + ************/ +scale trough, scale fill { + border: 2px solid gray; + border-radius: 4px; + background-color: gray; + box-shadow: none; } + scale trough:disabled, scale fill:disabled { + border-color: silver; + background-color: white; } + scale trough:backdrop, scale fill:backdrop { + background-color: #b3b3b3; + border-color: #8d8d8d; } + scale trough:backdrop:disabled, scale fill:backdrop:disabled { background-color: white; - border-color: #8b8b8b; - background-image: none; } - scale trough slider:active, - scale.scale-has-marks-above.scale-has-marks-below trough slider:active, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:active { - border: 1px solid black; } - scale trough, - scale.scale-has-marks-above.scale-has-marks-below trough, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough { - margin: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: #7f7f7f; - background-color: #cbcbcb; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } - scale trough.highlight, - scale.scale-has-marks-above.scale-has-marks-below trough.highlight, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight { - border-color: #000; - background-color: #000; } - scale trough.highlight:backdrop, - scale.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop { - border-color: #7f7f7f; - background-color: #7f7f7f; - box-shadow: none; } - scale trough:disabled, scale trough.hilight:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled { - border-color: #7f7f7f; + border-color: silver; } + row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected scale trough:disabled, scale row:selected trough:disabled, row:selected scale fill:disabled, scale row:selected fill:disabled { + border-color: #000; } + .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill { + border-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0); + box-shadow: none; + outline-color: rgba(255, 255, 255, 0.2); } + .osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled { background-color: white; } - scale trough:backdrop, - scale.scale-has-marks-above.scale-has-marks-below trough:backdrop, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop { - border-color: #8b8b8b; - background-color: #bfbfbf; - box-shadow: none; } - scale trough:backdrop:disabled, scale trough .hilight:backdrop:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled { - border-color: #7f7f7f; - background-color: #fff; } + +scale highlight { + border: 2px solid #000; + border-radius: 4px; + background-color: #000; } + scale highlight:disabled { + background-color: transparent; + border-color: transparent; } + scale highlight:backdrop { + border-color: #b3b3b3; } + scale highlight:backdrop:disabled { + background-color: transparent; + border-color: transparent; } + row:selected scale highlight, scale row:selected highlight, row:selected scale highlight:disabled, scale row:selected highlight:disabled { + border-color: #000; } + .osd scale highlight, scale .osd highlight { + border-color: rgba(255, 255, 255, 0.2); } + .osd scale highlight:disabled, scale .osd highlight:disabled { + border-color: transparent; } + +scale { + min-height: 10px; + min-width: 10px; + padding: 12px; } + scale fill, + scale highlight { + margin: -1px; } + scale slider { + min-height: 18px; + min-width: 18px; + margin: -9px; } + scale.fine-tune.horizontal { + padding-top: 9px; + padding-bottom: 9px; + min-height: 16px; } + scale.fine-tune.vertical { + padding-left: 9px; + padding-right: 9px; + min-width: 16px; } + scale.fine-tune slider { + margin: -6px; } + 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: 5px; } + scale fill, scale fill:backdrop { + background-color: gray; + box-shadow: none; } + scale fill:disabled, scale fill:disabled:backdrop { + border-color: transparent; + background-color: transparent; } + .osd scale fill { + background-color: rgba(255, 255, 255, 0.4); } + .osd scale fill:disabled, .osd scale fill:disabled:backdrop { + border-color: transparent; + background-color: transparent; } + scale slider { + border-width: 2px; + border-style: solid; + color: #000; + background-image: none; + background-color: #fff; + border-color: gray; + border: 2px solid gray; + border-radius: 100%; } + scale slider:hover { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: gray; + background-image: none; } + scale slider:active { + border-color: #000; } + scale slider:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + scale slider:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: #fff; + border-color: #8d8d8d; + background-image: none; } + scale slider:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: white; + border-color: silver; + background-image: none; } + row:selected scale slider, row:selected scale slider:disabled { + border-color: #000; } + .osd scale slider { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + background-color: black; } + .osd scale slider:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd scale slider:active { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd scale slider:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd scale slider:backdrop { + border-width: 2px; + border-style: solid; } + .osd scale slider:backdrop:disabled { + border-width: 2px; + border-style: solid; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 6px; + margin-top: -12px; } + scale marks.bottom { + margin-top: 6px; + margin-bottom: -12px; } + scale marks.top { + margin-right: 6px; + margin-left: -12px; } + scale marks.bottom { + margin-left: 6px; + margin-right: -12px; } + scale.fine-tune marks.top { + margin-bottom: 6px; + margin-top: -9px; } + scale.fine-tune marks.bottom { + margin-top: 6px; + margin-bottom: -9px; } + scale.fine-tune marks.top { + margin-right: 6px; + margin-left: -9px; } + scale.fine-tune marks.bottom { + margin-left: 6px; + margin-right: -9px; } + scale.horizontal indicator { + min-height: 6px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 3px; } + scale.vertical indicator { + min-height: 1px; + min-width: 6px; } + scale.vertical.fine-tune indicator { + min-width: 3px; } /***************** * Progress bars * @@ -1909,17 +2490,17 @@ progressbar { font-size: 83%; color: #000; } progressbar:backdrop { - color: #7f7f7f; } + color: gray; } progressbar trough { border-width: 1px; border-style: solid; border-radius: 3px; - border-color: #7f7f7f; - background-color: #d2d2d2; + border-color: gray; + background-color: lightgray; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } progressbar trough:backdrop { - border-color: #8b8b8b; - background-color: #d6d6d6; + border-color: #8d8d8d; + background-color: #d7d7d7; box-shadow: 0 1px rgba(255, 255, 255, 0); } progressbar.osd trough { background-color: transparent; @@ -1956,8 +2537,8 @@ levelbar trough { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #7f7f7f; } + border-color: gray; + box-shadow: inset 0 2px 2px -2px gray; } levelbar trough:backdrop { background-color: transparent; border-style: solid; @@ -2007,44 +2588,39 @@ levelbar block.empty { .view:selected, textview text:selected, iconview:selected, calendar:selected, .view:selected:focus, textview text:selected:focus, iconview:selected:focus, calendar:focus:selected, .view:selected:hover, textview text:selected:hover, iconview:selected:hover, calendar:hover:selected, textview text selection, textview text selection:focus, -textview text selection:hover, flowbox flowboxchild:selected, label selection, label selection:focus, label selection:hover, label selection:backdrop, entry selection -entry selection:focus, spinbutton selection -entry selection:focus, entry selection -spinbutton selection:focus, spinbutton selection -spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, -.menuitem.button.flat:hover, -.menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar textview text:selected, textview placessidebar text:selected, placessidebar iconview:selected, placessidebar calendar:selected { +textview text selection:hover, flowbox flowboxchild:selected, label selection, label selection:focus, label selection:hover, label selection:backdrop, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, +entry selection:focus, +entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, +popover.background radiobutton:selected, +.menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected { background-color: #000; color: #fff; outline-color: rgba(255, 255, 255, 0.3); } - .view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, entry selection - entry selection:backdrop:focus, spinbutton selection - entry selection:backdrop:focus, entry selection - spinbutton selection:backdrop:focus, spinbutton selection - spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected, - .menuitem.button.flat:backdrop:hover, + .view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, spinbutton:not(.vertical) selection:backdrop, + entry selection:backdrop, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, + popover.background radiobutton:backdrop:selected, .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { - background-color: #7f7f7f; + background-color: gray; color: #fff; } /********** - * rames * + * frames * **********/ frame border, .frame { - border: 1px solid #7f7f7f; + border: 1px solid gray; padding: 0; } frame border.flat, .frame.flat { border-style: none; } frame border:backdrop, .frame:backdrop { - border-color: #8b8b8b; } + border-color: #8d8d8d; } -actionbar box { +actionbar > revealer > box { padding: 6px; border-width: 1px 0 0; - border-color: #7f7f7f; + border-color: gray; border-style: solid none none; } placessidebar .frame, @@ -2055,7 +2631,7 @@ scrolledwindow viewport.frame { border-style: none; } placessidebar overshoot.top, scrolledwindow overshoot.top { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(black), to(transparent)), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center top; @@ -2064,7 +2640,7 @@ scrolledwindow overshoot.top { box-shadow: none; } placessidebar overshoot.top:backdrop, scrolledwindow overshoot.top:backdrop { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#8b8b8b), to(rgba(139, 139, 139, 0))); + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center top; @@ -2073,7 +2649,7 @@ scrolledwindow overshoot.top { box-shadow: none; } placessidebar overshoot.bottom, scrolledwindow overshoot.bottom { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(black), to(transparent)), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; @@ -2082,7 +2658,7 @@ scrolledwindow overshoot.bottom { box-shadow: none; } placessidebar overshoot.bottom:backdrop, scrolledwindow overshoot.bottom:backdrop { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#8b8b8b), to(rgba(139, 139, 139, 0))); + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center bottom; @@ -2091,7 +2667,7 @@ scrolledwindow overshoot.bottom { box-shadow: none; } placessidebar overshoot.left, scrolledwindow overshoot.left { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(black), to(transparent)), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; @@ -2100,7 +2676,7 @@ scrolledwindow overshoot.left { box-shadow: none; } placessidebar overshoot.left:backdrop, scrolledwindow overshoot.left:backdrop { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#8b8b8b), to(rgba(139, 139, 139, 0))); + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: left center; @@ -2109,7 +2685,7 @@ scrolledwindow overshoot.left { box-shadow: none; } placessidebar overshoot.right, scrolledwindow overshoot.right { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(black), to(transparent)), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; @@ -2118,7 +2694,7 @@ scrolledwindow overshoot.right { box-shadow: none; } placessidebar overshoot.right:backdrop, scrolledwindow overshoot.right:backdrop { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#8b8b8b), to(rgba(139, 139, 139, 0))); + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: right center; @@ -2167,24 +2743,16 @@ scrolledwindow undershoot.right { background-repeat: repeat-y; background-origin: content-box; background-position: right center; } -placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough, -scrolledwindow junction, -scrolledwindow scrollbar trough, -scrollbar scrolledwindow trough { +placessidebar junction, +scrolledwindow junction { border-color: transparent; background-color: #f2f2f2; } - placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar trough:backdrop, - scrolledwindow junction:backdrop, - scrolledwindow scrollbar trough:backdrop, - scrollbar scrolledwindow trough:backdrop { + placessidebar junction:backdrop, + scrolledwindow junction:backdrop { background-color: transparent; } -separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text separator, placessidebar iconview separator, -placessidebar .view separator:backdrop, -placessidebar textview text separator:backdrop, -textview placessidebar text separator:backdrop, -placessidebar iconview separator:backdrop { - background: #7f7f7f; +separator { + background: gray; min-width: 1px; min-height: 1px; } @@ -2193,10 +2761,10 @@ placessidebar iconview separator:backdrop { *********/ list { background-color: #fff; - border-color: #7f7f7f; } + border-color: gray; } list:backdrop { background-color: #fff; - border-color: #8b8b8b; } + border-color: #8d8d8d; } list row { padding: 2px; } @@ -2216,7 +2784,7 @@ row.activatable:disabled:checked { row.activatable { color: #000; } - row.activatable:hover, placessidebar .has-open-popup { + row.activatable:hover { background-color: #f2f2f2; } row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } @@ -2225,10 +2793,10 @@ row.activatable { color: #fff; } row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } - row.activatable:selected:hover, placessidebar .has-open-popup:selected { + row.activatable:selected:hover { background-color: black; } row.activatable:selected:backdrop { - background-color: #7f7f7f; } + background-color: gray; } row.activatable:selected .button.flat { color: #fff; } row.activatable:selected .button.flat:hover { @@ -2244,8 +2812,7 @@ row, row.activatable { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } row:hover, - row.activatable:hover, - placessidebar .has-open-popup { + row.activatable:hover { transition: none; } /********************* @@ -2256,12 +2823,15 @@ row.activatable { padding: 10px; border-width: 0 1px 1px; border-style: solid; - border-color: #7f7f7f; + border-color: gray; border-radius: 0 0 6px 6px; - background-image: linear-gradient(to bottom, #efefef 5%, #f4f4f4); } + background-image: linear-gradient(to bottom, #f0f0f0 5%, whitesmoke); } .app-notification .button, .app-notification.frame .button { padding: 6px; } + .app-notification border, + .app-notification.frame border { + border-width: 0; } /************* * Expanders * @@ -2281,22 +2851,22 @@ expander arrow { * Calendar * ***********/ calendar { - border: 1px solid #7f7f7f; } + border: 1px solid gray; } calendar.button { padding: 0 4px; color: #999999; } calendar.button:hover { color: #000; } calendar.button:backdrop, calendar.button:backdrop:hover { - color: #7f7f7f; } + color: gray; } calendar.view { border-radius: 2px; } calendar.header { background: linear-gradient(to bottom, white, #fafafa); - border-bottom-color: #bfbfbf; } + border-bottom-color: silver; } calendar.header:backdrop { background-image: linear-gradient(to bottom, #fff); - border-bottom-color: #c5c5c5; } + border-bottom-color: #c6c6c6; } calendar:indeterminate, calendar:indeterminate:backdrop { color: alpha(currentColor,0.55); } calendar.highlight, calendar.highlight:backdrop { @@ -2322,13 +2892,13 @@ messagedialog.csd { color: #000; background-image: none; background-color: #fff; - border-color: #7f7f7f; } + border-color: gray; } messagedialog.csd .dialog-action-area button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #7f7f7f; + border-color: gray; background-image: none; } messagedialog.csd .dialog-action-area button:active { border-width: 2px; @@ -2336,31 +2906,27 @@ messagedialog.csd { background-image: none; color: white; background-color: black; - border-color: #7f7f7f; } + border-color: gray; } messagedialog.csd .dialog-action-area button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } messagedialog.csd .dialog-action-area button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: #8d8d8d; + background-image: none; } messagedialog.csd .dialog-action-area button:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #8b8b8b; + border-color: silver; background-image: none; } messagedialog.csd .dialog-action-area button.suggested-action { border-width: 2px; @@ -2389,25 +2955,21 @@ messagedialog.csd { color: white; background-color: #4a90d9; border-color: #4a90d9; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + background-image: none; } messagedialog.csd .dialog-action-area button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #8b8b8b; + border-color: silver; background-image: none; } messagedialog.csd .dialog-action-area button.suggested-action:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } messagedialog.csd .dialog-action-area button.destructive-action { border-width: 2px; border-style: solid; @@ -2435,25 +2997,21 @@ messagedialog.csd { color: white; background-color: #ef2929; border-color: #ef2929; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + background-image: none; } messagedialog.csd .dialog-action-area button.destructive-action:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #8b8b8b; + border-color: silver; background-image: none; } messagedialog.csd .dialog-action-area button.destructive-action:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } messagedialog.csd .dialog-action-area button, messagedialog.csd .dialog-action-area button:hover, messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:disabled, messagedialog.csd .dialog-action-area button:backdrop, messagedialog.csd .dialog-action-area button:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area button.suggested-action:hover, messagedialog.csd .dialog-action-area button.suggested-action:active, messagedialog.csd .dialog-action-area button.suggested-action:backdrop, messagedialog.csd .dialog-action-area button.suggested-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action:disabled, messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.destructive-action:hover, messagedialog.csd .dialog-action-area button.destructive-action:active, messagedialog.csd .dialog-action-area button.destructive-action:backdrop, messagedialog.csd .dialog-action-area button.destructive-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.destructive-action:disabled { border-right-style: none; border-bottom-style: none; } @@ -2463,10 +3021,16 @@ messagedialog.csd { border-left-style: none; border-bottom-left-radius: 7px; } -GtkFileChooserDialog .dialog-action-box { - border-top: 1px solid #7f7f7f; } - GtkFileChooserDialog .dialog-action-box:backdrop { - border-top-color: #8b8b8b; } +filechooser .dialog-action-box { + border-top: 1px solid gray; } + filechooser .dialog-action-box:backdrop { + border-top-color: #8d8d8d; } +filechooser #pathbarbox { + border-bottom: 1px solid #fff; } + +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; } /*********** * Sidebar * @@ -2476,106 +3040,100 @@ GtkFileChooserDialog .dialog-action-box { .sidebar:backdrop { background-color: #fff; } .sidebar > scrolledwindow > .frame { - border-right: 1px solid #7f7f7f; } + border-right: 1px solid gray; } .sidebar > scrolledwindow > .frame:dir(rtl) { border-right: none; - border-left: 1px solid #7f7f7f; } + border-left: 1px solid gray; } +stacksidebar row { + padding: 10px 4px; } + stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; } + stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; } + +/**************** + * File chooser * + ****************/ +placessidebar > viewport.frame { + border-style: none; } placessidebar row { + min-height: 36px; padding: 0px; } placessidebar row > revealer { - padding: 4px 14px 4px 12px; } + padding: 0 14px; } placessidebar row image.sidebar-icon { - opacity: 0.9; } + opacity: 0.7; } placessidebar row image.sidebar-icon:dir(ltr) { padding-right: 8px; } placessidebar row image.sidebar-icon:dir(rtl) { padding-left: 8px; } - placessidebar row label .sidebar-label:dir(ltr) { + placessidebar row label.sidebar-label:dir(ltr) { padding-right: 2px; } - placessidebar row label .sidebar-label:dir(rtl) { + placessidebar row label.sidebar-label:dir(rtl) { padding-left: 2px; } button.sidebar-button { + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; border-radius: 100%; -gtk-outline-radius: 100%; } - button.sidebar-button.image-button { - padding: 5px; } button.sidebar-button:not(:hover):not(:active) > image, button.sidebar-button:backdrop > image { - opacity: 0.9; } -placessidebar .view, placessidebar textview text, textview placessidebar text, placessidebar iconview { - color: #000; - background-color: transparent; } - placessidebar .view .image, placessidebar textview text .image, textview placessidebar text .image, placessidebar iconview .image { - color: #4c4c4c; } - placessidebar .view .image:selected, placessidebar textview text .image:selected, textview placessidebar text .image:selected, placessidebar iconview .image:selected { - color: #e5e5e5; } + opacity: 0.7; } + placessidebar row:selected:active { + box-shadow: none; } + placessidebar row.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image(#000); + background-clip: content-box; } + placessidebar row.sidebar-new-bookmark-row { + color: #000; } + placessidebar row:drop(active):not(:disabled) { + color: #000; + box-shadow: inset 0 1px #000, inset 0 -1px #000; } + placessidebar row:drop(active):not(:disabled):selected { + color: #fff; + background-color: #000; } -stacksidebar row { - padding: 10px 4px; } - stacksidebar row > label { - padding-left: 6px; - padding-right: 6px; } - stacksidebar row.needs-attention > label { - background-size: 6px 6px, 0 0; } +placesview .server-list-button > image { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(0turn); } +placesview .server-list-button:checked > image { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(-0.5turn); } +placesview row.activatable:hover { + background-color: transparent; } /********* * Paned * *********/ -paned separator, paned placessidebar .view separator, placessidebar .view paned separator, paned placessidebar textview text separator, placessidebar textview text paned separator, paned textview placessidebar text separator, textview placessidebar text paned separator, paned placessidebar iconview separator, placessidebar iconview paned separator, -paned placessidebar .view separator:backdrop, -placessidebar .view paned separator:backdrop, -paned placessidebar textview text separator:backdrop, -placessidebar textview text paned separator:backdrop, -paned textview placessidebar text separator:backdrop, -textview placessidebar text paned separator:backdrop, -paned placessidebar iconview separator:backdrop, -placessidebar iconview paned separator:backdrop { +paned separator { min-width: 1px; min-height: 1px; - background-image: linear-gradient(to bottom, #7f7f7f); } + background-image: linear-gradient(to bottom, gray); } paned separator:backdrop { - background-image: linear-gradient(to bottom, #8b8b8b); } + background-image: linear-gradient(to bottom, #8d8d8d); } paned:dir(ltr).horizontal separator { margin: 0 -8px 0 0; padding: 0 8px 0 0; } paned:dir(rtl).horizontal separator { margin: 0 0 0 -8px; padding: 0 0 0 8px; } -paned.vertical separator, -paned.vertical placessidebar .view separator:backdrop, -placessidebar .view paned.vertical separator:backdrop, -paned.vertical placessidebar textview text separator:backdrop, -placessidebar textview text paned.vertical separator:backdrop, -paned.vertical textview placessidebar text separator:backdrop, -textview placessidebar text paned.vertical separator:backdrop, -paned.vertical placessidebar iconview separator:backdrop, -placessidebar iconview paned.vertical separator:backdrop { +paned.vertical separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; } -paned separator:selected, -paned placessidebar .view separator:selected:backdrop, -placessidebar .view paned separator:selected:backdrop, -paned placessidebar textview text separator:selected:backdrop, -placessidebar textview text paned separator:selected:backdrop, -paned textview placessidebar text separator:selected:backdrop, -textview placessidebar text paned separator:selected:backdrop, -paned placessidebar iconview separator:selected:backdrop, -placessidebar iconview paned separator:selected:backdrop { +paned separator:selected { background-color: #000; } -paned separator.wide, -paned placessidebar .view separator.wide:backdrop, -placessidebar .view paned separator.wide:backdrop, -paned placessidebar textview text separator.wide:backdrop, -placessidebar textview text paned separator.wide:backdrop, -paned textview placessidebar text separator.wide:backdrop, -textview placessidebar text paned separator.wide:backdrop, -paned placessidebar iconview separator.wide:backdrop, -placessidebar iconview paned separator.wide:backdrop { +paned separator.wide { min-width: 5px; min-height: 5px; background-color: transparent; border-style: none solid; - border-color: #7f7f7f; + border-color: gray; border-width: 1px; } /************** @@ -2629,12 +3187,10 @@ infobar { .error button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: silver; + background-image: none; } .info button:backdrop, .question button:backdrop, .warning button:backdrop, @@ -2644,18 +3200,16 @@ infobar { color: #fff; background-color: #000; border-color: #000; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + background-image: none; } .info button:backdrop:disabled, .question button:backdrop:disabled, .warning button:backdrop:disabled, .error button:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; + color: gray; background-color: white; - border-color: #8b8b8b; + border-color: silver; background-image: none; } .info label:selected, .info label:selected:focus, @@ -2757,23 +3311,21 @@ colorswatch { color: #000; background-image: none; background-color: #fff; - border-color: #7f7f7f; } + border-color: gray; } colorswatch#add-color-button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #7f7f7f; + border-color: gray; background-image: none; } colorswatch#add-color-button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: #8d8d8d; + background-image: none; } colorswatch#add-color-button overlay { border-width: 0; background: none; } @@ -2811,7 +3363,7 @@ decoration { border-radius: 3px; margin: 10px; background-color: #fff; - border: solid 2px #000; + border: solid 2px #8d8d8d; box-shadow: none; } /* workaround to avoid unwanted black frames if switching compositor on/off */ @@ -2820,38 +3372,6 @@ decoration { box-shadow: none; } -button.titlebutton { - padding: 8px; - border-color: transparent; - background-image: none; - transition-property: border, box-shadow, color; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - button.titlebutton:hover { - border-width: 2px; - border-style: solid; - color: #000; - background-image: none; - background-color: #fff; - border-color: #7f7f7f; } - button.titlebutton:active { - border-width: 2px; - border-style: solid; - background-image: none; - color: white; - background-color: black; - border-color: #7f7f7f; } - button.titlebutton:backdrop { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; - border-color: transparent; - transition-property: border, box-shadow, color; } - /********************** * Touch Copy & Paste * *********************/ @@ -2910,15 +3430,13 @@ cursor-handle { color: #fff; background-image: none; background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } + border-color: rgba(255, 255, 255, 0.2); } .touch-selection button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } + border-color: rgba(255, 255, 255, 0.2); } .touch-selection button:active, .touch-selection button:checked { border-width: 2px; border-style: solid; @@ -2930,7 +3448,7 @@ cursor-handle { border-width: 2px; border-style: solid; border-color: rgba(255, 255, 255, 0.2); - color: #7f7f7f; } + color: gray; } .touch-selection button:backdrop { border-width: 2px; border-style: solid; } @@ -3016,21 +3534,34 @@ cursor-handle { button.circular { border-radius: 20px; -gtk-outline-radius: 20px; } + button.circular label { + padding: 0; } + row:selected button.circular { + color: #fff; } + row:selected button.circular:hover { + color: #000; } + row:selected button.circular:active { + color: #fff; } -button.circular label { - padding: 0; } - -frame.keycap { - background-color: #fefefe; - border: 1px solid #cecece; +.keycap { + min-width: 18px; + min-height: 25px; + margin-top: 3px; + padding-bottom: 2px; + padding-left: 6px; + padding-right: 6px; + color: #000; + background-color: #fff; + border: 2px solid; + border-color: gray; border-radius: 5px; - box-shadow: 0px 1px 0px #fff inset, 0px -2px 0px #dedede inset; - color: #555753; - padding: 3px 8px 3px 8px; } + box-shadow: inset 0 -3px silver, inset 0 -2px #fff, inset 0 0 0 1px #fff; + font-size: smaller; } *:drop(active):focus, *:drop(active) { - border: 1px solid black; } + border-color: #000; + box-shadow: inset 0 0 0 2px #000; } stackswitcher button.text-button { min-width: 100px; } diff --git a/desktop-themes/ContrastHigh/gtk-3.0/gtk.css b/desktop-themes/ContrastHigh/gtk-3.0/gtk.css index 0e6b04ab..ef73ef70 100644 --- a/desktop-themes/ContrastHigh/gtk-3.0/gtk.css +++ b/desktop-themes/ContrastHigh/gtk-3.0/gtk.css @@ -5,15 +5,15 @@ @define-color theme_selected_bg_color #000; @define-color theme_selected_fg_color #fff; @define-color insensitive_bg_color white; -@define-color insensitive_fg_color #7f7f7f; +@define-color insensitive_fg_color gray; @define-color insensitive_base_color #fff; @define-color theme_unfocused_fg_color #000; @define-color theme_unfocused_bg_color #fff; @define-color theme_unfocused_base_color #fff; @define-color theme_unfocused_selected_bg_color #000; @define-color theme_unfocused_selected_fg_color #fff; -@define-color borders #7f7f7f; -@define-color unfocused_borders #8b8b8b; +@define-color borders gray; +@define-color unfocused_borders #8d8d8d; @define-color warning_color #f57900; @define-color error_color #cc0000; @define-color success_color #73d216; diff --git a/desktop-themes/ContrastHigh/gtk-3.0/settings.ini b/desktop-themes/ContrastHigh/gtk-3.0/settings.ini index 4c46c2fc..0fe26447 100644 --- a/desktop-themes/ContrastHigh/gtk-3.0/settings.ini +++ b/desktop-themes/ContrastHigh/gtk-3.0/settings.ini @@ -1,2 +1,3 @@ [Settings] +gtk-color-scheme = "base_color:#ffffff\nbg_color:#ffffff\ntooltip_bg_color:#000000\nselected_bg_color:#000000\ntext_color:#000000\nfg_color:#000000;\ntooltip_fg_color:#ffffff\nselected_fg_color:#ffffff" gtk-visible-focus = automatic diff --git a/desktop-themes/ContrastHigh/metacity-1/metacity-theme-1.xml b/desktop-themes/ContrastHigh/metacity-1/metacity-theme-1.xml index b8b410df..11a8c70e 100644 --- a/desktop-themes/ContrastHigh/metacity-1/metacity-theme-1.xml +++ b/desktop-themes/ContrastHigh/metacity-1/metacity-theme-1.xml @@ -84,7 +84,7 @@ </draw_ops> <draw_ops name="minimize_button"> - <line color="gtk:fg[NORMAL]" + <line color="gtk:bg[NORMAL]" x1="ButtonIPad" y1="height - ButtonIPad - ThickLineWidth + 1" x2="width - ButtonIPad" @@ -97,9 +97,9 @@ </draw_ops> <draw_ops name="maximize_button"> - <rectangle color="gtk:fg[NORMAL]" filled="false" + <rectangle color="gtk:bg[NORMAL]" filled="false" x="ButtonIPad" y="ButtonIPad" width="width-ButtonIPad*2-1" height="height-ButtonIPad*2-1"/> - <line color="gtk:fg[NORMAL]" width="3" + <line color="gtk:bg[NORMAL]" width="3" x1="ButtonIPad" y1="ButtonIPad+1" x2="width-ButtonIPad" y2="ButtonIPad+1"/> </draw_ops> @@ -108,9 +108,9 @@ </draw_ops> <draw_ops name="mini_window_icon"> - <rectangle color="gtk:bg[NORMAL]" filled="true" + <rectangle color="gtk:fg[NORMAL]" filled="true" x="0" y="0" width="width-1" height="height-1"/> - <rectangle color="gtk:fg[NORMAL]" filled="false" + <rectangle color="gtk:bg[NORMAL]" filled="false" x="0" y="0" width="width-1" height="height-1"/> <line color="gtk:fg[NORMAL]" width="2" x1="0" y1="1" x2="width" y2="1"/> @@ -132,11 +132,11 @@ </draw_ops> <draw_ops name="close_button"> - <line color="gtk:fg[NORMAL]" + <line color="gtk:bg[NORMAL]" x1="ButtonIPad" y1="ButtonIPad" x2="width - ButtonIPad - 1" y2="height - ButtonIPad - 1" width="1"/> - <line color="gtk:fg[NORMAL]" + <line color="gtk:bg[NORMAL]" x1="ButtonIPad" y1="height - ButtonIPad - 1" x2="width - ButtonIPad - 1" y2="ButtonIPad" width="1"/> @@ -164,7 +164,7 @@ </draw_ops> <draw_ops name="focus_outline"> - <rectangle color="gtk:fg[NORMAL]" + <rectangle color="gtk:bg[NORMAL]" x="left_width-1" y="top_height-1" width="width-left_width-right_width+1" height="height-top_height-bottom_height+1"/> @@ -212,7 +212,7 @@ <draw_ops name="title_text_with_icon"> <clip x="0" y="0" width="width-SpacerWidth" height="height"/> - <title color="gtk:fg[NORMAL]" + <title color="gtk:bg[NORMAL]" x="(0 `max` (width-title_width-mini_icon_width-IconTitleSpacing)) / 2 + mini_icon_width + IconTitleSpacing" y="((height - title_height) / 2) `max` 0"/> <icon x="(0 `max` (width-title_width-mini_icon_width-IconTitleSpacing)) / 2" diff --git a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css index 38674e13..94d6b656 100644 --- a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css @@ -48,8 +48,8 @@ background-color: black; color: #fff; } .gtkstyle-fallback:disabled { - background-color: #060606; - color: #7f7f7f; } + background-color: #070707; + color: gray; } .gtkstyle-fallback:selected { background-color: #aaa; color: #fff; } @@ -75,7 +75,17 @@ flowbox flowboxchild { outline-offset: -2px; } label:disabled, label:backdrop:disabled { - color: #7f7f7f; } + color: gray; } + +popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.osd, .csd popover.background.osd, .osd { + color: #fff; + border: none; + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + outline-color: rgba(255, 255, 255, 0.3); } + popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; } /********************* * Spinner Animation * @@ -96,210 +106,235 @@ spinner { /**************** * Text Entries * ****************/ -entry, spinbutton { - padding: 7px 4px; +spinbutton:not(.vertical), +entry { + min-height: 32px; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; border-radius: 3px; - border-width: 1px; - transition: all 200ms ease-out; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #080808; } - entry.flat, entry.flat:focus, spinbutton.flat, spinbutton.flat:focus { - padding: 2px; + border-color: gray; + box-shadow: inset 0 2px 2px -2px #090909; } + spinbutton:not(.vertical) image.left, + entry image.left { + padding-left: 0; + padding-right: 6px; } + spinbutton:not(.vertical) image.right, + entry image.right { + padding-left: 6px; + padding-right: 0; } + spinbutton:not(.vertical) undershoot.left, + entry undershoot.left { background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #080808; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-left: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: left center; border: none; + box-shadow: none; } + spinbutton:not(.vertical) undershoot.right, + entry undershoot.right { + background-color: transparent; + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); + padding-right: 1px; + background-size: 1px 10px; + background-repeat: repeat-y; + background-origin: content-box; + background-position: right center; + border: none; + box-shadow: none; } + spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), + entry.flat:focus, + entry.flat { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; border-radius: 0; } - entry:focus, spinbutton:focus { + spinbutton:focus:not(.vertical), + entry:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); border-color: #aaa; - box-shadow: inset 0 2px 2px -2px #080808, inset 0 0 2px 1px #2f2f2f; } - entry:disabled, spinbutton:disabled { + box-shadow: inset 0 2px 2px -2px #090909, inset 0 0 0 1px #aaa; } + spinbutton:disabled:not(.vertical), + entry:disabled { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, #060606); + color: gray; + border-color: gray; + background-image: linear-gradient(to bottom, #070707); box-shadow: none; } - entry:backdrop, spinbutton:backdrop { + spinbutton:backdrop:not(.vertical), + entry:backdrop { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); color: #fff; background-image: linear-gradient(to bottom, #111); box-shadow: 0 1px rgba(255, 255, 255, 0); } - entry:backdrop:disabled, spinbutton:backdrop:disabled { + spinbutton:backdrop:disabled:not(.vertical), + entry:backdrop:disabled { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; + color: gray; background-image: linear-gradient(to bottom, #000); box-shadow: 0 1px rgba(255, 255, 255, 0); } - entry selection, entry selection:backdrop, spinbutton selection, spinbutton selection:backdrop { - background-color: #aaa; - color: #fff; } - entry progress, spinbutton progress { - margin: 1px; - border-radius: 0; - border-width: 0 0 2px; - border-color: #aaa; - border-style: solid; - background-image: none; - background-color: transparent; - box-shadow: none; } - entry progress:backdrop, spinbutton progress:backdrop { - background-color: transparent; } - .linked entry:first-child, .linked spinbutton:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .linked entry:first-child:dir(rtl), .linked spinbutton:first-child:dir(rtl) { - border-right-style: none; } - .linked entry:last-child, .linked spinbutton:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-style: none; } - .linked entry:last-child:dir(rtl), .linked spinbutton:last-child:dir(rtl) { - border-left-style: solid; } - .linked.vertical entry, .linked.vertical spinbutton { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #080808; - background-image: linear-gradient(to bottom, #111); - border-bottom-color: #323232; - box-shadow: none; } - .linked.vertical entry:focus, .linked.vertical spinbutton:focus { - border-color: #aaa; - box-shadow: inset 0 0 0 1px rgba(170, 170, 170, 0.15), 0 -1px 0 0 #aaa; } - .linked.vertical entry:disabled, .linked.vertical spinbutton:disabled { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, #060606); - box-shadow: none; - border-bottom-color: #323232; } - .linked.vertical entry:disabled:backdrop, .linked.vertical spinbutton:disabled:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - background-image: linear-gradient(to bottom, #000); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: #2e2e2e; } - .linked.vertical entry:backdrop, .linked.vertical spinbutton:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #fff; - background-image: linear-gradient(to bottom, #111); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: #2e2e2e; } - .linked.vertical entry:first-child, .linked.vertical spinbutton:first-child { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #080808; - border-bottom-color: #323232; } - .linked.vertical entry:first-child:focus, .linked.vertical spinbutton:first-child:focus { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #aaa; - box-shadow: inset 0 2px 2px -2px #080808, inset 0 0 2px 1px #2f2f2f; } - .linked.vertical entry:first-child:disabled, .linked.vertical spinbutton:first-child:disabled { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, #060606); - box-shadow: none; - border-bottom-color: #2e2e2e; } - .linked.vertical entry:first-child:disabled:backdrop, .linked.vertical spinbutton:first-child:disabled:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - background-image: linear-gradient(to bottom, #000); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: #2e2e2e; - border-top-style: solid; } - .linked.vertical entry:first-child:backdrop, .linked.vertical spinbutton:first-child:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #fff; - background-image: linear-gradient(to bottom, #111); - box-shadow: 0 1px rgba(255, 255, 255, 0); - border-bottom-color: #2e2e2e; } - .linked.vertical entry:last-child, .linked.vertical spinbutton:last-child { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #080808; - border-top-width: 0; - background-image: linear-gradient(to bottom, #111); - box-shadow: none; } - .linked.vertical entry:last-child:focus, .linked.vertical spinbutton:last-child:focus { - border-color: #aaa; - box-shadow: inset 0 0 0 1px rgba(170, 170, 170, 0.15), 0 -1px 0 0 #aaa; } - .linked.vertical entry:last-child:disabled, .linked.vertical spinbutton:last-child:disabled { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - border-color: #7f7f7f; - background-image: linear-gradient(to bottom, #060606); - box-shadow: none; } - .linked.vertical entry:last-child:disabled:backdrop, .linked.vertical spinbutton:last-child:disabled:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #7f7f7f; - background-image: linear-gradient(to bottom, #000); - box-shadow: 0 1px rgba(255, 255, 255, 0); } - .linked.vertical entry:last-child:backdrop, .linked.vertical spinbutton:last-child:backdrop { - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, #090909, #111 90%); - color: #fff; - background-image: linear-gradient(to bottom, #111); - box-shadow: 0 1px rgba(255, 255, 255, 0); } - entry.error, spinbutton.error { + spinbutton.error:not(.vertical), + entry.error { color: #cc0000; - border-color: #cc0000; } - entry.error:focus, spinbutton.error:focus { + border-color: #1a0000; } + spinbutton.error:focus:not(.vertical), + entry.error:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); border-color: #cc0000; - box-shadow: inset 0 2px 2px -2px #080808, inset 0 0 2px 1px #360d0d; } - entry.error:selected, entry.error:selected:focus, spinbutton.error:selected, spinbutton.error:selected:focus { + box-shadow: inset 0 2px 2px -2px #090909, inset 0 0 0 1px #cc0000; } + spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), + entry.error:selected:focus, + entry.error:selected { background-color: #cc0000; } - entry.warning, spinbutton.warning { + spinbutton.warning:not(.vertical), + entry.warning { color: #f57900; - border-color: #f57900; } - entry.warning:focus, spinbutton.warning:focus { + border-color: #432100; } + spinbutton.warning:focus:not(.vertical), + entry.warning:focus { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); border-color: #f57900; - box-shadow: inset 0 2px 2px -2px #080808, inset 0 0 2px 1px #3e250d; } - entry.warning:selected, entry.warning:selected:focus, spinbutton.warning:selected, spinbutton.warning:selected:focus { + box-shadow: inset 0 2px 2px -2px #090909, inset 0 0 0 1px #f57900; } + spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), + entry.warning:selected:focus, + entry.warning:selected { background-color: #f57900; } + spinbutton:not(.vertical) image, + entry image { + color: #cfcfcf; } + spinbutton:not(.vertical) image:hover, + entry image:hover { + color: #fff; } + spinbutton:not(.vertical) image:active, + entry image:active { + color: #aaa; } + spinbutton:not(.vertical) image:backdrop, + entry image:backdrop { + color: #cfcfcf; } + spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), + entry:drop(active):focus, + entry:drop(active) { + border-color: #fff; + box-shadow: inset 0 0 0 1px #fff; } + .osd spinbutton:not(.vertical), .osd + entry { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #090909, #111 90%); } + .osd spinbutton:focus:not(.vertical), .osd + entry:focus { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #090909, #111 90%); } + .osd spinbutton:backdrop:not(.vertical), .osd + entry:backdrop { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #090909, #111 90%); } + .osd spinbutton:disabled:not(.vertical), .osd + entry:disabled { + background-color: transparent; + border-style: solid; + background-image: linear-gradient(to bottom, #090909, #111 90%); } +spinbutton:not(.vertical) progress, +entry progress { + margin: 2px -6px; + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: #aaa; + border-style: solid; + box-shadow: none; } + spinbutton:not(.vertical) progress:backdrop, + entry progress:backdrop { + background-color: transparent; } +.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:focus + button, .linked:not(.vertical) > +entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + +entry, .linked:not(.vertical) > +entry:focus + +entry { + border-left-color: #aaa; } +.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:drop(active) + button, .linked:not(.vertical) > +entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + +entry, .linked:not(.vertical) > +entry:drop(active) + +entry { + border-left-color: #fff; } +.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > +entry:not(:disabled) + entry:not(:disabled), .linked.vertical > +entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { + border-top-color: #323232; + background-image: linear-gradient(to bottom, #111); } + .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > + entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > + entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { + border-top-color: #2e2e2e; + background-image: linear-gradient(to bottom, #111); } +.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > +entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > +entry:disabled + entry:disabled { + border-top-color: #323232; } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > +entry + spinbutton:focus:not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:focus:not(:only-child) { + border-top-color: #aaa; } +.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > +entry + spinbutton:drop(active):not(:only-child):not(.vertical), +.linked.vertical > +entry + entry:drop(active):not(:only-child) { + border-top-color: #fff; } +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:focus:not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:focus:not(:only-child) + entry, +.linked.vertical > +entry:focus:not(:only-child) + button, +.linked.vertical > +entry:focus:not(:only-child) + combobox > box > button.combo { + border-top-color: #aaa; } +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > +entry:drop(active):not(:only-child) + spinbutton:not(.vertical), +.linked.vertical > +entry:drop(active):not(:only-child) + entry, +.linked.vertical > +entry:drop(active):not(:only-child) + button, +.linked.vertical > +entry:drop(active):not(:only-child) + combobox > box > button.combo { + border-top-color: #fff; } /*********** * Buttons * @@ -310,228 +345,481 @@ entry, spinbutton { to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#aaa), to(transparent)); } } -button, -button.default, -button.text-button.default, -button.text-button.default:focus, -button:focus, -button:focus:hover, -button.default:focus { +button.titlebutton, button { + min-height: 24px; + min-width: 16px; + padding: 4px 8px; + border: 1px solid; + border-radius: 3px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: #000; + border-color: gray; } + button.sidebar-button, button.titlebutton, button.flat { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + transition: none; } + button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-duration: 500ms; } + button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: transparent; + background-image: none; + border-color: transparent; } + button.titlebutton:hover, button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: #000; + border-color: gray; + background-image: none; + -gtk-icon-effect: highlight; } + button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { + border-width: 2px; + border-style: solid; + background-image: none; + color: black; + background-color: white; + border-color: gray; + transition-duration: 50ms; } + button.titlebutton:backdrop, button:backdrop { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: #000; + border-color: #737373; + background-image: none; + -gtk-icon-effect: none; } + button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked { + border-width: 2px; + border-style: solid; + color: black; + background-color: #737373; + border-color: #737373; + background-image: none; } + button.titlebutton:backdrop:disabled, button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: #494949; + background-image: none; + background-color: #090909; } + button.titlebutton:disabled, button:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: #494949; + background-image: none; + background-color: #070707; } + button.image-button.titlebutton, button.image-button { + min-width: 24px; + padding-left: 4px; + padding-right: 4px; } + button.text-button.titlebutton, button.text-button { + padding-left: 16px; + padding-right: 16px; } + button.text-button.image-button.titlebutton, button.text-button.image-button { + padding-left: 8px; + padding-right: 8px; } + button.text-button.image-button.titlebutton label, button.text-button.image-button label { + padding-left: 8px; + padding-right: 8px; } + combobox:drop(active) button.combo, button.titlebutton:drop(active), button:drop(active) { + color: #fff; + border-color: #fff; + box-shadow: inset 0 0 0 1px #fff; } +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #fff; -} - -button:hover:active, -button:focus:hover:active, -button.default:hover:active, -button.default:focus:hover:active { - color: #000; -} - -button { - border-radius: 3px; - transition: all 200ms ease-out; - padding: 4px 6px; + border-color: transparent; } + row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { + color: #fff; } +button.osd { + color: #fff; + border-radius: 5px; + outline-color: rgba(255, 255, 255, 0.3); border-width: 2px; border-style: solid; color: #fff; background-image: none; - background-color: #000; - border-color: #7f7f7f; } - button:hover, button.flat:hover, button.sidebar-button:hover { + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); + border: none; + box-shadow: none; } + button.osd.image-button { + min-height: 48px; + min-width: 48px; } + button.osd:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); + border: none; + box-shadow: none; } + button.osd:active, button.osd:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; + border: none; + box-shadow: none; } + button.osd:disabled:backdrop, button.osd:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; + border: none; } + button.osd:backdrop { + border-width: 2px; + border-style: solid; + border: none; } +popover.background.touch-selection button, popover.background.magnifier button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, .osd button { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { border-width: 2px; border-style: solid; color: #fff; - background-color: #000; - border-color: #7f7f7f; - background-image: none; - -gtk-icon-effect: highlight; } - button:active, button.flat:active, button.sidebar-button:active, button:checked, button.flat:checked, button.sidebar-button:checked { + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { border-width: 2px; border-style: solid; - background-image: none; - color: black; - background-color: white; - border-color: #7f7f7f; - transition-duration: 50ms; } - button:backdrop, button.flat:backdrop, button.sidebar-button:backdrop { + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { + border-width: 2px; + border-style: solid; } + popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { border-width: 2px; border-style: solid; color: #fff; - background-color: #000; - border-color: #727272; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button:backdrop:active, button:backdrop:checked, button.flat:backdrop:active, button.sidebar-button:backdrop:active, button.flat:backdrop:checked, button.sidebar-button:backdrop:checked { - border-width: 2px; - border-style: solid; - color: black; - background-color: #727272; - border-color: #727272; - background-image: none; } - button:backdrop:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled { + border-color: transparent; + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; - background-image: none; } - button:backdrop:disabled:active, button.flat:backdrop:disabled:active, button.sidebar-button:backdrop:disabled:active { + border-color: rgba(255, 255, 255, 0.2); + color: gray; + background-image: none; + border-color: transparent; + box-shadow: none; } + popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd button.flat:backdrop { border-width: 2px; border-style: solid; - color: #7f7f7f; - border-color: #727272; + color: #fff; + background-color: transparent; background-image: none; - background-color: #090909; } - button:disabled { + border-color: transparent; } + popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } +button.suggested-action { + border-width: 2px; + border-style: solid; + color: white; + background-image: none; + background-color: #aaa; + border-color: #6a6a6a; } + button.suggested-action.flat { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; + color: #fff; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button:disabled:active, button:disabled.flat:active, button.sidebar-button:disabled:active { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #7f7f7f; - background-image: none; - background-color: #060606; } - .osd button { - padding: 6px; - border-width: 1px 1px 2px 1px; + border-color: transparent; + color: #aaa; } + button.suggested-action:hover { + border-width: 2px; + border-style: solid; + color: white; + background-color: #aaa; + border-color: #6a6a6a; + background-image: none; } + button.suggested-action:active, button.suggested-action:checked { + border-width: 2px; + border-style: solid; + background-image: none; + color: black; + background-color: #555555; + border-color: #6a6a6a; } + button.suggested-action:backdrop, button.suggested-action.flat:backdrop { + border-width: 2px; + border-style: solid; + color: white; + background-color: #aaa; + border-color: #aaa; + background-image: none; } + button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { + border-width: 2px; + border-style: solid; + color: black; + background-color: #737373; + border-color: #737373; + background-image: none; } + button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: #494949; + background-image: none; + background-color: #090909; } + button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: #fff; + background-color: transparent; background-image: none; + border-color: transparent; + color: rgba(170, 170, 170, 0.8); } + button.suggested-action:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + button.suggested-action:disabled:active, button.suggested-action:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: #494949; + background-image: none; + background-color: #070707; } + .osd button.suggested-action { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - .osd button:hover { - border-width: 2px; - border-style: solid; + border-color: rgba(255, 255, 255, 0.2); } + .osd button.suggested-action:hover { + border-width: 2px; + border-style: solid; color: #fff; background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - .osd button:active, .osd button:checked { - border-width: 2px; - border-style: solid; + border-color: rgba(255, 255, 255, 0.2); } + .osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { + border-width: 2px; + border-style: solid; color: rgba(0, 0, 0, 0.8); background-color: #fff; border-color: rgba(255, 255, 255, 0.2); box-shadow: none; } - .osd button:disabled { - border-width: 2px; - border-style: solid; + .osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { + border-width: 2px; + border-style: solid; border-color: rgba(255, 255, 255, 0.2); - color: #7f7f7f; } - .osd button:backdrop { - border-width: 2px; + color: gray; } + .osd button.suggested-action:backdrop { + border-width: 2px; border-style: solid; } - button.suggested-action { +button.destructive-action { + border-width: 2px; + border-style: solid; + color: white; + background-image: none; + background-color: #ef2929; + border-color: #8e0b0b; } + button.destructive-action.flat { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #ef2929; } + button.destructive-action:hover { border-width: 2px; border-style: solid; color: white; - background-image: none; - background-color: #4a90d9; - border-color: #1c5187; } - button.suggested-action:hover { - border-width: 2px; - border-style: solid; - color: white; - background-color: #4a90d9; - border-color: #1c5187; - background-image: none; } - button.suggested-action:active, button.suggested-action:checked { + background-color: #ef2929; + border-color: #8e0b0b; + background-image: none; } + button.destructive-action:active, button.destructive-action:checked { + border-width: 2px; + border-style: solid; + background-image: none; + color: black; + background-color: #10d6d6; + border-color: #8e0b0b; } + button.destructive-action:backdrop, button.destructive-action.flat:backdrop { + border-width: 2px; + border-style: solid; + background-color: #ef2929; + border-color: #ef2929; + background-image: none; } + button.destructive-action:backdrop:active, button.destructive-action:backdrop:checked, button.destructive-action.flat:backdrop:active, button.destructive-action.flat:backdrop:checked { border-width: 2px; border-style: solid; - background-image: none; color: black; - background-color: #b56f26; - border-color: #1c5187; } - button.suggested-action:backdrop { + background-color: #737373; + border-color: #737373; + background-image: none; } + button.destructive-action:backdrop:disabled, button.destructive-action.flat:backdrop:disabled { border-width: 2px; border-style: solid; - color: white; - background-color: #4a90d9; - border-color: #4a90d9; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.suggested-action:backdrop:disabled { + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + button.destructive-action:backdrop:disabled:active, button.destructive-action:backdrop:disabled:checked, button.destructive-action.flat:backdrop:disabled:active, button.destructive-action.flat:backdrop:disabled:checked { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; - background-image: none; } - button.suggested-action:disabled { + color: gray; + border-color: #494949; + background-image: none; + background-color: #090909; } + button.destructive-action.flat:backdrop, button.destructive-action.flat:disabled, button.destructive-action.flat:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(239, 41, 41, 0.8); } + button.destructive-action:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + button.destructive-action:disabled:active, button.destructive-action:disabled:checked { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; + color: gray; + border-color: #494949; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.destructive-action { + background-color: #070707; } + .osd button.destructive-action { border-width: 2px; border-style: solid; - color: white; - background-image: none; - background-color: #ef2929; - border-color: #8e0b0b; } - button.destructive-action:hover { + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd button.destructive-action:hover { border-width: 2px; border-style: solid; - color: white; - background-color: #ef2929; - border-color: #8e0b0b; - background-image: none; } - button.destructive-action:active, button.destructive-action:checked { + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { border-width: 2px; border-style: solid; - background-image: none; - color: black; - background-color: #10d6d6; - border-color: #8e0b0b; } - button.destructive-action:backdrop { + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { border-width: 2px; border-style: solid; - color: white; - background-color: #ef2929; - border-color: #ef2929; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.destructive-action:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; - background-image: none; } - button.destructive-action:disabled { + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd button.destructive-action:backdrop { border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - button.image-button { - padding: 8px; } - button.text-button { - padding: 6px 8px 5px; } - .inline-toolbar button, .inline-toolbar button:backdrop { - border-radius: 2px; - border-width: 1px; } - .primary-toolbar button { - -gtk-icon-shadow: none; } + border-style: solid; } +.stack-switcher > button { + outline-offset: -3px; } + .stack-switcher > button > label { + padding-left: 6px; + padding-right: 6px; } + .stack-switcher > button > image { + padding-left: 6px; + padding-right: 6px; + padding-top: 3px; + padding-bottom: 3px; } + .stack-switcher > button.text-button { + padding-left: 10px; + padding-right: 10px; } + .stack-switcher > button.image-button { + padding-left: 2px; + padding-right: 2px; } + .stack-switcher > button.needs-attention:active > label, + .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, + .stack-switcher > button.needs-attention:checked > image { + animation: none; + background-image: none; } +.inline-toolbar button, .inline-toolbar button:backdrop { + border-radius: 2px; + border-width: 1px; } +.primary-toolbar button { + -gtk-icon-shadow: none; } + +.stack-switcher > button.needs-attention > label, +.stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#aaa), to(transparent)); + background-size: 6px 6px; + background-repeat: no-repeat; + background-position: right 3px; } + .stack-switcher > button.needs-attention > label:backdrop, + .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { + background-size: 6px 6px; } + .stack-switcher > button.needs-attention > label:dir(rtl), + .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { + background-position: left 3px; } .inline-toolbar toolbutton > button { border-width: 2px; @@ -539,129 +827,117 @@ button { color: #fff; background-image: none; background-color: #000; - border-color: #7f7f7f; } + border-color: gray; } .inline-toolbar toolbutton > button:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: #000; - border-color: #7f7f7f; + border-width: 2px; + border-style: solid; + color: #fff; + background-color: #000; + border-color: gray; background-image: none; } - .inline-toolbar toolbutton > button:active { - border-width: 2px; - border-style: solid; + .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { + border-width: 2px; + border-style: solid; background-image: none; - color: black; + color: black; background-color: white; - border-color: #7f7f7f; } + border-color: gray; } .inline-toolbar toolbutton > button:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - .inline-toolbar toolbutton > button:disabled:active { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #7f7f7f; - background-image: none; - background-color: #060606; } + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + .inline-toolbar toolbutton > button:disabled:active, .inline-toolbar toolbutton > button:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: #494949; + background-image: none; + background-color: #070707; } .inline-toolbar toolbutton > button:backdrop { - border-width: 2px; - border-style: solid; + border-width: 2px; + border-style: solid; color: #fff; background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - .inline-toolbar toolbutton > button:backdrop:active { - border-width: 2px; - border-style: solid; - color: black; - background-color: #727272; - border-color: #727272; - background-image: none; } - .inline-toolbar toolbutton > button:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + border-color: #737373; background-image: none; } - .inline-toolbar toolbutton > button:backdrop:disabled:active { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #727272; - background-image: none; - background-color: #090909; } - -toolbar.inline-toolbar toolbutton > button.flat, searchbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton > button.sidebar-button, searchbar.inline-toolbar toolbutton > button.sidebar-button { - border-radius: 0; - border-left-style: none; } -toolbar.inline-toolbar toolbutton:first-child > button.flat, searchbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:first-child > button.sidebar-button, searchbar.inline-toolbar toolbutton:first-child > button.sidebar-button { - border-radius: 3px 0 0 3px; - border-left-style: solid; } -toolbar.inline-toolbar toolbutton:last-child > button.flat, searchbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar toolbutton:last-child > button.sidebar-button, searchbar.inline-toolbar toolbutton:last-child > button.sidebar-button { - border-radius: 0 3px 3px 0; } -toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.flat, searchbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.flat, toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.sidebar-button, searchbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.sidebar-button { + .inline-toolbar toolbutton > button:backdrop:active, .inline-toolbar toolbutton > button:backdrop:checked { + border-width: 2px; + border-style: solid; + color: black; + background-color: #737373; + border-color: #737373; + background-image: none; } + .inline-toolbar toolbutton > button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + .inline-toolbar toolbutton > button:backdrop:disabled:active, .inline-toolbar toolbutton > button:backdrop:disabled:checked { + border-width: 2px; + border-style: solid; + color: gray; + border-color: #494949; + background-image: none; + background-color: #090909; } + +toolbar.inline-toolbar toolbutton > button.flat, searchbar.inline-toolbar toolbutton > button.flat, +toolbar.inline-toolbar toolbutton:backdrop > button.flat, +searchbar.inline-toolbar toolbutton:backdrop > button.flat, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > +entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked > combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { + border-radius: 0; + border-right-style: none; } + +.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat, searchbar.inline-toolbar toolbutton:first-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, +searchbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } +.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat, searchbar.inline-toolbar toolbutton:last-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, +searchbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; border-right-style: solid; } -toolbar.inline-toolbar toolbutton:only-child > button.flat, searchbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar toolbutton:only-child > button.sidebar-button, searchbar.inline-toolbar toolbutton:only-child > button.sidebar-button { - border-radius: 3px; - border-style: solid; } - -stacksidebar row.needs-attention > label { - animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#aaa), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(#fff), to(transparent)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - background-position: right 3px, right 4px; } - stacksidebar row.needs-attention > label:backdrop { - background-size: 6px 6px, 0 0; } - stacksidebar row.needs-attention > label:dir(rtl) { - background-position: left 3px, left 4px; } - -.osd button, .osd button:hover, .osd button:active, .osd button:checked, .osd button:disabled, .osd button:backdrop, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, .linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked > combobox > button.combo:dir(ltr) { - border-radius: 0; - border-left-style: none; } - .osd button:dir(rtl), .inline-toolbar button:dir(rtl), .linked > button:dir(rtl), .linked > combobox > button.combo:dir(rtl) { - border-radius: 0; - border-right-style: none; - border-left-style: solid; } - -.osd button:first-child, .inline-toolbar button:first-child, .linked > button:first-child, .linked > combobox:first-child > button.combo { - border-radius: 3px 0 0 3px; - border-left-style: solid; } -.osd button:last-child, .inline-toolbar button:last-child, .linked > button:last-child, .linked > combobox:last-child > button.combo { - border-radius: 0 3px 3px 0; } - .osd button:last-child:dir(rtl), .inline-toolbar button:last-child:dir(rtl), .linked > button:last-child:dir(rtl), .linked > combobox:last-child > button.combo:dir(rtl) { - border-right-style: solid; } -.osd button:only-child, .inline-toolbar button:only-child, .linked > button:only-child, .linked > combobox:only-child > button.combo { - border-radius: 3px; - border-style: solid; } - -.linked.vertical entry, .linked.vertical spinbutton, .linked.vertical entry:focus, .linked.vertical spinbutton:focus, .linked.vertical entry:disabled, .linked.vertical spinbutton:disabled, .linked.vertical entry:disabled:backdrop, .linked.vertical spinbutton:disabled:backdrop, .linked.vertical entry:backdrop, .linked.vertical spinbutton:backdrop, .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > combobox > button.combo { - border-left-style: solid; - border-top-style: none; - border-radius: 0; } - -.linked.vertical entry:first-child, .linked.vertical spinbutton:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > button.combo { - border-style: solid; - border-radius: 3px 3px 0 0; } -.linked.vertical entry:last-child, .linked.vertical spinbutton:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > button.combo { - border-radius: 0 0 3px 3px; } -.linked.vertical entry:only-child, .linked.vertical spinbutton:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > button.combo { - border-radius: 3px; +.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, searchbar.inline-toolbar toolbutton:only-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, +searchbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > button.combo { + border-radius: 3px; + border-style: solid; } + +.linked.vertical > spinbutton:not(.vertical), .linked.vertical > +entry, .linked.vertical > button, .linked.vertical > button:hover, .linked.vertical > button:active, .linked.vertical > button:checked, .linked.vertical > button:backdrop, .linked.vertical > combobox > box > button.combo { + border-style: solid solid none solid; + border-radius: 0; } + +.linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > +entry:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo { + border-top-left-radius: 3px; + border-top-right-radius: 3px; } +.linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > +entry:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; border-style: solid; } - -button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, -.menuitem.button.flat, modelbutton.flat:backdrop, -.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, +.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > +entry:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo { + border-radius: 3px; + border-style: solid; } + +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, +popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, +popover.background radiobutton:backdrop:hover, +.menuitem.button.flat:backdrop, +.menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, row.activatable:backdrop, row.activatable:backdrop:active, row.activatable:backdrop:checked, @@ -670,29 +946,60 @@ row.activatable:backdrop:disabled:active, row.activatable:backdrop:disabled:checked, row.activatable:disabled:active, row.activatable:disabled:checked, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:backdrop:hover { - border-color: transparent; background-color: transparent; background-image: none; + border-color: transparent; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ -modelbutton.flat, +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, .menuitem.button.flat { - outline-offset: -1px; } - modelbutton.flat:backdrop, - .menuitem.button.flat:backdrop { - color: #fff; } - modelbutton.flat:backdrop:hover, - .menuitem.button.flat:backdrop:hover { - color: #fff; - background-color: #aaa; } - modelbutton.flat:disabled, - .menuitem.button.flat:disabled { - color: #7f7f7f; } + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; } + modelbutton.flat:hover, popover.background checkbutton:hover, + popover.background radiobutton:hover, + .menuitem.button.flat:hover { + background-color: #0d0d0d; } + modelbutton.flat check:last-child, popover.background checkbutton check:last-child, + popover.background radiobutton check:last-child, + modelbutton.flat radio:last-child, + popover.background checkbutton radio:last-child, + popover.background radiobutton radio:last-child, + .menuitem.button.flat check:last-child, + .menuitem.button.flat radio:last-child { + margin-left: 8px; } + modelbutton.flat check:first-child, popover.background checkbutton check:first-child, + popover.background radiobutton check:first-child, + modelbutton.flat radio:first-child, + popover.background checkbutton radio:first-child, + popover.background radiobutton radio:first-child, + .menuitem.button.flat check:first-child, + .menuitem.button.flat radio:first-child { + margin-right: 8px; } + +modelbutton.flat arrow, popover.background checkbutton arrow, +popover.background radiobutton arrow { + background: none; } + modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, + popover.background radiobutton arrow:hover { + background: none; } + modelbutton.flat arrow.left, popover.background checkbutton arrow.left, + popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + modelbutton.flat arrow.right, popover.background checkbutton arrow.right, + popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } /********* * Links * @@ -717,193 +1024,178 @@ button:link, button:visited { /***************** * GtkSpinButton * *****************/ -spinbutton { - /* This is to fix spinbuttons in entries, but I feel like hiding code issues - * hence it's commented atm. - * treeview.view & { - * & entry, & entry:focus { - * padding: 1px; - * border-width: 1px 0; - * border-color: $selected_bg_color; - * border-radius: 0; - * box-shadow: none; - * } - * } - */ } - spinbutton button { +spinbutton:not(.vertical) { + border-width: 2px; + border-color: gray; + box-shadow: none; + padding: 0; } + spinbutton:not(.vertical) entry { + min-width: 28px; + margin: 0; + background: none; + border: none; + box-shadow: none; } + spinbutton:not(.vertical) button { + min-height: 16px; + margin: 0; + padding-bottom: 0; + padding-top: 0; + color: #e7e7e7; background-image: none; - border-color: rgba(127, 127, 127, 0.3); - color: #f3f3f3; + border-style: none none none solid; border-radius: 0; } - spinbutton button:dir(ltr) { - border-style: none none none solid; } - spinbutton button:dir(rtl) { + spinbutton:not(.vertical) button:dir(rtl) { border-style: none solid none none; } - spinbutton button:hover { + spinbutton:not(.vertical) button:hover { color: #fff; - background-color: rgba(0, 0, 0, 0.05); } - spinbutton button:hover:dir(ltr) { - border-style: none none none solid; } - spinbutton button:hover:dir(rtl) { - border-style: none solid none none; } - spinbutton button:disabled { - box-shadow: none; - color: rgba(127, 127, 127, 0.3); } - spinbutton button:disabled:dir(ltr) { - border-style: none none none solid; } - spinbutton button:disabled:dir(rtl) { - border-style: none solid none none; } - spinbutton button:active { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); - background-color: rgba(0, 0, 0, 0.1); } - spinbutton button:backdrop { - border-color: rgba(114, 114, 114, 0.3); - background-color: #000; - box-shadow: none; } - spinbutton button:backdrop:dir(ltr) { - border-style: none none none solid; } - spinbutton button:backdrop:dir(rtl) { - border-style: none solid none none; } - spinbutton button:backdrop:disabled { - box-shadow: none; - color: rgba(127, 127, 127, 0.3); } - spinbutton button:backdrop:disabled:dir(rtl) { - border-width: 0 1px 0 0; } - spinbutton button:backdrop:disabled:dir(ltr) { - border-style: none none none solid; } - spinbutton button:backdrop:disabled:dir(rtl) { + background-color: #000; } + spinbutton:not(.vertical) button:disabled { + color: rgba(128, 128, 128, 0.3); } + spinbutton:not(.vertical) button:active { + background-color: rgba(0, 0, 0, 0.8); + color: #fff; } + spinbutton:not(.vertical) button:backdrop { + color: #fff; + background-color: transparent; + border-color: rgba(115, 115, 115, 0.3); } + spinbutton:not(.vertical) button:backdrop:disabled { + color: #070707; + background-image: none; + border-style: none none none solid; } + spinbutton:not(.vertical) button:backdrop:disabled:dir(rtl) { border-style: none solid none none; } - spinbutton.vertical button:first-child { +.osd spinbutton:not(.vertical) { + border-color: rgba(255, 255, 255, 0.2); + color: #fff; + box-shadow: none; } + .osd spinbutton:not(.vertical):focus, .osd spinbutton:not(.vertical):active { + border-color: rgba(255, 255, 255, 0.7); + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + .osd spinbutton:not(.vertical) entry { + box-shadow: none; + color: #fff; + text-shadow: none; } + .osd spinbutton:not(.vertical) entry:focus, .osd spinbutton:not(.vertical) entry:active { + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + .osd spinbutton:not(.vertical) button { border-width: 2px; border-style: solid; color: #fff; + background-color: transparent; background-image: none; - background-color: #000; - border-color: #7f7f7f; } - spinbutton.vertical button:first-child:active { - border-width: 2px; - border-style: solid; - background-image: none; - color: black; - background-color: white; - border-color: #7f7f7f; } - spinbutton.vertical button:first-child:hover { + border-color: transparent; + color: #fff; + border-style: none none none solid; + border-color: rgba(128, 128, 128, 0.2); + border-radius: 0; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:dir(rtl) { + border-style: none solid none none; } + .osd spinbutton:not(.vertical) button:active { + background-color: rgba(0, 0, 0, 0.8); + color: #fff; } + .osd spinbutton:not(.vertical) button:hover { border-width: 2px; border-style: solid; color: #fff; - background-color: #000; - border-color: #7f7f7f; - background-image: none; } - spinbutton.vertical button:first-child:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:first-child:backdrop { + border-color: transparent; + border-style: none none none solid; + border-color: rgba(128, 128, 128, 0.2); + background-color: rgba(255, 255, 255, 0.1); + box-shadow: none; } + .osd spinbutton:not(.vertical) button:backdrop { border-width: 2px; border-style: solid; color: #fff; - background-color: #000; - border-color: #727272; + background-color: transparent; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:last-child { + border-color: transparent; + color: gray; + border-color: rgba(128, 128, 128, 0.1); + box-shadow: none; + border-style: none none none solid; } + .osd spinbutton:not(.vertical) button:disabled { + color: gray; + border-color: rgba(128, 128, 128, 0.1); + border-style: none none none solid; + box-shadow: none; } + .osd spinbutton:not(.vertical) button:last-child { + border-radius: 0 3px 3px 0; } + .osd spinbutton:not(.vertical) button:dir(rtl):first-child { + border-radius: 3px 0 0 3px; } +spinbutton.vertical { + border-width: 2px; + border-color: gray; } + spinbutton.vertical:disabled { + color: gray; } + spinbutton.vertical:backdrop:disabled { + color: gray; } + spinbutton.vertical:drop(active) { + border-color: transparent; + box-shadow: none; } + spinbutton.vertical entry { + min-height: 32px; + min-width: 32px; + padding: 0; + border-radius: 0; + border-color: gray; } + spinbutton.vertical button { + min-height: 32px; + min-width: 32px; + padding: 0; } + spinbutton.vertical button.up { + border-radius: 3px 3px 0 0; + border-style: solid solid none solid; } + spinbutton.vertical button.down { + border-radius: 0 0 3px 3px; + border-style: none solid solid solid; } +.osd spinbutton.vertical button:first-child { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd spinbutton.vertical button:first-child:hover { border-width: 2px; border-style: solid; color: #fff; - background-image: none; - background-color: #000; - border-color: #7f7f7f; } - spinbutton.vertical button:last-child:active { - border-width: 2px; - border-style: solid; - background-image: none; - color: black; - background-color: white; - border-color: #7f7f7f; } - spinbutton.vertical button:last-child:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: #000; - border-color: #7f7f7f; - background-image: none; } - spinbutton.vertical button:last-child:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:last-child:backdrop { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - spinbutton.vertical button:backdrop:disabled { + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd spinbutton.vertical button:first-child:active { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; - background-image: none; } - spinbutton.vertical.entry { - border-radius: 0; } - spinbutton.vertical button:first-child, spinbutton.vertical button:first-child:active, spinbutton.vertical button:first-child:hover, spinbutton.vertical button:first-child:disabled, spinbutton.vertical button:first-child:backdrop { - border-radius: 3px 3px 0 0; - border-bottom-width: 0; } - spinbutton.vertical button:last-child, spinbutton.vertical button:last-child:active, spinbutton.vertical button:last-child:hover, spinbutton.vertical button:last-child:disabled, spinbutton.vertical button:last-child:backdrop { - border-radius: 0 0 3px 3px; - border-top-width: 0; } + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd spinbutton.vertical button:first-child:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd spinbutton.vertical button:first-child:backdrop { + border-width: 2px; + border-style: solid; } +treeview spinbutton entry, +treeview spinbutton entry:focus { + padding: 1px; + border-width: 1px 0; + border-color: #aaa; + border-radius: 0; + box-shadow: none; } /************** * ComboBoxes * **************/ -combobox { - text-shadow: 0 -1px black; - -gtk-icon-shadow: 0 -1px black; } - combobox > button.combo { - padding-left: 8px; - padding-right: 8px; } - combobox:disabled { - color: #7f7f7f; - text-shadow: none; - -gtk-icon-shadow: none; } - combobox:backdrop { - color: #fff; - text-shadow: none; - -gtk-icon-shadow: none; } - combobox:backdrop:disabled { - color: #7f7f7f; } - combobox arrow { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - min-height: 16px; - min-width: 16px; } - combobox .menuitem { - text-shadow: none; } - combobox > entry.combo { - border-radius: 3px 0 0 3px; } - combobox > entry.combo:dir(rtl) { - border-radius: 0 3px 3px 0; } - combobox > button.combo:not(:only-child):dir(ltr) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-style: none; } - combobox > button.combo:not(:only-child):dir(rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-style: none; } +combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; } +combobox:drop(active) { + box-shadow: none; } /************ * Toolbars * @@ -922,25 +1214,25 @@ toolbar, searchbar { padding: 3px; border-radius: 0 0 4px 4px; } toolbar.vertical, searchbar.vertical { - border-right: 1px solid #7f7f7f; } + border-right: 1px solid gray; } toolbar.vertical:dir(rtl), searchbar.vertical:dir(rtl) { border-right: none; - border-left: 1px solid #7f7f7f; } + border-left: 1px solid gray; } searchbar { border-width: 0 0 1px; - border-color: #7f7f7f; + border-color: gray; border-style: none none solid none; padding: 3px; } toolbar.inline-toolbar, searchbar.inline-toolbar { border-style: solid; - border-color: #7f7f7f; + border-color: gray; background-color: #262626; - box-shadow: inset 0 2px 3px -1px #5b5b5b; } + box-shadow: inset 0 2px 3px -1px #5c5c5c; } toolbar.inline-toolbar:backdrop, searchbar.inline-toolbar:backdrop { - border-color: #727272; - background-color: #272727; + border-color: #737373; + background-color: #282828; box-shadow: none; } /*************** @@ -950,7 +1242,7 @@ toolbar.inline-toolbar, searchbar.inline-toolbar { headerbar { border-width: 0 0 1px; border-style: solid; - border-color: #7f7f7f; + border-color: gray; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, #0a0a0a, #000); @@ -958,7 +1250,7 @@ headerbar { padding: 6px; } .titlebar:backdrop, headerbar:backdrop { - border-color: #727272; + border-color: #737373; background-color: #000; background-image: none; box-shadow: none; } @@ -971,11 +1263,7 @@ headerbar { font-size: 80%; padding: 0 12px; } .titlebar > GtkBox > separator.vertical, - headerbar > GtkBox > separator.vertical, - placessidebar .view headerbar > GtkBox > separator.vertical:backdrop, - placessidebar textview text headerbar > GtkBox > separator.vertical:backdrop, - textview placessidebar text headerbar > GtkBox > separator.vertical:backdrop, - placessidebar iconview headerbar > GtkBox > separator.vertical:backdrop { + headerbar > GtkBox > separator.vertical { border-width: 0 1px; border-color: #fff; border-style: solid; } @@ -1013,12 +1301,10 @@ headerbar { headerbar.selection-mode button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } .titlebar.selection-mode button:backdrop, headerbar.selection-mode button:backdrop { border-width: 2px; @@ -1027,16 +1313,14 @@ headerbar { background-color: #aaa; border-color: #aaa; background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; border-color: #848484; } .titlebar.selection-mode button:backdrop:disabled, headerbar.selection-mode button:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + color: gray; + background-color: #070707; + border-color: #494949; background-image: none; } .titlebar.selection-mode button.suggested-action, headerbar.selection-mode button.suggested-action { @@ -1045,14 +1329,14 @@ headerbar { color: #fff; background-image: none; background-color: #000; - border-color: #7f7f7f; } + border-color: gray; } .titlebar.selection-mode button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; - border-color: #7f7f7f; + border-color: gray; background-image: none; } .titlebar.selection-mode button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { @@ -1061,34 +1345,30 @@ headerbar { background-image: none; color: black; background-color: white; - border-color: #7f7f7f; } + border-color: gray; } .titlebar.selection-mode button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } .titlebar.selection-mode button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: #737373; + background-image: none; } .titlebar.selection-mode button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + color: gray; + background-color: #070707; + border-color: #494949; background-image: none; } .titlebar.selection-mode .selection-menu, headerbar.selection-mode .selection-menu { @@ -1136,44 +1416,44 @@ treeview.view { treeview.view:selected { border-radius: 0; } treeview.view:selected, treeview.view:backdrop:selected { - border-left-color: #d4d4d4; + border-left-color: #d5d5d5; border-top-color: rgba(255, 255, 255, 0.1); } treeview.view:disabled { - color: #7f7f7f; } + color: gray; } treeview.view:disabled:selected { color: #cccccc; } treeview.view:disabled:selected:backdrop { - color: #d4d4d4; } + color: #d5d5d5; } treeview.view:disabled:backdrop { - color: #7f7f7f; } + color: gray; } treeview.view.separator:backdrop { min-height: 2px; color: rgba(0, 0, 0, 0.1); } treeview.view:backdrop { color: #fff; - border-left-color: #7f7f7f; + border-left-color: gray; border-top: #000; } treeview.view.dnd { border-style: solid none; border-width: 1px; - border-color: #d4d4d4; } + border-color: #d5d5d5; } treeview.view.expander { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); - color: #b7b7b7; } + color: #b8b8b8; } treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } treeview.view.expander:hover { color: #fff; } treeview.view.expander:selected { - color: #e5e5e5; } + color: #e6e6e6; } treeview.view.expander:selected:hover { color: #fff; } treeview.view.expander:selected:backdrop { - color: #e5e5e5; } + color: #e6e6e6; } treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } treeview.view.expander:backdrop { - color: #b7b7b7; } + color: #b8b8b8; } treeview.view.progressbar { color: #111; border: 1px solid #aaa; @@ -1199,7 +1479,7 @@ treeview.view { text-shadow: none; box-shadow: none; } treeview.view header button:hover { - color: #c3c3c3; + color: #c4c4c4; box-shadow: none; } treeview.view header button:active { color: #fff; } @@ -1212,15 +1492,15 @@ treeview.view header button, treeview.view header button:hover, treeview.view he border-radius: 0; border-width: 1px; background-image: none; - border-color: #7f7f7f; + border-color: gray; text-shadow: none; } treeview.view header button:disabled { border-color: #000; background-image: none; } treeview.view header button:backdrop { - border-color: #7f7f7f; + border-color: gray; border-style: none solid solid none; - color: #7f7f7f; + color: gray; background-image: none; background-color: #111; } treeview.view header button:backdrop:disabled { @@ -1230,7 +1510,7 @@ treeview.view header button, treeview.view header button:hover, treeview.view he treeview.view.progressbar { color: #111; border-radius: 4px; - background-image: linear-gradient(to bottom, #aaa, #909090); } + background-image: linear-gradient(to bottom, #aaa, #919191); } treeview.view.progressbar:selected { color: #aaa; background-image: linear-gradient(to bottom, #111, black); } @@ -1252,7 +1532,8 @@ treeview.view.separator { *********/ menubar, .menubar { - padding: 0px; } + padding: 0px; + box-shadow: inset 0 -1px gray; } menubar > menuitem, .menubar > menuitem { padding: 4px 8px; } @@ -1262,7 +1543,7 @@ menubar, color: #aaa; } menubar > menuitem:disabled, .menubar > menuitem:disabled { - color: #7f7f7f; + color: gray; box-shadow: none; } menu, @@ -1270,7 +1551,7 @@ menu, margin: 4px; padding: 0px; background-color: #111; - border: 1px solid #7f7f7f; } + border: 1px solid gray; } menu menuitem, .menu menuitem { text-shadow: none; @@ -1282,10 +1563,10 @@ menu, background-color: #aaa; } menu menuitem:disabled, .menu menuitem:disabled { - color: #7f7f7f; } + color: gray; } menu menuitem:disabled:backdrop, .menu menuitem:disabled:backdrop { - color: #7f7f7f; } + color: gray; } menu menuitem:backdrop, menu menuitem:backdrop:hover, .menu menuitem:backdrop, .menu menuitem:backdrop:hover { @@ -1315,71 +1596,30 @@ menuitem check, menuitem radio { /*************** * Popovers * ***************/ -popover { - margin: 10px; +popover.background { padding: 2px; - border-color: #7f7f7f; - border-width: 1px; - border-style: solid; border-radius: 5px; background-color: #000; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } - popover:backdrop { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + popover.background, .csd popover.background { + border: 1px solid gray; } + popover.background:backdrop { + background-color: #000; box-shadow: none; } - popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar { + popover.background > list, + popover.background > .view, + textview popover.background > text, + popover.background > iconview, + popover.background > toolbar, + popover.background > searchbar { + border-style: none; background-color: transparent; } - popover separator, popover placessidebar .view separator, placessidebar .view popover separator, popover placessidebar textview text separator, placessidebar textview text popover separator, popover textview placessidebar text separator, textview placessidebar text popover separator, popover placessidebar iconview separator, placessidebar iconview popover separator, - popover placessidebar .view separator:backdrop, - placessidebar .view popover separator:backdrop, - popover placessidebar textview text separator:backdrop, - placessidebar textview text popover separator:backdrop, - popover textview placessidebar text separator:backdrop, - textview placessidebar text popover separator:backdrop, - popover placessidebar iconview separator:backdrop, - placessidebar iconview popover separator:backdrop { - color: #fff; - background-color: transparent; - border: 0; } - popover button.flat, popover button.sidebar-button, - popover button.flat:hover, - popover button.sidebar-button:hover { - color: #fff; - text-shadow: none; - transition: none; } - popover.magnifier, popover.osd { - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border: 1px solid #7f7f7f; - color: #fff; } - popover.magnifier button, popover.osd button { - color: white; - text-shadow: none; - border-width: 2px; - border-style: solid; - color: #fff; - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:hover, popover.osd button:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:active, popover.osd button:active { - border-width: 2px; - border-style: solid; - color: rgba(0, 0, 0, 0.8); - background-color: #fff; - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:disabled, popover.osd button:disabled { - border-width: 2px; - border-style: solid; - border-color: rgba(255, 255, 255, 0.2); - color: #7f7f7f; } + popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier { + border: 1px solid rgba(255, 255, 255, 0.1); } + popover.background separator { + margin: 3px; } + popover.background list separator { + margin: 0px; } /***************** * Notebooks and * @@ -1392,13 +1632,13 @@ notebook { notebook:backdrop { background-color: #111; } notebook.frame { - border: 1px solid #7f7f7f; } + border: 1px solid gray; } notebook.frame:backdrop { - border-color: #727272; } + border-color: #737373; } notebook header { background-color: #262626; } .frame notebook header { - border: 1px solid #7f7f7f; } + border: 1px solid gray; } .frame notebook header.top { border-bottom-width: 0; } .frame notebook header.bottom { @@ -1408,34 +1648,34 @@ notebook { .frame notebook header.left { border-right-width: 0; } .frame notebook header:backdrop { - border-color: #727272; } + border-color: #737373; } notebook header.top { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px gray; } notebook header.top:backdrop { - box-shadow: inset 0 -1px #727272; } + box-shadow: inset 0 -1px #737373; } notebook header.bottom { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px gray; } notebook header.bottom:backdrop { - box-shadow: inset 0 1px #727272; } + box-shadow: inset 0 1px #737373; } notebook header.right { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 gray; } notebook header.right:backdrop { - box-shadow: inset 1px 0 #727272; } + box-shadow: inset 1px 0 #737373; } notebook header.left { - box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #7f7f7f; } + box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 gray; } notebook header.left:backdrop { - box-shadow: inset -1px 0 #727272; } + box-shadow: inset -1px 0 #737373; } notebook header:backdrop { - background-color: #272727; + background-color: #282828; box-shadow: none; } notebook header tabs arrow { - color: #7f7f7f; } + color: gray; } notebook header tabs arrow:hover { - color: #bfbfbf; } + color: silver; } notebook header tabs arrow:checked { color: #fff; } notebook header tabs arrow:disabled { - color: rgba(127, 127, 127, 0.3); } + color: rgba(128, 128, 128, 0.3); } notebook header tabs arrow:backdrop { color: rgba(255, 255, 255, 0.4); } notebook header.top tab { @@ -1473,7 +1713,7 @@ notebook { background-color: transparent; outline-offset: 0; } notebook tab:hover { - border-color: #7f7f7f; } + border-color: gray; } notebook tab:checked, notebook tab:backdrop:checked { border-color: #aaa; } notebook tab:backdrop { @@ -1482,17 +1722,17 @@ notebook { .top notebook tab.reorderable-page { border-color: transparent; } .top notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-bottom-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-bottom-color: gray; background-color: rgba(0, 0, 0, 0.2); } .top notebook tab.reorderable-page:checked { background-color: rgba(0, 0, 0, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-bottom-color: #aaa; } .top notebook tab.reorderable-page:checked:hover { background-color: rgba(0, 0, 0, 0.7); } .top notebook tab.reorderable-page:checked:backdrop { - border-color: #727272; + border-color: #737373; background-color: #000; border-bottom-color: #aaa; } .top notebook tab.reorderable-page:backdrop { @@ -1501,17 +1741,17 @@ notebook { .bottom notebook tab.reorderable-page { border-color: transparent; } .bottom notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-top-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-top-color: gray; background-color: rgba(0, 0, 0, 0.2); } .bottom notebook tab.reorderable-page:checked { background-color: rgba(0, 0, 0, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-top-color: #aaa; } .bottom notebook tab.reorderable-page:checked:hover { background-color: rgba(0, 0, 0, 0.7); } .bottom notebook tab.reorderable-page:checked:backdrop { - border-color: #727272; + border-color: #737373; background-color: #000; border-top-color: #aaa; } .bottom notebook tab.reorderable-page:backdrop { @@ -1520,17 +1760,17 @@ notebook { .left notebook tab.reorderable-page { border-color: transparent; } .left notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-right-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-right-color: gray; background-color: rgba(0, 0, 0, 0.2); } .left notebook tab.reorderable-page:checked { background-color: rgba(0, 0, 0, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-right-color: #aaa; } .left notebook tab.reorderable-page:checked:hover { background-color: rgba(0, 0, 0, 0.7); } .left notebook tab.reorderable-page:checked:backdrop { - border-color: #727272; + border-color: #737373; background-color: #000; border-right-color: #aaa; } .left notebook tab.reorderable-page:backdrop { @@ -1539,17 +1779,17 @@ notebook { .right notebook tab.reorderable-page { border-color: transparent; } .right notebook tab.reorderable-page:hover { - border-color: rgba(127, 127, 127, 0.3); - border-left-color: #7f7f7f; + border-color: rgba(128, 128, 128, 0.3); + border-left-color: gray; background-color: rgba(0, 0, 0, 0.2); } .right notebook tab.reorderable-page:checked { background-color: rgba(0, 0, 0, 0.5); - border-color: rgba(127, 127, 127, 0.5); + border-color: rgba(128, 128, 128, 0.5); border-left-color: #aaa; } .right notebook tab.reorderable-page:checked:hover { background-color: rgba(0, 0, 0, 0.7); } .right notebook tab.reorderable-page:checked:backdrop { - border-color: #727272; + border-color: #737373; background-color: #000; border-left-color: #aaa; } .right notebook tab.reorderable-page:backdrop { @@ -1558,12 +1798,12 @@ notebook { notebook tab label { padding: 0 2px; font-weight: bold; - color: #7f7f7f; + color: gray; /* color: inherit doesn't work here */ } notebook tab label:backdrop { - color: #7f7f7f; } + color: gray; } notebook tab:hover label { - color: #bfbfbf; } + color: silver; } notebook tab:checked label { color: #fff; } notebook tab:checked label:backdrop { @@ -1579,7 +1819,7 @@ notebook { border-style: solid; color: #fff; background-color: #000; - border-color: #7f7f7f; + border-color: gray; background-image: none; border-width: 2px; background-image: none; @@ -1590,7 +1830,7 @@ notebook { background-image: none; color: black; background-color: white; - border-color: #7f7f7f; + border-color: gray; border-width: 2px; } notebook tab button:backdrop, notebook tab button:backdrop:hover { color: rgba(255, 255, 255, 0.3); @@ -1602,51 +1842,162 @@ notebook { /************** * Scrollbars * **************/ -scrollbar { - background-clip: padding-box; - background-image: none; - border-style: solid; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false } + scrollbar { + background-color: #0a0a0a; + transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; } + scrollbar.top { + border-bottom: 1px solid gray; } + scrollbar.bottom { + border-top: 1px solid gray; } + scrollbar.left { + border-right: 1px solid gray; } + scrollbar.right { + border-left: 1px solid gray; } + scrollbar:backdrop { + background-color: black; + border-color: #737373; } + scrollbar slider { + min-width: 14px; + min-height: 14px; + margin: -1px; + border: 4px solid transparent; + border-radius: 12px; + background-clip: padding-box; + background-color: #999999; } + scrollbar slider:hover { + background-color: #cccccc; } + scrollbar slider:hover:active { + background-color: #c4c4c4; } + scrollbar slider:backdrop { + background-color: #666666; } + scrollbar slider:disabled { + background-color: transparent; } + scrollbar.fine-tune slider { + min-width: 4px; + min-height: 4px; } + scrollbar.fine-tune.horizontal slider { + border-width: 5px 4px; } + scrollbar.fine-tune.vertical slider { + border-width: 4px 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { + margin: 0; + min-width: 3px; + min-height: 3px; + background-color: #fff; + border: 1px solid black; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { + min-width: 5px; + min-height: 5px; + background-color: #fff; + background-clip: padding-box; + border-radius: 100%; + border: 1px solid black; + -gtk-icon-source: none; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + margin: 0 2px; + min-width: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { + margin: 1px 2px; + min-width: 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + margin: 2px 0; + min-height: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { + margin: 2px 1px; + min-height: 5px; } + scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { + opacity: 0.8; } + scrollbar.horizontal slider { + min-width: 40px; } + scrollbar.vertical slider { + min-height: 40px; } scrollbar button { - border: none; } - -scrollbar slider { - min-width: 6px; - min-height: 64px; -} - -scrollbar.horizontal slider { - min-height: 6px; - min-width: 64px; -} + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #999999; } + scrollbar button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #cccccc; } + scrollbar button:active, scrollbar button:checked { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #c4c4c4; } + scrollbar button:disabled { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(153, 153, 153, 0.2); } + scrollbar button:backdrop { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #666666; } + scrollbar button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(102, 102, 102, 0.2); } + scrollbar.vertical button.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + scrollbar.vertical button.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + scrollbar.horizontal button.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } + scrollbar.horizontal button.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } - scrollbar slider { - border-radius: 20px; - border: 5px solid transparent; - background-color: #7f7f7f; } - scrollbar slider:backdrop, scrollbar slider:disabled { - background-color: #e5e5e5; } - scrollbar slider:hover { - background-color: #B0B0B0; } - scrollbar slider:hover:active { - background-color: #666666; } - scrollbar slider.fine-tune { - border-width: 8px; } - scrollbar slider.fine-tune:hover:active { - background-color: #A3A3A3; } +treeview ~ scrollbar.vertical { + border-top: 1px solid gray; + margin-top: -1px; } /********** * Switch * **********/ -switch { - font: bold condensed 9; - outline-offset: -4px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: #7f7f7f; - background-color: #323232; + switch { + font-size: smaller; + font-stretch: condensed; + font-weight: bold; + outline-offset: -4px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: gray; + background-color: #333333; box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); /*outset not working*/ text-shadow: 0 1px rgba(0, 0, 0, 0.1); } @@ -1656,253 +2007,458 @@ switch { background-color: #aaa; text-shadow: 0 0 2px white; } switch:disabled { - color: #7f7f7f; - border-color: #7f7f7f; - background-color: #060606; - text-shadow: none; } - switch:backdrop { + color: gray; + border-color: gray; + background-color: #070707; + text-shadow: none; } + switch:backdrop { + color: #fff; + border-color: #737373; + background-color: #000; + box-shadow: none; + text-shadow: none; } + switch:backdrop:active { + color: #fff; + border-color: #737373; + background-color: #737373; + box-shadow: none; } + switch:backdrop:disabled, switch:backdrop:disabled:active { + background-color: #070707; + color: gray; + border-color: gray; } + switch slider { + margin: -1px; + min-width: 45px; + min-height: 27px; + border: 2px solid; + border-radius: 3px; + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: #000; + border-color: gray; } + switch:hover slider { + border-width: 2px; + border-style: solid; color: #fff; - border-color: #727272; background-color: #000; - box-shadow: none; - text-shadow: none; } - switch:backdrop:active { - color: #fff; - border-color: #727272; - background-color: #727272; - box-shadow: none; } - switch:backdrop:disabled, switch:backdrop:disabled:active { - background-color: #060606; - color: #7f7f7f; - border-color: #7f7f7f; } - switch slider { - margin: -1px; - min-width: 45px; - min-height: 27px; - border: 1px solid; - border-radius: 3px; + border-color: gray; + background-image: none; } + switch:active slider { + border: 2px solid #aaa; } + switch:disabled slider { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + switch:backdrop slider { border-width: 2px; border-style: solid; color: #fff; - background-image: none; background-color: #000; - border-color: #7f7f7f; - box-shadow: inset 0 1px white, inset 0 -2px rgba(0, 0, 0, 0.6), inset 0 -1px #3f3f3f; } - switch slider:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: #000; - border-color: #7f7f7f; - background-image: none; - box-shadow: inset 0 1px white, inset 0 -2px rgba(0, 0, 0, 0.6), inset 0 -1px #3f3f3f; } - switch slider:active { - border-color: #aaa; } - switch slider:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - switch slider:backdrop { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } - switch slider:backdrop:active { - border-color: #727272; } - switch slider:backdrop:disabled { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; - background-image: none; } + border-color: #737373; + background-image: none; } + switch:backdrop:active slider { + border-color: #aaa; } + switch:backdrop:disabled slider { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } /************************* * Check and Radio items * *************************/ -GtkCheckButton.text-button, GtkRadioButton.text-button { - padding: 1px; +checkbutton.text-button, radiobutton.text-button { + padding: 2px 0; outline-offset: 0; } - -check { - color: #fff; - background-image: none; - -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); } - check:hover { - color: #fff; } - check:checked, check:active { - -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); } - check:checked:disabled, check:active:disabled { - color: #7f7f7f; } - check:checked:disabled:backdrop, check:active:disabled:backdrop { - color: #7f7f7f; } - check:checked:backdrop, check:active:backdrop { - color: #fff; } - check:disabled { - color: #7f7f7f; } - check:disabled:backdrop { - color: #7f7f7f; } - check:indeterminate { - -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); } - check:backdrop { - color: #fff; } - check:backdrop:selected { - color: #fff; } - + checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child { + margin-left: 4px; } + checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child { + margin-right: 4px; } + checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled { + color: gray; } + checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop { + color: gray; } + +check, radio { + margin: 0 4px; + min-height: 14px; + min-width: 14px; + border: 1px solid; + -gtk-icon-source: none; + border-width: 2px; + border-style: solid; color: #fff; background-image: none; - -gtk-icon-source: -gtk-icontheme("radio-symbolic"); } + background-color: #000; + border-color: gray; } + check:only-child, + radio:only-child { + margin: 0; } + check:hover, radio:hover { - color: #fff; } - radio:checked, radio:active { - -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); } - radio:checked:disabled, radio:active:disabled { - color: #7f7f7f; } - radio:checked:disabled:backdrop, radio:active:disabled:backdrop { - color: #7f7f7f; } - radio:checked:backdrop, radio:active:backdrop { - color: #fff; } + border-width: 2px; + border-style: solid; + color: #fff; + background-color: #000; + border-color: gray; + background-image: none; } + check:active, + radio:active { + border-width: 2px; + border-style: solid; + background-image: none; + color: black; + background-color: white; + border-color: gray; } + check:disabled, radio:disabled { - color: #7f7f7f; } - radio:disabled:backdrop { - color: #7f7f7f; } - radio:indeterminate { - -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); } + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + check:backdrop, radio:backdrop { - color: #fff; } - radio:backdrop:selected { - color: #fff; } - -radiobutton radio, -checkbutton check { - min-width: 16px; - min-height: 16px; - margin: 0 2px 0 2px; } - radiobutton radio:only-child, - checkbutton check:only-child { - margin: 0; } - -/************ - * GtkScale * - ************/ -scale, -scale.scale-has-marks-above.scale-has-marks-below, -scale.vertical.scale-has-marks-above.scale-has-marks-below { -/* -GtkScale-slider-length: 20; - -GtkRange-slider-width: 20; */ - outline-offset: -9px; - -gtk-outline-radius: 4px; } - scale.fine-tune, - scale.scale-has-marks-above.scale-has-marks-below.fine-tune, - scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune { - outline-offset: -7px; - -gtk-outline-radius: 6px; } - scale.fine-tune trough, - scale.scale-has-marks-above.scale-has-marks-below.fine-tune trough, - scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune trough { - border-radius: 4px; - margin: 8px; } - scale trough slider, - scale.scale-has-marks-above.scale-has-marks-below trough slider, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider { border-width: 2px; border-style: solid; color: #fff; - background-image: none; background-color: #000; - border-color: #7f7f7f; - border-radius: 50%; - border-color: #777777; } - scale trough slider:hover, - scale.scale-has-marks-above.scale-has-marks-below trough slider:hover, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:hover { + border-color: #737373; + background-image: none; } + check:backdrop:disabled, + radio:backdrop:disabled { border-width: 2px; border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + .osd check, .osd + radio { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd check:hover, .osd + radio:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd check:active, .osd + radio:active { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd check:backdrop, .osd + radio:backdrop { + border-width: 2px; + border-style: solid; } + .osd check:disabled, .osd + radio:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + menu menuitem check, menu menuitem + radio { + margin: 0; } + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem + radio, menu menuitem + radio:hover, menu menuitem + radio:disabled { + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + animation: none; } + +treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected, + check { + border-radius: 3px; } + treeview.view check:checked:selected, + check:checked { + -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); } + treeview.view check:indeterminate:selected, + check:indeterminate { + -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } + +treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected, + radio { + border-radius: 100%; } + treeview.view radio:checked:selected, + radio:checked { + -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); } + treeview.view radio:indeterminate:selected, + radio:indeterminate { + -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } + +@keyframes check_check { + from { + -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } + to { + -gtk-icon-transform: unset; } } +@keyframes check_radio { + from { + -gtk-icon-transform: scale(0); } + to { + -gtk-icon-transform: unset; } } +@keyframes check_indeterminate { + from { + -gtk-icon-transform: scale(0, 1); } + to { + -gtk-icon-transform: unset; } } +check:not(:indeterminate):checked { + animation: check_check 400ms; } + +radio:not(:indeterminate):checked { + animation: check_radio 400ms; } + +check:indeterminate:checked, radio:indeterminate:checked { + animation: check_indeterminate 400ms; } + +menu menuitem check:not(:indeterminate):checked, +menu menuitem radio:not(:indeterminate):checked, +menu menuitem check:indeterminate:checked:active, +menu menuitem radio:indeterminate:checked { + animation: none; } + +treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected, +treeview.view radio:selected:focus, +treeview.view radio:selected:hover, +treeview.view radio:selected { + color: #fff; } +treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop, +treeview.view radio:selected:backdrop:hover, +treeview.view radio:selected:backdrop { + color: #fff; + border-color: #fff; } +treeview.view check:selected:backdrop:disabled, +treeview.view radio:selected:backdrop:disabled { + color: gray; + border-color: gray; } +treeview.view check:selected:disabled, +treeview.view radio:selected:disabled { + color: gray; } + + /************ + * GtkScale * + ************/ +scale trough, scale fill { + border: 2px solid gray; + border-radius: 4px; + background-color: gray; + box-shadow: none; } + scale trough:disabled, scale fill:disabled { + border-color: #494949; + background-color: #070707; } + scale trough:backdrop, scale fill:backdrop { + background-color: #4d4d4d; + border-color: #737373; } + scale trough:backdrop:disabled, scale fill:backdrop:disabled { + background-color: #070707; + border-color: #494949; } + row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected scale trough:disabled, scale row:selected trough:disabled, row:selected scale fill:disabled, scale row:selected fill:disabled { + border-color: #aaa; } + .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill { + border-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0); + box-shadow: none; + outline-color: rgba(255, 255, 255, 0.2); } + .osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled { + background-color: #070707; } + +scale highlight { + border: 2px solid #aaa; + border-radius: 4px; + background-color: #aaa; } + scale highlight:disabled { + background-color: transparent; + border-color: transparent; } + scale highlight:backdrop { + border-color: #4d4d4d; } + scale highlight:backdrop:disabled { + background-color: transparent; + border-color: transparent; } + row:selected scale highlight, scale row:selected highlight, row:selected scale highlight:disabled, scale row:selected highlight:disabled { + border-color: #aaa; } + .osd scale highlight, scale .osd highlight { + border-color: rgba(255, 255, 255, 0.2); } + .osd scale highlight:disabled, scale .osd highlight:disabled { + border-color: transparent; } + +scale { + min-height: 10px; + min-width: 10px; + padding: 12px; } + scale fill, + scale highlight { + margin: -1px; } + scale slider { + min-height: 18px; + min-width: 18px; + margin: -9px; } + scale.fine-tune.horizontal { + padding-top: 9px; + padding-bottom: 9px; + min-height: 16px; } + scale.fine-tune.vertical { + padding-left: 9px; + padding-right: 9px; + min-width: 16px; } + scale.fine-tune slider { + margin: -6px; } + 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: 5px; } + scale fill, scale fill:backdrop { + background-color: gray; + box-shadow: none; } + scale fill:disabled, scale fill:disabled:backdrop { + border-color: transparent; + background-color: transparent; } + .osd scale fill { + background-color: rgba(255, 255, 255, 0.4); } + .osd scale fill:disabled, .osd scale fill:disabled:backdrop { + border-color: transparent; + background-color: transparent; } + scale slider { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: #000; + border-color: gray; + border: 2px solid gray; + border-radius: 100%; } + scale slider:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: #000; + border-color: gray; + background-image: none; } + scale slider:active { + border-color: #aaa; } + scale slider:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + scale slider:backdrop { + border-width: 2px; + border-style: solid; color: #fff; background-color: #000; - border-color: #7f7f7f; - background-image: none; - border-color: #777777; - border-radius: 50%; } - scale trough slider:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough slider:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:disabled { - border-style: solid; - border-radius: 50%; - background-image: none; - box-shadow: none; } - scale trough slider:backdrop, - scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop { - border-style: solid; - border-radius: 50%; - border-color: #6a6a6a; - background-image: none; - box-shadow: none; } - scale trough slider:backdrop:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:backdrop:disabled { + border-color: #737373; + background-image: none; } + scale slider:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } + row:selected scale slider, row:selected scale slider:disabled { + border-color: #aaa; } + .osd scale slider { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; - background-image: none; } - scale trough slider:active, - scale.scale-has-marks-above.scale-has-marks-below trough slider:active, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough slider:active { - border: 1px solid #a2a2a2; } - scale trough, - scale.scale-has-marks-above.scale-has-marks-below trough, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough { - margin: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: #7f7f7f; - background-color: #323232; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } - scale trough.highlight, - scale.scale-has-marks-above.scale-has-marks-below trough.highlight, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight { - border-color: #aaa; - background-color: #aaa; } - scale trough.highlight:backdrop, - scale.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop { - border-color: #7f7f7f; - background-color: #7f7f7f; - box-shadow: none; } - scale trough:disabled, scale trough.hilight:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:disabled { - border-color: #7f7f7f; - background-color: #060606; } - scale trough:backdrop, - scale.scale-has-marks-above.scale-has-marks-below trough:backdrop, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop { - border-color: #727272; - background-color: #3f3f3f; - box-shadow: none; } - scale trough:backdrop:disabled, scale trough .hilight:backdrop:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled, - scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:disabled, - scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:disabled { - border-color: #7f7f7f; - background-color: #000; } + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + background-color: black; } + .osd scale slider:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); } + .osd scale slider:active { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + .osd scale slider:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + .osd scale slider:backdrop { + border-width: 2px; + border-style: solid; } + .osd scale slider:backdrop:disabled { + border-width: 2px; + border-style: solid; } + scale value { + color: alpha(currentColor,0.4); } + scale marks { + color: alpha(currentColor,0.4); } + scale marks.top { + margin-bottom: 6px; + margin-top: -12px; } + scale marks.bottom { + margin-top: 6px; + margin-bottom: -12px; } + scale marks.top { + margin-right: 6px; + margin-left: -12px; } + scale marks.bottom { + margin-left: 6px; + margin-right: -12px; } + scale.fine-tune marks.top { + margin-bottom: 6px; + margin-top: -9px; } + scale.fine-tune marks.bottom { + margin-top: 6px; + margin-bottom: -9px; } + scale.fine-tune marks.top { + margin-right: 6px; + margin-left: -9px; } + scale.fine-tune marks.bottom { + margin-left: 6px; + margin-right: -9px; } + scale.horizontal indicator { + min-height: 6px; + min-width: 1px; } + scale.horizontal.fine-tune indicator { + min-height: 3px; } + scale.vertical indicator { + min-height: 1px; + min-width: 6px; } + scale.vertical.fine-tune indicator { + min-width: 3px; } /***************** * Progress bars * @@ -1912,17 +2468,17 @@ progressbar { font-size: 83%; color: #fff; } progressbar:backdrop { - color: #7f7f7f; } + color: gray; } progressbar trough { border-width: 1px; border-style: solid; border-radius: 3px; - border-color: #7f7f7f; - background-color: #2c2c2c; + border-color: gray; + background-color: #2d2d2d; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } progressbar trough:backdrop { - border-color: #727272; - background-color: #272727; + border-color: #737373; + background-color: #282828; box-shadow: 0 1px rgba(255, 255, 255, 0); } progressbar.osd trough { background-color: transparent; @@ -1959,8 +2515,8 @@ levelbar trough { background-color: transparent; border-style: solid; background-image: linear-gradient(to bottom, #090909, #111 90%); - border-color: #7f7f7f; - box-shadow: inset 0 2px 2px -2px #080808; } + border-color: gray; + box-shadow: inset 0 2px 2px -2px #090909; } levelbar trough:backdrop { background-color: transparent; border-style: solid; @@ -1986,7 +2542,7 @@ levelbar block.filled.low { levelbar block.filled.high { border-width: 1px; border-style: solid; - border-color: #909090; + border-color: #919191; background-color: #aaa; box-shadow: 0 1px rgba(0, 0, 0, 0.1); border-radius: 1px; } @@ -2010,44 +2566,39 @@ levelbar block.empty { .view:selected, textview text:selected, iconview:selected, calendar:selected, .view:selected:focus, textview text:selected:focus, iconview:selected:focus, calendar:focus:selected, .view:selected:hover, textview text:selected:hover, iconview:selected:hover, calendar:hover:selected, textview text selection, textview text selection:focus, -textview text selection:hover, flowbox flowboxchild:selected, label selection, label selection:focus, label selection:hover, label selection:backdrop, entry selection -entry selection:focus, spinbutton selection -entry selection:focus, entry selection -spinbutton selection:focus, spinbutton selection -spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, -.menuitem.button.flat:hover, -.menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar textview text:selected, textview placessidebar text:selected, placessidebar iconview:selected, placessidebar calendar:selected { - background-color: #aaa; - color: #000; - outline-color: rgba(255, 255, 255, 0.3); } - .view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, entry selection - entry selection:backdrop:focus, spinbutton selection - entry selection:backdrop:focus, entry selection - spinbutton selection:backdrop:focus, spinbutton selection - spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected, - .menuitem.button.flat:backdrop:hover, - .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { - background-color: #7f7f7f; - color: #fff; } +textview text selection:hover, flowbox flowboxchild:selected, label selection, label selection:focus, label selection:hover, label selection:backdrop, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection, +entry selection:focus, +entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, +popover.background radiobutton:selected, +.menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected { + background-color: #aaa; + color: #fff; + outline-color: rgba(255, 255, 255, 0.3); } + .view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, spinbutton:not(.vertical) selection:backdrop, + entry selection:backdrop, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, + popover.background radiobutton:backdrop:selected, + .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { + background-color: gray; + color: #fff; } /********** - * rames * + * Frames * **********/ -frame border, -.frame { - border: 1px solid #7f7f7f; - padding: 0; } - frame border.flat, - .frame.flat { - border-style: none; } - frame border:backdrop, - .frame:backdrop { - border-color: #727272; } - -actionbar box { - padding: 6px; - border-width: 1px 0 0; - border-color: #7f7f7f; + frame border, + .frame { + border: 1px solid gray; + padding: 0; } + frame border.flat, + .frame.flat { + border-style: none; } + frame border:backdrop, + .frame:backdrop { + border-color: #737373; } + +actionbar > revealer > box { + padding: 6px; + border-width: 1px 0 0; + border-color: gray; border-style: solid none none; } placessidebar .frame, @@ -2058,7 +2609,7 @@ scrolledwindow viewport.frame { border-style: none; } placessidebar overshoot.top, scrolledwindow overshoot.top { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(black), to(transparent)), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center top; @@ -2067,7 +2618,7 @@ scrolledwindow overshoot.top { box-shadow: none; } placessidebar overshoot.top:backdrop, scrolledwindow overshoot.top:backdrop { - background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#727272), to(rgba(114, 114, 114, 0))); + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#737373), to(rgba(115, 115, 115, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center top; @@ -2076,7 +2627,7 @@ scrolledwindow overshoot.top { box-shadow: none; } placessidebar overshoot.bottom, scrolledwindow overshoot.bottom { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(black), to(transparent)), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-size: 100% 5%, 100% 100%; background-repeat: no-repeat; background-position: center bottom; @@ -2085,7 +2636,7 @@ scrolledwindow overshoot.bottom { box-shadow: none; } placessidebar overshoot.bottom:backdrop, scrolledwindow overshoot.bottom:backdrop { - background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#727272), to(rgba(114, 114, 114, 0))); + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#737373), to(rgba(115, 115, 115, 0))); background-size: 100% 5%; background-repeat: no-repeat; background-position: center bottom; @@ -2094,7 +2645,7 @@ scrolledwindow overshoot.bottom { box-shadow: none; } placessidebar overshoot.left, scrolledwindow overshoot.left { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(black), to(transparent)), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: left center; @@ -2103,7 +2654,7 @@ scrolledwindow overshoot.left { box-shadow: none; } placessidebar overshoot.left:backdrop, scrolledwindow overshoot.left:backdrop { - background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#727272), to(rgba(114, 114, 114, 0))); + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#737373), to(rgba(115, 115, 115, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: left center; @@ -2112,7 +2663,7 @@ scrolledwindow overshoot.left { box-shadow: none; } placessidebar overshoot.right, scrolledwindow overshoot.right { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(black), to(transparent)), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-size: 5% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center; @@ -2121,7 +2672,7 @@ scrolledwindow overshoot.right { box-shadow: none; } placessidebar overshoot.right:backdrop, scrolledwindow overshoot.right:backdrop { - background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#727272), to(rgba(114, 114, 114, 0))); + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#737373), to(rgba(115, 115, 115, 0))); background-size: 5% 100%; background-repeat: no-repeat; background-position: right center; @@ -2169,24 +2720,16 @@ scrolledwindow undershoot.right { background-repeat: repeat-y; background-origin: content-box; background-position: right center; } -placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough, -scrolledwindow junction, -scrolledwindow scrollbar trough, -scrollbar scrolledwindow trough { +placessidebar junction, +scrolledwindow junction { border-color: transparent; background-color: black; } - placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar trough:backdrop, - scrolledwindow junction:backdrop, - scrolledwindow scrollbar trough:backdrop, - scrollbar scrolledwindow trough:backdrop { + placessidebar junction:backdrop, + scrolledwindow junction:backdrop { background-color: transparent; } -separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text separator, placessidebar iconview separator, -placessidebar .view separator:backdrop, -placessidebar textview text separator:backdrop, -textview placessidebar text separator:backdrop, -placessidebar iconview separator:backdrop { - background: #7f7f7f; +separator { + background: gray; min-width: 1px; min-height: 1px; } @@ -2195,10 +2738,10 @@ placessidebar iconview separator:backdrop { *********/ list { background-color: #111; - border-color: #7f7f7f; } + border-color: gray; } list:backdrop { background-color: #111; - border-color: #727272; } + border-color: #737373; } list row { padding: 2px; } @@ -2218,8 +2761,8 @@ row.activatable:disabled:checked { row.activatable { color: #fff; } - row.activatable:hover, placessidebar .has-open-popup { - background-color: #1c1c1c; } + row.activatable:hover { + background-color: #1d1d1d; } row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } row.activatable:selected { @@ -2229,10 +2772,10 @@ row.activatable { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); color: #000; } - row.activatable:selected:hover, placessidebar .has-open-popup:selected { - background-color: #b2b2b2; } + row.activatable:selected:hover { + background-color: #b3b3b3; } row.activatable:selected:backdrop { - background-color: #7f7f7f; } + background-color: gray; } row.activatable:selected .button.flat { color: #fff; } row.activatable:selected .button.flat:hover { @@ -2248,8 +2791,7 @@ row, row.activatable { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } row:hover, - row.activatable:hover, - placessidebar .has-open-popup { + row.activatable:hover { transition: none; } /********************* @@ -2260,12 +2802,15 @@ row.activatable { padding: 10px; border-width: 0 1px 1px; border-style: solid; - border-color: #7f7f7f; + border-color: gray; border-radius: 0 0 6px 6px; background-image: linear-gradient(to bottom, black 5%, black); } .app-notification .button, .app-notification.frame .button { padding: 6px; } + .app-notification border, + .app-notification.frame border { + border-width: 0; } /************* * Expanders * @@ -2285,7 +2830,7 @@ expander arrow { * Calendar * ***********/ calendar { - border: 1px solid #7f7f7f; } + border: 1px solid gray; } calendar.button { padding: 0 4px; color: #707070; } @@ -2297,10 +2842,10 @@ calendar { border-radius: 2px; } calendar.header { background: linear-gradient(to bottom, #050505, black); - border-bottom-color: #3f3f3f; } + border-bottom-color: #404040; } calendar.header:backdrop { background-image: linear-gradient(to bottom, #000); - border-bottom-color: #393939; } + border-bottom-color: #3a3a3a; } calendar:indeterminate, calendar:indeterminate:backdrop { color: alpha(currentColor,0.55); } calendar.highlight, calendar.highlight:backdrop { @@ -2326,13 +2871,13 @@ messagedialog.csd { color: #fff; background-image: none; background-color: #000; - border-color: #7f7f7f; } + border-color: gray; } messagedialog.csd .dialog-action-area button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; - border-color: #7f7f7f; + border-color: gray; background-image: none; } messagedialog.csd .dialog-action-area button:active { border-width: 2px; @@ -2340,31 +2885,27 @@ messagedialog.csd { background-image: none; color: black; background-color: white; - border-color: #7f7f7f; } + border-color: gray; } messagedialog.csd .dialog-action-area button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } messagedialog.csd .dialog-action-area button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: #737373; + background-image: none; } messagedialog.csd .dialog-action-area button:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + color: gray; + background-color: #070707; + border-color: #494949; background-image: none; } messagedialog.csd .dialog-action-area button.suggested-action { border-width: 2px; @@ -2393,25 +2934,21 @@ messagedialog.csd { color: white; background-color: #4a90d9; border-color: #4a90d9; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + background-image: none; } messagedialog.csd .dialog-action-area button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + color: gray; + background-color: #070707; + border-color: #494949; background-image: none; } messagedialog.csd .dialog-action-area button.suggested-action:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } messagedialog.csd .dialog-action-area button.destructive-action { border-width: 2px; border-style: solid; @@ -2439,25 +2976,21 @@ messagedialog.csd { color: white; background-color: #ef2929; border-color: #ef2929; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + background-image: none; } messagedialog.csd .dialog-action-area button.destructive-action:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + color: gray; + background-color: #070707; + border-color: #494949; background-image: none; } messagedialog.csd .dialog-action-area button.destructive-action:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } messagedialog.csd .dialog-action-area button, messagedialog.csd .dialog-action-area button:hover, messagedialog.csd .dialog-action-area button:active, messagedialog.csd .dialog-action-area button:disabled, messagedialog.csd .dialog-action-area button:backdrop, messagedialog.csd .dialog-action-area button:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action, messagedialog.csd .dialog-action-area button.suggested-action:hover, messagedialog.csd .dialog-action-area button.suggested-action:active, messagedialog.csd .dialog-action-area button.suggested-action:backdrop, messagedialog.csd .dialog-action-area button.suggested-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.suggested-action:disabled, messagedialog.csd .dialog-action-area button.destructive-action, messagedialog.csd .dialog-action-area button.destructive-action:hover, messagedialog.csd .dialog-action-area button.destructive-action:active, messagedialog.csd .dialog-action-area button.destructive-action:backdrop, messagedialog.csd .dialog-action-area button.destructive-action:backdrop:disabled, messagedialog.csd .dialog-action-area button.destructive-action:disabled { border-right-style: none; border-bottom-style: none; } @@ -2467,10 +3000,16 @@ messagedialog.csd { border-left-style: none; border-bottom-left-radius: 7px; } -GtkFileChooserDialog .dialog-action-box { - border-top: 1px solid #7f7f7f; } - GtkFileChooserDialog .dialog-action-box:backdrop { - border-top-color: #727272; } +filechooser .dialog-action-box { + border-top: 1px solid gray; } + filechooser .dialog-action-box:backdrop { + border-top-color: #737373; } +filechooser #pathbarbox { + border-bottom: 1px solid #000; } + +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; } /*********** * Sidebar * @@ -2480,106 +3019,100 @@ GtkFileChooserDialog .dialog-action-box { .sidebar:backdrop { background-color: #000; } .sidebar > scrolledwindow > .frame { - border-right: 1px solid #7f7f7f; } + border-right: 1px solid gray; } .sidebar > scrolledwindow > .frame:dir(rtl) { border-right: none; - border-left: 1px solid #7f7f7f; } + border-left: 1px solid gray; } +stacksidebar row { + padding: 10px 4px; } + stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; } + stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; } + +/**************** + * File chooser * + ****************/ +placessidebar > viewport.frame { + border-style: none; } placessidebar row { + min-height: 36px; padding: 0px; } placessidebar row > revealer { - padding: 4px 14px 4px 12px; } + padding: 0 14px; } placessidebar row image.sidebar-icon { - opacity: 0.9; } + opacity: 0.7; } placessidebar row image.sidebar-icon:dir(ltr) { padding-right: 8px; } placessidebar row image.sidebar-icon:dir(rtl) { padding-left: 8px; } - placessidebar row label .sidebar-label:dir(ltr) { + placessidebar row label.sidebar-label:dir(ltr) { padding-right: 2px; } - placessidebar row label .sidebar-label:dir(rtl) { + placessidebar row label.sidebar-label:dir(rtl) { padding-left: 2px; } button.sidebar-button { + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; border-radius: 100%; -gtk-outline-radius: 100%; } - button.sidebar-button.image-button { - padding: 5px; } button.sidebar-button:not(:hover):not(:active) > image, button.sidebar-button:backdrop > image { - opacity: 0.9; } -placessidebar .view, placessidebar textview text, textview placessidebar text, placessidebar iconview { - color: #fff; + opacity: 0.7; } + placessidebar row:selected:active { + box-shadow: none; } + placessidebar row.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image(#fff); + background-clip: content-box; } + placessidebar row.sidebar-new-bookmark-row { + color: #aaa; } + placessidebar row:drop(active):not(:disabled) { + color: #fff; + box-shadow: inset 0 1px #fff, inset 0 -1px #fff; } + placessidebar row:drop(active):not(:disabled):selected { + color: #fff; + background-color: #fff; } + +placesview .server-list-button > image { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(0turn); } +placesview .server-list-button:checked > image { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(-0.5turn); } +placesview row.activatable:hover { background-color: transparent; } - placessidebar .view .image, placessidebar textview text .image, textview placessidebar text .image, placessidebar iconview .image { - color: #b2b2b2; } - placessidebar .view .image:selected, placessidebar textview text .image:selected, textview placessidebar text .image:selected, placessidebar iconview .image:selected { - color: #f6f6f6; } - -stacksidebar row { - padding: 10px 4px; } - stacksidebar row > label { - padding-left: 6px; - padding-right: 6px; } - stacksidebar row.needs-attention > label { - background-size: 6px 6px, 0 0; } /********* * Paned * *********/ -paned separator, paned placessidebar .view separator, placessidebar .view paned separator, paned placessidebar textview text separator, placessidebar textview text paned separator, paned textview placessidebar text separator, textview placessidebar text paned separator, paned placessidebar iconview separator, placessidebar iconview paned separator, -paned placessidebar .view separator:backdrop, -placessidebar .view paned separator:backdrop, -paned placessidebar textview text separator:backdrop, -placessidebar textview text paned separator:backdrop, -paned textview placessidebar text separator:backdrop, -textview placessidebar text paned separator:backdrop, -paned placessidebar iconview separator:backdrop, -placessidebar iconview paned separator:backdrop { +paned separator { min-width: 1px; min-height: 1px; - background-image: linear-gradient(to bottom, #7f7f7f); } + background-image: linear-gradient(to bottom, gray); } paned separator:backdrop { - background-image: linear-gradient(to bottom, #727272); } + background-image: linear-gradient(to bottom, #737373); } paned:dir(ltr).horizontal separator { margin: 0 -8px 0 0; padding: 0 8px 0 0; } paned:dir(rtl).horizontal separator { margin: 0 0 0 -8px; padding: 0 0 0 8px; } -paned.vertical separator, -paned.vertical placessidebar .view separator:backdrop, -placessidebar .view paned.vertical separator:backdrop, -paned.vertical placessidebar textview text separator:backdrop, -placessidebar textview text paned.vertical separator:backdrop, -paned.vertical textview placessidebar text separator:backdrop, -textview placessidebar text paned.vertical separator:backdrop, -paned.vertical placessidebar iconview separator:backdrop, -placessidebar iconview paned.vertical separator:backdrop { +paned.vertical separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; } -paned separator:selected, -paned placessidebar .view separator:selected:backdrop, -placessidebar .view paned separator:selected:backdrop, -paned placessidebar textview text separator:selected:backdrop, -placessidebar textview text paned separator:selected:backdrop, -paned textview placessidebar text separator:selected:backdrop, -textview placessidebar text paned separator:selected:backdrop, -paned placessidebar iconview separator:selected:backdrop, -placessidebar iconview paned separator:selected:backdrop { +paned separator:selected { background-color: #aaa; } -paned separator.wide, -paned placessidebar .view separator.wide:backdrop, -placessidebar .view paned separator.wide:backdrop, -paned placessidebar textview text separator.wide:backdrop, -placessidebar textview text paned separator.wide:backdrop, -paned textview placessidebar text separator.wide:backdrop, -textview placessidebar text paned separator.wide:backdrop, -paned placessidebar iconview separator.wide:backdrop, -placessidebar iconview paned separator.wide:backdrop { +paned separator.wide { min-width: 5px; min-height: 5px; background-color: transparent; border-style: none solid; - border-color: #7f7f7f; + border-color: gray; border-width: 1px; } /************** @@ -2595,8 +3128,8 @@ infobar { .error { background-color: #aaa; color: #fff; - text-shadow: 0 1px #909090; - border-color: #909090; } + text-shadow: 0 1px #919191; + border-color: #919191; } .info button, .question button, .warning button, @@ -2633,12 +3166,10 @@ infobar { .error button:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + color: gray; + background-color: #070707; + border-color: #494949; + background-image: none; } .info button:backdrop, .question button:backdrop, .warning button:backdrop, @@ -2648,18 +3179,16 @@ infobar { color: #fff; background-color: #aaa; border-color: #aaa; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + background-image: none; } .info button:backdrop:disabled, .question button:backdrop:disabled, .warning button:backdrop:disabled, .error button:backdrop:disabled { border-width: 2px; border-style: solid; - color: #7f7f7f; - background-color: #060606; - border-color: #727272; + color: gray; + background-color: #070707; + border-color: #494949; background-image: none; } .info label:selected, .info label:selected:focus, @@ -2761,23 +3290,21 @@ colorswatch { color: #fff; background-image: none; background-color: #000; - border-color: #7f7f7f; } + border-color: gray; } colorswatch#add-color-button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; - border-color: #7f7f7f; + border-color: gray; background-image: none; } colorswatch#add-color-button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; } + border-color: #737373; + background-image: none; } colorswatch#add-color-button overlay { border-width: 0; background: none; } @@ -2813,7 +3340,7 @@ decoration { border-radius: 3px; margin: 10px; background-color: #000; - border: solid 2px #fff; + border: solid 2px #737373; box-shadow: none; } /* workaround to avoid unwanted black frames if switching compositor on/off */ @@ -2822,38 +3349,6 @@ decoration { box-shadow: none; } -button.titlebutton { - padding: 8px; - border-color: transparent; - background-image: none; - transition-property: border, box-shadow, color; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px transparent; } - button.titlebutton:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-image: none; - background-color: #000; - border-color: #7f7f7f; } - button.titlebutton:active { - border-width: 2px; - border-style: solid; - background-image: none; - color: black; - background-color: white; - border-color: #7f7f7f; } - button.titlebutton:backdrop { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: #000; - border-color: #727272; - background-image: none; - text-shadow: none; - -gtk-icon-shadow: none; - border-color: transparent; - transition-property: border, box-shadow, color; } - /********************** * Touch Copy & Paste * *********************/ @@ -2912,15 +3407,13 @@ cursor-handle { color: #fff; background-image: none; background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } + border-color: rgba(255, 255, 255, 0.2); } .touch-selection button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } + border-color: rgba(255, 255, 255, 0.2); } .touch-selection button:active, .touch-selection button:checked { border-width: 2px; border-style: solid; @@ -2932,7 +3425,7 @@ cursor-handle { border-width: 2px; border-style: solid; border-color: rgba(255, 255, 255, 0.2); - color: #7f7f7f; } + color: gray; } .touch-selection button:backdrop { border-width: 2px; border-style: solid; } @@ -3018,21 +3511,34 @@ cursor-handle { button.circular { border-radius: 20px; -gtk-outline-radius: 20px; } + button.circular label { + padding: 0; } + row:selected button.circular { + color: #fff; } + row:selected button.circular:hover { + color: #fff; } + row:selected button.circular:active { + color: #fff; } -button.circular label { - padding: 0; } - -frame.keycap { - background-color: #fefefe; - border: 1px solid #cecece; +.keycap { + min-width: 18px; + min-height: 25px; + margin-top: 3px; + padding-bottom: 2px; + padding-left: 6px; + padding-right: 6px; + color: #fff; + background-color: #111; + border: 2px solid; + border-color: gray; border-radius: 5px; - box-shadow: 0px 1px 0px #fff inset, 0px -2px 0px #dedede inset; - color: #555753; - padding: 3px 8px 3px 8px; } + box-shadow: inset 0 -3px #404040, inset 0 -2px #000, inset 0 0 0 1px #111; + font-size: smaller; } *:drop(active):focus, *:drop(active) { - border: 1px solid black; } + border-color: #fff; + box-shadow: inset 0 0 0 2px #fff; } stackswitcher button.text-button { min-width: 100px; } diff --git a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css index bd25d758..15a596c7 100644 --- a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css +++ b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk.css @@ -4,16 +4,16 @@ @define-color theme_base_color #111; @define-color theme_selected_bg_color #aaa; @define-color theme_selected_fg_color #000; -@define-color insensitive_bg_color #060606; -@define-color insensitive_fg_color #7f7f7f; +@define-color insensitive_bg_color #070707; +@define-color insensitive_fg_color gray; @define-color insensitive_base_color #111; @define-color theme_unfocused_fg_color #fff; @define-color theme_unfocused_bg_color #000; @define-color theme_unfocused_base_color #111; @define-color theme_unfocused_selected_bg_color #aaa; @define-color theme_unfocused_selected_fg_color #fff; -@define-color borders #7f7f7f; -@define-color unfocused_borders #727272; +@define-color borders gray; +@define-color unfocused_borders #737373; @define-color warning_color #f57900; @define-color error_color #cc0000; @define-color success_color #73d216; |