diff options
Diffstat (limited to 'gtk/theme/Adwaita/_common.scss')
| -rw-r--r-- | gtk/theme/Adwaita/_common.scss | 741 |
1 files changed, 155 insertions, 586 deletions
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index f45f5880fd..bfc6441ef6 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -108,7 +108,7 @@ textview { > text { @extend %view; - selection { &:focus, & { @extend %selected_items; }} + > selection { &:focus, & { @extend %selected_items; }} } &:drop(active) { @@ -116,7 +116,7 @@ textview { } } -textview border { background-color: mix($bg_color, $base_color, 50%); } +textview > border { background-color: mix($bg_color, $base_color, 50%); } iconview { @extend .view; @@ -125,7 +125,7 @@ iconview { box-shadow: none; } - dndtarget:drop(active) { + > dndtarget:drop(active) { border-style: solid; border-width: 1px; border-color: $selected_borders_color; @@ -138,9 +138,9 @@ rubberband { } flowbox { - rubberband { @extend rubberband; } + > rubberband { @extend rubberband; } - flowboxchild { + > flowboxchild { padding: 3px; &:selected { @@ -171,7 +171,7 @@ label { &:selected { @extend %nobg_selected_items; } - selection { + > selection { background-color: $selected_bg_color; color: $selected_fg_color; } @@ -187,11 +187,11 @@ label { button & { color: inherit; } } - selection { @extend %selected_items_disabled; } + > selection { @extend %selected_items_disabled; } } &:backdrop { - selection { @extend %selected_items_backdrop; } + > selection { @extend %selected_items_backdrop; } } } @@ -213,9 +213,9 @@ assistant { &.csd .sidebar { border-top-style: none; } - .sidebar label { padding: 6px 12px; } + .sidebar > label { padding: 6px 12px; } - .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } + .sidebar > label.highlight { background-color: mix($bg_color, $fg_color, 80%); } } %osd, @@ -312,16 +312,16 @@ entry { @include entry(normal); - image { // icons inside the entry + > image { // icons inside the entry &.left { margin-right: 6px; } &.right { margin-left: 6px; } } - placeholder { + > placeholder { @extend .dim-label; } - block-cursor { + > block-cursor { @include entry(block_cursor); } @@ -352,7 +352,7 @@ entry { &:backdrop:disabled { @include entry(backdrop-insensitive); } - selection { @extend %selected_items; } + > selection { @extend %selected_items; } // entry error and warning style @each $e_type, $e_color in (error, $error_color), @@ -363,7 +363,7 @@ entry { &:focus { @include entry(focus, $e_color); } - selection { background-color: $e_color; } + > selection { background-color: $e_color; } } } @@ -399,11 +399,11 @@ entry { } } - progress { + > progress { margin-bottom: 2px; } - progress>trough>progress { + progress > trough > progress { background-color: transparent; background-image: none; border-radius: 0; @@ -956,7 +956,7 @@ toolbar.inline-toolbar toolbutton { border-bottom-right-radius: 0; } -%linked_vertical{ +%linked_vertical { &:not(:first-child) { @extend %linked_not_top; } &:not(:last-child) { @extend %linked_not_bottom; } @@ -973,8 +973,7 @@ toolbar.inline-toolbar toolbutton { } /* menu buttons */ -modelbutton.flat, -.menuitem.button.flat { +modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; @@ -1012,8 +1011,8 @@ modelbutton.flat arrow { button.color { padding: 4px; - colorswatch:only-child { - &, overlay { border-radius: 0; } + > colorswatch:only-child { + &, > overlay { border-radius: 0; } @if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); @@ -1035,7 +1034,7 @@ button.color { /* list buttons */ /* tone down as per new designs, see issue #1473 */ %list_button, -list row button.image-button:not(.flat) { +list > row button.image-button:not(.flat) { @extend %undecorated_button; border: 1px solid transparentize($borders_color, .5); &:hover { @include button(hover); } @@ -1131,7 +1130,7 @@ spinbutton { &:backdrop:disabled { background-color: transparent; } } - text { + > text { @extend %spinbutton_horz_entry; } @@ -1189,11 +1188,11 @@ spinbutton { // OSD horizontal .osd &:not(.vertical) { - text { + > text { @extend %spinbutton_horz_entry; } - button { + > button { @include button(undecorated); color: $osd_fg_color; @@ -1256,7 +1255,7 @@ spinbutton { box-shadow: none; } - text { + > text { @extend %entry; min-height: 32px; @@ -1265,7 +1264,7 @@ spinbutton { border-radius: 0; } - button { + > button { min-height: 32px; min-width: 32px; padding: 0; @@ -1289,7 +1288,7 @@ spinbutton { } // OSD vertical - .osd &.vertical button:first-child { + .osd &.vertical > button:first-child { @include button(osd); &:hover { @include button(osd-hover);} @@ -1307,7 +1306,7 @@ spinbutton { border-style: none; border-radius: 0; - entry { + > text { min-height: 0; padding: 1px 2px; } @@ -1497,133 +1496,6 @@ headerbar { } } - .selection-mode &, - &.selection-mode { - $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color - - color: $selected_fg_color; - border-color: $selected_borders_color; - text-shadow: 0 -1px transparentize(black, 0.5); - - @include headerbar_fill($selected_bg_color, $_hc); - - &:backdrop { - background-color: $selected_bg_color; - background-image: none; - box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%); - - label { - text-shadow: none; - color: $selected_fg_color; - } - } - - .subtitle:link { @extend %link_selected; } - - button { - @include button(normal, $selected_bg_color, $selected_fg_color); - - @at-root %selection_mode_button_flat, - &.flat { @include button(undecorated); } - - &:hover { @include button(hover, $selected_bg_color, $selected_fg_color); } - - &:active, - &:checked { @include button(active, $selected_bg_color, $selected_fg_color); } - - &:backdrop { - &.flat, & { - @include button(backdrop, $selected_bg_color, $selected_fg_color); - - -gtk-icon-filter: none; - border-color: $selected_borders_color; - - &:active, - &:checked { - @include button(backdrop-active, $selected_bg_color, $selected_fg_color); - - border-color: $selected_borders_color; - } - - &:disabled { - @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color); - - border-color: $selected_borders_color; - - &:active, &:checked { - @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color); - - border-color: $selected_borders_color; - } - } - } - } - - @at-root %selection_mode_button_flat, - &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }} - - &:disabled { - @include button(insensitive, $selected_bg_color, $selected_fg_color); - - &:active, - &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color); } - } - - &.suggested-action { - @include button(normal); - - border-color: $selected_borders_color; - - &:hover { - @include button(hover); - - border-color: $selected_borders_color; - } - - &:active { - @include button(active); - - border-color: $selected_borders_color; - } - - &:disabled { - @include button(insensitive); - - border-color: $selected_borders_color; - } - - &:backdrop { - @include button(backdrop); - - border-color: $selected_borders_color; - } - - &:backdrop:disabled { - @include button(backdrop-insensitive); - - border-color: $selected_borders_color; - } - } - } - - .selection-menu { - &:backdrop, & { - border-color: transparentize($selected_bg_color, 1); - background-color: transparentize($selected_bg_color, 1); - background-image: none; - box-shadow: none; - padding-left: 10px; - padding-right: 10px; - - .arrow { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - color: transparentize($selected_fg_color,0.5); - -gtk-icon-shadow: none; - } - } - } - } - // squared corners when the window is maximized, tiled, or fullscreen .tiled &, .tiled-top &, @@ -1751,7 +1623,7 @@ headerbar { // headerbar border rounding // Development versions of apps to use a differently styled headerbar window.devel { - headerbar.titlebar:not(.selection-mode) { + headerbar.titlebar { $c: darken($bg_color, 10%); $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)), @@ -1775,7 +1647,7 @@ window.devel { * Pathbars * ************/ -pathbar button { +pathbar > button { &.text-button, &.image-button, & { padding-left: 4px; padding-right: 4px; @@ -1810,7 +1682,7 @@ treeview.view { 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 + > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props &:selected { &:focus, & { @@ -1847,10 +1719,12 @@ treeview.view { border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); border-top: $backdrop_bg_color; } + &:drop(active) { box-shadow: none; } - dndtarget:drop(active) { + + > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: $selected_borders_color; @@ -1934,8 +1808,8 @@ treeview.view { } } - header { - button { + > header { + > button { $_column_header_color: mix($fg_color, $base_color, 50%); @extend %column_header_button; @@ -2010,156 +1884,6 @@ treeview.view { &:last-child { &:backdrop, & { border-right-style: none; }} } - -/********* - * Menus * - *********/ -menubar, -.menubar { - padding: 0px; - box-shadow: inset 0 -1px transparentize(black, 0.9); - - &:backdrop { background-color: $backdrop_bg_color; } - - > menuitem { - min-height: 16px; - padding: 4px 8px; - - // remove padding and rounding from menubar submenus - menu { - .csd &, & { - border-radius: 0; - padding: 0; - } - } - - &:hover { //Seems like it :hover even with keyboard focus - box-shadow: inset 0 -3px $selected_bg_color; - color: $link_color; - } - - &:disabled { - color: $insensitive_fg_color; - box-shadow: none; - } - } - // remove padding and rounding from menubar submenu decoration - .csd.popup decoration {border-radius:0;} -} - -// Needed to make the border-radius of menus work -// otherwise the background bleeds out of the menu edges -.background.popup { background-color: transparent; } - -menu, -.menu, -.context-menu { - // this is not a good solution, commenting out for now margin: 4px; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258 - padding: 4px 0px; - 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 - border-radius: $menu_radius; - } - - &:backdrop { background-color: $backdrop_menu_color; } - - menuitem { - min-height: 16px; - min-width: 40px; - padding: 4px 6px; - text-shadow: none; - - &:hover { - color: $selected_fg_color; - background-color: $selected_bg_color; - } - - &:disabled { - color: $insensitive_fg_color; - &:backdrop { color: $backdrop_insensitive_color; } - } - - &:backdrop, - &:backdrop:hover { - color: $backdrop_fg_color; - background-color: transparent; - } - - // submenu indicators - arrow { - min-height: 16px; - min-width: 16px; - - &:dir(ltr) { - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - margin-left: 10px; - } - - &:dir(rtl) { - -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); - margin-right: 10px; - } - } - - // avoids labels color being overridden, see - // https://bugzilla.gnome.org/show_bug.cgi?id=767058 - label { &:dir(rtl), &:dir(ltr) { color: inherit; }} - } - - // overflow arrows - > arrow { - @include button(undecorated); - - min-height: 16px; - min-width: 16px; - padding: 4px; - background-color: $menu_color; - border-radius: 0; - - &.top { - margin-top: -6px; - border-bottom: 1px solid mix($fg_color, $base_color, 10%); - border-top-right-radius: $menu_radius; - border-top-left-radius: $menu_radius; - -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); - } - - &.bottom { - margin-bottom: -6px; - border-top: 1px solid mix($fg_color, $base_color, 10%); - border-top-right-radius: $menu_radius; - border-top-left-radius: $menu_radius; - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - } - - &:hover { background-color: mix($fg_color, $base_color, 10%); } - - &:backdrop { background-color: $backdrop_menu_color; } - - &:disabled { - color: transparent; - background-color: transparent; - border-color: transparent ; - } - } -} - -menuitem { - accelerator { color: gtkalpha(currentColor,0.55); } - - check, - radio { - min-height: 16px; - min-width: 16px; - - &:dir(ltr) { margin-right: 7px; } - &:dir(rtl) { margin-left: 7px; } - } -} - /*************** * Popovers * ***************/ @@ -2233,7 +1957,7 @@ notebook { background-color: $backdrop_dark_fill; } - tabs { margin: -1px; } + > tabs { margin: -1px; } &.top { border-bottom-style: solid; @@ -2357,7 +2081,7 @@ notebook { &:disabled { @include button(undecorated); } } - tab { + > tabs > tab { min-height: 30px; min-width: 30px; padding: 3px 12px; @@ -2434,7 +2158,7 @@ notebook { &.top, &.bottom { - tabs { + > tabs { padding-left: 4px; padding-right: 4px; @@ -2446,7 +2170,7 @@ notebook { &:last-child { margin-right: -1px; } } - tab { + > tab { margin-left: 4px; margin-right: 4px; @@ -2457,7 +2181,7 @@ notebook { &.left, &.right { - tabs { + > tabs { padding-top: 4px; padding-bottom: 4px; @@ -2469,7 +2193,7 @@ notebook { &:last-child { margin-bottom: -1px; } } - tab { + > tab { margin-top: 4px; margin-bottom: 4px; @@ -2478,8 +2202,8 @@ notebook { } } - &.top tab { padding-bottom: 4px; } - &.bottom tab { padding-top: 4px; } + &.top > tabs > tab { padding-bottom: 4px; } + &.bottom > tabs > tab { padding-top: 4px; } } > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks @@ -2511,8 +2235,7 @@ scrollbar { transition: $backdrop_transition; } - // slider - slider { + > range > trough > slider { min-width: 6px; min-height: 6px; margin: -1px; @@ -2530,14 +2253,14 @@ scrollbar { &:disabled { background-color: transparent; } } - & range.fine-tune { - slider { + > range.fine-tune { + > trough > slider { min-width: 4px; min-height: 4px; } - &.horizontal slider { border-width: 5px 4px; } - &.vertical slider { border-width: 4px 5px; } + &.horizontal > trough > slider { border-width: 5px 4px; } + &.vertical > trough > slider { border-width: 4px 5px; } } &.overlay-indicator { @@ -2546,114 +2269,22 @@ scrollbar { opacity: 0.4; background-color: transparent; - slider { + > range > trough > slider { margin: 0; min-width: 3px; min-height: 3px; background-color: $fg_color; border: 1px solid if($variant == 'light', white, black); } - - button { - min-width: 5px; - min-height: 5px; - background-color: $fg_color; - background-clip: padding-box; - border-radius: 100%; - border: 1px solid if($variant == 'light', white, black); - -gtk-icon-source: none; - } - - &.horizontal { - slider { - margin: 0 2px; - min-width: $_slider_min_length; - } - - button { - margin: 1px 2px; - min-width: 5px; - } - } - - &.vertical { - slider { - margin: 2px 0; - min-height: $_slider_min_length; - } - - button { - margin: 2px 1px; - min-height: 5px; - } - } } &.dragging, &.hovering { opacity: 0.8; } } - &.horizontal slider { min-width: $_slider_min_length; } - - &.vertical slider { min-height: $_slider_min_length; } - - // button styling - button { - padding: 0; - min-width: 12px; - min-height: 12px; - border-style: none; - border-radius: 0; - transition-property: min-height, min-width, color; - - @include button(undecorated); - - color: $scrollbar_slider_color; - - &:hover { - @include button(undecorated); - - color: $scrollbar_slider_hover_color; - } - &:active, &:checked { - @include button(undecorated); - - color: $scrollbar_slider_active_color; - } - &:disabled { - @include button(undecorated); - - color: transparentize($scrollbar_slider_color, 0.8); - } - &:backdrop { - @include button(undecorated); - - color: $backdrop_scrollbar_slider_color; - - &:disabled { - @include button(undecorated); - - color: transparentize($backdrop_scrollbar_slider_color, 0.8); - } - } - } - - // button icons - &.vertical { - button { - &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - - &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } - } - } + &.horizontal > range > trough > slider { min-width: $_slider_min_length; } - &.horizontal { - button { - &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } - - &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } - } - } + &.vertical > range > trough > slider { min-height: $_slider_min_length; } } treeview ~ scrollbar.vertical { @@ -2712,7 +2343,7 @@ switch { } } - slider { + > slider { margin: -1px; min-width: 24px; min-height: 24px; @@ -2728,9 +2359,9 @@ switch { } } - image { color: transparent; } /* only show i / o for the accessible theme */ + > image { color: transparent; } /* only show i / o for the accessible theme */ - &:hover slider { + &:hover > slider { @if $variant == 'light' { @include button(hover-alt, $edge: $shadow_color); } @@ -2739,20 +2370,20 @@ switch { } } - &:checked slider { border: 1px solid $selected_borders_color; } + &:checked > slider { border: 1px solid $selected_borders_color; } - &:disabled slider { @include button(insensitive); } + &:disabled > slider { @include button(insensitive); } &:backdrop { - slider { + > slider { transition: $backdrop_transition; @include button(backdrop); } - &:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); } + &:checked > slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); } - &:disabled slider { @include button(backdrop-insensitive); } + &:disabled > slider { @include button(backdrop-insensitive); } } row:selected & { @@ -2762,7 +2393,7 @@ switch { &:backdrop { border-color: $selected_borders_color; } - slider { &:checked, & { border-color: $selected_borders_color; } } + > slider { &:checked, & { border-color: $selected_borders_color; } } } } } @@ -2871,24 +2502,6 @@ radio { &:backdrop { @include button(osd-backdrop); } &:disabled { @include button(osd-insensitive); } } - - @at-root %menu_check_radio, - menu menuitem & { - margin: 0; // this is a workaround for a menu check/radio size allocation issue - - &, &:checked, &:indeterminate { - &, &:hover, &:disabled { //FIXME use button reset mixin - min-height: 14px; - min-width: 14px; - background-image: none; - background-color: transparent; - box-shadow: none; - -gtk-icon-shadow: none; - color: inherit; - border-color: currentColor; - } - } - } } %check, @@ -3024,15 +2637,17 @@ scale { padding: 12px; // those are inside the trough node, I need them to show their own border over the trough one, so negative margin - fill, - highlight { margin: -1px; } + > trough { + > fill, + > highlight { margin: -1px; } // the slider is inside the trough, so to have make it bigger there's a negative margin - slider { - min-height: 18px; - min-width: 18px; - margin: -9px; + > slider { + min-height: 18px; + min-width: 18px; + margin: -9px; + } } &:focus { outline: none; } @@ -3052,18 +2667,18 @@ scale { } // to make the trough grow in fine-tune mode - slider { margin: -6px; } + > trough > slider { margin: -6px; } - fill, - highlight, - trough { + > trough > fill, + > trough > highlight, + > trough { border-radius: 5px; -gtk-outline-radius: 7px; } } // the backing bit - trough { + > trough { @extend %scale_trough; outline-offset: 2px; @@ -3071,11 +2686,11 @@ scale { } // the colored part of the backing bit - highlight { @extend %scale_highlight; } + > trough > highlight { @extend %scale_highlight; } // this is another differently styled part of the backing bit, the most relevant use case is for example // in media player to indicate how much video stream as been cached - fill { + > trough > fill { @extend %scale_trough; &:backdrop, & { background-color: $borders_color; } @@ -3100,7 +2715,7 @@ scale { } } - slider { + > trough > slider { @include button(normal-alt, $edge: $shadow_color); border: 1px solid darken($alt_borders_color, 3%); @@ -3158,10 +2773,10 @@ scale { } } - value { color: gtkalpha(currentColor, 0.55); } + > value { color: gtkalpha(currentColor, 0.55); } &.horizontal { - >marks { + > marks { color: gtkalpha(currentColor, 0.55); &.top { margin-bottom: $_marks_distance; } &.bottom { margin-top: $_marks_distance; } @@ -3185,7 +2800,7 @@ scale { } &.vertical { - >marks { + > marks { color: gtkalpha(currentColor, 0.55); &.top { margin-right: $_marks_distance; } &.bottom { margin-left: $_marks_distance; } @@ -3225,7 +2840,7 @@ scale { (':backdrop:disabled', '-backdrop-insensitive') { &.#{$dir_class}.#{$marks_class} { - slider { + > trough > slider { &#{$state} { // an asymmetric slider asset is used here, so the margins are uneven, the smaller // margin is set on the point side. @@ -3275,7 +2890,7 @@ scale { } } - &.fine-tune slider { + &.fine-tune > trough > slider { @if $dir_class == 'horizontal' { // bigger negative margins to make the trough grow here as well margin: -7px -10px; @@ -3302,7 +2917,7 @@ scale { min-height: 0; min-width: 0; - trough { + > trough { background-image: image($borders_color); background-repeat: no-repeat; } @@ -3310,14 +2925,14 @@ scale { &.horizontal { padding: 0 0 15px 0; - trough { + > trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } - slider { + > trough > slider { &:dir(ltr), &:dir(rtl) { // specificity bumb &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-bottom: -15px; @@ -3331,14 +2946,14 @@ scale { &:dir(ltr) { padding: 0 0 0 15px; - trough { + > trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } - slider { + > trough > slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-left: -15px; margin-right: 6px; @@ -3349,14 +2964,14 @@ scale { &:dir(rtl) { padding: 0 15px 0 0; - trough { + > trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } - slider { + > trough > slider { &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { margin-right: -15px; margin-left: 6px; @@ -3370,12 +2985,12 @@ scale { &:dir(ltr), &:dir(rtl) { // specificity bump padding: 0 0 12px 0; - trough { + > trough { padding-bottom: 7px; background-position: 0 -6px; } - slider { + > trough > slider { margin-bottom: -15px; margin-top: 6px; } @@ -3386,12 +3001,12 @@ scale { &:dir(ltr) { padding: 0 0 0 12px; - trough { + > trough { padding-left: 7px; background-position: 6px 0; } - slider { + > trough > slider { margin-left: -15px; margin-right: 6px; } @@ -3400,12 +3015,12 @@ scale { &:dir(rtl) { padding: 0 12px 0 0; - trough { + > trough { padding-right: 7px; background-position: -6px 0; } - slider { + > trough > slider { margin-right: -15px; margin-left: 6px; } @@ -3422,21 +3037,21 @@ scale { progressbar { // sizing &.horizontal { - trough { min-width: 150px; } - - trough, - progress { min-height: 2px; } + > trough { + min-width: 150px; + &, > progress { min-height: 2px; } + } } &.vertical { - trough { min-height: 80px; } - - trough, - progress { min-width: 2px; } + > trough { + min-height: 80px; + &, > progress { min-width: 2px; } + } } - &.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border - &.vertical progress { margin: -1px 0; } // this moves it over it. + &.horizontal > trough > progress { margin: 0 -1px; } // the progress node is positioned after the trough border + &.vertical > trough > progress { margin: -1px 0; } // this moves it over it. // FIXME: insensitive state missing and some other state should be set probably @@ -3448,9 +3063,9 @@ progressbar { transition: $backdrop_transition; } - trough { @extend %scale_trough; } + > trough { @extend %scale_trough; } - progress { + > trough > progress { @extend %scale_highlight; /* share most of scales' */ /* override insensitive that is specific to progress */ &:disabled { @@ -3492,20 +3107,20 @@ progressbar { min-height: 3px; background-color: transparent; - trough { + > trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; - } - progress { - border-style: none; - border-radius: 0; + > progress { + border-style: none; + border-radius: 0; + } } } - trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0 + > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0 } /************* @@ -3517,7 +3132,7 @@ $levelbar_border_radius: 3px; levelbar { &.horizontal { - block { + > block { min-height: $levelbar_size; border-radius: $levelbar_border_radius; @@ -3536,20 +3151,7 @@ levelbar { // segmented level bar &.discrete { - // trough - trough { - // border: 1px solid $borders_color; - // padding: 1px; - // padding-right:0; - // background-color: $base_color; - // border-radius: 7px; - // box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.05); - // &:dir(rtl) {padding-left:0;} - // &:dir(ltr) {padding-right:0;} - } - - // block - block { + > block { min-height: 2px; margin: 1px; min-width: 24px; @@ -3557,19 +3159,18 @@ levelbar { &:first-child {border-radius: 2px 0 0 2px;} &:last-child { border-radius: 0 2px 2px 0; - // margin-right:0; } } } } &.vertical { - block { + > block { min-width: $levelbar_size; border-radius: $levelbar_border_radius; } - &.discrete block { + &.discrete > block { min-width: $levelbar_size - 7px; margin: 1px 0; min-height: 32px; @@ -3578,14 +3179,12 @@ levelbar { &:backdrop { transition: $backdrop_transition; } - - // trough - trough { + > trough { padding: 0; } // level bar colours - block { + > block { border: 1px solid; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2); @@ -3671,13 +3270,13 @@ actionbar > revealer > box { } scrolledwindow { - viewport.frame { // avoid double borders when viewport inside scrolled window + > viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } // This is used when content is touch-dragged past boundaries. // draws a box on top of the content, the size changes programmatically. - overshoot { + > overshoot { &.top { @include overshoot(top); @@ -3703,8 +3302,7 @@ scrolledwindow { } } - - junction { // the small square between two scrollbars + > junction { // the small square between two scrollbars // Only color the top-left (or top right in RTL) pixel, to visually connect // the borders of the two scrollbars. @@ -3755,11 +3353,11 @@ list { border-color: $backdrop_borders_color; } - row { padding: 2px; } - row.expander { padding: 0px; } - row.expander .row-header { padding: 2px; } + > row { padding: 2px; } + > row.expander { padding: 0px; } + > row.expander .row-header { padding: 2px; } - &.separators row:not(:first-child) { + &.separators > row:not(:first-child) { border-top: 1px solid $borders_color; } } @@ -4022,11 +3620,6 @@ separator.sidebar { &:backdrop { background-color: $backdrop_borders_color; } - - &.selection-mode, - .selection-mode & { - background-color: darken($selected_bg_color, 20%); - } } @@ -4295,20 +3888,13 @@ tooltip { border: 1px solid $tooltip_borders_color; // this suble border is meant to // not make the tooltip melt with // very dark backgrounds + color: white; } padding: 4px; border-radius: 5px; box-shadow: none; // otherwise it gets inherited by windowframe.csd text-shadow: 0 1px black; - - // FIXME: we need a border or tooltips vanish on black background. - decoration { background-color: transparent; } - - * { // Yeah this is ugly - background-color: transparent; - color: white; - } } @@ -4333,7 +3919,7 @@ colorswatch { border-top-left-radius: $_colorswatch_radius + 0.5px; border-top-right-radius: $_colorswatch_radius + 0.5px; - overlay { + > overlay { border-top-left-radius: $_colorswatch_radius; border-top-right-radius: $_colorswatch_radius; } @@ -4343,7 +3929,7 @@ colorswatch { border-bottom-left-radius: $_colorswatch_radius + 0.5px; border-bottom-right-radius: $_colorswatch_radius + 0.5px; - overlay { + > overlay { border-bottom-left-radius: $_colorswatch_radius; border-bottom-right-radius: $_colorswatch_radius; } @@ -4354,7 +3940,7 @@ colorswatch { border-top-left-radius: $_colorswatch_radius + 0.5px; border-bottom-left-radius: $_colorswatch_radius + 0.5px; - overlay { + > overlay { border-top-left-radius: $_colorswatch_radius; border-bottom-left-radius: $_colorswatch_radius; } @@ -4365,7 +3951,7 @@ colorswatch { border-top-right-radius: $_colorswatch_radius + 0.5px; border-bottom-right-radius: $_colorswatch_radius + 0.5px; - overlay { + > overlay { border-top-right-radius: $_colorswatch_radius; border-bottom-right-radius: $_colorswatch_radius; } @@ -4374,7 +3960,7 @@ colorswatch { &.dark { outline-color: transparentize(white, 0.4); - overlay { + > overlay { color: white; &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } @@ -4386,7 +3972,7 @@ colorswatch { &.light { outline-color: transparentize(black, 0.4); - overlay { + > overlay { color: black; &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } @@ -4398,20 +3984,20 @@ colorswatch { &:drop(active) { box-shadow: none; - &.light overlay { + &.light > overlay { border-color: $drop_target_color; box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), inset 0 0 0 1px $drop_target_color; } - &.dark overlay { + &.dark > overlay { border-color: $drop_target_color; box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), inset 0 0 0 1px $drop_target_color; } } - overlay { + > overlay { border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); &:hover { @@ -4430,7 +4016,7 @@ colorswatch { &:only-child { border-radius: $_colorswatch_radius; } - overlay { + > overlay { @include button(normal); &:hover { @include button(hover); } @@ -4442,7 +4028,7 @@ colorswatch { &:disabled { opacity: 0.5; - overlay { + > overlay { border-color: transparentize(black, 0.4); box-shadow: none; } @@ -4453,7 +4039,7 @@ colorswatch { &#editor-color-sample { border-radius: 4px; - overlay { border-radius: 4.5px; } + > overlay { border-radius: 4.5px; } } } @@ -4463,7 +4049,6 @@ colorchooser .popover.osd { border-radius: 5px; } /******** * Misc * ********/ -//content view (grid/list) .content-view { background-color: darken($bg_color,7%); @@ -4471,7 +4056,7 @@ colorchooser .popover.osd { border-radius: 5px; } &:backdrop { background-color: darken($bg_color,7%); } - rubberband { @extend rubberband; } + > rubberband { @extend rubberband; } } .scale-popup { @@ -4526,37 +4111,37 @@ decoration { transition: $backdrop_transition; } - .maximized &, - .fullscreen &, - .tiled &, - .tiled-top &, - .tiled-left &, - .tiled-right &, - .tiled-bottom & { border-radius: 0; } + .maximized > &, + .fullscreen > &, + .tiled > &, + .tiled-top > &, + .tiled-left > &, + .tiled-right > &, + .tiled-bottom > & { border-radius: 0; } - .popup & { box-shadow: none; } + .popup > & { box-shadow: none; } // server-side decorations as used by mutter - .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows + .ssd > & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows - .csd.popup & { + .csd.popup > & { border-radius: $menu_radius; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1); } - tooltip.csd & { + tooltip.csd > & { border-radius: 5px; box-shadow: none; } - messagedialog.csd & { + messagedialog.csd > & { border-radius: $window_radius; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border, 0.1); } - .solid-csd & { + .solid-csd > & { margin: 0; padding: 4px; background-color: $borders_color; @@ -4585,25 +4170,9 @@ button.titlebutton { min-height: 0; } - .selection-mode & { - @extend %selection_mode_button_flat; - - @extend %nobg_selected_items; - } - - &:backdrop { -gtk-icon-shadow: none; } -} - -.selection-mode headerbar button.titlebutton, -.selection-mode .titlebar button.titlebutton, -headerbar.selection-mode button.titlebutton, -.titlebar.selection-mode button.titlebutton { - @include _button_text_shadow(white, $selected_bg_color); - &:backdrop { -gtk-icon-shadow: none; } } - // catch all extend :) %selected_items { @@ -4795,7 +4364,7 @@ popover.emoji-picker emoji { } } -emoji-completion-row box { +emoji-completion-row > box { border-spacing: 10px; padding: 2px 10px; } |