other/Adwaita-Dark-Green: gtk-3.0/_common.scss comparison

comparison gtk-3.0/_common.scss @ 17:ca246bc0af4a

Update to GTK 3.18 and regenerate assets

author	IBBoard <dev@ibboard.co.uk>
date	Sat, 09 Jul 2016 15:25:37 +0100
parents	a48477723cfe
children	cb3e1a45b770

comparison

equal deleted inserted replaced

-:504f558b5340
+:ca246bc0af4a
 @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;
 -GtkWidget-focus-padding: 2;    // FIXME: do we still need these?
 -GtkWidget-focus-line-width: 1; //
 -GtkWidget-text-handle-width: 20;
--GtkWidget-text-handle-height: 20;
+-GtkWidget-text-handle-height: 24;
 -GtkDialog-button-spacing: 4;
 -GtkDialog-action-area-border: 0;
 -GtkStatusbar-shadow-type: none;
 @extend %selected_items;
 }
 }
 .rubberband {
-border: 1px solid $selected_bg_color;
+border: 1px solid darken($selected_bg_color, 10%);
-background-color: transparentize($selected_bg_color,0.8);
+background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
 }
 .label {
 &.separator {
 color: $fg_color;
 background-color: transparent;
 box-shadow: none;
 &:backdrop { background-color: transparent; }
 }
-.linked > & { //FIXME: use same buttons linking logic and template
+.linked:not(.vertical) > & { @extend %linked; }
-border-radius: 0;
-&:first-child {
+.linked:not(.vertical) > &:focus + .entry,
-border-top-left-radius: 3px;
+.linked:not(.vertical) > &:focus + .button,
-border-bottom-left-radius: 3px;
+.linked:not(.vertical) > &:focus + GtkComboBox > .the-button-in-the-combobox,
-&:dir(rtl) { border-right-style: none;}
+.linked:not(.vertical) > &:focus + GtkComboBoxText > .the-button-in-the-combobox {
-}
+border-left-color: entry_focus_border(); // colors the border of the widget following a focused entry
-&:last-child {
+}
-border-top-right-radius: 3px;
-border-bottom-right-radius: 3px;
+// entry error and warning style
-border-left-style: none;
+@each $e_type, $e_color in (error, $error_color),
-&:dir(rtl) { border-left-style: solid; }
+(warning, $warning_color) {
-}
+&.#{$e_type} {
-}
+color: $e_color;
+border-color: entry_focus_border($e_color);
-&.error { // FIXME: dark variant love needed
+&:focus { @include entry(focus, $e_color); }
-color: $error_color;
+&:selected, &:selected:focus { background-color: $e_color; }
-border-color: $error_color;
-&:focus { @include entry(focus, $error_color); }
-&:selected, &:selected:focus {
-background-color: $error_color;
-}
-}
-&.warning { // FIXME: dark variant love needed
-color: $warning_color;
-border-color: $warning_color;
-&:focus { @include entry(focus, $warning_color); }
-&:selected, &:selected:focus {
-background-color: $warning_color;
 }
 }
 &.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%); }
 }
