Mercurial > repos > other > Adwaita-Dark-Green
diff gtk-3.0/_common.scss @ 17:ca246bc0af4a
Update to GTK 3.18 and regenerate assets
| author | IBBoard <dev@ibboard.co.uk> |
|---|---|
| date | Sat, 09 Jul 2016 15:25:37 +0100 |
| parents | a48477723cfe |
| children | cb3e1a45b770 |
line wrap: on
line diff
--- a/gtk-3.0/_common.scss Sat Jul 09 11:48:31 2016 +0100 +++ b/gtk-3.0/_common.scss Sat Jul 09 15:25:37 2016 +0100 @@ -3,6 +3,7 @@ } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$asset_suffix: if($variant=='dark', '-dark', ''); * { padding: 0; @@ -36,7 +37,7 @@ -GtkWidget-focus-line-width: 1; // -GtkWidget-text-handle-width: 20; - -GtkWidget-text-handle-height: 20; + -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; @@ -119,8 +120,8 @@ } .rubberband { - border: 1px solid $selected_bg_color; - background-color: transparentize($selected_bg_color,0.8); + border: 1px solid darken($selected_bg_color, 10%); + background-color: transparentize(darken($selected_bg_color, 10%), 0.8); } .label { @@ -260,36 +261,23 @@ &:backdrop { background-color: transparent; } } - .linked > & { //FIXME: use same buttons linking logic and template - border-radius: 0; - &:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - &:dir(rtl) { border-right-style: none;} - } - &:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - border-left-style: none; - &:dir(rtl) { border-left-style: solid; } - } + .linked:not(.vertical) > & { @extend %linked; } + + .linked:not(.vertical) > &:focus + .entry, + .linked:not(.vertical) > &:focus + .button, + .linked:not(.vertical) > &:focus + GtkComboBox > .the-button-in-the-combobox, + .linked:not(.vertical) > &:focus + GtkComboBoxText > .the-button-in-the-combobox { + border-left-color: entry_focus_border(); // colors the border of the widget following a focused entry } - &.error { // FIXME: dark variant love needed - color: $error_color; - border-color: $error_color; - &:focus { @include entry(focus, $error_color); } - &:selected, &:selected:focus { - background-color: $error_color; - } - } - - &.warning { // FIXME: dark variant love needed - color: $warning_color; - border-color: $warning_color; - &:focus { @include entry(focus, $warning_color); } - &:selected, &:selected:focus { - background-color: $warning_color; + // entry error and warning style + @each $e_type, $e_color in (error, $error_color), + (warning, $warning_color) { + &.#{$e_type} { + color: $e_color; + border-color: entry_focus_border($e_color); + &:focus { @include entry(focus, $e_color); } + &:selected, &:selected:focus { background-color: $e_color; } } } @@ -300,78 +288,6 @@ &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } } - .linked.vertical > & { //FIXME comment stuff and make the whole thing smarter. - @include entry(normal, $edge: none); - background-image: linear-gradient(to bottom, $base_color); - border-bottom-color: mix($borders_color, $base_color, 30%); - box-shadow: none; - @extend %linked_vertical; - &:focus { - border-color: entry_focus_border($selected_bg_color); - box-shadow: entry_focus_glow($selected_bg_color), - 0 -1px 0 0 entry_focus_border($selected_bg_color); - @extend %linked_vertical; - } - &:insensitive { - @include entry(insensitive, $edge: none); - border-bottom-color: mix($borders_color, $base_color, 30%); - @extend %linked_vertical; - &:backdrop { - @include entry(backdrop-insensitive, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical; - } - } - &:backdrop { - @include entry(backdrop, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical; - } - &:first-child { - @include entry(normal, $edge: none); - border-bottom-color: mix($borders_color, $base_color, 30%); - &:focus { @include entry(focus, $edge: none); } - &:insensitive { - @include entry(insensitive, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical:first-child; - &:backdrop { - @include entry(backdrop-insensitive, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - border-top-style: solid; - } - } - &:backdrop { - @include entry(backdrop, $edge: none); - border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - @extend %linked_vertical:first-child; - } - } - &:last-child { - @include entry(normal); - background-image: linear-gradient(to bottom, $base_color); - box-shadow: _widget_edge(); - &:focus { - border-color: entry_focus_border($selected_bg_color); - box-shadow: entry_focus_glow($selected_bg_color), - 0 -1px 0 0 entry_focus_border($selected_bg_color), - _widget_edge(); - @extend %linked_vertical:last-child; - } - &:insensitive { - @include entry(insensitive); - @extend %linked_vertical:last-child; - &:backdrop { - @include entry(backdrop-insensitive); - @extend %linked_vertical:last-child; - } - } - &:backdrop { - @include entry(backdrop); - @extend %linked_vertical:last-child; - } - } - } .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } @@ -380,6 +296,46 @@ } } +// Vertically linked entries +// FIXME: take care of "colored" entries +.linked.vertical { + > .entry { @extend %linked_vertical; } + + // remove the edge hilight and the focus shadow (unfortunatelly) + > .entry:not(:last-child) { box-shadow: none; } + // add back the focus shadow + > .entry:focus:not(:last-child) { box-shadow: entry_focus_shadow(); } + + // brighter border between linked entries + > .entry:not(:insensitive) + .entry:not(:insensitive) { + border-top-color: mix($borders_color, $base_color, 30%); + background-image: linear-gradient(to bottom, $base_color); + &:backdrop { + border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); + background-image: linear-gradient(to bottom, $backdrop_base_color); + } + } + + // color back the top border of a linked focused entry following another entry and add back the focus shadow. + > .entry + .entry:focus:not(:last-child) { + border-top-color: entry_focus_border(); + box-shadow: entry_focus_shadow(); + } + // just recolor the top border on the last focused entry, since we don't reset the shadow here letting that be + // inherited by the entry styling. + > .entry + .entry:focus:last-child { + border-top-color: entry_focus_border(); + } + + // this takes care of coloring the top border of the focused entry subsequent widget. + // :not(:only-child) is a specificity bump hack. + > .entry:focus:not(:only-child) + .entry, + > .entry:focus:not(:only-child) + .button, + > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox, + > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: entry_focus_border(); } +} + + /*********** * Buttons * ***********/ @@ -558,7 +514,7 @@ // Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $selected_bg_color), - (destructive-action, $destructive_color) { + (destructive-action, $destructive_color) { &.#{$b_type} { @include button(normal, $b_color, white); &.flat { @@ -737,32 +693,26 @@ .inline-toolbar.toolbar GtkToolButton, .inline-toolbar.toolbar GtkToolButton:backdrop { & > .button.flat { @extend %linked_middle; } - &:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); } &:first-child > .button.flat { @extend %linked:first-child; } &:last-child > .button.flat { @extend %linked:last-child; } - &:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); } &:only-child > .button.flat { @extend %linked:only-child; } } %linked_middle { border-radius: 0; - border-left-style: none; - &:dir(rtl) { - border-radius: 0; // needed when including %linked_middle:dir(rtl) - border-right-style: none; - border-left-style: solid - } + border-right-style: none; } %linked { @extend %linked_middle; &:first-child { - border-radius: 3px 0 0 3px; - border-left-style: solid; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } &:last-child { - border-radius: 0 3px 3px 0; - &:dir(rtl) { border-right-style: solid; } + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right-style: solid; } &:only-child { border-radius: 3px; @@ -771,19 +721,20 @@ } %linked_vertical_middle { - border-left-style: solid; - border-top-style: none; + border-style: solid solid none solid; border-radius: 0; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { - border-style: solid; - border-radius: 3px 3px 0 0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } &:last-child { - border-radius: 0 0 3px 3px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-style: solid; } &:only-child { border-radius: 3px; @@ -865,6 +816,9 @@ //a weird transition which for some reason //makes borders blink on hover } + & > .label { + text-decoration-line: underline; + } } /***************** @@ -1020,14 +974,12 @@ * ComboBoxes * **************/ GtkComboBox { - > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos - // are bigger then - // buttons + > .the-button-in-the-combobox { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos + // are bigger then + // buttons -GtkComboBox-arrow-scaling: 0.5; -GtkComboBox-shadow-type: none; - box-shadow: 0 1px $borders_edge; - @include _button_text_shadow; &:insensitive { @@ -1048,37 +1000,59 @@ // always disable separators -GtkWidget-wide-separators: true; } - &.combobox-entry .entry { @extend %linked; } - &.combobox-entry .button, &.combobox-entry .button:backdrop { - // It is needed to specify the backdrop button or it gets overridden - @extend %linked; + &.combobox-entry .entry { + &:dir(ltr) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &:dir(rtl) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + &.combobox-entry .button { + &:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-style: none; + } + &:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-style: none; + } } } -.linked > GtkComboBox > .button { +.linked > GtkComboBox > .the-button-in-the-combobox, +.linked > GtkComboBoxText > .the-button-in-the-combobox { // the combo is a composite widget so the way we do button linkind doesn't // work, special case needed. See // https://bugzilla.gnome.org/show_bug.cgi?id=733979 - &:dir(ltr) { @extend %linked_middle; } // specificity bump - &:dir(rtl) { @extend %linked_middle:dir(rtl); } + &:dir(ltr), + &:dir(rtl) { @extend %linked_middle; } // specificity bump } -.linked > GtkComboBox:first-child > .button { +.linked > GtkComboBox:first-child > .the-button-in-the-combobox, +.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox { @extend %linked:first-child; } -.linked > GtkComboBox:last-child > .button { +.linked > GtkComboBox:last-child > .the-button-in-the-combobox, +.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox { @extend %linked:last-child; } -.linked > GtkComboBox:only-child > .button { +.linked > GtkComboBox:only-child > .the-button-in-the-combobox, +.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox { @extend %linked:only-child; } -.linked.vertical > GtkComboBoxText > .button, -.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; } -.linked.vertical > GtkComboBoxText:first-child > .button, -.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; } -.linked.vertical > GtkComboBoxText:last-child > .button, -.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; } -.linked.vertical > GtkComboBoxText:only-child > .button, -.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; } + +.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox, +.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; } +.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox, +.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; } +.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox, +.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; } +.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox, +.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; } /************ * Toolbars * @@ -1336,6 +1310,8 @@ border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, border-top-color: $bg_color; // while this is the grid lines color, better then nothing + &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props + &:selected { border-radius: 0; } // rest border radius in lists &:selected, &:backdrop:selected { @@ -1535,9 +1511,10 @@ .menu { margin: 4px; padding: 0px; - background-color: $base_color; + background-color: $menu_color; border: 1px solid $borders_color; // adds borders in a non composited env .csd & { border: none; } // axes borders in a composited env + &:backdrop { background-color: $backdrop_menu_color; } .menuitem { text-shadow: none; padding: 4px; @@ -1551,7 +1528,7 @@ } &:backdrop, &:backdrop:hover { color: $backdrop_fg_color; - background-color: $backdrop_base_color; + background-color: transparent; } //submenu indicators &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } @@ -1608,17 +1585,6 @@ &.osd { @extend %osd; } } -//touch selection handlebars for the Popover.osd above -.entry.cursor-handle, -.cursor-handle { - background-color: transparent; - background-image: none; - box-shadow: none; - border-style: none; - &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } - &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } -} - /***************** * Notebooks and * * Tabs * @@ -2029,6 +1995,8 @@ GtkSwitch { -GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall // as buttons, not doing that for now + -GtkSwitch-slider-height: 27px; + font-weight: bold; font-size: smaller; outline-offset: -4px; @@ -2130,7 +2098,6 @@ // draw regular check and radio items using our PNG assets // all assets are rendered from assets.svg. never add pngs directly -$asset_suffix: if($variant=='dark', '-dark', ''); @each $w,$a in ('check', 'checkbox'), ('radio','radio') { @@ -2194,14 +2161,6 @@ &:selected, &:hover { icon-shadow: none; } } -//content view (grid/list) - -.content-view { - background-color: darken($bg_color,7%); - &:backdrop { background-color: darken($bg_color,7%); } - &.rubberband { @extend .rubberband; } -} - //selection-mode @each $s,$as in ('','-selectionmode'), (':hover', '-hover-selectionmode'), @@ -2211,7 +2170,7 @@ (':checked:hover', '-checked-hover-selectionmode'), (':checked:active', '-checked-active-selectionmode'), (':backdrop:checked', '-checked-backdrop-selectionmode') { - .view.content-view.check#{$s} { + .view.content-view.check#{$s}:not(.list) { icon-shadow: none; -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), url("assets/checkbox#{$as}@2.png")); @@ -2337,6 +2296,7 @@ border-color: $backdrop_borders_color; background-color: $insensitive_bg_color; } + //OSD troughs .osd & { border-color: $osd_borders_color; @@ -2360,9 +2320,25 @@ } } } + // scales on selected list rows + .list-row:selected & { + border-color: $selected_borders_color; + &.trough { + box-shadow: inset 1px 1px transparentize(black, 0.9); + &:backdrop { box-shadow: none; } + &.highlight:backdrop { border-color: $selected_borders_color; } + } + &:insensitive, + &.trough.highlight:insensitive { + border-color: $selected_bg_color; + box-shadow: none; + background-color: mix($selected_fg_color, $selected_bg_color, 50%); + background-image: none; + &:backdrop { background-color: mix($backdrop_selected_fg_color, $selected_bg_color, 50%); } + } + } } -$asset_suffix: if($variant=='dark', '-dark', ''); @each $d,$dn in ('', 'horz'), ('.vertical', 'vert') { @each $w,$we in ('scale-has-marks-below','scale_marks_below'), @@ -2372,6 +2348,8 @@ -GtkRange-slider-width: 24; -GtkRange-trough-border: 2; + color: gtkalpha(currentColor, 0.5); // marks color + @extend %#{$we}_#{$dn}; @each $s,$as in ('',''), @@ -2498,11 +2476,6 @@ * Level Bar * *************/ -.level-bar.vertical { - -GtkLevelBar-min-block-width: 3; - -GtkLevelBar-min-block-height: 34; -} - .level-bar { box-shadow: _widget_edge(); // needs to be set here to avoid clipping -GtkLevelBar-min-block-width: 34; @@ -2596,7 +2569,7 @@ * Lists * *********/ -.list, .list-row { +.list { background-color: $base_color; border-color: $borders_color; &:backdrop { @@ -2610,28 +2583,11 @@ padding: 2px; } -.list-row.button, -.list-row.button:backdrop, -.list-row.button:backdrop:active, -.list-row.button:backdrop:checked, -.list-row.button:backdrop:insensitive, -.list-row.button:backdrop:insensitive:active, -.list-row.button:backdrop:insensitive:checked, -.list-row.button:insensitive:active, -.list-row.button:insensitive:checked { - // reset button inherited stuff - @extend %undecorated_button; - background-color: transparentize($base_color,1); // for the transition - border-style: none; // I need no borders here - border-radius: 0; // and no rounded corners - box-shadow: none; // and no box-shadow - -} - -.list-row.button { +.list-row.activatable { // let's take care of background colors &:hover { - background-color: mix($fg_color, $base_color, 5%); + //background-color: mix($fg_color, $base_color, 5%); + background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); } &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); @@ -2694,8 +2650,8 @@ } // transition -.list-row, list-row.button { - transition: all 300ms $ease-out-quad; +.list-row { + transition: all 150ms $ease-out-quad; &:hover { transition: none; } } @@ -2782,10 +2738,18 @@ @extend %undecorated_button; color: transparentize($backdrop_fg_color,0.55); } + + &:insensitive { + @extend %undecorated_button; + color: transparentize($insensitive_fg_color,0.55); + } } - &:inconsistent, &:inconsistent:backdrop, - &.highlight, &.highlight:backdrop { color: gtkalpha(currentColor, 0.55); } + &:inconsistent, &:inconsistent:backdrop { color: gtkalpha(currentColor, 0.55); } + &.highlight, &.highlight:backdrop { + font-size: smaller; + color: $fg_color; + } &:backdrop { @@ -2803,8 +2767,6 @@ } .message-dialog { // Message Dialog styling - -GtkDialog-button-spacing: 0; - @if $variant==light { // the bright variant as a slightly darker bg which in this case clashes with the window decoration, overriding &.background { background-color: $bg_color; } @@ -2914,7 +2876,7 @@ .sidebar { border: none; - background-color: $sidebar_bg_color; + background-color: mix($bg_color, $base_color, 50%); &:backdrop { background-color: $backdrop_sidebar_bg_color; @@ -2925,46 +2887,60 @@ } } -// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color -GtkPlacesSidebar.sidebar .view { - - color: $fg_color; - background-color: transparent; - - .separator, - .separator:backdrop { @extend .separator; } - - .image { // icons color - color: mix($fg_color, $sidebar_bg_color, 70%); - - &:selected { - color: mix($selected_fg_color, $selected_bg_color, 90%); - - &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 90%); } - } - - &:insensitive { color: mix($insensitive_fg_color, $sidebar_bg_color, 70%); } - - &:backdrop { - color: mix($backdrop_fg_color, $sidebar_bg_color, 70%); - - &:insensitive { color: mix($backdrop_insensitive_color, $sidebar_bg_color, 70%); } - } +$_placesidebar_icons_opacity: 0.7; +GtkSidebarRow { + // Needs overriding of the GtkListBoxRow padding + &.list-row { + padding: 0px; } - - &:insensitive { color: $insensitive_fg_color; } - - &:backdrop { - color: $backdrop_fg_color; - - &:insensitive { color: $backdrop_insensitive_color; } + // Using margins/padding directly in the SidebarRow + // will make the animation of the new bookmark row jump + .sidebar-revealer { + padding: 4px 14px 4px 12px; } - - &:selected { - @extend %selected_items; + .sidebar-icon { + opacity: $_placesidebar_icons_opacity; // dim the device icons + &:dir(ltr) { padding-right: 8px; } + &:dir(rtl) { padding-left: 8px; } + } + .sidebar-label { + &:dir(ltr) { padding-right: 2px; } + &:dir(rtl) { padding-left: 2px; } } } +GtkPlacesSidebar.sidebar { + // in the sidebar case it makes no sense to click the selected row + .list-row:selected:active { box-shadow: none; } + + // looks like the label doesn't get all the states so work around + .list-row:selected:insensitive .label { @extend %selected_items:insensitive; } + .list-row:selected:backdrop:insensitive .label { @extend %selected_items:backdrop:insensitive; } + + .sidebar-placeholder-row { + border: solid 1px $selected_bg_color; + } + + .sidebar-new-bookmark-row { + color: $selected_bg_color; + } + + @at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken + // so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1] + // the extended selector ".sidebar-button.button" [specificity 0,0,2,0] + + &.image-button { padding: 5px; } + + @extend .button.flat; + border-radius: 100%; + outline-radius: 100%; + &:not(:hover):not(:active) > GtkImage, + &:backdrop > GtkImage { opacity: $_placesidebar_icons_opacity }; + } + // this is for indicating which sidebar row generated a popover + // see https://bugzilla.gnome.org/show_bug.cgi?id=754411 + .has-open-popup { @extend .list-row.activatable:hover; } +} .sidebar-item { padding: 10px 4px; @@ -2978,6 +2954,25 @@ } } +/**************** + * File chooser * + ****************/ + +GtkPlacesView { + .server-list-button > GtkImage { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > GtkImage { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(-0.5turn); + } + + .list-row.activatable:hover { + background-color: transparent; + } +} /********* * Paned * @@ -3113,6 +3108,10 @@ // we need to re-set the shadow here since it get axed by the previous bit &:selected { box-shadow: $_colorswatch_shadow; } + &:insensitive { + box-shadow: none; + opacity: 0.5; + } // base color corners rounding // to avoid the artifacts caused by rounded corner anti-aliasing the base color @@ -3190,12 +3189,12 @@ // indicator and keynav outline colors &.color-dark { color: white; - outline-color: transparentize(black, 0.7); + outline-color: transparentize(white, 0.5); &:backdrop { color: transparentize(white, 0.7); } } &.color-light { color: black; - outline-color: transparentize(white, 0.5); + outline-color: transparentize(black, 0.5); &:backdrop { color: transparentize(black, 0.7); } } @@ -3222,19 +3221,45 @@ * Misc * ********/ -.scale-popup .button { // +/- buttons on GtkVolumeButton popup - padding: 6px; - &:hover { - @extend %undecorated_button; - background-color: transparentize($fg_color,0.9); - border-radius: 5px; +//content view (grid/list) +.content-view { + background-color: darken($bg_color,7%); + &:hover { -gtk-image-effect: highlight; } + &:backdrop { background-color: darken($bg_color,7%); } + &.rubberband { @extend .rubberband; } +} + +.scale-popup { + + .osd & { @extend %osd; } + + .osd & .button.flat { //FIXME: quick hack, redo properly + padding: 6px; + border-style: none; + border-radius: 5px; + } + + .button { // +/- buttons on GtkVolumeButton popup + padding: 6px; + &:hover { + @extend %undecorated_button; + background-color: transparentize($fg_color,0.9); + border-radius: 5px; + } + &:backdrop, + &:backdrop:hover, + &:backdrop:insensitive { @extend %undecorated_button; } } - &:backdrop, - &:backdrop:hover, - &:backdrop:insensitive { @extend %undecorated_button; } } -GtkVolumeButton.button { padding: 8px; } +GtkScaleButton.button, +GtkVolumeButton.button { + // I assume both are image-button *by default* + // with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted. + @extend .image-button; + + &.text-button { @extend .text-button } +} /********************** * Window Decorations * @@ -3273,7 +3298,7 @@ box-shadow: 0 0 0 1px $_wm_border; //just doing borders, wm draws actual shadows } &.csd { - .popup { + &.popup { border-radius: 0; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border,0.1); @@ -3322,20 +3347,99 @@ @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } + &:insensitive { color: mix($selected_fg_color, $selected_bg_color, 50%); } &:backdrop { color: $backdrop_selected_fg_color; - background-color: $backdrop_selected_bg_color; + &:insensitive { + color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); + } + } +} + +.monospace { + font: Monospace; +} + +/********************** + * Touch Copy & Paste * + *********************/ + +//touch selection handlebars for the Popover.osd above +.entry.cursor-handle, +.cursor-handle { + background-color: transparent; + background-image: none; + box-shadow: none; + border-style: none; + @each $s,$as in ('',''), + (':hover','-hover'), + (':active','-active') { //no need for insensitive and backdrop + &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { + $_url: 'assets/text-select-start#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + padding-left: 10px; + } + &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { + $_url: 'assets/text-select-end#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + padding-right: 10px; + } + &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { + $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}'; + -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'), + url('#{$_url}@2.png')); + } } } /* Decouple the font of context menus from their entry/textview */ -.touch-selection, .context-menu { font: initial; } -.monospace { - font: Monospace; +.touch-selection { + font: initial; + color: $osd_fg_color; + border: none; + background-color: opacify($osd_bg_color,0.2); + background-clip: padding-box; + outline-color: transparentize($osd_fg_color, 0.7); + box-shadow: none; + text-shadow: 0 1px black; + icon-shadow: 0 1px black; + &:backdrop { text-shadow: none; } + .button { + @include button(osd); + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); } + &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); } + &:backdrop { @include button(osd-backdrop); } + } + // checkboxes and radios to use the -dark style for OSD style popovers + @each $w,$a in ('check', 'checkbox'), + ('radio','radio') { + @each $s,$as in ('','-unchecked'), + (':hover', '-unchecked-hover'), + (':active', '-unchecked-active'), + (':insensitive','-unchecked-insensitive'), + (':inconsistent', '-mixed'), + (':inconsistent:hover', '-mixed-hover'), + (':inconsistent:selected', '-mixed-active'), + (':inconsistent:insensitive', '-mixed-insensitive'), + (':checked', '-checked'), + (':checked:insensitive','-checked-insensitive'), + (':checked:hover', '-checked-hover'), + (':checked:active', '-checked-active'), + (':backdrop:checked', '-checked-backdrop') { + .#{$w}#{$s} { + icon-shadow: none; + -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"), + url("assets/#{$a}#{$as}-dark@2.png")); + } + } + } } // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.