diff options
Diffstat (limited to 'common/gtk-3.0/3.18/sass/_common.scss')
| -rw-r--r-- | common/gtk-3.0/3.18/sass/_common.scss | 367 |
1 files changed, 151 insertions, 216 deletions
diff --git a/common/gtk-3.0/3.18/sass/_common.scss b/common/gtk-3.0/3.18/sass/_common.scss index f1ff41f..27ef901 100644 --- a/common/gtk-3.0/3.18/sass/_common.scss +++ b/common/gtk-3.0/3.18/sass/_common.scss @@ -14,11 +14,6 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); -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; @@ -46,9 +41,6 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); -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; @@ -57,22 +49,14 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); } -/*************** - * Base States * - ***************/ - +// +// Base States +// .background { color: $fg_color; background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work } -/* - 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; } @@ -180,10 +164,9 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers box-shadow: none; } -/********************** - * Spinner Animations * - **********************/ - +// +// Spinner Animations +// @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } @@ -204,10 +187,9 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers } } -/**************** - * Text Entries * - ****************/ - +// +// Text Entries +// .entry { border: 1px solid; padding: 5px 8px 6px; @@ -287,10 +269,9 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers GtkSearchEntry.entry { border-radius: 20px; } -/*********** - * Buttons * - ***********/ - +// +// Buttons +// // stuff for .needs-attention $_dot_color: $selected_bg_color; @@ -311,7 +292,6 @@ $_dot_color: $selected_bg_color; } } - .button { $_button_transition: all 200ms $ease-out-quad; @@ -778,7 +758,7 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 box-shadow: none; } -/* menu buttons */ +// menu buttons .menuitem.button.flat { transition: none; @extend %undecorated_button; @@ -792,10 +772,9 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 &:checked { color: $fg_color; } } -/********* - * Links * - *********/ - +// +// Links +// *:link { color: $link_color; &:visited { @@ -824,10 +803,9 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 > .label { text-decoration-line: underline; } } -/***************** - * GtkSpinButton * - *****************/ - +// +// Spinbuttons +// .spinbutton { border-radius: 3px; @@ -838,8 +816,7 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 color: mix($fg_color,$base_color,95%); border-radius: 0; box-shadow: none; - // padding-left: 6px; - // padding-right: 6px; + &:dir(rtl) { border-style: none solid none none; } &:first-child { color: red; } @@ -915,8 +892,6 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 } } &.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; padding-left: 5px; padding-right: 5px; @@ -941,23 +916,23 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 } } -/************** - * ComboBoxes * - **************/ +// +// Comboboxes +// GtkComboBox { - > .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; + > .the-button-in-the-combobox { // Otherwise combos + padding-top: 3px; // are bigger than + padding-bottom: 4px; // buttons + } + &:insensitive { color: $insensitive_fg_color; } - .separator.vertical { - // always disable separators - -GtkWidget-wide-separators: true; - } + .separator.vertical { -GtkWidget-wide-separators: true; } + &.combobox-entry .entry { &:dir(ltr) { border-top-right-radius: 0; @@ -1016,9 +991,9 @@ GtkComboBox { .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 * - ************/ +// +// Toolbars +// .toolbar { -GtkWidget-window-dragging: true; padding: 4px; @@ -1068,10 +1043,9 @@ GtkComboBox { .action-bar { background-color: darken($bg_color, 3%) } -/*************** - * Header bars * - ***************/ - +// +// Headerbars +// .header-bar { padding: 7px 7px 6px 7px; @@ -1235,7 +1209,7 @@ GtkComboBox { } %header_widgets { - // Header-bar Entries + // Headerbar Entries .entry { @include entry(header-normal); @@ -1279,7 +1253,7 @@ GtkComboBox { } } - // Header-bar Buttons + // Headerbar Buttons .button { @include button(header-normal); @@ -1391,7 +1365,7 @@ GtkComboBox { } - // Header-bar Suggested and Destructive Action buttons + // Headerbar Suggested and Destructive Action buttons @each $b_type, $b_color in (suggested-action, $suggested_color), (destructive-action, $destructive_color) { .button.#{$b_type} { @@ -1417,7 +1391,7 @@ GtkComboBox { } } - // Header-bar Spinbuttons + // Headerbar Spinbuttons & .spinbutton { &:focus .button { @@ -1435,7 +1409,7 @@ GtkComboBox { } } - // Header-bar ComboBoxes + // Headerbar ComboBoxes & GtkComboBox{ &:insensitive { color: transparentize($header_fg, 0.6); } @@ -1462,7 +1436,7 @@ GtkComboBox { } - // Header-bar Switches + // Headerbar Switches GtkSwitch { &:backdrop { opacity: 0.75; } } @@ -1474,7 +1448,7 @@ GtkComboBox { &:backdrop { opacity: 0.75; } } - // Header-bar Scale + // Headerbar Scale .scale { &:backdrop { opacity: 0.75; } @@ -1508,9 +1482,9 @@ GtkComboBox { } } -/************ - * Pathbars * - ************/ +// +// Pathbars +// .path-bar .button { padding-left: 6px; padding-right: 6px; @@ -1526,9 +1500,9 @@ GtkComboBox { GtkLabel:only-child, GtkLabel { padding-right: 4px; padding-left: 4px; } } -/************** - * Tree Views * - **************/ +// +// Tree Views +// GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly // the tree lines color can't be set -GtkTreeView-grid-line-width: 1; @@ -1540,7 +1514,7 @@ GtkTreeView.view { // treeview grid lines a border-left-color: transparentize($fg_color, 0.85); // this is actually the tree lines color, border-top-color: transparentize(black, 0.9); // while this is the grid lines color, better then nothing - &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props + &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props &:selected { border-radius: 0; @@ -1656,9 +1630,9 @@ column-header.button.dnd { // for treeview-like derive widgets } } -/********* - * Menus * - *********/ +// +// Menus +// .menubar { -GtkWidget-window-dragging: true; padding: 0px; @@ -1736,10 +1710,9 @@ column-header.button.dnd { // for treeview-like derive widgets .menuitem .accelerator { color: gtkalpha(currentColor,0.55); } -/************ - * Popovers * - ************/ - +// +// Popovers +// .popover { padding: 2px; border: 1px solid darken($borders_color, 5%); @@ -1773,17 +1746,10 @@ column-header.button.dnd { // for treeview-like derive widgets &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } } -/***************** - * Notebooks and * - * Tabs * - *****************/ - +// +// 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; -GtkNotebook-initial-gap: 4; @@ -1797,15 +1763,13 @@ column-header.button.dnd { // for treeview-like derive widgets &.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; } } &.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: $bg_color; // this is the shading of the header behind the tabs @@ -1818,18 +1782,10 @@ column-header.button.dnd { // for treeview-like derive widgets } $_header_border: $borders_color; - &.top { - box-shadow: inset 0 -1px $_header_border; // border - } - &.bottom { - box-shadow: inset 0 1px $_header_border; - } - &.right { - box-shadow: inset 1px 0 $_header_border; - } - &.left { - box-shadow: inset -1px 0 $_header_border; - } + &.top { box-shadow: inset 0 -1px $_header_border; } + &.bottom { box-shadow: inset 0 1px $_header_border; } + &.right { box-shadow: inset 1px 0 $_header_border; } + &.left { box-shadow: inset -1px 0 $_header_border; } } tab { border-width: 0; @@ -1950,10 +1906,9 @@ column-header.button.dnd { // for treeview-like derive widgets } } -/************** - * Scrollbars * - **************/ - +// +// Scrollbars +// $_scrollbar_bg_color: darken($base_color, 1%); .scrollbar { @@ -2087,9 +2042,9 @@ $_scrollbar_bg_color: darken($base_color, 1%); } -/********** - * Switch * - **********/ +// +// Switches +// GtkSwitch { font: 1; -GtkSwitch-slider-width: 52; @@ -2132,13 +2087,9 @@ GtkSwitch { } } -/************************* - * 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 - +// +// Check and Radio items * +// @each $w,$a in ('check', 'checkbox'), ('radio','radio') { @@ -2172,7 +2123,7 @@ GtkSwitch { } } -//selection-mode +// Selectionmode @each $s,$as in ('','-selectionmode'), (':checked', '-checked-selectionmode') { .view.content-view.check#{$s}:not(.list) { @@ -2194,9 +2145,9 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { } } -/************ - * GtkScale * - ************/ +// +// GtkScale +// .scale { -GtkScale-slider-length: 15; -GtkRange-slider-width: 15; @@ -2305,15 +2256,13 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { } } -/***************** - * Progress bars * - *****************/ - +// +// Progress bars +// GtkProgressBar { padding: 0; font-size: smaller; color: transparentize($fg_color, 0.3); - //@include _shadows(_button_shadow(normal)); &.osd { -GtkProgressBar-xspacing: 0; @@ -2352,24 +2301,22 @@ GtkProgressBar.trough { border-style: none; background-color: transparent; box-shadow: none; - //FIXME: there is a margin on top } .list-row:selected &, GtkInfoBar & { background-color: transparentize(black, 0.8); } } -/************* - * Level Bar * - *************/ - +// +// Level Bar +// GtkLevelBar { -GtkLevelBar-min-block-width: 34; -GtkLevelBar-min-block-height: 3; -} -GtkLevelBar.vertical { - -GtkLevelBar-min-block-width: 3; - -GtkLevelBar-min-block-height: 34; + &.vertical { + -GtkLevelBar-min-block-width: 3; + -GtkLevelBar-min-block-height: 34; + } } .level-bar { @@ -2405,9 +2352,9 @@ GtkLevelBar.vertical { } -/********** - * Frames * - **********/ +// +// Frames +// .frame { border: 1px solid $borders_color; &.flat { border-style: none; } @@ -2441,10 +2388,9 @@ GtkScrolledWindow { } } -/********* - * Lists * - *********/ - +// +// Lists +// .list { background-color: $base_color; border-color: $borders_color; @@ -2485,10 +2431,9 @@ GtkScrolledWindow { &:hover { transition: none; } } -/********************* - * App Notifications * - *********************/ - +// +// App Notifications +// .app-notification, .app-notification.frame { padding: 10px; @@ -2514,10 +2459,9 @@ GtkScrolledWindow { } } -/************* - * Expanders * - *************/ - +// +// Expanders +// .expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } @@ -2525,9 +2469,9 @@ GtkScrolledWindow { &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } -/************ - * Calendar * - ***********/ +// +// Calendar +// GtkCalendar { color: $fg_color; border: 1px solid $borders_color; @@ -2563,9 +2507,9 @@ GtkCalendar { } } -/*********** - * Dialogs * - ***********/ +// +// Dialogs +// .message-dialog .dialog-action-area .button { padding: 8px; } @@ -2744,9 +2688,9 @@ GtkPaned.wide { // this is for the paned with wide separator &.vertical .pane-separator { border-style: solid none;} } -/************** - * GtkInfoBar * - **************/ +// +// GtkInfoBar +// GtkInfoBar { border-style: none; @@ -2802,9 +2746,9 @@ GtkInfoBar { } } -/************ - * Tooltips * - ************/ +// +// Tooltips +// .tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice @@ -2827,9 +2771,9 @@ GtkInfoBar { color: inherit; // just to be sure } -/***************** - * Color Chooser * - *****************/ +// +// Color Chooser +// GtkColorSwatch { // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one @@ -2913,9 +2857,9 @@ GtkColorButton.button { GtkColorSwatch { border-radius: 0; } } -/******** - * Misc * - ********/ +// +// Misc +// //content view (grid/list) .content-view { background-color: $base_color; @@ -2932,23 +2876,49 @@ GtkColorButton.button { GtkVolumeButton.button { padding: 8px; } -/********************** - * Window Decorations * - *********************/ +// Decouple the font of context menus from their entry/textview +.touch-selection, +.context-menu { font: initial;} + +.monospace { font: Monospace; } + +// +// Overshoot +// +// 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 { + &.top { @include overshoot(top); } + &.bottom { @include overshoot(bottom); } + &.left { @include overshoot(left); } + &.right { @include overshoot(right); } +} + +// +// Undershoot +// +// 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); } +} + +// +// Window Decorations +// .window-frame { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 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.9), transparentize(black, 0.45)); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border), 0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); - /* this is used for the resize cursor area */ + // this is used for the resize cursor area margin: 10px; &:backdrop { @@ -3041,45 +3011,10 @@ GtkVolumeButton.button { padding: 8px; } } } - -// catch all extend :) - +// catch all extend %selected_items { background-image: none; background-color: $selected_bg_color; color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); } - -/* Decouple the font of context menus from their entry/textview */ -.touch-selection, -.context-menu { - font: initial; -} - -.monospace { - font: Monospace; -} - -// -// Overshoot -// -// 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 { - &.top { @include overshoot(top); } - &.bottom { @include overshoot(bottom); } - &.left { @include overshoot(left); } - &.right { @include overshoot(right); } -} - -// -// Undershoot -// -// 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); } -} |