-.linked.vertical > & { //FIXME comment stuff and make the whole thing smarter.
-@include entry(normal, $edge: none);
-background-image: linear-gradient(to bottom, $base_color);
-border-bottom-color: mix($borders_color, $base_color, 30%);
-box-shadow: none;
-@extend %linked_vertical;
-&:focus {
-border-color: entry_focus_border($selected_bg_color);
-box-shadow: entry_focus_glow($selected_bg_color),
-0 -1px 0 0 entry_focus_border($selected_bg_color);
-@extend %linked_vertical;
-}
-&:insensitive {
-@include entry(insensitive, $edge: none);
-border-bottom-color: mix($borders_color, $base_color, 30%);
-@extend %linked_vertical;
-&:backdrop {
-@include entry(backdrop-insensitive, $edge: none);
-border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-@extend %linked_vertical;
-}
-}
-&:backdrop {
-@include entry(backdrop, $edge: none);
-border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-@extend %linked_vertical;
-}
-&:first-child {
-@include entry(normal, $edge: none);
-border-bottom-color: mix($borders_color, $base_color, 30%);
-&:focus { @include entry(focus, $edge: none); }
-&:insensitive {
-@include entry(insensitive, $edge: none);
-border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-@extend %linked_vertical:first-child;
-&:backdrop {
-@include entry(backdrop-insensitive, $edge: none);
-border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-border-top-style: solid;
-}
-}
-&:backdrop {
-@include entry(backdrop, $edge: none);
-border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-@extend %linked_vertical:first-child;
-}
-}
-&:last-child {
-@include entry(normal);
-background-image: linear-gradient(to bottom, $base_color);
-box-shadow: _widget_edge();
-&:focus {
-border-color: entry_focus_border($selected_bg_color);
-box-shadow: entry_focus_glow($selected_bg_color),
-0 -1px 0 0 entry_focus_border($selected_bg_color),
-_widget_edge();
-@extend %linked_vertical:last-child;
-}
-&:insensitive {
-@include entry(insensitive);
-@extend %linked_vertical:last-child;
-&:backdrop {
-@include entry(backdrop-insensitive);
-@extend %linked_vertical:last-child;
-}
-}
-&:backdrop {
-@include entry(backdrop);
-@extend %linked_vertical:last-child;
-}
-}
-}
 .osd & {
 @include entry(osd);
 &:focus { @include entry(osd-focus); }
 &: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) + GtkComboBox > .the-button-in-the-combobox,
+> .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: entry_focus_border(); }
+}
 /***********
 * Buttons *
 ***********/
 }
 }
 // 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?
 // More inline toolbar buttons
 .inline-toolbar.toolbar GtkToolButton,
 .inline-toolbar.toolbar GtkToolButton:backdrop {
 & > .button.flat { @extend %linked_middle; }
-&:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); }
 &:first-child > .button.flat { @extend %linked:first-child; }
 &:last-child > .button.flat { @extend %linked:last-child; }
