diff options
Diffstat (limited to 'common/gtk-3.0/3.14/sass/_common.scss')
| -rw-r--r-- | common/gtk-3.0/3.14/sass/_common.scss | 377 |
1 files changed, 155 insertions, 222 deletions
diff --git a/common/gtk-3.0/3.14/sass/_common.scss b/common/gtk-3.0/3.14/sass/_common.scss index aaafff7..3356d3e 100644 --- a/common/gtk-3.0/3.14/sass/_common.scss +++ b/common/gtk-3.0/3.14/sass/_common.scss @@ -15,11 +15,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; @@ -47,9 +42,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; @@ -58,22 +50,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; } @@ -181,10 +165,9 @@ GtkFlowBox .grid-child { box-shadow: none; } -/********************** - * Spinner Animations * - **********************/ - +// +// Spinner Animations +// @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } @@ -205,10 +188,9 @@ GtkFlowBox .grid-child { } } -/**************** - * Text Entries * - ****************/ - +// +// Text Entries +// .entry { border: 1px solid; padding: 5px 8px 6px; @@ -348,10 +330,9 @@ GtkFlowBox .grid-child { GtkSearchEntry.entry { border-radius: 20px; } -/*********** - * Buttons * - ***********/ - +// +// Buttons +// // stuff for .needs-attention $_dot_color: $selected_bg_color; @@ -372,7 +353,6 @@ $_dot_color: $selected_bg_color; } } - .button { $_button_transition: all 200ms $ease-out-quad; @@ -385,7 +365,7 @@ $_dot_color: $selected_bg_color; @include button(normal); - &.flat { + &.flat { @include button(undecorated); background-color: transparentize($button_bg, 1); border-color: transparentize($button_border, 1); @@ -751,10 +731,9 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 &:checked { color: $fg_color; } } -/********* - * Links * - *********/ - +// +// Links +// *:link { color: $link_color; &:visited { @@ -782,10 +761,9 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 } } -/***************** - * GtkSpinButton * - *****************/ - +// +// Spinbuttons +// .spinbutton { border-radius: 3px; @@ -796,8 +774,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; } @@ -899,16 +876,18 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 } } -/************** - * ComboBoxes * - **************/ +// +// Comboboxes +// GtkComboBox { - > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos - // are bigger then - // buttons -GtkComboBox-arrow-scaling: 0.5; -GtkComboBox-shadow-type: none; + > .button { // Otherwise combos + padding-top: 3px; // are bigger than + padding-bottom: 4px; // buttons + } + &:insensitive { color: $insensitive_fg_color; } @@ -974,9 +953,9 @@ GtkComboBox { .linked.vertical > GtkComboBoxText:only-child > .button, .linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; } -/************ - * Toolbars * - ************/ +// +// Toolbars +// .toolbar { -GtkWidget-window-dragging: true; padding: 4px; @@ -1026,10 +1005,9 @@ GtkComboBox { .action-bar { background-color: darken($bg_color, 3%) } -/*************** - * Header bars * - ***************/ - +// +// Headerbars +// .header-bar { padding: 7px 7px 6px 7px; @@ -1193,7 +1171,7 @@ GtkComboBox { } %header_widgets { - // Header-bar Entries + // Headerbar Entries .entry { @include entry(header-normal); @@ -1237,7 +1215,7 @@ GtkComboBox { } } - // Header-bar Buttons + // Headerbar Buttons .button { @include button(header-normal); @@ -1290,7 +1268,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} { @@ -1316,7 +1294,7 @@ GtkComboBox { } } - // Header-bar Spinbuttons + // Headerbar Spinbuttons & .spinbutton { &:focus .button { @@ -1334,7 +1312,7 @@ GtkComboBox { } } - // Header-bar ComboBoxes + // Headerbar ComboBoxes & GtkComboBox{ &:insensitive { color: transparentize($header_fg, 0.6); } @@ -1367,7 +1345,7 @@ GtkComboBox { } } - // Header-bar Switches + // Headerbar Switches GtkSwitch { &:backdrop { opacity: 0.75; } } @@ -1379,7 +1357,7 @@ GtkComboBox { &:backdrop { opacity: 0.75; } } - // Header-bar Scale + // Headerbar Scale .scale { &:backdrop { opacity: 0.75; } @@ -1413,9 +1391,9 @@ GtkComboBox { } } -/************ - * Pathbars * - ************/ +// +// Pathbars +// .path-bar .button { padding-left: 6px; padding-right: 6px; @@ -1431,9 +1409,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; @@ -1545,9 +1523,9 @@ column-header.button.dnd { // for treeview-like derive widgets } } -/********* - * Menus * - *********/ +// +// Menus +// .menubar { -GtkWidget-window-dragging: true; padding: 0px; @@ -1625,10 +1603,9 @@ column-header.button.dnd { // for treeview-like derive widgets .menuitem .accelerator { color: gtkalpha(currentColor,0.55); } -/************ - * Popovers * - ************/ - +// +// Popovers +// .popover { margin: 10px; padding: 2px; @@ -1663,17 +1640,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; @@ -1687,15 +1657,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 @@ -1708,18 +1676,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; @@ -1840,10 +1800,9 @@ column-header.button.dnd { // for treeview-like derive widgets } } -/************** - * Scrollbars * - **************/ - +// +// Scrollbars +// $_scrollbar_bg_color: darken($base_color, 1%); .scrollbar { @@ -1908,9 +1867,9 @@ $_scrollbar_bg_color: darken($base_color, 1%); } -/********** - * Switch * - **********/ +// +// Switches +// GtkSwitch { font: 1; -GtkSwitch-slider-width: 41; @@ -1952,13 +1911,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') { @@ -1992,7 +1947,7 @@ GtkSwitch { } } -//selection-mode +// Selectionmode @each $s,$as in ('','-selectionmode'), (':checked', '-checked-selectionmode') { GtkIconView.view.check#{$s}, @@ -2015,9 +1970,9 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { } } -/************ - * GtkScale * - ************/ +// +// GtkScale +// .scale { -GtkScale-slider-length: 15; -GtkRange-slider-width: 15; @@ -2124,15 +2079,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; @@ -2171,24 +2124,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 { @@ -2224,9 +2175,9 @@ GtkLevelBar.vertical { } -/********** - * Frames * - **********/ +// +// Frames +// .frame { border: 1px solid $borders_color; &.flat { border-style: none; } @@ -2260,10 +2211,9 @@ GtkScrolledWindow { } } -/********* - * Lists * - *********/ - +// +// Lists +// .list, .list-row { background-color: $base_color; border-color: $borders_color; @@ -2308,10 +2258,9 @@ GtkScrolledWindow { &:hover { transition: none; } } -/********************* - * App Notifications * - *********************/ - +// +// App Notifications +// .app-notification, .app-notification.frame { padding: 10px; @@ -2337,20 +2286,19 @@ GtkScrolledWindow { } } -/************* - * Expanders * - *************/ - -GtkExpander { +// +// Expanders +// +.expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } &:hover { color: lighten($fg_color,30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } -/************ - * Calendar * - ***********/ +// +// Calendar +// GtkCalendar { color: $fg_color; border: 1px solid $borders_color; @@ -2383,9 +2331,9 @@ GtkCalendar { &.highlight { color: gtkalpha(currentColor,0.55); } } -/*********** - * Dialogs * - ***********/ +// +// Dialogs +// .message-dialog .dialog-action-area .button { padding: 8px; } @@ -2439,9 +2387,9 @@ GtkFileChooserDialog { } } -/*********** - * Sidebar * - ***********/ +// +// Sidebar +// .sidebar { border: none; background-color: $bg_color; @@ -2484,6 +2432,9 @@ GtkPlacesSidebar.sidebar .view { } } +// +// Paned +// GtkPaned { // This is actually the invisible area of the paned separator, not a margin... margin: 0 8px 8px 0; //drag area of the separator @@ -2499,9 +2450,9 @@ GtkPaned { background-image: linear-gradient(to bottom, $borders_color); } -/************** - * GtkInfoBar * - **************/ +// +// GtkInfoBar +// GtkInfoBar { border-style: none; @@ -2557,9 +2508,9 @@ GtkInfoBar { } } -/************ - * Tooltips * - ************/ +// +// Tooltips +// .tooltip { &.background { // background-color needs to be set this way otherwise it gets drawn twice @@ -2582,9 +2533,9 @@ GtkInfoBar { color: inherit; // just to be sure } -/***************** - * Color Chooser * - *****************/ +// +// Color Chooser +// GtkColorSwatch { border: none; @@ -2656,9 +2607,9 @@ GtkColorButton.button { GtkColorSwatch { border-radius: 0; } } -/******** - * Misc * - ********/ +// +// Misc +// .scale-popup .button { // +/- buttons on GtkVolumeButton popup padding: 6px; &:hover { @@ -2668,23 +2619,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 { @@ -2789,58 +2766,14 @@ GtkVolumeButton.button { padding: 8px; } .titlebar.selection-mode .left:dir(rtl) GtkMenuButton.button.titlebutton:last-child { padding: 4px 6px 4px 6px; - - @include button(undecorated); - - &:hover { - - } - &:active, &:checked { - - } - &:backdrop { } } -// 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); } -} |