diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss index 23435b09c6..b560717cae 100644 --- a/gtk/resources/theme/Adwaita/_colors.scss +++ b/gtk/resources/theme/Adwaita/_colors.scss @@ -20,9 +20,10 @@ $error_color: #cc0000; $success_color: if($variant =='light', #73d216, darken(#73d216,10%)); $destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%)); -$osd_fg_color: #fff; -$osd_bg_color: transparentize(#000,0.4); -$osd_borders_color: transparentize(#666,0.2); +$osd_fg_color: #eeeeec; +$osd_bg_color: #2e3436; +$osd_borders_color: transparentize(black, 0.3); +$osd_outer_borders_color: transparentize(white, 0.9); //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 063918d3d4..43e8e68e02 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -135,12 +135,12 @@ GtkLabel { &:selected, &:selected:focus, &:selected:hover, - &:backdrop:selected { - @extend %selected_items; - } &:insensitive { color: $insensitive_fg_color; } + &:backdrop:selected { + @extend %selected_items; + } } .dim-label { @@ -160,6 +160,11 @@ GtkAssistant { } } +.osd { + color: $osd_fg_color; + text-shadow: 0 1px black; + &:backdrop { text-shadow: none; } +} /********************* * Spinner Animation * @@ -322,10 +327,6 @@ $_dot_color: if($variant=='light', $selected_bg_color, @include button(backdrop-insensitive-active); } } - //&:selected, &.flat:selected, Why this? - //&:selected:focus, &.flat:focus { - // @extend %selected_items; - //} &:insensitive { @include button(insensitive); &:active, &.flat:active, @@ -338,36 +339,52 @@ $_dot_color: if($variant=='light', $selected_bg_color, } // big standalone buttons like in Documents pager &.osd { - border-radius: 6px; - padding: 12px; - border-width: 1px 1px 2px 1px; + &.image-button { padding: 13px; } color: $osd_fg_color; - text-shadow: none; - icon-shadow: none; + border-radius: 6px; + outline-color: transparentize($osd_fg_color, 0.8); @include button(osd); - &:hover { @include button(osd-hover); } - &:active, &:checked { @include button(osd-active); } - &:insensitive { @include button(osd-insensitive); } - &:backdrop { @include button(osd-backdrop); } + border-color: $osd_outer_borders_color; + box-shadow: none; + &:hover { + @include button(osd-hover); + border-color: $osd_outer_borders_color; + box-shadow: none; + } + &:active, &:checked { + @include button(osd-active); + border-color: $osd_outer_borders_color; + box-shadow: none + } + &:insensitive, &:backdrop:insensitive { + @include button(osd-insensitive); + border-color: $osd_outer_borders_color; + // FIXME: if this state actually exists we should probably make the button + // disappear + } + &:backdrop { + @include button(osd-backdrop); + border-color: $osd_outer_borders_color; + } } //overlay / OSD style .osd & { - padding: 6px; - border-width: 1px 1px 2px 1px; + // FIXME: for some reason I can't figure out the bookmark button in gnome documents + // gets borders radius 0, when they get backdrop and another state + border-width: 1px; color: $osd_fg_color; + outline-color: transparentize($osd_fg_color, 0.8); @include button(osd); - text-shadow: none; - icon-shadow: none; @extend %linked; &:hover { @include button(osd-hover); @extend %linked; } - &:active, &:checked { + &:active, &:checked, &:backdrop:active, &:backdrop:checked { @include button(osd-active); @extend %linked; } - &:insensitive { + &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); @extend %linked; } @@ -397,6 +414,26 @@ $_dot_color: if($variant=='light', $selected_bg_color, &:insensitive { @include button(insensitive); } + .osd & { + @include button(osd, $b_color); + @extend %linked; + &:hover { + @include button(osd-hover, $b_color); + @extend %linked; + } + &:active, &:checked, &:backdrop:active, &:backdrop:checked { + @include button(osd-active, $b_color); + @extend %linked; + } + &:insensitive, &:backdrop:insensitive { + @include button(osd-insensitive, $b_color); + @extend %linked; + } + &:backdrop { + @include button(osd-backdrop, $b_color); + @extend %linked; + } + } } } &.image-button, @@ -490,7 +527,6 @@ $_dot_color: if($variant=='light', $selected_bg_color, .linked.vertical &:active, .linked.vertical &:checked, .linked.vertical &:backdrop { @extend %linked_vertical; } - } // all the following is for the +|- buttons on inline toolbars, that way @@ -806,10 +842,12 @@ GtkComboBox { -GtkWidget-window-dragging: true; padding: 4px; background-color: $bg_color; - .osd & { - background-color: $osd_bg_color; + .osd &, &.osd { + padding: 13px; + border: $osd_outer_borders_color; border-radius: 6px; - padding: 12px; + background-color: transparentize($osd_bg_color, 0.3); + background-clip: padding-box; } } @@ -1200,14 +1238,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells border-style: none; background-color: transparent; } -// .separator { Those props doesn't seem to do anything -// font-size: 80%; I'll comment these out for now and I'll -// font-weight: bold; delete if nobody blames me :-) -// text-shadow: none; -// background-color: transparent; -// icon-shadow: none; -// border: 0; -// } .button.flat, .button.flat:hover { text-shadow: none; @@ -1808,13 +1838,11 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { } //OSD sliders .osd & { - background-image: none; - background-color: opacify($osd_borders_color,1); - border-width: 1px; - box-shadow: none; - border-color: $osd_borders_color; - &:hover { border-color: lighten($osd_borders_color,10%); } - &:active { border-color: lighten($osd_borders_color,30%); } + @include button(osd); + background-color: $osd_bg_color; + &:hover { @include button(osd-hover); } + &:active { @include button(osd-active); } + &:backdrop { @include button(osd-backdrop); } } } &.trough { @@ -1848,16 +1876,32 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { background-color: mix($backdrop_bg_color,$borders_color); box-shadow: none; } - &:backdrop:insensitive, .hilight:backdrop:insensitive { + &:backdrop:insensitive, .highlight:backdrop:insensitive { border-color: $backdrop_borders_color; background-color: $insensitive_bg_color; } //OSD troughs .osd & { - background-image: none; - border-width: 0; - //background-color: $osd_borders_color; + border-color: $osd_borders_color; box-shadow: none; + margin: 9px; + &.fine-tune { margin: 7px; } + background-color: transparentize($osd_borders_color, 0.2); + outline-color: transparentize($osd_fg_color, 0.8); + outline-offset: -8px; + &.highlight { + background-image: none; + background-color: $selected_bg_color; + } + &:insensitive, &:backdrop:insensitive { + border-color: transparent; + background-color: transparent; + } + &:backdrop { + border-color: $osd_borders_color; + background-color: none; + background-image: none; + } } } } diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index 1ed62cc25b..8347d96fba 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -139,7 +139,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, -// osd, osd-hover, osd-active, osd-insensitive, undecorated +// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // border-style: solid; @@ -299,32 +299,62 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on // // normal osd button // - background-image: linear-gradient(to bottom, $osd_bg_color); + $_bg: if($c!=$bg_color, transparentize($c, 0.5), + transparentize($osd_bg_color, 0.3)); + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, $_bg); border-color: $osd_borders_color; - box-shadow: none; + box-shadow: inset 0 -1px transparentize(black, 0.7), + inset 0 1px transparentize(white, 0.9); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } @else if $t==osd-hover { // // active osd button // - background-image: linear-gradient(to bottom, lighten($osd_bg_color,10%)); + $_bg: if($c!=$bg_color, transparentize($c, 0.3), + transparentize(lighten($osd_bg_color, 20%), 0.3)); + color: white; border-color: $osd_borders_color; - box-shadow: none; + background-image: linear-gradient(to bottom, $_bg); } @else if $t==osd-active { // // active osd button // - background-image: linear-gradient(to bottom, lighten($osd_bg_color,20%)); + $_bg: if($c!=$bg_color, $c, $selected_bg_color); + color: white; border-color: $osd_borders_color; + background-image: linear-gradient(to bottom, $_bg); box-shadow: none; + text-shadow: none; + icon-shadow: none; } @else if $t==osd-insensitive { // // insensitive osd button // - border-color: $osd_borders_color; + $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3); color: $insensitive_fg_color; + border-color: $osd_borders_color; + background-image: linear-gradient(to bottom, $_bg); + box-shadow: none; + text-shadow: none; + icon-shadow: none; + } + @else if $t==osd-backdrop { + // + // backdrop osd button + // + $_bg: if($c!=$bg_color, transparentize($c, 0.5), + transparentize($osd_bg_color, 0.3)); + background-image: linear-gradient(to bottom, $_bg); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } @else if $t==undecorated { // diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index db7e3333c6..3e480443d4 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -116,7 +116,7 @@ .overshoot { background-color: rgba(33, 93, 156, 0.2); } -GtkLabel:insensitive { +GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:insensitive { color: #939695; } .dim-label, .titlebar .subtitle, GtkCalendar.header .subtitle, @@ -131,6 +131,12 @@ GtkAssistant .sidebar GtkLabel { GtkAssistant .sidebar GtkLabel.highlight { background-color: #212424; } +.osd { + color: #eeeeec; + text-shadow: 0 1px black; } + .osd:backdrop { + text-shadow: none; } + /********************* * Spinner Animation * *********************/ @@ -360,58 +366,95 @@ GtkAssistant .sidebar GtkLabel.highlight { background-image: linear-gradient(to bottom, #2f3333, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } .button.osd { + color: #eeeeec; border-radius: 6px; - padding: 12px; - border-width: 1px 1px 2px 1px; - color: white; - text-shadow: none; - icon-shadow: none; + outline-color: rgba(238, 238, 236, 0.2); border-style: solid; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6)); - border-color: rgba(102, 102, 102, 0.8); + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } + .button.osd.image-button { + padding: 13px; } .button.osd:hover { border-style: solid; - background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6)); - border-color: rgba(102, 102, 102, 0.8); + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); + border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } .button.osd:active, .button.osd:checked { border-style: solid; - background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6)); - border-color: rgba(102, 102, 102, 0.8); + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #215d9c); + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } - .button.osd:insensitive { + .button.osd:insensitive, .button.osd:backdrop:insensitive { border-style: solid; - border-color: rgba(102, 102, 102, 0.8); - color: #939695; } + color: #939695; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-color: rgba(255, 255, 255, 0.1); } .button.osd:backdrop { - border-style: solid; } + border-style: solid; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-color: rgba(255, 255, 255, 0.1); } .osd .button { - padding: 6px; - border-width: 1px 1px 2px 1px; - color: white; + border-width: 1px; + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.2); border-style: solid; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; - text-shadow: none; - icon-shadow: none; } + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } .osd .button:hover { border-style: solid; - background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } - .osd .button:active, .osd .button:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); } + .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked { border-style: solid; - background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } - .osd .button:insensitive { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #215d9c); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button:insensitive, .osd .button:backdrop:insensitive { border-style: solid; - border-color: rgba(102, 102, 102, 0.8); - color: #939695; } + color: #939695; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .osd .button:backdrop { - border-style: solid; } + border-style: solid; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .button.suggested-action { border-style: solid; border-width: 1px; @@ -462,6 +505,43 @@ GtkAssistant .sidebar GtkLabel.highlight { text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } + .osd .button.suggested-action { + border-style: solid; + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.5)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } + .osd .button.suggested-action:hover { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.7)); } + .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #215d9c); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive { + border-style: solid; + color: #939695; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.suggested-action:backdrop { + border-style: solid; + background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .button.destructive-action { border-style: solid; border-width: 1px; @@ -512,6 +592,43 @@ GtkAssistant .sidebar GtkLabel.highlight { text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } + .osd .button.destructive-action { + border-style: solid; + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.5)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } + .osd .button.destructive-action:hover { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.7)); } + .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #d51010); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive { + border-style: solid; + color: #939695; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.destructive-action:backdrop { + border-style: solid; + background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .button.image-button, .button.image-button { padding: 8px; } .button.text-button { @@ -652,23 +769,23 @@ GtkAssistant .sidebar GtkLabel.highlight { .inline-toolbar GtkToolButton > .button.flat, .inline-toolbar.search-bar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton:backdrop > .button.flat, -.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) { +.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked, .osd .button:insensitive, .osd .button:backdrop:insensitive, .osd .button:backdrop, .osd .button.suggested-action, .osd .button.suggested-action:hover, .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked, .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive, .osd .button.suggested-action:backdrop, .osd .button.destructive-action, .osd .button.destructive-action:hover, .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked, .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive, .osd .button.destructive-action:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) { border-radius: 0; border-left-style: none; } .inline-toolbar GtkToolButton > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:backdrop > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:dir(rtl) > .button.flat, .inline-toolbar.search-bar GtkToolButton:dir(rtl) > .button.flat, .inline-toolbar GtkToolButton:backdrop:dir(rtl) > .button.flat, - .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) { + .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .osd .button.suggested-action:dir(rtl):hover, .osd .button.suggested-action:dir(rtl):active, .osd .button.suggested-action:dir(rtl):checked, .osd .button.suggested-action:dir(rtl):insensitive, .osd .button.suggested-action:dir(rtl):backdrop, .osd .button.destructive-action:dir(rtl):hover, .osd .button.destructive-action:dir(rtl):active, .osd .button.destructive-action:dir(rtl):checked, .osd .button.destructive-action:dir(rtl):insensitive, .osd .button.destructive-action:dir(rtl):backdrop, .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button: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, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat, +.osd .button:first-child, .osd .button.suggested-action:first-child:hover, .osd .button.suggested-action:first-child:active, .osd .button.suggested-action:first-child:checked, .osd .button.suggested-action:first-child:insensitive, .osd .button.suggested-action:first-child:backdrop, .osd .button.destructive-action:first-child:hover, .osd .button.destructive-action:first-child:active, .osd .button.destructive-action:first-child:checked, .osd .button.destructive-action:first-child:insensitive, .osd .button.destructive-action:first-child:backdrop, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat, .inline-toolbar GtkToolButton:backdrop:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:first-child > .button.flat, GtkComboBox.combobox-entry .entry:first-child, GtkComboBox.combobox-entry .button:first-child, .linked > GtkComboBox:first-child > .button { border-radius: 3px 0 0 3px; border-left-style: solid; } -.osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat, +.osd .button:last-child, .osd .button.suggested-action:last-child:hover, .osd .button.suggested-action:last-child:active, .osd .button.suggested-action:last-child:checked, .osd .button.suggested-action:last-child:insensitive, .osd .button.suggested-action:last-child:backdrop, .osd .button.destructive-action:last-child:hover, .osd .button.destructive-action:last-child:active, .osd .button.destructive-action:last-child:checked, .osd .button.destructive-action:last-child:insensitive, .osd .button.destructive-action:last-child:backdrop, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat, .inline-toolbar GtkToolButton:backdrop:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:last-child > .button.flat, GtkComboBox.combobox-entry .entry:last-child, GtkComboBox.combobox-entry .button:last-child, .linked > GtkComboBox:last-child > .button { border-radius: 0 3px 3px 0; } @@ -677,7 +794,7 @@ GtkAssistant .sidebar GtkLabel.highlight { .inline-toolbar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat, GtkComboBox.combobox-entry .entry:last-child:dir(rtl), GtkComboBox.combobox-entry .button:last-child:dir(rtl), .linked > GtkComboBox:last-child > .button:dir(rtl) { border-right-style: solid; } -.osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat, +.osd .button:only-child, .osd .button.suggested-action:only-child:hover, .osd .button.suggested-action:only-child:active, .osd .button.suggested-action:only-child:checked, .osd .button.suggested-action:only-child:insensitive, .osd .button.suggested-action:only-child:backdrop, .osd .button.destructive-action:only-child:hover, .osd .button.destructive-action:only-child:active, .osd .button.destructive-action:only-child:checked, .osd .button.destructive-action:only-child:insensitive, .osd .button.destructive-action:only-child:backdrop, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat, .inline-toolbar GtkToolButton:backdrop:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:only-child > .button.flat, GtkComboBox.combobox-entry .entry:only-child, GtkComboBox.combobox-entry .button:only-child, .linked > GtkComboBox:only-child > .button { border-radius: 3px; @@ -919,10 +1036,12 @@ GtkComboBox { -GtkWidget-window-dragging: true; padding: 4px; background-color: #393f3f; } - .osd .toolbar, .osd .inline-toolbar, .osd .search-bar { - background-color: rgba(0, 0, 0, 0.6); + .osd .toolbar, .osd .inline-toolbar, .osd .search-bar, .toolbar.osd, .osd.inline-toolbar, .osd.search-bar { + padding: 13px; + border: rgba(255, 255, 255, 0.1); border-radius: 6px; - padding: 12px; } + background-color: rgba(46, 52, 54, 0.7); + background-clip: padding-box; } .inline-toolbar { border-width: 0 1px 1px; @@ -1320,30 +1439,41 @@ GtkTreeView.view.progressbar { transition: none; } .popover.osd { background-image: none; - background-color: rgba(0, 0, 0, 0.6); + background-color: #2e3436; border: 1px solid #1c1f1f; - color: white; } + color: #eeeeec; } .popover.osd .button { color: white; text-shadow: none; border-style: solid; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } .popover.osd .button:hover { border-style: solid; - background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); } .popover.osd .button:active { border-style: solid; - background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #215d9c); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .popover.osd .button:insensitive { border-style: solid; - border-color: rgba(102, 102, 102, 0.8); - color: #939695; } + color: #939695; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .entry.cursor-handle, .cursor-handle { @@ -2088,19 +2218,41 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { .osd .scale.slider, .osd .scale.scale-has-marks-above.scale-has-marks-below.slider, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider { - background-image: none; - background-color: #666666; - border-width: 1px; - box-shadow: none; - border-color: rgba(102, 102, 102, 0.8); } + border-style: solid; + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + background-color: #2e3436; } .osd .scale.slider:hover, .osd .scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover { - border-color: rgba(128, 128, 128, 0.8); } + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); } .osd .scale.slider:active, .osd .scale.scale-has-marks-above.scale-has-marks-below.slider:active, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active { - border-color: rgba(179, 179, 179, 0.8); } + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #215d9c); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .scale.slider:backdrop, .osd + .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop { + border-style: solid; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .scale.trough, .scale.scale-has-marks-above.scale-has-marks-below.trough, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { @@ -2141,19 +2293,44 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-color: #1e2222; background-color: #2a2f2f; box-shadow: none; } - .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive, + .scale.trough:backdrop:insensitive, .scale.trough .highlight:backdrop:insensitive, .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive { + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive { border-color: #1e2222; background-color: #323636; } .osd .scale.trough, .osd .scale.scale-has-marks-above.scale-has-marks-below.trough, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { - background-image: none; - border-width: 0; - box-shadow: none; } + border-color: rgba(0, 0, 0, 0.7); + box-shadow: none; + margin: 9px; + background-color: rgba(0, 0, 0, 0.5); + outline-color: rgba(238, 238, 236, 0.2); + outline-offset: -8px; } + .osd .scale.trough.fine-tune, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough.fine-tune, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.fine-tune { + margin: 7px; } + .osd .scale.trough.highlight, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight { + background-image: none; + background-color: #215d9c; } + .osd .scale.trough:insensitive, .osd .scale.trough:backdrop:insensitive, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive { + border-color: transparent; + background-color: transparent; } + .osd .scale.trough:backdrop, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop { + border-color: rgba(0, 0, 0, 0.7); + background-color: none; + background-image: none; } .scale.scale-has-marks-below { -GtkScale-slider-length: 20; @@ -2510,7 +2687,7 @@ GtkLevelBar.vertical { .level-bar.fill-block.empty-fill-block:backdrop { border-color: rgba(201, 203, 201, 0.15); } -.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected { +.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected { background-color: #215d9c; color: white; } .view:backdrop:selected, GtkLabel:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:selected { diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 5b177f8252..6322ef288d 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -116,7 +116,7 @@ .overshoot { background-color: rgba(74, 144, 217, 0.2); } -GtkLabel:insensitive { +GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:insensitive { color: #8d9091; } .dim-label, .titlebar .subtitle, GtkCalendar.header .subtitle, @@ -131,6 +131,12 @@ GtkAssistant .sidebar GtkLabel { GtkAssistant .sidebar GtkLabel.highlight { background-color: lightgray; } +.osd { + color: #eeeeec; + text-shadow: 0 1px black; } + .osd:backdrop { + text-shadow: none; } + /********************* * Spinner Animation * *********************/ @@ -352,58 +358,95 @@ GtkAssistant .sidebar GtkLabel.highlight { background-image: linear-gradient(to bottom, #ebebeb, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } .button.osd { + color: #eeeeec; border-radius: 6px; - padding: 12px; - border-width: 1px 1px 2px 1px; - color: white; - text-shadow: none; - icon-shadow: none; + outline-color: rgba(238, 238, 236, 0.2); border-style: solid; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6)); - border-color: rgba(102, 102, 102, 0.8); + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } + .button.osd.image-button { + padding: 13px; } .button.osd:hover { border-style: solid; - background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6)); - border-color: rgba(102, 102, 102, 0.8); + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); + border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } .button.osd:active, .button.osd:checked { border-style: solid; - background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6)); - border-color: rgba(102, 102, 102, 0.8); + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #4a90d9); + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-color: rgba(255, 255, 255, 0.1); box-shadow: none; } - .button.osd:insensitive { + .button.osd:insensitive, .button.osd:backdrop:insensitive { border-style: solid; - border-color: rgba(102, 102, 102, 0.8); - color: #8d9091; } + color: #8d9091; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-color: rgba(255, 255, 255, 0.1); } .button.osd:backdrop { - border-style: solid; } + border-style: solid; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-color: rgba(255, 255, 255, 0.1); } .osd .button { - padding: 6px; - border-width: 1px 1px 2px 1px; - color: white; + border-width: 1px; + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.2); border-style: solid; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; - text-shadow: none; - icon-shadow: none; } + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } .osd .button:hover { border-style: solid; - background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } - .osd .button:active, .osd .button:checked { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); } + .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked { border-style: solid; - background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } - .osd .button:insensitive { + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #4a90d9); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button:insensitive, .osd .button:backdrop:insensitive { border-style: solid; - border-color: rgba(102, 102, 102, 0.8); - color: #8d9091; } + color: #8d9091; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .osd .button:backdrop { - border-style: solid; } + border-style: solid; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .button.suggested-action { border-style: solid; border-width: 1px; @@ -454,6 +497,43 @@ GtkAssistant .sidebar GtkLabel.highlight { text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } + .osd .button.suggested-action { + border-style: solid; + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.5)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } + .osd .button.suggested-action:hover { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.7)); } + .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #4a90d9); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive { + border-style: solid; + color: #8d9091; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.suggested-action:backdrop { + border-style: solid; + background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .button.destructive-action { border-style: solid; border-width: 1px; @@ -504,6 +584,43 @@ GtkAssistant .sidebar GtkLabel.highlight { text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } + .osd .button.destructive-action { + border-style: solid; + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.5)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } + .osd .button.destructive-action:hover { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.7)); } + .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked { + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #ef2929); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive { + border-style: solid; + color: #8d9091; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .button.destructive-action:backdrop { + border-style: solid; + background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .button.image-button, .button.image-button { padding: 8px; } .button.text-button { @@ -644,23 +761,23 @@ GtkAssistant .sidebar GtkLabel.highlight { .inline-toolbar GtkToolButton > .button.flat, .inline-toolbar.search-bar GtkToolButton > .button.flat, .inline-toolbar GtkToolButton:backdrop > .button.flat, -.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) { +.inline-toolbar.search-bar GtkToolButton:backdrop > .button.flat, .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked, .osd .button:insensitive, .osd .button:backdrop:insensitive, .osd .button:backdrop, .osd .button.suggested-action, .osd .button.suggested-action:hover, .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked, .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive, .osd .button.suggested-action:backdrop, .osd .button.destructive-action, .osd .button.destructive-action:hover, .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked, .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive, .osd .button.destructive-action:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, GtkComboBox.combobox-entry .entry, GtkComboBox.combobox-entry .button, GtkComboBox.combobox-entry .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) { border-radius: 0; border-left-style: none; } .inline-toolbar GtkToolButton > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:backdrop > .button.flat:dir(rtl), .inline-toolbar GtkToolButton:dir(rtl) > .button.flat, .inline-toolbar.search-bar GtkToolButton:dir(rtl) > .button.flat, .inline-toolbar GtkToolButton:backdrop:dir(rtl) > .button.flat, - .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) { + .inline-toolbar.search-bar GtkToolButton:backdrop:dir(rtl) > .button.flat, .osd .button:dir(rtl), .osd .button.suggested-action:dir(rtl):hover, .osd .button.suggested-action:dir(rtl):active, .osd .button.suggested-action:dir(rtl):checked, .osd .button.suggested-action:dir(rtl):insensitive, .osd .button.suggested-action:dir(rtl):backdrop, .osd .button.destructive-action:dir(rtl):hover, .osd .button.destructive-action:dir(rtl):active, .osd .button.destructive-action:dir(rtl):checked, .osd .button.destructive-action:dir(rtl):insensitive, .osd .button.destructive-action:dir(rtl):backdrop, .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), GtkComboBox.combobox-entry .entry:dir(rtl), GtkComboBox.combobox-entry .button:dir(rtl), .linked > GtkComboBox > .button: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, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat, +.osd .button:first-child, .osd .button.suggested-action:first-child:hover, .osd .button.suggested-action:first-child:active, .osd .button.suggested-action:first-child:checked, .osd .button.suggested-action:first-child:insensitive, .osd .button.suggested-action:first-child:backdrop, .osd .button.destructive-action:first-child:hover, .osd .button.destructive-action:first-child:active, .osd .button.destructive-action:first-child:checked, .osd .button.destructive-action:first-child:insensitive, .osd .button.destructive-action:first-child:backdrop, .inline-toolbar .button:first-child, .linked .button:first-child, .inline-toolbar GtkToolButton:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:first-child > .button.flat, .inline-toolbar GtkToolButton:backdrop:first-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:first-child > .button.flat, GtkComboBox.combobox-entry .entry:first-child, GtkComboBox.combobox-entry .button:first-child, .linked > GtkComboBox:first-child > .button { border-radius: 3px 0 0 3px; border-left-style: solid; } -.osd .button:last-child, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat, +.osd .button:last-child, .osd .button.suggested-action:last-child:hover, .osd .button.suggested-action:last-child:active, .osd .button.suggested-action:last-child:checked, .osd .button.suggested-action:last-child:insensitive, .osd .button.suggested-action:last-child:backdrop, .osd .button.destructive-action:last-child:hover, .osd .button.destructive-action:last-child:active, .osd .button.destructive-action:last-child:checked, .osd .button.destructive-action:last-child:insensitive, .osd .button.destructive-action:last-child:backdrop, .inline-toolbar .button:last-child, .linked .button:last-child, .inline-toolbar GtkToolButton:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:last-child > .button.flat, .inline-toolbar GtkToolButton:backdrop:last-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:last-child > .button.flat, GtkComboBox.combobox-entry .entry:last-child, GtkComboBox.combobox-entry .button:last-child, .linked > GtkComboBox:last-child > .button { border-radius: 0 3px 3px 0; } @@ -669,7 +786,7 @@ GtkAssistant .sidebar GtkLabel.highlight { .inline-toolbar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:last-child:dir(rtl) > .button.flat, GtkComboBox.combobox-entry .entry:last-child:dir(rtl), GtkComboBox.combobox-entry .button:last-child:dir(rtl), .linked > GtkComboBox:last-child > .button:dir(rtl) { border-right-style: solid; } -.osd .button:only-child, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat, +.osd .button:only-child, .osd .button.suggested-action:only-child:hover, .osd .button.suggested-action:only-child:active, .osd .button.suggested-action:only-child:checked, .osd .button.suggested-action:only-child:insensitive, .osd .button.suggested-action:only-child:backdrop, .osd .button.destructive-action:only-child:hover, .osd .button.destructive-action:only-child:active, .osd .button.destructive-action:only-child:checked, .osd .button.destructive-action:only-child:insensitive, .osd .button.destructive-action:only-child:backdrop, .inline-toolbar .button:only-child, .linked .button:only-child, .inline-toolbar GtkToolButton:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:only-child > .button.flat, .inline-toolbar GtkToolButton:backdrop:only-child > .button.flat, .inline-toolbar.search-bar GtkToolButton:backdrop:only-child > .button.flat, GtkComboBox.combobox-entry .entry:only-child, GtkComboBox.combobox-entry .button:only-child, .linked > GtkComboBox:only-child > .button { border-radius: 3px; @@ -911,10 +1028,12 @@ GtkComboBox { -GtkWidget-window-dragging: true; padding: 4px; background-color: #ededed; } - .osd .toolbar, .osd .inline-toolbar, .osd .search-bar { - background-color: rgba(0, 0, 0, 0.6); + .osd .toolbar, .osd .inline-toolbar, .osd .search-bar, .toolbar.osd, .osd.inline-toolbar, .osd.search-bar { + padding: 13px; + border: rgba(255, 255, 255, 0.1); border-radius: 6px; - padding: 12px; } + background-color: rgba(46, 52, 54, 0.7); + background-clip: padding-box; } .inline-toolbar { border-width: 0 1px 1px; @@ -1314,30 +1433,41 @@ GtkTreeView.view.progressbar { transition: none; } .popover.osd { background-image: none; - background-color: rgba(0, 0, 0, 0.6); + background-color: #2e3436; border: 1px solid #a1a1a1; - color: white; } + color: #eeeeec; } .popover.osd .button { color: white; text-shadow: none; border-style: solid; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; } .popover.osd .button:hover { border-style: solid; - background-image: linear-gradient(to bottom, rgba(26, 26, 26, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); } .popover.osd .button:active { border-style: solid; - background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.6)); - border-color: rgba(102, 102, 102, 0.8); - box-shadow: none; } + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #4a90d9); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .popover.osd .button:insensitive { border-style: solid; - border-color: rgba(102, 102, 102, 0.8); - color: #8d9091; } + color: #8d9091; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7)); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .entry.cursor-handle, .cursor-handle { @@ -2083,19 +2213,41 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { .osd .scale.slider, .osd .scale.scale-has-marks-above.scale-has-marks-below.slider, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider { - background-image: none; - background-color: #666666; - border-width: 1px; - box-shadow: none; - border-color: rgba(102, 102, 102, 0.8); } + border-style: solid; + background-color: transparent; + background-clip: padding-box; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + border-color: rgba(0, 0, 0, 0.7); + box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + background-color: #2e3436; } .osd .scale.slider:hover, .osd .scale.scale-has-marks-above.scale-has-marks-below.slider:hover, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:hover { - border-color: rgba(128, 128, 128, 0.8); } + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); } .osd .scale.slider:active, .osd .scale.scale-has-marks-above.scale-has-marks-below.slider:active, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:active { - border-color: rgba(179, 179, 179, 0.8); } + border-style: solid; + color: white; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, #4a90d9); + box-shadow: none; + text-shadow: none; + icon-shadow: none; } + .osd .scale.slider:backdrop, .osd + .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop { + border-style: solid; + background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; } .scale.trough, .scale.scale-has-marks-above.scale-has-marks-below.trough, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { @@ -2136,19 +2288,44 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-color: #a8a8a8; background-color: #c7c7c7; box-shadow: none; } - .scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive, + .scale.trough:backdrop:insensitive, .scale.trough .highlight:backdrop:insensitive, .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .hilight:backdrop:insensitive { + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough .highlight:backdrop:insensitive { border-color: #a8a8a8; background-color: #f4f4f4; } .osd .scale.trough, .osd .scale.scale-has-marks-above.scale-has-marks-below.trough, .osd .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough { - background-image: none; - border-width: 0; - box-shadow: none; } + border-color: rgba(0, 0, 0, 0.7); + box-shadow: none; + margin: 9px; + background-color: rgba(0, 0, 0, 0.5); + outline-color: rgba(238, 238, 236, 0.2); + outline-offset: -8px; } + .osd .scale.trough.fine-tune, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough.fine-tune, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.fine-tune { + margin: 7px; } + .osd .scale.trough.highlight, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight { + background-image: none; + background-color: #4a90d9; } + .osd .scale.trough:insensitive, .osd .scale.trough:backdrop:insensitive, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop:insensitive { + border-color: transparent; + background-color: transparent; } + .osd .scale.trough:backdrop, .osd + .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop, .osd + .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop { + border-color: rgba(0, 0, 0, 0.7); + background-color: none; + background-image: none; } .scale.scale-has-marks-below { -GtkScale-slider-length: 20; @@ -2505,7 +2682,7 @@ GtkLevelBar.vertical { .level-bar.fill-block.empty-fill-block:backdrop { border-color: rgba(84, 89, 90, 0.15); } -.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected { +.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected { background-color: #4a90d9; color: white; outline-color: rgba(255, 255, 255, 0.3); }