-&:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); }
 &:only-child > .button.flat { @extend %linked:only-child; }
 }
 %linked_middle {
 border-radius: 0;
-border-left-style: none;
+border-right-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-top-left-radius: 3px;
-border-left-style: solid;
+border-bottom-left-radius: 3px;
 }
 &:last-child {
-border-radius: 0 3px 3px 0;
+border-top-right-radius: 3px;
-&:dir(rtl) { border-right-style: solid; }
+border-bottom-right-radius: 3px;
+border-right-style: solid;
 }
 &:only-child {
 border-radius: 3px;
 border-style: solid;
 }
 }
 %linked_vertical_middle {
-border-left-style: solid;
+border-style: solid solid none solid;
-border-top-style: none;
 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;
-border-radius: 3px 3px 0 0;
-}
-&:last-child {
-border-radius: 0 0 3px 3px;
 }
 &:only-child {
 border-radius: 3px;
 border-style: solid;
 }
 }
 &: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 *
 /**************
 * ComboBoxes *
 **************/
 GtkComboBox {
-> .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
+> .the-button-in-the-combobox { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
 // are bigger then
 // buttons
 -GtkComboBox-arrow-scaling: 0.5;
 -GtkComboBox-shadow-type: none;
-box-shadow: 0 1px $borders_edge;
 @include _button_text_shadow;
 &:insensitive {
 color: $insensitive_fg_color;
 .menuitem { text-shadow: none; }
 .separator.vertical {
 // always disable separators
 -GtkWidget-wide-separators: true;
 }
-&.combobox-entry .entry { @extend %linked; }
+&.combobox-entry .entry {
-&.combobox-entry .button, &.combobox-entry .button:backdrop {
+&:dir(ltr) {
-// It is needed to specify the backdrop button or it gets overridden
+border-top-right-radius: 0;
-@extend %linked;
+border-bottom-right-radius: 0;
 }
-}
+&:dir(rtl) {
+border-top-left-radius: 0;
-.linked > GtkComboBox > .button {
+border-bottom-left-radius: 0;
+}
+}
+&.combobox-entry .button {
+&:dir(ltr) {
+border-top-left-radius: 0;
+border-bottom-left-radius: 0;
+border-left-style: none;
+}
+&:dir(rtl) {
+border-top-right-radius: 0;
+border-bottom-right-radius: 0;
+border-right-style: none;
+}
+}
+}
+.linked > GtkComboBox > .the-button-in-the-combobox,
+.linked > GtkComboBoxText > .the-button-in-the-combobox {
 // the combo is a composite widget so the way we do button linkind doesn't
 // work, special case needed. See
 // https://bugzilla.gnome.org/show_bug.cgi?id=733979
-&:dir(ltr) { @extend %linked_middle; } // specificity bump
+&:dir(ltr),
-&:dir(rtl) { @extend %linked_middle:dir(rtl); }
+&:dir(rtl) { @extend %linked_middle; } // specificity bump
 }
-.linked > GtkComboBox:first-child > .button {
+.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
+.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
 @extend %linked:first-child;
 }
-.linked > GtkComboBox:last-child > .button {
+.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
+.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
 @extend %linked:last-child;
 }
-.linked > GtkComboBox:only-child > .button {
+.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
+.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
 @extend %linked:only-child;
 }
-.linked.vertical > GtkComboBoxText > .button,
-.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
+.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
-.linked.vertical > GtkComboBoxText:first-child > .button,
+.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; }
-.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
+.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
-.linked.vertical > GtkComboBoxText:last-child > .button,
+.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; }
-.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
+.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
-.linked.vertical > GtkComboBoxText:only-child > .button,
+.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; }
-.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
+.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
+.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; }
 /************
 * Toolbars *
 ************/
 .toolbar {
 -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%);
 }
 .menu {
 margin: 4px;
 padding: 0px;
-background-color: $base_color;
+background-color: $menu_color;
 border: 1px solid $borders_color; // adds borders in a non composited env
 .csd & { border: none; }  // axes borders in a composited env
+&:backdrop { background-color: $backdrop_menu_color; }
 .menuitem {
 text-shadow: none;
 padding: 4px;
 &:hover {
 color: $selected_fg_color;
 color: $insensitive_fg_color;
 &:backdrop { color: $backdrop_insensitive_color; }
 }
 &:backdrop, &:backdrop:hover {
 color: $backdrop_fg_color;
-background-color: $backdrop_base_color;
+background-color: transparent;
 }
 //submenu indicators
 &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
 &.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
 }
 text-shadow: none;
 transition: none;
 }
 &.osd { @extend %osd; }
-}
-//touch selection handlebars for the Popover.osd above
-.entry.cursor-handle,
-.cursor-handle {
-background-color: transparent;
-background-image: none;
-box-shadow: none;
-border-style: none;
-&.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
-&.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
 }
 /*****************
 * Notebooks and *
 * Tabs          *
 **********/
 GtkSwitch {
 -GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
 // as buttons, not doing that for now
+-GtkSwitch-slider-height: 27px;
 font-weight: bold;
 font-size: smaller;
 outline-offset: -4px;
 box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
 _widget_edge();                         // otherwise it gets
 *************************/
 // draw regular check and radio items using our PNG assets
 // all assets are rendered from assets.svg. never add pngs directly
-$asset_suffix: if($variant=='dark', '-dark', '');
 @each $w,$a in ('check', 'checkbox'),
 ('radio','radio') {
 //standard checks and radios
 @each $s,$as in ('','-unchecked'),
 .list-row .check, list-row .radio {
 icon-shadow: none;
 &:selected, &:hover { icon-shadow: none; }
 }
-//content view (grid/list)
-.content-view {
-background-color: darken($bg_color,7%);
-&:backdrop { background-color: darken($bg_color,7%); }
-&.rubberband { @extend .rubberband; }
-}
 //selection-mode
 @each $s,$as in ('','-selectionmode'),
 (':hover', '-hover-selectionmode'),
 (':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} {
+.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;
 }
 }
 &: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;
 border-color: $osd_borders_color;
 background-image: none;
 }
 }
 }
