@function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); * { padding: 0; -GtkToolButton-icon-spacing: 4; -GtkTextView-error-underline-color: $error_color; -gtk-icon-style: symbolic; //force symbolic style icons // 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; -GtkToolItemGroup-expander-size: 11; -GtkTreeView-horizontal-separator: 4; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; // 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; -gtk-outline-radius: 2px; } /*************** * Base States * ***************/ .background { color: $fg_color; background-color: $bg_color; } .background:backdrop { text-shadow: none; -gtk-icon-shadow: none; color: lighten($fg_color,10%); 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. */ *:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { background-color: $bg_color; color: $fg_color; &:hover { background-color: lighten($bg_color, 10%); color: $fg_color; } &:active { background-color: darken($bg_color, 10%); color: $fg_color; } &:disabled { background-color: $insensitive_bg_color; color: $insensitive_fg_color; } &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } } .view { color: $fg_color; background-color: $base_color; &:backdrop { color: $backdrop_fg_color; background-color: $backdrop_base_color; } &:selected, &:selected:focus, &:selected:hover { @extend %selected_items; } } textview text { @extend .view; selection, selection:focus, selection:hover { @extend %selected_items; } } iconview { @extend .view ;} .rubberband, rubberband { border: 1px solid $selected_bg_color; background-color: transparentize($selected_bg_color,0.8); } flowbox { & rubberband { @extend rubberband; } flowboxchild { padding: 3px; border-radius: 3px; &:selected { @extend %selected_items; outline-offset: -2px; } } } label { & selection, & selection:focus, & selection:hover, & selection:backdrop { @extend %selected_items; } &:disabled, &:backdrop:disabled { color: $insensitive_fg_color; } } /********************* * Spinner Animation * *********************/ @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } spinner { background-image: none; opacity: 0; // non spinning spinner makes no sense -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); &:checked { opacity: 1; animation: spin 1s linear infinite; &:disabled { opacity: 0.5; } } } /**************** * Text Entries * ****************/ entry, spinbutton { padding: 7px 4px; border-radius: 3px; border-width: 1px; transition: all 200ms ease-out; @include entry(normal); &.flat, &.flat:focus { padding: 2px; @include entry(normal, $edge: none); border: none; border-radius: 0; } &:focus { @include entry(focus); } &:disabled { @include entry(insensitive); } &:backdrop { @include entry(backdrop); } &:backdrop:disabled { @include entry(backdrop-insensitive); } & selection, & selection:backdrop { background-color: $selected_bg_color; color: $selected_fg_color; } & selection & selection: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 & { &:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; &:dir(rtl) { border-right-style: none;} } &:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: none; &:dir(rtl) { border-left-style: solid; } } } .linked.vertical & { //FIXME comment stuff and make the whole thing smarter. @include entry(normal); background-image: linear-gradient(to bottom, $base_color); border-bottom-color: mix($borders_color, $base_color, 30%); box-shadow: none; @extend %linked_vertical; &:focus { border-color: entry_focus_border($selected_bg_color); box-shadow: entry_focus_glow($selected_bg_color), 0 -1px 0 0 entry_focus_border($selected_bg_color); @extend %linked_vertical; } &:disabled { @include entry(insensitive); border-bottom-color: mix($borders_color, $base_color, 30%); @extend %linked_vertical; &:backdrop { @include entry(backdrop-insensitive); border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); @extend %linked_vertical; } } &:backdrop { @include entry(backdrop); border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); @extend %linked_vertical; } &:first-child { @include entry(normal); border-bottom-color: mix($borders_color, $base_color, 30%); &:focus { @include entry(focus); } &:disabled { @include entry(insensitive); border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); @extend %linked_vertical:first-child; &:backdrop { @include entry(backdrop-insensitive); border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); border-top-style: solid; } } &:backdrop { @include entry(backdrop); border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); @extend %linked_vertical:first-child; } } &:last-child { @include entry(normal); border-top-width: 0; background-image: linear-gradient(to bottom, $base_color); box-shadow: none; &:focus { border-color: entry_focus_border($selected_bg_color); box-shadow: entry_focus_glow($selected_bg_color), 0 -1px 0 0 entry_focus_border($selected_bg_color); @extend %linked_vertical:last-child; } &:disabled { @include entry(insensitive); @extend %linked_vertical:last-child; &:backdrop { @include entry(backdrop-insensitive); @extend %linked_vertical:last-child; } } &:backdrop { @include entry(backdrop); @extend %linked_vertical:last-child; } } } &.error { color: $error_color; border-color: $error_color; &:focus { @include entry(focus, $error_color); } &:selected, &:selected:focus { background-color: $error_color; } } &.warning { color: $warning_color; border-color: $warning_color; &:focus { @include entry(focus, $warning_color); } &:selected, &:selected:focus { background-color: $warning_color; } } } /*********** * Buttons * ***********/ // stuff for .needs-attention $_dot_color: $selected_bg_color; @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 { border-radius: 3px; transition: all 200ms ease-out; padding: 4px 6px; @include button(normal); &:hover, &.flat:hover { @include button(hover); -gtk-icon-effect: highlight; } &:active, &.flat:active, &:checked, &.flat:checked { @include button(active); transition-duration: 50ms; } &:backdrop, &.flat:backdrop { @include button(backdrop); &:active, &:checked { @include button(backdrop-active); } &:disabled { @include button(backdrop-insensitive); } &:disabled:active { @include button(backdrop-insensitive-active); } } //&:selected, &.flat:selected, Why this? //&:selected:focus, &.flat:focus { // @extend %selected_items; //} &:disabled { @include button(insensitive); &:active, &.flat:active { @include button(insensitive-active); } } &.flat, &.flat:backdrop, &.flat:disabled:backdrop { @extend %undecorated_button; } //overlay / OSD style .osd & { padding: 6px; border-width: 1px 1px 2px 1px; @include button(osd); @extend %linked; &:hover { @include button(osd-hover); @extend %linked; } &:active, &:checked { @include button(osd-active); @extend %linked; } &:disabled { @include button(osd-insensitive); @extend %linked; } &:backdrop { @include button(osd-backdrop); @extend %linked; } } // Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $suggested_color), (destructive-action, $destructive_color) { &.#{$b_type} { @include button(normal,$b_color, white); &:hover { @include button(hover,$b_color, white); } &:active, &:checked { @include button(active,$b_color, white); } &:backdrop { @include button(backdrop,$b_color,white); &:disabled { @include button(backdrop-insensitive); } } &:disabled { @include button(insensitive); } } } // buttons in header bars and action bars &.image-button { padding: 8px; } &.text-button { padding: 6px 8px 5px; } // due to font metrics //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 2px; border-width: 1px; @extend %linked; } .primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need added 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; } } // all the following is for the +|- buttons on inline toolbars, that way // should really be reprecated... .inline-toolbar toolbutton > button { // redefining the button look is // needed since those are flat... @include button(normal, $edge: none); // the box-shadow outset doesn't work // in this case, hence $edge: none &:hover { @include button(hover, $edge: none); } &:active { @include button(active, $edge: none); } &:disabled { @include button(insensitive, $edge: none); } &:disabled:active { @include button(insensitive-active, $edge:none); } &:backdrop { @include button(backdrop); }; &:backdrop:active { @include button(backdrop-active); } &:backdrop:disabled { @include button(backdrop-insensitive); } &:backdrop:disabled:active { @include button(backdrop-insensitive-active);} } toolbar.inline-toolbar toolbutton { // .inline-toolbar.toolbar here for // higher specificity than the previous // "button look" selector & > button.flat { border-radius: 0; border-left-style: none; } &:dir(rtl) > button.flat {} &:first-child > button.flat { border-radius: 3px 0 0 3px; border-left-style: solid; } &:last-child > button.flat { border-radius: 0 3px 3px 0; } &:last-child:dir(rtl) > button.flat { border-right-style: solid; } &:only-child > button.flat { border-radius: 3px; border-style: solid; } } %needs_attention { animation: needs_attention 150ms ease-in; $_dot_shadow: $fg_color; $_dot_shadow_r: 0.5; 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; background-position: right 3px, right 4px; &:backdrop { background-size: 6px 6px, 0 0;} &:dir(rtl) { background-position: left 3px, left 4px; } } %linked_middle { border-radius: 0; border-left-style: none; &:dir(rtl) { border-radius: 0; // needed when including %linked_middle:dir(rtl) border-right-style: none; border-left-style: solid } } %linked { @extend %linked_middle; &:first-child { border-radius: 3px 0 0 3px; border-left-style: solid; } &:last-child { border-radius: 0 3px 3px 0; &:dir(rtl) { border-right-style: solid; } } &:only-child { border-radius: 3px; border-style: solid; } } %linked_vertical_middle { border-left-style: solid; border-top-style: none; border-radius: 0; } %linked_vertical { @extend %linked_vertical_middle; &:first-child { border-style: solid; border-radius: 3px 3px 0 0; } &:last-child { border-radius: 0 0 3px 3px; } &:only-child { border-radius: 3px; border-style: solid; } } %undecorated_button { border-color: transparent; background-color: transparent; background-image: none; text-shadow: none; -gtk-icon-shadow: none; } /* menu buttons */ modelbutton.flat, .menuitem.button.flat { @extend %undecorated_button; outline-offset: -1px; &:hover, &:selected { @extend %selected_items; } &:backdrop { color: $backdrop_fg_color; @extend %undecorated_button; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } } &:disabled { color: $insensitive_fg_color; } } button.color { padding: 4px; } // Uniform padding on the // GtkColorButton.button /********* * Links * *********/ *:link { color: $selected_bg_color; //FIXME use a proper color &:hover, &:active, &:visited { color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here } &:backdrop, &:backdrop:hover { color: $selected_bg_color; } } button:link, button:visited { color: $suggested_color; font-weight: bold; @extend %undecorated_button; text-shadow: none; &:hover, &:active { @extend %undecorated_button; color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here 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 color: $selected_bg_color; //FIXME use a proper color } } /***************** * GtkSpinButton * *****************/ spinbutton { button { background-image: none; border-color: transparentize($borders_color,0.7); color: mix($fg_color,$base_color,95%); border-radius: 0; &:dir(ltr) { border-style: none none none solid; } &:dir(rtl) { border-style: none solid none none; } &:hover { color: $fg_color; background-color: transparentize(black,0.95); &:dir(ltr) { border-style: none none none solid; } &:dir(rtl) { border-style: none solid none none; } } &:disabled { box-shadow: none; color: transparentize($insensitive_fg_color,0.7); &:dir(ltr) { border-style: none none none solid; } &:dir(rtl) { border-style: none solid none none; } } &:active { box-shadow: inset 0 2px 3px -1px transparentize(black,0.8); background-color: transparentize(black,0.9); } &:backdrop { border-color: transparentize($backdrop_borders_color,0.7); background-color: $bg_color; box-shadow: none; &:dir(ltr) { border-style: none none none solid; } &:dir(rtl) { border-style: none solid none none; } } &:backdrop:disabled { box-shadow: none; color: transparentize($insensitive_fg_color,0.7); &:dir(rtl) { border-width: 0 1px 0 0; } &:dir(ltr) { border-style: none none none solid; } &:dir(rtl) { border-style: none solid none none; } } } &.vertical { button { &: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); } &:disabled { @extend %top_button; @include button(insensitive, $edge: none); } &:backdrop { @extend %top_button; @include button(backdrop); } } &:last-child { @extend %bottom_button; @include button(normal); &:active { @extend %bottom_button; @include button(active); } &:hover { @extend %bottom_button; @include button(hover); } &:disabled { @extend %bottom_button; @include button(insensitive); } &:backdrop { @extend %bottom_button; @include button(backdrop); } } &:backdrop:disabled { @include button(backdrop-insensitive); } } &.entry { // we should remove the bottom edge hilight here, but seems // like buttons are on top of it so it doesn't show up border-radius: 0; } %top_button { border-radius: 3px 3px 0 0; border-bottom-width: 0; } %bottom_button { border-radius: 0 0 3px 3px; border-top-width: 0; } } /* This is to fix spinbuttons in entries, but I feel like hiding code issues * hence it's commented atm. * treeview.view & { * & 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-left: 8px; padding-right: 8px; } @include _button_text_shadow; &:disabled { color: $insensitive_fg_color; text-shadow: none; -gtk-icon-shadow: none; } &:backdrop { color: $backdrop_fg_color; text-shadow: none; -gtk-icon-shadow: none; } &:backdrop:disabled { color: $insensitive_fg_color; } & arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } .menuitem { text-shadow: none; } & > entry.combo { border-radius: 3px 0 0 3px; &:dir(rtl) { border-radius: 0 3px 3px 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 linking doesn't work, special case needed. // See https://bugzilla.gnome.org/show_bug.cgi?id=733979 &:dir(ltr) { @extend %linked_middle; } // specificity bump &:dir(rtl) { @extend %linked_middle:dir(rtl); } } .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 { //FIXME: why is all this being ignored? padding: 6px; background-color: $bg_color; &.osd { background-color: $osd_bg_color; border-radius: 6px; padding: 12px; & label { color: $osd_fg_color; } } //searchbar & inline-toolbar &.inline-toolbar { @extend %inset-bar; border-width: 0 1px 1px; padding: 3px; border-radius: 0 0 4px 4px; } &.vertical { border-right: 1px solid $borders_color; &:dir(rtl) { border-right: none; border-left: 1px solid $borders_color; } } } searchbar { @extend toolbar; border-width: 0 0 1px; border-color: $borders_color; border-style: none none solid none; 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%); //FIXME edge would be nice, but doesn't work &:backdrop { border-color: $backdrop_borders_color; background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); box-shadow: none; } } /*************** * Header bars * ***************/ .titlebar, headerbar { border-width: 0 0 1px; border-style: solid; border-color: $borders_color; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, lighten($bg_color,4%), $bg_color); box-shadow: inset 0 -1px mix($borders_color, $bg_color, 30%), // bottom shade inset 0 1px $borders_edge; // top highlight padding: 6px; &:backdrop { border-color: $backdrop_borders_color; background-color: $bg_color; background-image: none; box-shadow: none; } .title { font: Bold; padding: 0px 12px; } .subtitle { font-size: 80%; padding: 0 12px; } & > GtkBox > separator.vertical { border-width: 0 1px; border-color: $fg_color; border-style: solid; } &.selection-mode { color: darken($selected_bg_color, 15%); text-shadow: 0 1px transparentize(black, 0.5); background-image: linear-gradient(to bottom, lighten($selected_bg_color,5%), lighten($selected_bg_color,2%)); box-shadow: inset 0 -1px mix($borders_color,$bg_color, 30%), //bottom shade inset 0 1px mix($borders_edge,$selected_bg_color, 50%); //top highlight button { @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none); &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); } &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); } &:disabled { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); border-color: darken($selected_bg_color, 15%); } &:backdrop:disabled { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } &.suggested-action { @include button($t:normal, $edge: none); &:hover { @include button($t:hover,$edge: none); } &:active { @include button($t:active, $edge: none); } &:disabled { @include button($t:insensitive, $edge: none); } &:backdrop { @include button($t:backdrop, $edge: none); } &:backdrop:disabled { @include button($t:backdrop-insensitive, $edge: none); } } } .selection-menu { border-width: 0; background-image: none; box-shadow: none; } } .tiled &, .maximized & { border-radius: 0; // squared corners when the window is max'd or tiled } } /************ * 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; @extend %selected_items; } &: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 } &:disabled { color: $insensitive_fg_color; &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); &:backdrop { color: mix($selected_fg_color, $selected_bg_color, 50%); } } &:backdrop { color: $insensitive_fg_color; } } &.separator:backdrop { min-height: 2px; color: transparentize(black, 0.9); } &:backdrop { color: $backdrop_fg_color; 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($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 color: $base_color; border: 1px solid $selected_borders_color; border-radius: 4px; background-color: $fg_color; &:selected { color: $selected_bg_color; } &:backdrop { color: $selected_bg_color; border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) background-color: $backdrop_base_color; } } &.trough { // progress bar trough in treeviews background-color: transparentize($fg_color,0.9); border-radius: 4px; &:selected { background-color: transparentize($selected_fg_color, 0.7); 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; 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; } &:active { @extend %column_header_button; color: $selected_fg_color; } } & button:last-child, & button:last-child:hover, & button:last-child:backdrop { //treeview-like derived widgets in Banshee and Evolution border-right-style: none; } } } %column_header_button { padding: 3px 6px; border-style: none solid solid none; border-radius: 0; border-width: 1px; background-image: none; border-color: mix($backdrop_fg_color, $backdrop_bg_color,50%); text-shadow: none; &:disabled { border-color: $bg_color; background-image: none; } &:backdrop { border-color: mix($backdrop_fg_color, $backdrop_bg_color,50%); border-style: none solid solid none; color: mix($backdrop_fg_color, $backdrop_bg_color,50%); background-image: none; background-color: $backdrop_base_color; &:disabled { border-color: $backdrop_bg_color; background-image: none; } } } treeview.view.progressbar { //Progressbar in treeview cells color: $base_color; border-radius: 4px; background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%)); &:selected { color: $selected_bg_color; background-image: linear-gradient(to bottom, $base_color, darken($base_color,10%)); &:backdrop { color: $selected_bg_color; background-image: none; background-color: $backdrop_base_color; } } &:backdrop { color: $backdrop_base_color; background-image: none; } } /********* * Menus * *********/ menubar, .menubar { padding: 0px; & > menuitem { padding: 4px 8px; &:hover { //Seems like it :hover even with keyboard focus box-shadow: inset 0 -3px $selected_bg_color; color: $selected_bg_color; } &:disabled { color: $insensitive_fg_color; box-shadow: none; } } } menu, .menu { margin: 4px; padding: 0px; background-color: $base_color; border: 1px solid $borders_color; & menuitem { text-shadow: none; padding: 4px; min-width: 40px; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:disabled { color: $insensitive_fg_color; &:backdrop { color: $insensitive_fg_color; } } &:backdrop, &:backdrop:hover { color: $backdrop_fg_color; background-color: $backdrop_base_color; } //submenu indicators & arrow { min-height: 16px; min-width: 16px; } & arrow:dir(ltr) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); margin-left: 10px; } & arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); margin-right: 10px; } } } menuitem { & check, & radio { min-height: 16px; min-width: 16px; &:dir(ltr) { margin-right: 7px; } &:dir(rtl) { margin-left: 7px; } } } /*************** * Popovers * ***************/ popover { margin: 10px; padding: 2px; border-color: $borders-color; border-width: 1px; border-style: solid; border-radius: 5px; //background-clip: border-box; background-color: $bg_color; box-shadow: 0 2px 3px transparentize(black, 0.5); &:backdrop { box-shadow: none; } & > .list, & > .view, & > toolbar { background-color: transparent; } separator { color: $fg_color; background-color: transparent; border: 0; } button.flat, button.flat:hover { color: $fg_color; text-shadow: none; transition: none; } &.magnifier, &.osd { // Also used for touch cutnpaste overlays // FIXME Doesn't work background-image: none; background-color: $osd_bg_color; border: 1px solid $borders_color; color: $osd_fg_color; button { color: white; text-shadow: none; @include button(osd); &:hover { @include button(osd-hover); }; &:active { @include button(osd-active); }; &:disabled { @include button(osd-insensitive); }; } } } /***************** * Notebooks and * * Tabs * *****************/ notebook { // 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; &:backdrop { background-color: $backdrop_base_color; } &.frame { border: 1px solid $borders_color; &: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: mix($backdrop_borders_color,$backdrop_bg_color, 35%); box-shadow: none; } & tabs arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } &:checked { color: $fg_color; } &:disabled { color: transparentize($insensitive_fg_color,0.7); } &:backdrop { color: transparentize($backdrop_fg_color,0.6); } } } //vertical tab sizing $vt_vpadding: 8px; $vt_hpadding: 20px; // horizontal tab sizing $ht_vpadding: 5px; $ht_hpadding: 20px; $tab_indicator_size: 3px; & header.top tab { padding: $vt_vpadding $vt_hpadding; border-bottom-width: $tab_indicator_size; &.reorderable-page { padding-left: 12px; // for a nicer close button padding-right: 12px; // placement border-left-width: 1px; border-right-width: 1px; } } & header.bottom tab { padding: $vt_vpadding $vt_hpadding; border-top-width: $tab_indicator_size; &.reorderable-page { padding-left: 12px; // for a nicer close button padding-right: 12px; // placement border-left-width: 1px; border-right-width: 1px; } } & header.left tab { padding: $ht_vpadding $ht_hpadding; border-right-width: $tab_indicator_size; &.reorderable-page { border-bottom-width: 1px; border-top-width: 1px; } } & header.right tab { padding: $ht_vpadding $ht_hpadding; border-left-width: $tab_indicator_size; &.reorderable-page { border-bottom-width: 1px; border-top-width: 1px; } } & tab { border-width: 0; border-style: solid; border-color: transparent; background-color: transparent; outline-offset: 0; //here's the interesting stuff &:hover { border-color: $borders_color; } &:checked, &:backdrop:checked { border-color: $selected_bg_color; } &:backdrop { background-color: transparent; border-color: transparent; } @each $_tab, $_border in (top, bottom), (bottom, top), (left, right), (right, left) { .#{$_tab} &.reorderable-page { border-color: transparent; &:hover { border-color: transparentize($borders_color,0.7); border-#{$_border}-color: $borders_color; background-color: transparentize($bg_color,0.8); } &:checked { 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; /* color: inherit doesn't work here */ &:backdrop { color: $insensitive_fg_color; } } &:hover label { // prelight tab text color: mix($fg_color, $insensitive_fg_color, 50%); } &:checked label { // active tab text color: $fg_color; &:backdrop { color: $backdrop_fg_color; } } button { //tab close button border: 2px solid transparent; @extend %undecorated_button; -gtk-icon-shadow: none; transition: none; color: transparentize($fg_color,0.7); &:hover { color: $fg_color; @include button(hover, $edge: none); border-width: 2px; background-image: none; box-shadow: none; } &:checked { @include button(active, $edge: none); border-width: 2px; } &:backdrop, &:backdrop:hover { color: transparentize($backdrop_fg_color,0.7); border-color: transparent; border-width: 2px; } & > image { // this is a hack which makes tabs grow padding: 2px; } } } } //.notebook > .frame, //.notebook > .view { border: none; } /************** * Scrollbars * **************/ scrollbar { background-clip: padding-box; background-image: none; border-style: solid; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; -GtkRange-slider-width: 20; -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. // sadly can't be in '.slider' // where it belongs trough { @extend junction; } $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; button { border: none; } & slider { border-radius: 20px; border: 5px solid transparent; //margin background-color: mix($bg_color, $fg_color, 50%); &:backdrop, &:disabled { background-color: mix($bg_color, $fg_color, 90%); } &:hover { background-color: mix($bg_color, $fg_color, 30%); } &:hover:active { background-color: $selected_bg_color; } &.fine-tune { border-width: 8px; &:hover:active { background-color: $selected_bg_color; } } } &.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 white; 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; } } } /********** * Switch * **********/ switch { font: bold condensed 9; outline-offset: -4px; // similar to the .scale border-width: 1px; border-style: solid; border-radius: 3px; border-color: $borders_color; background-color: mix($bg_color,$borders_color,60%); box-shadow: inset 0 1px transparentize(black, 0.9); /*outset not working*/ text-shadow: 0 1px transparentize(black, 0.9); &:active { color: white; border-color: $selected_borders_color; background-color: $selected_bg_color; text-shadow: 0 0 2px white; } &:disabled { color: $insensitive_fg_color; border-color: $borders_color; background-color: $insensitive_bg_color; text-shadow: none; } &:backdrop { color: $backdrop_fg_color; border-color: $backdrop_borders_color; background-color: $backdrop_bg_color; box-shadow: none; text-shadow: none; &:active { color: $selected_fg_color; border-color: $backdrop_borders_color; background-color: $backdrop_borders_color; box-shadow: none; } &:disabled, &:disabled:active { background-color: $insensitive_bg_color; color: $insensitive_fg_color; border-color: $insensitive_fg_color; } } & slider { margin: -1px; min-width: 45px; min-height: 27px; border: 1px solid; border-radius: 3px; @include button(normal, $edge: none); box-shadow: inset 0 1px white, inset 0 -2px transparentize($bg_color,0.4), inset 0 -1px mix($bg_color,$borders_color,50%); &:hover { @include button(hover, $edge: none); box-shadow: inset 0 1px white, inset 0 -2px transparentize($bg_color,0.4), inset 0 -1px mix($bg_color,$borders_color,50%); } &:active { border-color: $selected_borders_color; } &:disabled { @include button(insensitive, $edge: none); } &:backdrop { @include button(backdrop); &:active{ border-color: $backdrop_borders_color; } &:disabled { @include button(backdrop-insensitive); } } } } /************************* * Check and Radio items * *************************/ // FIXME GtkCheckButton.text-button, GtkRadioButton.text-button { // this is for a nice focus on check and radios text padding: 1px; outline-offset: 0; } @each $w,$a in ('check', 'checkbox'), ('radio','radio') { #{$w} { color: $fg_color; background-image: none; -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic'); &:hover { color: $bg_color; } &:checked, &:active { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); &:disabled { color: $insensitive_fg_color; &:backdrop { color: $insensitive_fg_color; } } &:backdrop { color: $backdrop_fg_color; } } &:disabled { color: $insensitive_fg_color; &:backdrop { color: $insensitive_fg_color; } } &:indeterminate { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); } &:backdrop { color: $backdrop_fg_color; &:selected { color: $backdrop_fg_color; } } } } radiobutton radio, checkbutton check { min-width: 16px; min-height: 16px; margin: 0 2px 0 2px; &:only-child { margin: 0; } } treeview.view check, treeview.view radio { color: $fg_color; &:hover { color: $fg_color; } } /************ * GtkScale * ************/ %scale_trough { border: 2px solid $borders_color; border-radius: 4px; background-color: $dark_fill; box-shadow: none; &:disabled { border-color: $insensitive_borders_color; background-color: $insensitive_bg_color; } &:backdrop { background-color: $backdrop_dark_fill; border-color: $backdrop_borders_color; &:disabled { background-color: $insensitive_bg_color; border-color: $insensitive_borders_color; } } // ...on selected list rows row:selected & { &, &:disabled { border-color: $selected_borders_color; } } // OSD .osd & { border-color: $osd_borders_color; background-color: transparentize($osd_borders_color, 0.2); box-shadow: none; outline-color: transparentize($osd_fg_color, 0.8); &:disabled { background-color: $insensitive_bg_color; } } } %scale_highlight { border: 2px solid $selected_borders_color; border-radius: 4px; background-color: $selected_bg_color; &:disabled { background-color: transparent; border-color: transparent; } &:backdrop { border-color: $backdrop_dark_fill; &:disabled { background-color: transparent; border-color: transparent; } } // ...on selected list rows row:selected & { &, &:disabled { border-color: $selected_borders_color; } } // OSD .osd & { border-color: $osd_borders_color; &:disabled { border-color: transparent; } } } scale { // sizing $_marks_lenght: 6px; $_marks_distance: 6px; min-height: 10px; min-width: 10px; padding: 12px; fill, highlight { margin: -1px; } slider { min-height: 18px; min-width: 18px; margin: -9px; } &.fine-tune { &.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } &.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } slider { margin: -6px; } fill, highlight, trough { border-radius: 5px; -gtk-outline-radius: 7px; } } // the backing bit trough { @extend %scale_trough; outline-offset: 2px; -gtk-outline-radius: 5px; } // the colored part of the backing bit 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 { @extend %scale_trough; &, &:backdrop { background-color: $borders_color; box-shadow: none; } &:disabled { &, &:backdrop { border-color: transparent; background-color: transparent; } } // OSD .osd & { background-color: mix($osd_fg_color, $osd_borders_color, 25%); &:disabled { &, &:backdrop { border-color: transparent; background-color: transparent; } } } } slider { @include button(normal); border: 2px solid $borders_color; border-radius: 100%; &:hover { @include button(hover); } &:active { border-color: $selected_borders_color; } &:disabled { @include button (insensitive); } &:backdrop { @include button(backdrop); &:disabled { @include button(backdrop-insensitive); } } // ...on selected list rows row:selected & { &, &:disabled { border-color: $selected_borders_color; } } // OSD .osd & { @include button(osd); border-color: $osd_borders_color; background-color: opacify($osd_bg_color, 1); // solid background needed here &:hover { @include button(osd-hover); } &:active { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } &:backdrop { @include button(osd-backdrop); &:disabled { @include button(osd-backdrop-insensitive); } } } } value { color: gtkalpha(currentColor, 0.4); } marks { color: gtkalpha(currentColor, 0.4); @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top), (top, left, right), (bottom, right, left) { &.#{$marks_class} { margin-#{$marks_margin}: $_marks_distance; margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght); } } } &.fine-tune marks { @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top), (top, left, right), (bottom, right, left) { &.#{$marks_class} { margin-#{$marks_margin}: $_marks_distance; margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px); } } } &.horizontal { indicator { min-height: $_marks_lenght; min-width: 1px; } &.fine-tune indicator { min-height: ($_marks_lenght - 3px); } } &.vertical { indicator { min-height: 1px; min-width: $_marks_lenght; } &.fine-tune indicator { min-width: ($_marks_lenght - 3px); } } } /***************** * Progress bars * *****************/ //FIXME it's a wip ok? progressbar { padding: 0; font-size: 83%; color: $fg_color; &:backdrop { color: $insensitive_fg_color; } trough { border-width: 1px; border-style: solid; border-radius: 3px; border-color: $borders_color; background-color: mix($borders_color,$bg_color, 35%); box-shadow: inset 1px 1px transparentize(black, 0.9); &:backdrop { border-color: $backdrop_borders_color; background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); box-shadow: 0 1px transparentize(white,1); } } &.osd trough { background-color: transparent; box-shadow: none; border-width: 0; //FIXME: there is a margin on top } } // moving bit progressbar { &.horizontal { trough, progress { min-height: 2px; } } &.vertical { trough, progress { min-width: 2px; } } & progress { border-width: 1px; border-style: solid; border-radius: 3px; border-color: $selected_borders_color; background-color: $selected_bg_color; // I really prefer these flat w/o this shadow - Lapo box-shadow: inset 0 1px 0 transparentize($borders_edge,0.8); &.vertical { box-shadow: inset 1px 0 0 transparentize($borders_edge,0.8); } &:backdrop { border-color: $selected_bg_color; background-color: $selected_bg_color; box-shadow: none; } &.osd { border-width: 0; border-radius: 0; } } } /************* * Level Bar * *************/ levelbar { & trough { // FIXME: outset not working padding: 2px; border-radius: 3px; @include entry(normal); &:backdrop { @include entry(backdrop); } } & block { min-width: 32px; min-height: 1px; } &.vertical block { min-width: 1px; min-height: 32px; } &.horizontal.discrete block { margin: 0 1px; } &.vertical.discrete block { margin: 1px 0; } & block.filled.low { border-color: darken($warning_color,10%); background-color: $warning_color; &:backdrop { border-color: $warning_color; }; } & block.filled.high { border-width: 1px; border-style: solid; border-color: darken($selected_bg_color,10%); 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; } } & block.filled.full { border-color: darken($success_color,10%); background-color: $success_color; &:backdrop { border-color: $success_color; } } & block.empty { border-width: 1px; border-style: solid; background-color: transparent; border-color: transparentize($fg_color,0.8); border-radius: 1px; box-shadow: none; &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } } } // catch all extend :) %selected_items { background-color: $selected_bg_color; color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); &:backdrop { background-color: $borders_color; color: $selected_fg_color; } } /********** * rames * **********/ frame border, .frame { border: 1px solid $borders_color; &.flat { border-style: none; } &:backdrop { border-color: $backdrop_borders_color; } padding: 0; } actionbar box { padding: 6px; border-width: 1px 0 0; border-color: $borders_color; border-style: solid none none; } placessidebar, scrolledwindow { .frame { border-radius: 2px; } viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } // This is used when content is touch-dragged past boundaries. 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); } } } // 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; background-color: darken($bg_color, 5%); &:backdrop { background-color: transparent; } } } //vbox and hbox separators separator { background: $borders_color; min-width: 1px; min-height: 1px; } /********* * Lists * *********/ list { background-color: $base_color; border-color: $borders_color; &:backdrop { background-color: $backdrop_base_color; border-color: $backdrop_borders_color; } & row { padding: 2px; } } row.activatable, row.activatable:backdrop, row.activatable:backdrop:active, row.activatable:backdrop:checked, row.activatable:backdrop:disabled, row.activatable:backdrop:disabled:active, row.activatable:backdrop:disabled:checked, row.activatable:disabled:active, row.activatable:disabled:checked { // reset button inherited stuff @extend %undecorated_button; background-color: transparentize($base_color,1); // for the transition border-style: none; // I need no borders here border-radius: 0; // and no rounded corners box-shadow: none; // and no box-shadow } row { &.activatable { color: $fg_color; &:hover { background-color: mix($fg_color, $base_color, 5%); } &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } &:selected { @extend %selected_items; background-color: $selected_bg_color; color: $selected_fg_color; &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); } &:backdrop { background-color: $borders_color; } .button.flat { color: $selected_fg_color; &:hover { color: $fg_color; } &:active { color: $selected_fg_color; } } } } .button.flat { color: $fg_color; &:active { color: $selected_fg_color; } } } // transition row, row.activatable { transition: all 300ms $ease-out-quad; &:hover { transition: none; } } /********************* * App Notifications * *********************/ .app-notification, .app-notification.frame { padding: 10px; border-width: 0 1px 1px; border-style: solid; border-color: $borders_color; border-radius: 0 0 6px 6px; background-image: linear-gradient(to bottom, mix(black, $bg_color, 6%) 5%, mix(black, $bg_color, 4%)); // FIXME no space for outer shadow : box-shadow: 0 1px 1px rgba(0,0,0,.5); .button { padding: 6px; } } /************* * Expanders * *************/ expander { & arrow { min-width: 16px; min-height: 16px; -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 { border: 1px solid $borders_color; &:selected { @extend .view:selected; } &.button { @extend %undecorated_button; padding: 0 4px; //FIXME no effect on these pseudobuttons color: mix($fg_color, $base_color, 40%); //we need a dimmed stuff var &:hover { @extend %undecorated_button; color: $fg_color; } &:backdrop, &:backdrop:hover { @extend %undecorated_button; color: mix($backdrop_fg_color, $backdrop_base_color, 50%); } } &.view { border-radius: 2px; } &.header { background: linear-gradient(to bottom, lighten($bg_color,2%), darken($bg_color,2%)); border-bottom-color: mix($borders_color,$bg_color,50%); &:backdrop { background-image: linear-gradient(to bottom, $backdrop_bg_color); border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%); } } &:indeterminate, &:indeterminate:backdrop { color: gtkalpha(currentColor, 0.55); } &.highlight, &.highlight:backdrop { color: $fg_color; } } /*********** * Dialogs * ***********/ messagedialog .dialog-action-area button { padding: 8px; } messagedialog { // Message Dialog styling .titlebar { border-style: none; box-shadow: inset 0 1px $borders_edge; } &.csd { // rounded bottom border styling for csd version // 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; } &:disabled { @include button(insensitive, $edge: none); @extend %middle_button; } &:backdrop { @include button(backdrop, $edge: none); @extend %middle_button; } &:backdrop:disabled { @include button(backdrop-insensitive, $edge: none); @extend %middle_button; } @each $b_type, $b_color in (suggested-action, $suggested_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); @extend %middle_button; &:disabled { @include button(backdrop-insensitive); @extend %middle_button; } } &:disabled { @include button(insensitive); @extend %middle_button; } } } &:first-child{ @extend %first_button; } &:last-child { @extend %last_button; } } %middle_button { border-right-style: none; border-bottom-style: none; } %last_button { border-bottom-right-radius: 7px; } %first_button { border-left-style: none; border-bottom-left-radius: 7px; } } } GtkFileChooserDialog { .dialog-action-box { border-top: 1px solid $borders_color; &:backdrop { border-top-color: $backdrop_borders_color; } } } /*********** * Sidebar * ***********/ .sidebar { border: none; &:backdrop { background-color: $bg_color; } &:selected { @extend %selected_items; } & > scrolledwindow > .frame { border-right: 1px solid $borders_color; &:dir(rtl) { border-right: none; border-left: 1px solid $borders_color; } } } $_placesidebar_icons_opacity: 0.9; 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 { // @at-root needded to not change the specificity making button styling inheritance broken // so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1] // the extended selector ".sidebar-button.button" [specificity 0,0,2,0] &.image-button { padding: 5px; } @extend button.flat; border-radius: 100%; -gtk-outline-radius: 100%; &:not(:hover):not(:active) > image, &:backdrop > image { opacity: $_placesidebar_icons_opacity }; } } // this is for indicating which sidebar row generated a popover // see https://bugzilla.gnome.org/show_bug.cgi?id=754411 .has-open-popup { @extend row.activatable:hover; } .view { color: $fg_color; background-color: transparent; separator, separator:backdrop { @extend separator; } .image { // icons color color: mix($fg_color, $bg_color, 70%); &:selected { color: mix($selected_fg_color, $selected_bg_color, 90%); } } &: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; } } } /********* * Paned * *********/ paned { separator { min-width: 1px; min-height: 1px; background-image: linear-gradient(to bottom, $borders_color); &:backdrop { background-image: linear-gradient(to bottom, $backdrop_borders_color); } } &:dir(ltr).horizontal separator { margin: 0 -8px 0 0; padding: 0 8px 0 0; } &:dir(rtl).horizontal separator { margin: 0 0 0 -8px; padding: 0 0 0 8px; } &.vertical separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; } separator:selected { background-color: $selected_bg_color; } separator.wide { min-width: 5px; min-height: 5px; background-color: transparent; border-style: none solid; border-color: $borders_color; border-width: 1px; } } /************** * GtkInfoBar * **************/ infobar { border-width: 0; 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 { @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none); &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); } &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); } &:disabled { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); } &:backdrop:disabled { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } } label:selected, label:selected:focus, label:selected:hover { background-color: lighten($selected_bg_color, 20%); } } /************ * Tooltips * ************/ .tooltip { color: white; padding: 4px; /* not working */ border-radius: 5px; background-color: transparentize(black,0.2); //FIXME proper color text-shadow: 0 1px black; // border: 2px solid $borders_color; gnome shell style? } .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(); 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; } // border rounding &.top { border-top-left-radius: 6px; border-top-right-radius: 6px; } &.bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } &.left, &:first-child:not(overlay):not(.top) { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } &.right, &:last-child:not(overlay):not(.bottom) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } &:only-child:not(overlay) { border-radius: 6px; } // overlay corner rounding &.top > overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } &.bottom > overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } &:first-child:not(.top) > overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } &:last-child:not(.bottom) > overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } &:only-child > overlay { border-radius: 5px; } // nth-child is used for the custom colors row. // 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+. // 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 transparentize(black, 0.6); } &:backdrop, &:backdrop:selectedi, &.dark:backdrop, &.dark:backdrop:selected { background-image: none; box-shadow: none; } // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50% &.dark { color: white; outline-color: transparentize(black, 0.7); border: 1px solid transparentize(black, 0.7); &:hover { border-color: transparentize(black, 0.5); } &:backdrop { color: transparentize(white, 0.7); } } &.light { color: black; outline-color: transparentize(white, 0.5); border: 1px solid transparentize(black, 0.7); &:hover { border-color: transparentize(black, 0.5); } &:backdrop { color: transparentize(black, 0.7); } } // border color & overlay, & overlay:selected { background: none; border: none; } // make the add color button looks like, well, a button &#add-color-button { @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } & overlay { border-width: 0; background: none; } } } /********************** * 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: transparentize(black, 0.77); $_wm_border_backdrop: transparentize(black, 0.82); box-shadow: 0 3px 9px 1px transparentize(black, 0.5), 0 0 0 1px $_wm_border; //doing borders with box-shadow /* this is used for the resize cursor area */ margin: 10px; &:backdrop { box-shadow: 0 2px 6px 2px transparentize(black, 0.8), 0 3px 9px 1px transparent, 0 0 0 1px $_wm_border_backdrop; } &.tiled { border-radius: 0; } &.csd { &.popup { border-radius: 0; box-shadow: 0 1px 2px transparentize(black, 0.8), 0 0 0 1px transparentize($_wm_border,0.1); } &.tooltip { border-radius: 5px; box-shadow: none; } } &.solid-csd { border-radius: 0; margin: 4px; background-color: $backdrop_bg_color; border: solid 1px $backdrop_borders_color; box-shadow: none; } } // Window Close button button.titlebutton { padding: 8px; border-color: transparent; background-image: none; transition-property: border, box-shadow, color; box-shadow: inset 0 1px transparentize(white,1), 0 1px transparentize($borders_edge,1); &:hover { @include button(normal); } &:active { @include button(active); } &:backdrop { @include button(backdrop); border-color: transparent; transition-property: border, box-shadow, color; } } /********************** * Touch Copy & Paste * *********************/ //touch selection handlebars for the Popover.osd above cursor-handle { background-color: $bg_color; background-image: none; -gtk-icon-source: none; box-shadow: none; outline-style: none; outline-color: transparent; border: 2px solid $fg_color; @each $s,$as in ('',''), (':hover','-hover'), (':active','-active') { //no need for insensitive and backdrop &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { border-radius: 10px 0 0 0; padding-left: 10px; } &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { border-radius: 0 10px 0 0; padding-right: 10px; } &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { border-radius: 10px 10px 0 0; } } } /* Decouple the font of context menus from their entry/textview */ .context-menu { font: initial; } .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; -gtk-icon-shadow: 0 1px black; &:backdrop { text-shadow: none; } button { @include button(osd); &:hover { @include button(osd-hover); } &:active, &:checked { @include button(osd-active); } &:disabled, &:backdrop:disabled { @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'), (':disabled','-unchecked-insensitive'), (':indeterminate', '-mixed'), (':indeterminate:hover', '-mixed-hover'), (':indeterminate:selected', '-mixed-active'), (':indeterminate:disabled', '-mixed-insensitive'), (':checked', '-checked'), (':checked:disabled','-checked-insensitive'), (':checked:hover', '-checked-hover'), (':checked:active', '-checked-active'), (':backdrop:checked', '-checked-backdrop') { .#{$w}#{$s} { -gtk-icon-shadow: none; color: $osd_fg_color; } } } } button.circular { border-radius: 20px; -gtk-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; } *:drop(active):focus, *:drop(active) { border: 1px solid black; } stackswitcher button.text-button { min-width: 100px; } stackswitcher button.circular { min-width: 0px; }