From 8351a6e4d61a48921582668dd54b3094cbcd75ac Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Fri, 11 Mar 2016 16:34:30 +0100 Subject: [PATCH] Adwaita: .osd check|radio style --- gtk/theme/Adwaita/_colors.scss | 2 +- gtk/theme/Adwaita/_common.scss | 10 ++++ gtk/theme/Adwaita/gtk-contained-dark.css | 62 +++++++++++++++++++++--- gtk/theme/Adwaita/gtk-contained.css | 62 +++++++++++++++++++++--- 4 files changed, 121 insertions(+), 15 deletions(-) diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index 2edb2aefaf..6be0554d1a 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -44,7 +44,7 @@ $base_hover_color: transparentize($fg_color, 0.95); $tooltip_borders_color: transparentize(white, 0.9); $shadow_color: transparentize(black, 0.9); -$drop_target_color: black; // FIXME: we need something different than black here... +$drop_target_color: $success_color; //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 9114049858..1fbe282434 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2369,6 +2369,7 @@ radio { min-width: 14px; border: 1px solid; -gtk-icon-source: none; + @include button(normal-alt, $edge: $shadow_color); &:hover { @include button(hover-alt, $edge: $shadow_color); } @@ -2386,6 +2387,15 @@ radio { row:selected & { border-color: $selected_borders_color; } } + .osd & { + @include button(osd); + + &:hover { @include button(osd); } + &:active { @include button(osd-active); } + &:backdrop { @include button(osd-backdrop); } + &:disabled { @include button(osd-insensitive); } + } + menu menuitem & { margin: 0; // this is a workaround for a menu check/radio size allocation issue diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index ad17291b86..a4a9911daf 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -236,7 +236,7 @@ entry, spinbutton:not(.vertical) { .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo { border-left-color: #0f2b48; } .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo { - border-left-color: black; } + border-left-color: #5aa411; } entry.error, spinbutton.error:not(.vertical) { color: #cc0000; border-color: #1a0000; } @@ -306,8 +306,8 @@ entry, spinbutton:not(.vertical) { text-shadow: none; -gtk-icon-shadow: none; } entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) { - border-color: black; - box-shadow: inset 0 0 0 1px black; } + border-color: #5aa411; + box-shadow: inset 0 0 0 1px #5aa411; } .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #252626; @@ -320,7 +320,7 @@ entry, spinbutton:not(.vertical) { .linked.vertical > entry + entry:focus:not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical) { border-top-color: #0f2b48; } .linked.vertical > entry + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical) { - border-top-color: black; } + border-top-color: #5aa411; } .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, @@ -332,7 +332,7 @@ entry, spinbutton:not(.vertical) { .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo { - border-top-color: black; } + border-top-color: #5aa411; } /*********** * Buttons * @@ -501,8 +501,8 @@ notebook > header > tabs > arrow, headerbar button.titlebutton, .titlebar button.titlebutton:drop(active), .titlebar combobox:drop(active) button.titlebutton.combo, combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo { - border-color: black; - box-shadow: inset 0 0 0 1px black; } + border-color: #5aa411; + box-shadow: inset 0 0 0 1px #5aa411; } button.osd { color: #eeeeec; border-radius: 5px; @@ -2560,6 +2560,54 @@ radio { text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + .osd check, .osd + radio { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(238, 238, 236, 0.3); } + .osd check:hover, .osd + radio:hover { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(238, 238, 236, 0.3); } + .osd check:active, .osd + radio:active { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(238, 238, 236, 0.3); } + .osd check:backdrop, .osd + radio:backdrop { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd check:disabled, .osd + radio:disabled { + color: #878a89; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } menu menuitem check, menu menuitem radio { margin: 0; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 9a0c8009c2..8cce22303c 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -236,7 +236,7 @@ entry, spinbutton:not(.vertical) { .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo { border-left-color: #4a90d9; } .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo { - border-left-color: black; } + border-left-color: #73d216; } entry.error, spinbutton.error:not(.vertical) { color: #cc0000; border-color: #cc0000; } @@ -306,8 +306,8 @@ entry, spinbutton:not(.vertical) { text-shadow: none; -gtk-icon-shadow: none; } entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) { - border-color: black; - box-shadow: inset 0 0 0 1px black; } + border-color: #73d216; + box-shadow: inset 0 0 0 1px #73d216; } .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #e2e2e0; @@ -320,7 +320,7 @@ entry, spinbutton:not(.vertical) { .linked.vertical > entry + entry:focus:not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical) { border-top-color: #4a90d9; } .linked.vertical > entry + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical) { - border-top-color: black; } + border-top-color: #73d216; } .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, @@ -332,7 +332,7 @@ entry, spinbutton:not(.vertical) { .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo { - border-top-color: black; } + border-top-color: #73d216; } /*********** * Buttons * @@ -501,8 +501,8 @@ notebook > header > tabs > arrow, headerbar button.titlebutton, .titlebar button.titlebutton:drop(active), .titlebar combobox:drop(active) button.titlebutton.combo, combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo { - border-color: black; - box-shadow: inset 0 0 0 1px black; } + border-color: #73d216; + box-shadow: inset 0 0 0 1px #73d216; } button.osd { color: #eeeeec; border-radius: 5px; @@ -2585,6 +2585,54 @@ radio { row:selected check, row:selected radio { border-color: #184472; } + .osd check, .osd + radio { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(238, 238, 236, 0.3); } + .osd check:hover, .osd + radio:hover { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(238, 238, 236, 0.3); } + .osd check:active, .osd + radio:active { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(238, 238, 236, 0.3); } + .osd check:backdrop, .osd + radio:backdrop { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd check:disabled, .osd + radio:disabled { + color: #878a89; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } menu menuitem check, menu menuitem radio { margin: 0; }