-}
+// scales on selected list rows
+.list-row:selected & {
-$asset_suffix: if($variant=='dark', '-dark', '');
+border-color: $selected_borders_color;
+&.trough {
+box-shadow: inset 1px 1px transparentize(black, 0.9);
+&:backdrop { box-shadow: none; }
+&.highlight:backdrop { border-color: $selected_borders_color; }
+}
+&:insensitive,
+&.trough.highlight:insensitive {
+border-color: $selected_bg_color;
+box-shadow: none;
+background-color: mix($selected_fg_color, $selected_bg_color, 50%);
+background-image: none;
+&:backdrop { background-color: mix($backdrop_selected_fg_color, $selected_bg_color, 50%); }
+}
+}
+}
 @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;
+color: gtkalpha(currentColor, 0.5); // marks color
 @extend %#{$we}_#{$dn};
 @each $s,$as in ('',''),
 (':hover','-hover'),
 /*************
 * Level Bar *
 *************/
-.level-bar.vertical {
--GtkLevelBar-min-block-width: 3;
--GtkLevelBar-min-block-height: 34;
-}
 .level-bar {
 box-shadow: _widget_edge(); // needs to be set here to avoid clipping
 -GtkLevelBar-min-block-width: 34;
 -GtkLevelBar-min-block-height: 3;
 &.vertical {
 /*********
 * Lists *
 *********/
-.list, .list-row {
+.list {
 background-color: $base_color;
 border-color: $borders_color;
 &:backdrop {
 background-color: $backdrop_base_color;
 border-color: $backdrop_borders_color;
 .list-row,
 .grid-child {
 padding: 2px;
 }
-.list-row.button,
+.list-row.activatable {
-.list-row.button:backdrop,
-.list-row.button:backdrop:active,
-.list-row.button:backdrop:checked,
-.list-row.button:backdrop:insensitive,
-.list-row.button:backdrop:insensitive:active,
-.list-row.button:backdrop:insensitive:checked,
-.list-row.button:insensitive:active,
-.list-row.button:insensitive:checked {
-// reset button inherited stuff
-@extend %undecorated_button;
-background-color: transparentize($base_color,1); // for the transition
-border-style: none; // I need no borders here
-border-radius: 0;   // and no rounded corners
-box-shadow: none;   // and no box-shadow
-}
-.list-row.button {
 // let's take care of background colors
 &:hover {
-background-color: mix($fg_color, $base_color, 5%);
+//background-color: mix($fg_color, $base_color, 5%);
+background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95));
 }
 &:active {
 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
 }
 &:backdrop:hover { background-color: transparent; }
 //       istead of repeating everytime this stuff.
 }
 }
 // transition
-.list-row, list-row.button {
+.list-row {
-transition: all 300ms $ease-out-quad;
+transition: all 150ms $ease-out-quad;
 &:hover { transition: none; }
 }
 /*********************
 &:backdrop {
 @extend %undecorated_button;
 color: transparentize($backdrop_fg_color,0.55);
 }
-}
+&:insensitive {
-&:inconsistent, &:inconsistent:backdrop,
+@extend %undecorated_button;
-&.highlight, &.highlight:backdrop { color: gtkalpha(currentColor, 0.55); }
+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;
 .message-dialog .dialog-action-area .button {
 padding: 8px;
 }
 .message-dialog { // Message Dialog styling
--GtkDialog-button-spacing: 0;
 @if $variant==light {
 // the bright variant as a slightly darker bg which in this case clashes with the window decoration, overriding
 &.background { background-color: $bg_color; }
 }
 * Sidebar *
 ***********/
 .sidebar {
 border: none;
-background-color: $sidebar_bg_color;
+background-color: mix($bg_color, $base_color, 50%);
 &:backdrop {
 background-color: $backdrop_sidebar_bg_color;
 }
 &:selected {
 @extend %selected_items;
 }
 }
-// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
+$_placesidebar_icons_opacity: 0.7;
-GtkPlacesSidebar.sidebar .view {
+GtkSidebarRow {
+// Needs overriding of the GtkListBoxRow padding
-color: $fg_color;
+&.list-row {
-background-color: transparent;
+padding: 0px;
+}
-.separator,
+// Using margins/padding directly in the SidebarRow
-.separator:backdrop { @extend .separator; }
+// will make the animation of the new bookmark row jump
+.sidebar-revealer {
-.image { // icons color
+padding: 4px 14px 4px 12px;
-color: mix($fg_color, $sidebar_bg_color, 70%);
+}
+.sidebar-icon {
-&:selected {
+opacity: $_placesidebar_icons_opacity; // dim the device icons
-color: mix($selected_fg_color, $selected_bg_color, 90%);
+&:dir(ltr) { padding-right: 8px; }
+&:dir(rtl) { padding-left: 8px; }
-&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 90%); }
+}
-}
+.sidebar-label {
+&:dir(ltr) { padding-right: 2px; }
-&:insensitive { color: mix($insensitive_fg_color, $sidebar_bg_color, 70%); }
+&:dir(rtl) { padding-left: 2px; }
+}
-&:backdrop {
+}
-color: mix($backdrop_fg_color, $sidebar_bg_color, 70%);
+GtkPlacesSidebar.sidebar {
-&:insensitive { color: mix($backdrop_insensitive_color, $sidebar_bg_color, 70%); }
+// in the sidebar case it makes no sense to click the selected row
-}
+.list-row:selected:active { box-shadow: none; }
-}
+// looks like the label doesn't get all the states so work around
-&:insensitive { color: $insensitive_fg_color; }
+.list-row:selected:insensitive .label { @extend %selected_items:insensitive; }
+.list-row:selected:backdrop:insensitive .label { @extend %selected_items:backdrop:insensitive; }
-&:backdrop {
-color: $backdrop_fg_color;
+.sidebar-placeholder-row {
+border: solid 1px $selected_bg_color;
-&:insensitive { color: $backdrop_insensitive_color; }
+}
-}
+.sidebar-new-bookmark-row {
-&:selected {
+color: $selected_bg_color;
-@extend %selected_items;
+}
-}
-}
+@at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
+// so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
+// the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
+&.image-button { padding: 5px; }
+@extend .button.flat;
+border-radius: 100%;
+outline-radius: 100%;
+&:not(:hover):not(:active) > GtkImage,
+&:backdrop > GtkImage { opacity: $_placesidebar_icons_opacity };
+}
+// this is for indicating which sidebar row generated a popover
+// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+.has-open-popup { @extend .list-row.activatable:hover; }
+}
 .sidebar-item {
 padding: 10px 4px;
 > .label {
 padding-left: 6px;
 @extend %needs_attention;
 background-size: 6px 6px, 0 0;
 }
 }
+/****************
+* File chooser *
+****************/
+GtkPlacesView {
+.server-list-button > GtkImage {
+transition: 200ms $ease-out-quad;
+-gtk-icon-transform: rotate(0turn);
+}
+.server-list-button:checked > GtkImage {
+transition: 200ms $ease-out-quad;
+-gtk-icon-transform: rotate(-0.5turn);
+}
+.list-row.activatable:hover {
+background-color: transparent;
+}
+}
 /*********
 * Paned *
 *********/
 }
 }
 // we need to re-set the shadow here since it get axed by the previous bit
 &:selected { box-shadow: $_colorswatch_shadow; }
