@function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); $asset_suffix: if($variant=='dark', '-dark', ''); * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; -GtkCheckButton-indicator-size: 16; -GtkCheckMenuItem-indicator-size: 16; // The size for scrollbars. The slider is 2px smaller, but we keep it // up so that the whole area is sensitive to button presses for the // slider. The stepper button is larger in both directions, the slider // only in the width -GtkScrolledWindow-scrollbar-spacing: 0; -GtkScrolledWindow-scrollbars-within-bevel: 1; -GtkToolItemGroup-expander-size: 11; -GtkExpander-expander-size: 16; -GtkTreeView-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkMenu-horizontal-padding: 0; -GtkMenu-vertical-padding: 0; -GtkWidget-link-color: $link_color; -GtkWidget-visited-link-color: $link_visited_color; -GtkWidget-focus-padding: 2; // FIXME: do we still need these? -GtkWidget-focus-line-width: 1; // -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; -GtkStatusbar-shadow-type: none; // We use the outline properties to signal the focus properties // to the adwaita engine: using real CSS properties is faster, // and we don't use any outlines for now. outline-color: transparentize($fg_color, 0.7); outline-style: dashed; outline-offset: -3px; outline-width: 1px; outline-radius: 2px; } /*************** * Base States * ***************/ .background { color: $fg_color; background-color: if($variant == 'light', darken($bg_color, 1.5%), $bg_color); &:backdrop { text-shadow: none; icon-shadow: none; color: $backdrop_fg_color; background-color: $backdrop_bg_color; } } /* These wildcard seems unavoidable, need to investigate. Wildcards are bad and troublesome, use them with care, or better, just don't. Everytime a wildcard is used a kitten dies, painfully. */ *:insensitive { -gtk-image-effect: dim; } .gtkstyle-fallback { background-color: $bg_color; color: $fg_color; &:prelight { background-color: lighten($bg_color, 10%); color: $fg_color; } &:active { background-color: darken($bg_color, 10%); color: $fg_color; } &:insensitive { background-color: $insensitive_bg_color; color: $insensitive_fg_color; } &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } textview text, .view { color: $text_color; background-color: $base_color; &:backdrop { color: $backdrop_text_color; background-color: $backdrop_base_color; } &:selected { border-radius: 3px; @extend %selected_items; } } .rubberband { border: 1px solid darken($selected_bg_color, 10%); background-color: transparentize(darken($selected_bg_color, 10%), 0.8); } label { &.separator { color: $fg_color; @extend .dim-label; &:backdrop { color: $backdrop_fg_color; } } &:selected, &:selected:focus, &:selected:hover { @extend %selected_items; } &:insensitive { color: $insensitive_fg_color; &:backdrop { color: $backdrop_insensitive_color; } } } .dim-label { opacity: 0.55; text-shadow: none; } assistant { .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; &:dir(ltr) { border-right: 1px solid $borders_color; } &:dir(rtl) { border-left: 1px solid $borders_color; } &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } } &.csd .sidebar { border-top-style: none; } .sidebar label { padding: 6px 12px; } .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } } textview { // This will get overridden by .view, needed by gedit line numbers background-color: mix($bg_color, $base_color, 50%); &:backdrop { background-color: mix($backdrop_bg_color, $backdrop_base_color, 50%); } } .grid-child { padding: 3px; border-radius: 3px; &:selected { @extend %selected_items; outline-offset: -2px; } } popover.magnifier, %osd, .osd { color: $osd_fg_color; border: none; background-color: $osd_bg_color; 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; } } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background-image: none; background-color: blue; opacity: 0; // non spinning spinner makes no sense -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); &:active { opacity: 1; animation: spin 1s linear infinite; &:insensitive { opacity: 0.5; } } } /**************** * Text Entries * ****************/ entry { border: 1px solid; padding: 5px 8px 6px; & image { // icons inside the entry &.left { padding-left: 0; padding-right: 6px; } &.right { padding-left: 6px; padding-right: 0; } } border-radius: 3px; transition: all 200ms $ease-out-quad; @include entry(normal); &.flat, &.flat:focus { padding: 2px; @include entry(normal, $edge:none); border: none; border-radius: 0; } &:focus { @include entry(focus); } &:insensitive { @include entry(insensitive); } &:backdrop { @include entry(backdrop); } &:backdrop:insensitive { @include entry(backdrop-insensitive); } &:selected, &:selected:focus { @extend %selected_items; } & progress { margin: 1px; border-radius: 0; border-width: 0 0 2px; border-color: $selected_bg_color; border-style: solid; background-image: none; background-color: transparent; box-shadow: none; &:backdrop { background-color: transparent; } } .linked:not(.vertical) > & { @extend %linked; } .linked:not(.vertical) > &:focus + entry, .linked:not(.vertical) > &:focus + button, .linked:not(.vertical) > &:focus + combobox > button.combo { border-left-color: entry_focus_border(); // colors the border of the widget following a focused entry } // 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; } } } & image { // entry icons colors color: mix($fg_color, $base_color, 80%); &:hover { color: $fg_color; } &:active { color: $selected_bg_color; } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } } .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } &:backdrop { @include entry(osd-backdrop); } &:insensitive { @include entry(osd-insensitive); } } } // 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) + combobox > button.combo { border-top-color: entry_focus_border(); } } /*********** * Buttons * ***********/ // stuff for .needs-attention $_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); @keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to($_dot_color), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent)); } } button { $_button_transition: all 200ms $ease-out-quad; border: 1px solid; border-radius: 3px; padding: 5px 8px 6px; transition: $_button_transition; @include button(normal); &.flat { @include button(undecorated); // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but // it won't fade out when the pointer leave the button allocation area. To make the transition more evident // in this case the duration is increased. transition: none; &:hover { transition: $_button_transition; transition-duration: 500ms; &:active { transition: $_button_transition; } } } &:hover { @include button(hover); -gtk-image-effect: highlight; } &:active, &:checked { @include button(active); transition-duration: 50ms; } &:backdrop, &.flat:backdrop { @include button(backdrop); -gtk-image-effect: none; &:active, &:checked { @include button(backdrop-active); } &:insensitive { @include button(backdrop-insensitive); } &:insensitive:active, &:insensitive:checked { @include button(backdrop-insensitive-active); } } &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive { @include button(undecorated); } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } // big standalone buttons like in Documents pager &.osd { &.image-button { padding: 13px; } color: $osd_fg_color; border-radius: 5px; outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var? @include button(osd); border: none; box-shadow: none; &:hover { @include button(osd-hover); border: none; box-shadow: none; } &:active, &:checked { @include button(osd-active); border: none; box-shadow: none; } &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); border: none; } &:backdrop { @include button(osd-backdrop); border: none; } } //overlay / OSD style .osd & { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked, &:backdrop:active, &:backdrop:checked { @include button(osd-active); } &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); } &:backdrop { @include button(osd-backdrop); } &.flat { @include button(undecorated); box-shadow: none; //FIXME respect no edge on the button mixin text-shadow: 0 1px black; icon-shadow: 0 1px black; &:hover { @include button(osd-hover); background-clip: padding-box; border-color: transparent; box-shadow: none; } &:insensitive { @include button(osd-insensitive); background-image: none; border-color: transparent; box-shadow: none; } &:backdrop { @include button(undecorated); } &:active, &:checked { @include button(osd-active); background-clip: padding-box; border-color: transparent; box-shadow: none; } } } // Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $selected_bg_color), (destructive-action, $destructive_color) { &.#{$b_type} { @include button(normal, $b_color, white); &.flat { @include button(undecorated); color: $b_color; //FIXME: does it work on the dark variant? } &:hover { @include button(hover, $b_color, white); } &:active, &:checked { @include button(active, $b_color, white); } &:backdrop, &.flat:backdrop { @include button(backdrop, $b_color, white); &:active, &:checked { @include button(backdrop-active, $b_color, white); } &:insensitive { @include button(backdrop-insensitive); &:active, &:checked { @include button(backdrop-insensitive-active, $b_color, white); } } } &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive { @include button(undecorated); color: transparentize($b_color, 0.2); } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active, $b_color, white); } } .osd & { @include button(osd, $b_color); &:hover { @include button(osd-hover, $b_color); } &:active, &:checked, &:backdrop:active, &:backdrop:checked { @include button(osd-active, $b_color); } &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive, $b_color); } &:backdrop { @include button(osd-backdrop, $b_color); } } } } &.image-button { padding: 8px; } &.text-button { padding-left: 16px; padding-right: 16px; } &.text-button.image-button { // those buttons needs uneven horizontal padding, we want the icon side // to have the image-button padding, while the text side the text-button // one, so we're adding the missing padding to the label depending on // its position inside the button padding: 5px 8px 6px; // same as .button & label:first-child { padding-left: 8px; } & label:last-child { padding-right: 8px; } } .stack-switcher > & { // to position the needs attention dot, padding is added to the button // child, a label needs just lateral padding while an icon needs vertical // padding added too. outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset > label { padding-left: 6px; // label padding padding-right: 6px; // } > image { padding-left: 6px; // image padding padding-right: 6px; // padding-top: 3px; // padding-bottom: 3px; // } &.text-button { padding: 5px 10px 6px; // needed or it will get overridden } &.image-button { // we want image buttons to have a 1:1 aspect ratio, so compensation // of the padding added to the GtkImage is needed padding: 5px 2px; } &.needs-attention > label, &.needs-attention > image { @extend %needs_attention; } &.needs-attention:active > label, &.needs-attention:active > image, &.needs-attention:checked > label, &.needs-attention:checked > image { animation: none; background-image: none; } } //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 2px; border-width: 1px; @extend %linked; } .primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows .linked > &, .linked > &:hover, .linked > &:active, .linked > &:checked, .linked > &:backdrop { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, .linked.vertical > &:checked, .linked.vertical > &:backdrop { @extend %linked_vertical; } } %needs_attention { animation: needs_attention 150ms ease-in; $_dot_shadow: _text_shadow_color(); $_dot_shadow_r: if($variant=='light',0.5,0.45); background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; @if $variant == 'light' { background-position: right 3px, right 4px; } @else { background-position: right 3px, right 2px; } &:backdrop { background-size: 6px 6px, 0 0;} &:dir(rtl) { @if $variant == 'light' { background-position: left 3px, left 4px; } @else { background-position: left 3px, left 2px; } } } // all the following is for the +|- buttons on inline toolbars, that way // should really be deprecated... .inline-toolbar toolbutton > button { // redefining the button look is // needed since those are flat... @include button(normal); &:hover { @include button(hover); } &:active, &:checked{ @include button(active); } &:insensitive { @include button(insensitive); } &:insensitive:active, &:insensitive:checked { @include button(insensitive-active); } &:backdrop { @include button(backdrop); }; &:backdrop:active, &:backdrop:checked { @include button(backdrop-active); } &:backdrop:insensitive { @include button(backdrop-insensitive); } &:backdrop:insensitive:active, &:backdrop:insensitive:checked { @include button(backdrop-insensitive-active); } } // More inline toolbar buttons toolbar.inline-toolbar toolbutton, toolbar.inline-toolbar toolbutton:backdrop { & > button.flat { @extend %linked_middle; } &:first-child > button.flat { @extend %linked:first-child; } &:last-child > button.flat { @extend %linked:last-child; } &:only-child > button.flat { @extend %linked:only-child; } } %linked_middle { border-radius: 0; border-right-style: none; } %linked { @extend %linked_middle; &:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } &:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %linked_vertical_middle { border-style: solid solid none solid; border-radius: 0; } %linked_vertical{ @extend %linked_vertical_middle; &:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } &:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-style: solid; } &:only-child { border-radius: 3px; border-style: solid; } } %undecorated_button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px transparentize(white,1), 0 1px transparentize(white, 1); text-shadow: none; icon-shadow: none; } /* menu buttons */ modelbutton.flat, .menuitem.button.flat { @extend %undecorated_button; outline-offset: -1px; &:hover { background-color: mix($fg_color, $bg_color, 10%); } &:selected { @extend %selected_items; } &:backdrop, &:backdrop:hover { @extend %undecorated_button; } } button.color { padding: 5px; // Uniform padding on the GtkColorButton colorswatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the // colorpicker style, otherwise border-radius: 0; box-shadow: inset 0 1px 1px transparentize(black, 0.9), _widget_edge(); &:insensitive, &:backdrop { box-shadow: none; } } } /********* * Links * *********/ *:link { color: $link_color; &:visited { color: $link_visited_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } } &:hover { color: lighten($link_color,10%); *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); } } &:active { color: $link_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } &:backdrop, &:backdrop:hover, &:backdrop:hover:selected { color: $selected_bg_color; } &:selected, *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } button:link, button:visited { @extend %undecorated_button; @extend *:link; text-shadow: none; &:hover, &:active, &:checked { @extend %undecorated_button; text-shadow: none; } &:backdrop { @extend %undecorated_button; //This shouldn't be needed but avoids //a weird transition which for some reason //makes borders blink on hover } & > label { text-decoration-line: underline; } } /***************** * GtkSpinButton * *****************/ spinbutton { @extend entry; &:not(.vertical) { button { background-image: none; border-style: none none none solid; border-color: transparentize($borders_color, 0.7); color: mix($fg_color, $base_color, 90%); border-radius: 0; box-shadow: none; &:dir(rtl) { border-style: none solid none none; } &:hover { color: $fg_color; background-color: transparentize($fg_color, 0.95); } &:insensitive { color: transparentize($insensitive_fg_color, 0.7); } &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); background-color: transparentize(black, 0.9); } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 90%); border-color: transparentize($backdrop_borders_color, 0.7); background-color: transparent; } &:backdrop:insensitive { background-image: none; color: transparentize($backdrop_insensitive_color,0.7); border-style: none none none solid; // It is needed or it gets overridden &:dir(rtl) { border-style: none solid none none; } } } } // OSD horizontal .osd &:not(.vertical) { button { @include button(undecorated); color: $osd_fg_color; border-style: none none none solid; border-color: transparentize($osd_borders_color, 0.3); border-radius: 0; box-shadow: none; icon-shadow: 0 1px black; &:dir(rtl) { border-style: none solid none none; } &:hover { @include button(undecorated); color: $osd_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); background-color: transparentize($osd_fg_color, 0.9); icon-shadow: 0 1px black; box-shadow: none; } &:backdrop { @include button(undecorated); color: $osd_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); icon-shadow: none; box-shadow: none; } &:insensitive { @include button(undecorated); color: $osd_insensitive_fg_color; border-color: transparentize(opacify($osd_borders_color, 1), 0.5); icon-shadow: none; box-shadow: none; } &:last-child { border-radius: 0 3px 3px 0; } &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } } } // Vertical &.vertical { border-radius: 0; padding-left: 4px; padding-right: 4px; button { padding-top: 8px; // Same vertical padding as image-buttons padding-bottom: 8px; // &:first-child { @extend %top_button; @include button(normal, $edge:none); &:active { @extend %top_button; @include button(active, $edge:none); } &:hover { @extend %top_button; @include button(hover, $edge:none); } &:insensitive { @extend %top_button; @include button(insensitive, $edge:none); } &:backdrop { @extend %top_button; @include button(backdrop, $edge:none); &:insensitive { @include button(backdrop-insensitive, $edge:none); } } } &:last-child { @extend %bottom_button; } } %top_button { border-radius: 3px 3px 0 0; border-style: solid solid none solid; } %bottom_button { border-radius: 0 0 3px 3px; border-style: none solid solid solid; } } // OSD vertical .osd &.vertical button:first-child { @include button(osd); &:hover { @include button(osd-hover);} &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } &:backdrop { @include button(osd-backdrop); } } // Misc treeview & { & entry, & entry:focus { padding: 1px; border-width: 1px 0; border-color: $selected_bg_color; border-radius: 0; box-shadow: none; } } } /************** * ComboBoxes * **************/ combobox { > button.combo { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos // are bigger then // buttons -GtkComboBox-arrow-scaling: 0.5; -GtkComboBox-shadow-type: none; @include _button_text_shadow; &:insensitive { color: $insensitive_fg_color; text-shadow: none; icon-shadow: none; } &:backdrop { color: $backdrop_fg_color; text-shadow: none; icon-shadow: none; } &:backdrop:insensitive { color: $backdrop_insensitive_color; } & menuitem { text-shadow: none; } &.separator.vertical { // always disable separators -GtkWidget-wide-separators: true; } & > entry.combo { &:dir(ltr) { border-top-right-radius: 0; border-bottom-right-radius: 0; } &:dir(rtl) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } & > button.combo:not(:only-child) { &: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 > combobox > button.combo { // 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), &:dir(rtl) { @extend %linked_middle; } // specificity bump } .linked > combobox:first-child > button.combo { @extend %linked:first-child; } .linked > combobox:last-child > button.combo { @extend %linked:last-child; } .linked > combobox:only-child > button.combo { @extend %linked:only-child; } .linked.vertical > combobox > button.combo { @extend %linked_vertical_middle; } .linked.vertical > combobox:first-child > button.combo { @extend %linked_vertical:first-child; } .linked.vertical > combobox:last-child > button.combo { @extend %linked_vertical:last-child; } .linked.vertical > combobox:only-child > button.combo { @extend %linked_vertical:only-child; } /************ * Toolbars * ************/ toolbar { -GtkWidget-window-dragging: true; padding: 4px; background-color: $bg_color; .osd &, &.osd { padding: 13px; border: none; border-radius: 5px; background-color: $osd_bg_color; } } //searchbar, location-bar & inline-toolbar .inline-toolbar { @extend toolbar; @extend %inset-bar; border-width: 0 1px 1px; padding: 3px; border-radius: 0 0 5px 5px; } searchbar, .location-bar { @extend toolbar; @extend %inset-bar; border-width: 0 0 1px; padding: 3px; } %inset-bar { border-style: solid; border-color: $borders_color; $_bg: mix($bg_color, $borders_color, 70%); background-color: $_bg; box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%), _widget_edge(); //FIXME edge would be nice, but doesn't work &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_dark_fill; box-shadow: none; } } /*************** * Header bars * ***************/ .titlebar, headerbar { padding: 6px; border-width: 0 0 1px; border-style: solid; border-color: $borders_color; border-radius: 7px 7px 0 0; background-color: transparent; @include headerbar_fill; &:backdrop { border-color: $backdrop_borders_color; background-color: $bg_color; background-image: none; box-shadow: inset 0 1px $top_hilight; } .title { font-weight: bold; padding-left: 12px; padding-right: 12px; } .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; @extend .dim-label; } .header-bar-separator, & > GtkBox > separator.vertical { -GtkWidget-wide-separators: true; -GtkWidget-separator-width: 1px; border-width: 0 1px; border-image: linear-gradient(to bottom, transparentize($borders_color,1), $borders_color 30%, $borders_color 70%, transparentize($borders_color,1) 100%) 0 1 / 0 1px stretch; //FIXME use a proper color &:backdrop { border-image: linear-gradient(to bottom, transparentize($backdrop_borders_color, 0.5)) 0 1 / 1px 1px; //FIXME use a proper color } } &.selection-mode { $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color color: $selected_fg_color; text-shadow: 0 -1px transparentize(black, 0.5); border-color: $selected_borders_color; background-image: linear-gradient(to bottom, lighten($selected_bg_color,5%), $selected_bg_color); box-shadow: inset 0 -1px mix($selected_borders_color, $selected_bg_color, 35%), //bottom shade inset 0 1px $_hc; &:backdrop { background-image: linear-gradient(to bottom, $selected_bg_color); box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%); } .subtitle:link { @extend *:link:selected; } button { @include button(normal, $selected_bg_color, $selected_fg_color, $_hc); &.flat { @include button(undecorated); } &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $_hc); } &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color, $_hc); } &:backdrop, &.flat:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $_hc); -gtk-image-effect: none; border-color: $selected_borders_color; &:active, &:checked { @include button(backdrop-active, $selected_bg_color, $selected_fg_color, $_hc); border-color: $selected_borders_color; } &:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $_hc); border-color: $selected_borders_color; } &:insensitive:active, &:insensitive:checked { @include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color, $_hc); border-color: $selected_borders_color; } } &.flat:backdrop, &.flat:insensitive, &.flat:insensitive:backdrop { @include button(undecorated); } &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $_hc); &:active, &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color, $_hc); } } &.suggested-action { @include button(normal, $edge:$_hc); border-color: $selected_borders_color; &:hover { @include button(hover, $edge:$_hc); border-color: $selected_borders_color; } &:active { @include button(active, $edge:$_hc); border-color: $selected_borders_color; } &:insensitive { @include button(insensitive, $edge:$_hc); border-color: $selected_borders_color; } &:backdrop { @include button(backdrop, $edge:$_hc); border-color: $selected_borders_color; } &:backdrop:insensitive { @include button(backdrop-insensitive, $edge:$_hc); border-color: $selected_borders_color; } } } .selection-menu { border-color: transparentize($selected_bg_color, 1); background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1)); box-shadow: none; padding-left: 10px; padding-right: 10px; GtkArrow { -GtkArrow-arrow-scaling: 1; } .arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); color: transparentize($selected_fg_color,0.5); icon-shadow: none; } &:backdrop { @extend .selection-menu }; } } .tiled &, .maximized & { border-radius: 0; // squared corners when the window is max'd or tiled } &.default-decoration { padding: 4px; button { padding: 5px; } } } /************ * Pathbars * ************/ .path-bar button { padding: 5px 6px 6px; &:first-child { padding-left: 8px; } &:last-child { padding-right: 8px; } &:only-child { padding-left: 12px; padding-right: 12px; } // the following is for spacing the icon and the label inside the home button & label:last-child { padding-left: 2px; } & label:first-child { padding-right: 2px; } & label:only-child { padding-right: 0; padding-left: 0; } image { padding-top: 1px; } } /************** * Tree Views * **************/ treeview.view { -GtkTreeView-grid-line-width: 1; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; -GtkTreeView-tree-line-pattern: ''; -GtkTreeView-expander-size: 16; 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 { border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly } &:insensitive { color: $insensitive_fg_color; &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } } &:backdrop { color: $backdrop_insensitive_color; } } &.separator:backdrop { color: transparentize(black, 0.9); } &:backdrop { border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); border-top: $backdrop_bg_color; } &.dnd { border-style: solid none; border-width: 1px; border-color: mix($fg_color, $selected_bg_color, 50%); } &.expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } color: mix($fg_color, $base_color, 70%); &:hover { color: $fg_color; } &:selected { color: mix($selected_fg_color, $selected_bg_color, 70%); &:hover { color: $selected_fg_color; } &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); } } &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); } } &.progressbar { // progress bar in treeviews @if $variant == light { color: $base_color; } border: 1px solid $selected_borders_color; border-radius: 4px; background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%)); box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7), transparentize(white,0.85)), 0 1px if($variant=='light', transparentize(black, 0.8), transparentize(black,0.9)); &:selected { @if $variant == 'light' { color: $selected_bg_color; box-shadow: none; } @else { box-shadow: inset 0 1px transparentize(white, 0.95); } background-image: linear-gradient(to bottom, $base_color, darken($base_color,10%)); &:backdrop { @if $variant == 'light' { color: $selected_bg_color; border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) } @else { border-color: $backdrop_base_color; } background-color: $backdrop_base_color; } } &:backdrop { @if $variant == 'light' { color: $backdrop_base_color; } @else { border-color: $backdrop_base_color; } background-image: none; box-shadow: none; } } &.trough { // progress bar trough in treeviews background-color: transparentize($fg_color,0.9); border-radius: 4px; &:selected { background-color: if($variant == 'light', transparentize($selected_fg_color, 0.7), darken($selected_bg_color, 10%)); @if $variant == 'light' { border-width: 1px 0; border-style: solid; border-color: $selected_bg_color; } } } header { button { @extend %column_header_button; $_column_header_color: mix($fg_color, $base_color, 50%); color: $_column_header_color; background-color: $base_color; font-weight: bold; text-shadow: none; box-shadow: none; &:hover { @extend %column_header_button; color: mix($_column_header_color, $fg_color, 50%); box-shadow: none; transition: none; //I shouldn't need this } &:active { @extend %column_header_button; color: $fg_color; transition: none; //I shouldn't need this } &.dnd { @extend header.button.dnd; } } & button:last-child, & button:last-child:backdrop, // set :backdrop too or the border will be visibile there &:last-child button, &:last-child button:backdrop { //treeview-like derived widgets in Banshee and Evolution border-right-style: none; } } header.button.dnd { // for treeview-like derive widgets transition: none; color: $selected_bg_color; box-shadow: inset 1px 1px 0 1px $selected_bg_color, inset -1px 0 0 1px $selected_bg_color, inset 1px 1px $base_color, inset -1px 0 $base_color;; &:active { @extend header.button.dnd; } &:selected { @extend header.button.dnd; } &:hover { @extend header.button.dnd; } } } %column_header_button { padding: 3px 6px; border-style: none solid solid none; border-radius: 0; background-image: none; border-color: $bg_color; text-shadow: none; &:insensitive { border-color: $bg_color; background-image: none; } &:backdrop { border-color: $backdrop_bg_color; border-style: none solid solid none; color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); background-image: none; background-color: $backdrop_base_color; &:insensitive { border-color: $backdrop_bg_color; background-image: none; } } } /********* * Menus * *********/ menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; box-shadow: inset 0 -1px transparentize(black, 0.9); &:backdrop { background-color: $backdrop_bg_color; } & > menuitem { padding: 4px 8px; &:hover { //Seems like it :hover even with keyboard focus box-shadow: inset 0 -3px $selected_bg_color; color: $link_color; } &:insensitive { color: $insensitive_fg_color; box-shadow: none; } } } menu, .menu { margin: 4px; padding: 0px; background-color: $base_color; border: 1px solid $borders_color; // adds borders in a non composited env .csd & { border: none; } // axes borders in a composited env & menuitem { text-shadow: none; padding: 4px; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: $insensitive_fg_color; &:backdrop { color: $backdrop_insensitive_color; } } &:backdrop, &:backdrop:hover { color: $backdrop_fg_color; background-color: $backdrop_base_color; } //submenu indicators & arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } & arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); } } & arrow { // overlow buttons @extend %undecorated_button; border-style: none; border-radius: 0; &.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); } &.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); } &:hover { background-color: mix($fg_color, $base_color, 10%); } &:insensitive { color: transparent; background-color: transparent; border-color: transparent ; } } } menuitem accelerator { color: gtkalpha(currentColor,0.55); } /*************** * Popovers * ***************/ popover { padding: 2px; border: 1px solid $borders_color; border-radius: 5px; background-color: mix($bg_color, $base_color, 50%); box-shadow: 0 1px 2px transparentize(black, 0.7); &:backdrop { box-shadow: none; } > list, > .view, > toolbar, &.osd > toolbar { border-style: none; background-color: transparent; } button.flat, button.flat:hover { text-shadow: none; transition: none; } &.osd { @extend %osd; } } /***************** * Notebooks and * * Tabs * *****************/ notebook { -GtkNotebook-initial-gap: 10; -GtkNotebook-arrow-spacing: 5; -GtkNotebook-tab-curvature: 0; -GtkNotebook-tab-overlap: -8; -GtkNotebook-has-tab-gap: false; -GtkWidget-focus-padding: 0; -GtkWidget-focus-line-width: 0; // Through me you go to the grief wracked city; // Through me you go to everlasting pain; // Through me you go a pass among lost souls. // ... // Abandon all hope — Ye Who Enter Here padding: 0; background-color: $base_color; transition: all 200ms $ease-out-quad; &:backdrop { background-color: $backdrop_base_color; } &.frame { border: 1px solid $borders_color; // FIXME doesn't work &.top { border-top-width: 0; } &.bottom { border-bottom-width: 0; } &.right { border-right-width: 0; } &.left { border-left-width: 0; } &:backdrop { border-color: $backdrop_borders_color; } } &.header { // FIXME: double borders in some case, can't fix it w/o a class tho // FIXME: doesn't work on dark var background-color: mix($bg_color, $borders_color, 70%); // this is the shading of the header behind the tabs &.frame { border: 1px solid $borders_color; &.top { border-bottom-width: 0; } &.bottom { border-top-width: 0; } &.right { border-left-width: 0; } &.left { border-right-width: 0; } &:backdrop { border-color: $backdrop_borders_color; } } $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85); &.top { box-shadow: $_header_shade, inset 0 -1px $borders_color; // border &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; } } &.bottom { box-shadow: $_header_shade, inset 0 1px $borders_color; &:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; } } &.right { box-shadow: $_header_shade, inset 1px 0 $borders_color; &:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; } } &.left { box-shadow: $_header_shade, inset -1px 0 $borders_color; &:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; } } &:backdrop { // same color as backdrop pushed button background-color: $backdrop_dark_fill; box-shadow: none; } } tab { border-width: 0; border-style: solid; border-color: transparent; background-color: transparent; outline-offset: 0; $tab_indicator_size: 3px; //vertical tab sizing $vt_vpadding: 8px; $vt_hpadding: 20px; // horizontal tab sizing $ht_vpadding: 5px; $ht_hpadding: 20px; //FIXME: we get double border in some cases, not considering the broken //notebook content frame... &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; } &.left, &.right { padding: $ht_vpadding $ht_hpadding; } /* works for testnotebookdnd, but there's a superfluous border in gedit or web, commented out for now, needs gtk fixes &.reorderable-page { &.top { padding-top: ($vt_vpadding - 1px); border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; } &.bottom { padding-bottom: ($vt_vpadding - 1px); border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; } &.left { padding-left: ($ht_hpadding - 1px); border-left-width: 1px; border-top-width: 1px; border-bottom-width: 1px; } &.right { padding-right: ($ht_hpadding - 1px); border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; } } */ &.reorderable-page { &.top, &.bottom { padding-left: 12px; // for a nicer close button padding-right: 12px; // placement border-left-width: 1px; border-right-width: 1px; } &.left, &.right { border-bottom-width: 1px; border-top-width: 1px; } } &.top { //padding-bottom: ($vt_vpadding -$tab_indicator_size); border-bottom-width: $tab_indicator_size; } &.bottom { //padding-top: ($vt_vpadding -$tab_indicator_size); border-top-width: $tab_indicator_size; } &.left { //padding-right: ($ht_hpadding -$tab_indicator_size); border-right-width: $tab_indicator_size; } &.right { //padding-left: ($ht_hpadding -$tab_indicator_size); border-left-width: $tab_indicator_size; } //here's the interesting stuff &:hover { border-color: $borders_color; } &:active, &:backdrop:active { border-color: $selected_bg_color; } &:backdrop { background-color: transparent; border-color: transparent; } @each $_tab, $_border in (top, bottom), (bottom, top), (left, right), (right, left) { &.reorderable-page.#{$_tab} { border-color: transparent; &:hover { border-color: transparentize($borders_color,0.7); border-#{$_border}-color: $borders_color; background-color: transparentize($bg_color,0.8); } &:active { background-color: transparentize($bg_color,0.5); border-color: transparentize($borders_color,0.5); border-#{$_border}-color: $selected_bg_color; &:hover { background-color: transparentize($bg_color,0.3); } &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_bg_color; border-#{$_border}-color: $selected_bg_color; } } &:backdrop { border-color: transparent; background-color: transparent; } } } & label { //tab text padding: 0 2px; // needed for a nicer focus ring font-weight: bold; color: $insensitive_fg_color; &:backdrop { color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%); } } &:hover label { // prelight tab text color: mix($fg_color, $insensitive_fg_color, 50%); &:backdrop { // FIXME, it's the same as .label:backdrop up here color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%); } } &:active label { // active tab text color: $fg_color; &:backdrop { color: $backdrop_fg_color; } } button { //tab close button padding: 0; border: 1px solid transparent; @extend %undecorated_button; icon-shadow: none; transition: none; color: transparentize($fg_color,0.7); &:hover { color: $fg_color; @include button(hover, $edge:none); background-image: none; box-shadow: none; } &:active { @include button(active, $edge:none); } &:backdrop { color: transparentize($backdrop_fg_color,0.7); border-color: transparent; } & > image { // this is a hack which makes tabs grow padding: 2px; } } } &.arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } &:active { color: $fg_color; } &:insensitive { color: transparentize($insensitive_fg_color,0.7); } &:backdrop { color: transparentize($backdrop_fg_color,0.6); &:insensitive { color: $backdrop_insensitive_color; } } } } /************** * Scrollbars * **************/ scrollbar { -GtkRange-slider-width: 13; -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. // sadly can't be in '.slider' // where it belongs -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; button { border: none; } &.overlay-indicator { &:not(.dragging):not(.hovering) { // Overlay scrolling indicator opacity: 0.4; -GtkRange-slider-width: 5px; slider { margin: 0; background-color: $fg_color; border: 1px solid if($variant==light, white, black); background-clip: padding-box; } & trough { border-style: none; background-color: transparent; } // w/o the following margin tweaks the slider shrinks when hovering/dragging &.vertical slider { margin-top: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px; } &.horizontal slider { margin-left: $_slider_margin - 1px; margin-right: $_slider_margin - 1px; } } &.dragging, &.hovering { opacity: 0.7; } } // trough coloring trough { background-color: $scrollbar_bg_color; border: 1px none $borders_color; &:backdrop { background-color: $backdrop_scrollbar_bg_color; border-color: $backdrop_borders_color; } } // slider coloring slider { background-color: mix($fg_color, $bg_color, 60%); &:hover { background-color: mix($fg_color, $bg_color, 80%); } &:prelight:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));} &:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); } &:insensitive { background-color: transparent; } } // sizing slider { border-radius: 100px; margin: $_slider_margin; } &.fine-tune slider { margin: $_slider_fine_tune_margin; } &.vertical { slider { margin-left: 1px + $_slider_margin; &:dir(rtl) { margin-left: $_slider_margin; margin-right: 1px + $_slider_margin; } } &.fine-tune slider { margin-left: 1px + $_slider_fine_tune_margin; &:dir(rtl) { margin-left: $_slider_fine_tune_margin; margin-right: 1px + $_slider_fine_tune_margin; } } trough { border-left-style: solid; &:dir(rtl) { border-left-style: none; border-right-style: solid; } } } &.horizontal { slider { margin-top: 1px + $_slider_margin; } &.fine-tune slider { margin-top: 1px + $_slider_fine_tune_margin; } trough { border-top-style: solid; } } } /********** * Switch * **********/ switch { @at-root * { -GtkSwitch-slider-width: 45px; -GtkSwitch-slider-height: 27px; } font-weight: bold; font-size: smaller; outline-offset: -4px; box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here _widget_edge(); // otherwise it gets // clipped // similar to the .scale border: 1px solid $borders_color; border-radius: 3px; color: $fg_color; background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%)); text-shadow: 0 1px transparentize(black, 0.9); &:active { @include progressbar_fill; color: white; border-color: $selected_borders_color; box-shadow: _widget_edge(); text-shadow: 0 1px transparentize($selected_borders_color, 0.5), 0 0 2px transparentize(white, 0.4); } &:insensitive { color: $insensitive_fg_color; border-color: $borders_color; background-image: none; background-color: $insensitive_bg_color; box-shadow: _widget_edge(); text-shadow: none; } &:backdrop { color: $backdrop_fg_color; border-color: $backdrop_borders_color; background-image: linear-gradient(to bottom, $backdrop_dark_fill); box-shadow: none; text-shadow: none; &:active { @if $variant == 'light' { color: $backdrop_bg_color; } border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); background-image: linear-gradient(to bottom, $selected_bg_color); box-shadow: none; } } &:insensitive { color: $backdrop_insensitive_color; border-color: $backdrop_borders_color; background-image: none; background-color: $insensitive_bg_color; } // slider styling // switch slider doesn't respond to its own states but relies on the switch ones slider { border: 1px solid; border-radius: 3px; @include button(normal); box-shadow: inset 0 1px if($variant=='light', white, transparentize(white, 0.85)), inset 0 -2px transparentize($bg_color, 0.4), inset 0 -1px mix($bg_color, $borders_color, 50%); } &:hover slider { @include button(hover); box-shadow: inset 0 1px if($variant=='light', white, transparentize(white, 0.85)), inset 0 -2px transparentize($bg_color, 0.4), inset 0 -1px mix($bg_color, $borders_color, 50%); } &:active slider { border: 1px solid $selected_borders_color; } &:insensitive slider { @include button(insensitive, $edge:none); } &:backdrop { slider { @include button(backdrop); box-shadow: none; } &:active slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); } &:insensitive slider { @include button(backdrop-insensitive); box-shadow: none; } } row:selected & { @if $variant == 'light' { box-shadow: none; border-color: $selected_borders_color; &:backdrop { border-color: $selected_borders_color; } &.slider:dir(rtl) { border-left-color: $borders_color; } &.slider:dir(ltr) { border-right-color: $borders_color; } &.slider, &.slider:active { border-color: $selected_borders_color; } } } } /************************* * Check and Radio items * *************************/ // draw regular check and radio items using our PNG assets // all assets are rendered from assets.svg. never add pngs directly @each $w,$a in ('check', 'checkbox'), ('radio','radio') { //standard checks and radios @each $s,$as in ('','-unchecked'), (':hover', '-unchecked-hover'), (':active', '-unchecked-active'), (':insensitive','-unchecked-insensitive'), (':backdrop', '-unchecked-backdrop'), (':backdrop:insensitive', '-unchecked-backdrop-insensitive'), (':inconsistent', '-mixed'), (':inconsistent:hover', '-mixed-hover'), (':inconsistent:selected', '-mixed-active'), (':inconsistent:backdrop', '-mixed-backdrop'), (':inconsistent:insensitive', '-mixed-insensitive'), (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'), (':checked', '-checked'), (':checked:insensitive','-checked-insensitive'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':backdrop:checked', '-checked-backdrop'), (':backdrop:checked:insensitive', '-checked-backdrop-insensitive') { #{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); icon-shadow: if(str-index($s,"backdrop"), none, 0 1px 0 $borders_edge); //no edge highlight for :backdrop & button.flat { icon-shadow: none; } } @if $variant == 'light' { // the borders of the light variant versions of checks and radios are // too similar in luminosity to the selected background color, hence // we need special casing. .view #{$w}#{$s}:selected, row:selected #{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/selected-#{$a}#{$as}#{$asset_suffix}.png"), url("assets/selected-#{$a}#{$as}#{$asset_suffix}@2.png")); } } } //menu menu menuitem.#{$w} { -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic'); color: mix($fg_color, $bg_color, 60%); icon-shadow: none; &:active, &:checked { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); } &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); } &:hover { color: $selected_fg_color; } &:insensitive { color: mix($insensitive_fg_color, $bg_color, 50%); } } } //treeview and rows .view.check, .view.radio, row .check, row .radio { icon-shadow: none; &:selected, &:hover { icon-shadow: none; } } //selection-mode @each $s,$as in ('','-selectionmode'), (':hover', '-hover-selectionmode'), (':active', '-active-selectionmode'), (':backdrop', '-backdrop-selectionmode'), (':checked', '-checked-selectionmode'), (':checked:hover', '-checked-hover-selectionmode'), (':checked:active', '-checked-active-selectionmode'), (':backdrop:checked', '-checked-backdrop-selectionmode') { .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")); background-color: transparent; } } checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text padding: 1px 2px 4px; outline-offset: 0; &:insensitive, &:insensitive:active, &:insensitive:inconsistent { // set insensitive color, which is overriden otherwise color: $insensitive_fg_color; &:backdrop { color: $backdrop_insensitive_color; } } } /************ * GtkScale * ************/ scale, scale.scale-has-marks-above.scale-has-marks-below, scale.vertical.scale-has-marks-above.scale-has-marks-below { // FIXME: rationalize -GtkScale-slider-length: 20; -GtkRange-slider-width: 20; -GtkRange-trough-border: 2; outline-offset: -9px; outline-radius: 4px; &.fine-tune { outline-offset: -7px; outline-radius: 6px; & trough { margin: 8px; border-radius: 4px; } } trough { slider { //FIXME: better gradient on the slider and hover state @include button(normal); border: 1px solid; border-radius: 50%; border-color: darken($borders_color,3%); box-shadow: inset 0 1px if($variant=='light', white, transparentize(white,0.85)), inset 0 #{-2px} $bg_color, inset 0 #{-1px} mix($bg_color, $borders_color, 50%); &:hover { @include button(hover); border-color: darken($borders_color,3%); border-radius: 50%; // needed for double marks scales box-shadow: inset 0 1px if($variant=='light', white, transparentize(white, 0.85)), inset 0 #{-2px} if($variant=='light', white, transparentize(white, 0.86)), inset 0 #{-1px} mix($bg_color, $borders_color, 70%); } &:insensitive { border-style: solid; // needed for double marks scales or they'll get border-radius: 50%; // overridden background-image: linear-gradient(to bottom, $insensitive_bg_color); box-shadow: none; } &:backdrop { border-style: solid; // needed for double marks scales or they'll get border-radius: 50%; // overridden border-color: darken($backdrop_borders_color,3%); background-image: linear-gradient(to bottom, $backdrop_bg_color); box-shadow: none; } &:backdrop:insensitive { @include button(backdrop-insensitive); } &:active { @include button(active); border: 1px solid if($variant=='light',darken($selected_borders_color,3%), darken($selected_bg_color,15%)); } //OSD sliders .osd & { @include button(osd); background-color: opacify($osd_bg_color, 1); &:hover { @include button(osd-hover); } &:active { @include button(osd-active); } &:backdrop { @include button(osd-backdrop); } } } } trough { margin: 10px; border: 1px solid $borders_color; border-radius: 3px; background-color: mix($bg_color, $borders_color, 60%); box-shadow: inset 1px 1px transparentize(black, 0.9), _widget_edge(); &.highlight { @include progressbar_fill; border-color: $selected_borders_color; box-shadow: _widget_edge(); &.vertical { @include progressbar_fill(vertical); } &:backdrop { border-color: if($variant=='light', $selected_bg_color, $selected_borders_color); background-color: $selected_bg_color; box-shadow: none; } } &:insensitive, &.vertical:insensitive { border-color: $insensitive_borders_color; background-image: none; background-color: $insensitive_bg_color; box-shadow: _widget_edge(); } &:backdrop { border-color: $backdrop_borders_color; background-color: mix($backdrop_bg_color, $borders_color, 50%); box-shadow: none; } &:backdrop:insensitive, .highlight:backdrop:insensitive { border-color: $backdrop_borders_color; background-color: $insensitive_bg_color; } //OSD troughs .osd & { 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-image: none; } } } // scales on selected list rows row:selected & { border-color: $selected_borders_color; box-shadow: inset 1px 1px transparentize(black, 0.9); &:backdrop { box-shadow: none; } &.highlight:backdrop { border-color: $selected_borders_color; } &:insensitive, &.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%); } } } } scale marks { color: gtkalpha(currentColor, 0.5); // marks color } @each $d,$dn in ('', 'horz'), ('.vertical', 'vert') { @each $w,$we in ('scale-has-marks-below','scale_marks_below'), ('scale-has-marks-above','scale_marks_above') { scale#{$d}.#{$w} { -GtkScale-slider-length: 20; -GtkRange-slider-width: 24; -GtkRange-trough-border: 2; @extend %#{$we}_#{$dn}; trough { @each $s,$as in ('',''), (':hover','-hover'), (':active','-active'), (':insensitive','-insensitive'), (':backdrop','-backdrop'), (':backdrop:insensitive','-backdrop-insensitive') { & slider#{$s} { $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}'; border-style: none; border-radius: 0; background-color: transparent; background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')); background-repeat: no-repeat; background-position: center; box-shadow: none; } } } } } } %scale_marks_above_horz { trough { margin: 14px 10px 10px; } &.fine-tune trough { margin: 12px 8px 8px; } } %scale_marks_below_horz { trough { margin: 10px 10px 14px; } &.fine-tune trough { margin: 8px 8px 12px; } } %scale_marks_above_vert { trough { margin: 10px 10px 10px 14px; } &.fine-tune trough { margin: 8px 8px 8px 12px; } } %scale_marks_below_vert { trough { margin: 10px 14px 10px 10px; } &.fine-tune trough { margin: 8px 12px 8px 8px; } } /***************** * Progress bars * *****************/ progressbar { padding: 0; font-size: smaller; color: transparentize($fg_color, 0.6); box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set _widget_edge(); // here ot it gets // clipped &:backdrop { color: $backdrop_insensitive_color; } &.osd { -GtkProgressBar-xspacing: 0; -GtkProgressBar-yspacing: 0; -GtkProgressBar-min-horizontal-bar-height: 3; trough { border-style: none; background-color: transparent; box-shadow: none; } } trough { border: 1px solid $borders_color; border-radius: 3px; background-color: mix($borders_color, $bg_color, 35%); &:backdrop { border-color: $backdrop_borders_color; background-color: $backdrop_dark_fill; box-shadow: 0 1px transparentize(white,1); } } } progressbar.horizontal progress { @include progressbar_fill; border: 1px solid $selected_borders_color; border-radius: 1.5px; box-shadow: none; //needed for clipping &.left { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } &.right { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } &.left.right { box-shadow: none; } } progressbar.vertical progress { @include progressbar_fill(vertical); border: 1px solid $selected_borders_color; border-radius: 1.5px; box-shadow: none; //needed for clipping &.bottom { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: none; } &.top { border-top-left-radius: 3px; border-top-right-radius: 3px; } &:backdrop { border-color: if($variant=='light', $selected_bg_color, $selected_borders_color); background-image: none; background-color: $selected_bg_color; box-shadow: none; } &.osd { background-image: none; background-color: $selected_bg_color; border-style: none; border-radius: 0; } } /************* * Level Bar * *************/ .level-bar { box-shadow: _widget_edge(); // needs to be set here to avoid clipping -GtkLevelBar-min-block-width: 34; -GtkLevelBar-min-block-height: 3; &.vertical { -GtkLevelBar-min-block-width: 3; -GtkLevelBar-min-block-height: 34; } &.trough { border: 1px solid; padding: 2px; border-radius: 3px; @include entry(normal); &:backdrop { @include entry(backdrop); } } &.fill-block { // FIXME: it would be nice to set make fill blocks bigger, but we'd need // :nth-child working on discrete indicators border: 1px solid if($variant=='light', darken($selected_bg_color,10%), darken($selected_bg_color,5%)); background-color: $selected_bg_color; box-shadow: 0 1px transparentize(black, 0.9); border-radius: 1px; &:backdrop { border-color: $selected_bg_color; box-shadow: none; } &.indicator-discrete { &.horizontal { margin: 0 1px; } &.vertical { margin: 1px 0; } } &.level-high { border-color: darken($success_color,10%); background-color: $success_color; &:backdrop { border-color: $success_color; } } &.level-low { border-color: darken($warning_color,10%); background-color: $warning_color; &:backdrop { border-color: $warning_color; }; } &.empty-fill-block { background-color: transparent; border-color: if($variant=='light', transparentize($fg_color,0.8), transparentize($fg_color,0.9)); box-shadow: none; &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } } } } /********** * Frames * **********/ frame, .frame { border: 1px solid $borders_color; &.flat { border-style: none; } &:backdrop { border-color: $backdrop_borders_color; } padding: 0; } actionbar frame { padding: 6px; border-width: 1px 0 0; } placessidebar, scrolledwindow { 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 { &.top { @include overshoot(top); &:backdrop { @include overshoot(top, backdrop); } } &.bottom { @include overshoot(bottom); &:backdrop { @include overshoot(bottom, backdrop); } } &.left { @include overshoot(left); &:backdrop { @include overshoot(left, backdrop); } } &.right { @include overshoot(right); &:backdrop { @include overshoot(right, backdrop); } } } // Overflow indication, works similarly to the overshoot, the size if fixed tho. undershoot { &.top { @include undershoot(top); } &.bottom { @include undershoot(bottom); } &.left { @include undershoot(left); } &.right { @include undershoot(right); } } junction { // the small square between two scrollbars border-color: transparent; // the border image is used to add the missing dot between the borders, details, details, details... border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; background-color: $scrollbar_bg_color; &:dir(rtl) { border-image-slice: 0 1 0 0; } &:backdrop { border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); background-color: $backdrop_scrollbar_bg_color; } } } //vbox and hbox separators separator { // always disable separators // -GtkWidget-wide-separators: true; color: transparentize(black, 0.9); // Font and File button separators button.file &.vertical, button.font &.vertical { // always disable separators -GtkWidget-wide-separators: true; } } /********* * Lists * *********/ list { background-color: $base_color; border-color: $borders_color; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } row { padding: 2px; } } .grid-child { padding: 2px; } row.activatable { &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 &:hover { 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); } &:backdrop:hover { background-color: transparent; } &:selected { &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &.has-open-popup, &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); } &:backdrop { background-color: $selected_bg_color; } } } row:selected { @extend %selected_items; button { @include button(normal, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } &.flat { @include button(undecorated, $edge:none); color: $selected_fg_color; } &:hover { @include button(hover, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } } &:active, &:checked { @include button(active, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } } &:backdrop, &.flat:backdrop { @include button(backdrop, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } &:active, &:checked { @include button(backdrop-active, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } } &:insensitive { @include button(backdrop-insensitive, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } &:active, &:checked { @include button(backdrop-insensitive-active, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } } } } &.flat:backdrop { @include button(undecorated); color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); } &:insensitive { @include button(insensitive, $edge:none); @if $variant == 'light' { border-color: $selected_borders_color; } &:active, &:checked { @include button(insensitive-active, $edge:none); } } //FIXME: make placeholder with buttons w/o edge to be extended around // istead of repeating everytime this stuff. } } // transition row { transition: all 150ms $ease-out-quad; &:hover { transition: none; } } /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { @extend %osd; padding: 10px; border: none; border-radius: 0 0 6px 6px; background-color: $osd_bg_color; background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); background-clip: padding-box; &:backdrop { background-image: none; } button { @include button(osd); &.flat { @extend %undecorated_button; icon-shadow: 0 1px black; text-shadow: 0 1px black; &:backdrop, &:insensitive, &:backdrop:insensitive { @extend %undecorated_button; } } &:hover { @include button(osd-hover); } &:active, &:checked, &:backdrop:active, &:backdrop:checked { @include button(osd-active); } &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); } &:backdrop { @include button(osd-backdrop); } } } /************* * Expanders * *************/ .expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } &:hover { color: lighten($fg_color,30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } /************ * Calendar * ***********/ calendar { color: $text_color; border: 1px solid $borders_color; &:selected { @extend .view:selected; } &.header { border: 1px solid transparentize(black, 0.9); border-radius: 0; &:backdrop { border-color: transparentize(black, 0.9); } } &.button { @extend %undecorated_button; color: transparentize($fg_color, 0.55); &:hover { @extend %undecorated_button; color: $fg_color; } &:backdrop { @extend %undecorated_button; color: transparentize($backdrop_fg_color,0.55); } &:insensitive { @extend %undecorated_button; color: transparentize($insensitive_fg_color,0.55); } } &:inconsistent, &:inconsistent:backdrop { color: gtkalpha(currentColor, 0.55); } &.highlight, &.highlight:backdrop { font-size: smaller; color: $fg_color; } &:backdrop { color: $backdrop_text_color; border-color: $backdrop_borders_color; } } /*********** * Dialogs * ***********/ messagedialog .dialog-action-area button { padding: 8px; } messagedialog { // Message Dialog styling @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; } } .titlebar { border-style: none; box-shadow: inset 0 1px $borders_edge; } &.csd { // rounded bottom border styling for csd version &.background { // bigger radius for better antialiasing border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } .dialog-action-area button { padding: 12px; border-radius: 0; @include button(normal, $edge:none); @extend %middle_button; &:hover { @include button(hover, $edge:none); @extend %middle_button; } &:active { @include button(active, $edge:none); @extend %middle_button; } &:insensitive { @include button(insensitive, $edge:none); @extend %middle_button; } &:backdrop { @include button(backdrop, $edge:none); @extend %middle_button; } &:backdrop:insensitive { @include button(backdrop-insensitive, $edge:none); @extend %middle_button; } @each $b_type, $b_color in (suggested-action, $selected_bg_color), (destructive-action, $destructive_color) { &.#{$b_type} { @include button(normal, $b_color, white, $edge:none); @extend %middle_button; &:hover { @include button(hover, $b_color, white, $edge:none); @extend %middle_button; } &:active { @include button(active, $b_color, white, $edge:none); @extend %middle_button; } &:backdrop { @include button(backdrop, $b_color, white, $edge:none); @extend %middle_button; &:insensitive { @include button(backdrop-insensitive, $edge:none); @extend %middle_button; } } &:insensitive { @include button(insensitive, $edge:none); @extend %middle_button; } } } &:first-child{ @extend %first_button; } &:last-child { @extend %last_button; } } %middle_button { border-left-style: solid; border-right-style: none; border-bottom-style: none; } %last_button { border-bottom-right-radius: 7px; outline-bottom-right-radius: 5px; } %first_button { border-left-style: none; border-bottom-left-radius: 7px; outline-bottom-left-radius: 5px; } } } GtkFileChooserDialog { .dialog-action-box { border-top: 1px solid $borders_color; &:backdrop { border-top-color: $backdrop_borders_color; } } } /*********** * Sidebar * ***********/ .sidebar { border: none; background-color: mix($bg_color, $base_color, 50%); &:backdrop { background-color: $backdrop_sidebar_bg_color; } &:selected { @extend %selected_items; } } stacksidebar { & row { padding: 10px 4px; & > label { padding-left: 6px; padding-right: 6px; } &.needs-attention > label { @extend %needs_attention; background-size: 6px 6px, 0 0; } } } /**************** * File chooser * ****************/ $_placesidebar_icons_opacity: 0.7; placessidebar { row { // Needs overriding of the GtkListBoxRow padding padding: 0px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump & > revealer { padding: 4px 14px 4px 12px; } & image.sidebar-icon { opacity: $_placesidebar_icons_opacity; // dim the device icons &:dir(ltr) { padding-right: 8px; } &:dir(rtl) { padding-left: 8px; } } & label.sidebar-label { &:dir(ltr) { padding-right: 2px; } &:dir(rtl) { padding-left: 2px; } } @at-root button.sidebar-button { padding: 5px; @extend button.flat; border-radius: 100%; outline-radius: 100%; &:not(:hover):not(:active) > image, &:backdrop > image { opacity: $_placesidebar_icons_opacity }; } } // in the sidebar case it makes no sense to click the selected row row:selected:active { box-shadow: none; } // looks like the label doesn't get all the states so work around row:selected:insensitive label { @extend %selected_items:insensitive; } row:selected:backdrop:insensitive label { @extend %selected_items:backdrop:insensitive; } row.sidebar-placeholder-row { border: solid 1px $selected_bg_color; } row.sidebar-new-bookmark-row { color: $selected_bg_color; } } placesview { .server-list-button > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(0turn); } .server-list-button:checked > image { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } row.activatable:hover { background-color: transparent; } } /********* * Paned * *********/ paned { // this is for the standard paned separator -GtkPaned-handle-size: 1; // sets separator width -gtk-icon-source: none; // removes handle decoration margin: 0 8px 8px 0; // drag area of the separator, not a real margin &:dir(rtl) { margin-right: 0; margin-left: 8px; } separator { background-color: $borders_color; &:backdrop { background-color: $backdrop_borders_color; } } separator:selected { background-color: $selected_bg_color; } } paned.wide { // this is for the paned with wide separator -GtkPaned-handle-size: 5; // wider separator here margin: 0; // no need of the invisible drag area so, reset margin separator { background-color: transparent; border-style: none solid; border-color: $borders_color; border-width: 1px; } &.vertical separator { border-style: solid none;} separator:backdrop { border-color: $backdrop_borders_color; } } /************** * GtkInfoBar * **************/ infobar { border-style: none; } .info, .question, .warning, .error { background-color: $selected_bg_color; color: $selected_fg_color; text-shadow: 0 1px darken($selected_bg_color, 10%); border-color: darken($selected_bg_color, 10%); button { // FIXME: extend selection mode buttons @include button(normal, $selected_bg_color, $selected_fg_color, none); &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, none); } &:active { @include button(active, $selected_bg_color, $selected_fg_color, none); } &:insensitive { @include button(insensitive,$selected_bg_color,$selected_fg_color,none); } &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, none); border-color: _border_color($selected_bg_color); &:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, none); border-color: _border_color($selected_bg_color); } } } & label:selected, & label:selected:focus, & label:selected:hover { background-color: darken($selected_bg_color, 10%); } } /************ * Tooltips * ************/ .tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: transparentize(black, 0.2); background-clip: padding-box; 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; /* not working */ 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.csd { background-color: transparent; } } .tooltip * { //Yeah this is ugly padding: 4px; background-color: transparent; color: inherit; // just to be sure } /***************** * Color Chooser * *****************/ colorswatch { // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one // is colorswatch overlay {}, GtkColorSwatch has the programmatically set background, so most of the style // is applied to the overlay box. $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); $_colorswatch_radius: 5px; box-shadow: $_colorswatch_shadow; // take care of colorswatches on selected elements :selected & { box-shadow: none; & overlay, & overlay:hover { border-color: $selected_fg_color; } } // we need to re-set the shadow here since it get axed by the previous bit &:selected { box-shadow: $_colorswatch_shadow; } // base color corners rounding // to avoid the artifacts caused by rounded corner anti-aliasing the base color // sports a bigger radius. // nth-child is needed by the custom color strip. // The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser. &.top { border-top-left-radius: $_colorswatch-radius + 1px; border-top-right-radius: $_colorswatch-radius + 1px; } &.bottom { border-bottom-left-radius: $_colorswatch-radius + 1px; border-bottom-right-radius: $_colorswatch-radius + 1px; } &.left, &:first-child:not(overlay):not(.top) { border-top-left-radius: $_colorswatch-radius + 1px; border-bottom-left-radius: $_colorswatch-radius + 1px; } &.right, &:last-child:not(overlay):not(.bottom) { border-top-right-radius: $_colorswatch-radius + 1px; border-bottom-right-radius: $_colorswatch-radius + 1px; } &:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; } // overlay corner rounding &.top > overlay { border-top-left-radius: $_colorswatch-radius; border-top-right-radius: $_colorswatch-radius; } &.bottom > overlay { border-bottom-left-radius: $_colorswatch-radius; border-bottom-right-radius: $_colorswatch-radius; } &:first-child:not(.top) > overlay { border-top-left-radius: $_colorswatch-radius; border-bottom-left-radius: $_colorswatch-radius; } &:last-child:not(.bottom) > overlay { border-top-right-radius: $_colorswatch-radius; border-bottom-right-radius: $_colorswatch-radius; } &:only-child > overlay { border-radius: $_colorswatch-radius; } // hover effect &.activatable:hover, &.activatable:hover:selected { background-image: linear-gradient(135deg, transparentize(white, 0.3), transparentize(white, 1) 50%); box-shadow: inset 0 1px transparentize(white, 0.6), inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6)); &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class background-image: linear-gradient(135deg, transparentize(white, 0.5), transparentize(white, 1) 50%); } } &:backdrop, &:backdrop:selected &.dark:backdrop, &.dark:backdrop:selected { background-image: none; box-shadow: none; } // indicator and keynav outline colors &.dark overlay { color: white; outline-color: transparentize(white, 0.5); &:backdrop { color: transparentize(white, 0.7); } } &.light overlay { color: black; outline-color: transparentize(black, 0.5); &:backdrop { color: transparentize(black, 0.7); } } // border color & overlay, & overlay:selected { border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } } // make the add color button looks like, well, a button &#add-color-button { border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat } } /******** * Misc * ********/ //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; } } } 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 button.text-button } } /********************** * Window Decorations * *********************/ decoration { border-radius: 7px 7px 0 0; // lamefun trick to get rounded borders regardless of CSD use border-width: 0px; // this needs to be transparent // see bug #722563 $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); box-shadow: 0 3px 9px 1px transparentize(black, 0.5), 0 0 0 1px $_wm_border; //doing borders with box-shadow // FIXME rationalize shadows /* this is used for the resize cursor area */ margin: 10px; &:backdrop { box-shadow: 0 2px 6px 2px transparentize(black, 0.8), 0 0 0 1px $_wm_border_backdrop; } .tiled & { border-radius: 0; } .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 } .csd.popup & { border-radius: 0; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border,0.1); } .csd.tooltip & { border-radius: 5px; box-shadow: none; } messagedialog.csd & { border-radius: 7px; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border,0.1); } .solid-csd & { border-radius: 0; margin: 4px; background-color: $backdrop_bg_color; border: solid 1px $backdrop_borders_color; box-shadow: none; } } // Window Close button headerbar button.titlebutton, .titlebar button.titlebutton { @extend button; @extend button.flat; @extend .image-button; @include _button_text_shadow; &:backdrop { icon-shadow: none; } } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { @include _button_text_shadow(white, $selected_bg_color); &:backdrop { icon-shadow: none; } } // catch all extend :) %selected_items { background-color: $selected_bg_color; color: $selected_fg_color; @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; &: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 */ .context-menu { font: initial; } popover.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")); } } } } button.circular { border-radius: 20px; outline-radius: 20px; } button.circular label { padding: 0; } frame.keycap { background-color: #fefefe; border: 1px solid #cecece; border-radius: 5px; box-shadow: 0px 1px 0px #fff inset, 0px -2px 0px #dedede inset; color: #555753; padding: 3px 8px 3px 8px; }