+&:insensitive {
+box-shadow: none;
+opacity: 0.5;
+}
 // base color corners rounding
 // to avoid the artifacts caused by rounded corner anti-aliasing the base color
 // sports a bigger radius.
 // nth-child is needed by the custom color strip.
 }
 // indicator and keynav outline colors
 &.color-dark {
 color: white;
-outline-color: transparentize(black, 0.7);
+outline-color: transparentize(white, 0.5);
 &:backdrop { color: transparentize(white, 0.7); }
 }
 &.color-light {
 color: black;
-outline-color: transparentize(white, 0.5);
+outline-color: transparentize(black, 0.5);
 &:backdrop { color: transparentize(black, 0.7); }
 }
 // border color
 &.overlay,
 /********
 * Misc *
 ********/
-.scale-popup .button { // +/- buttons on GtkVolumeButton popup
+//content view (grid/list)
-padding: 6px;
+.content-view {
-&:hover {
+background-color: darken($bg_color,7%);
-@extend %undecorated_button;
+&:hover { -gtk-image-effect: highlight; }
-background-color: transparentize($fg_color,0.9);
+&:backdrop { background-color: darken($bg_color,7%); }
-border-radius: 5px;
+&.rubberband { @extend .rubberband; }
 }
-&:backdrop,
-&:backdrop:hover,
+.scale-popup {
-&:backdrop:insensitive { @extend %undecorated_button; }
-}
+.osd & { @extend %osd; }
-GtkVolumeButton.button { padding: 8px; }
+.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 .text-button }
+}
 /**********************
 * Window Decorations *
 *********************/
 // 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 {
+&.popup {
 border-radius: 0;
 box-shadow: 0 1px 2px transparentize(black, 0.8),
 0 0 0 1px transparentize($_wm_border,0.1);
 }
 &.tooltip {
 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;
-background-color: $backdrop_selected_bg_color;
+&:insensitive {
+color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%);
+}
+}
+}
+.monospace {
+font: Monospace;
+}
+/**********************
+* Touch Copy & Paste *
+*********************/
+//touch selection handlebars for the Popover.osd above
+.entry.cursor-handle,
+.cursor-handle {
+background-color: transparent;
+background-image: none;
+box-shadow: none;
+border-style: none;
+@each $s,$as in ('',''),
+(':hover','-hover'),
+(':active','-active') { //no need for insensitive and backdrop
+&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
+$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
+-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+url('#{$_url}@2.png'));
+padding-left: 10px;
+}
+&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
+$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
+-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+url('#{$_url}@2.png'));
+padding-right: 10px;
+}
+&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
+$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+url('#{$_url}@2.png'));
+}
 }
 }
 /* Decouple the font of context menus from their entry/textview */
-.touch-selection,
 .context-menu {
 font: initial;
 }
-.monospace {
+.touch-selection {
-font: Monospace;
+font: initial;
+color: $osd_fg_color;
+border: none;
+background-color: opacify($osd_bg_color,0.2);
+background-clip: padding-box;
+outline-color: transparentize($osd_fg_color, 0.7);
+box-shadow: none;
+text-shadow: 0 1px black;
+icon-shadow: 0 1px black;
+&:backdrop { text-shadow: none; }
+.button {
+@include button(osd);
+&:hover { @include button(osd-hover); }
+&:active, &:checked { @include button(osd-active); }
+&:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); }
+&:backdrop { @include button(osd-backdrop); }
+}
+// checkboxes and radios to use the -dark style for OSD style popovers
+@each $w,$a in ('check', 'checkbox'),
+('radio','radio') {
+@each $s,$as in ('','-unchecked'),
+(':hover', '-unchecked-hover'),
+(':active', '-unchecked-active'),
+(':insensitive','-unchecked-insensitive'),
+(':inconsistent', '-mixed'),
+(':inconsistent:hover', '-mixed-hover'),
+(':inconsistent:selected', '-mixed-active'),
+(':inconsistent:insensitive', '-mixed-insensitive'),
+(':checked', '-checked'),
+(':checked:insensitive','-checked-insensitive'),
+(':checked:hover', '-checked-hover'),
+(':checked:active', '-checked-active'),
+(':backdrop:checked', '-checked-backdrop') {
+.#{$w}#{$s} {
+icon-shadow: none;
+-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"),
+url("assets/#{$a}#{$as}-dark@2.png"));
+}
+}
+}
 }
 // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
 // This draws a box on top of the content, the size changes programmatically.
 .overshoot {

Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-3.0/_common.scss @ 17:ca246bc0af4a