diff options
Diffstat (limited to 'data/theme/gnome-shell-sass/_drawing.scss')
| -rw-r--r-- | data/theme/gnome-shell-sass/_drawing.scss | 336 |
1 files changed, 336 insertions, 0 deletions
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss new file mode 100644 index 0000000..7c8959e --- /dev/null +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -0,0 +1,336 @@ +// Drawing mixins + +// generic drawing of more complex things + +@function draw_widget_edge($c:$borders_edge) { +// outer highlight "used" on most widgets + @return 0 1px $c; +} + +// provide font size in rem, with px fallback +@mixin fontsize($size: 24, $base: 16) { + font-size: round($size) + pt; + //font-size: ($size / $base) * 1rem; +} + +@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { +// +// Helper function to stack up to 4 box-shadows; +// + @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } + @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } + @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } + @else { box-shadow: $shadow1; } +} + +// entries + +@mixin entry($t, $fc:$selected_bg_color) { +// +// Entries drawing function +// +// $t: entry type +// $fc: focus color +// +// possible $t values: +// normal, focus, insensitive +// + + @if $t==normal { + background-color: lighten($bg_color, 5%); + color: transparentize($fg_color,0.3); + border: 2px solid lighten($bg_color, 5%); + } + + @if $t==focus { + background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%); + border-color: $fc; + color: $fg_color; + &:hover {} + } + + @if $t==hover { + background-color:lighten($hover_bg_color, 5%); + border-color:lighten($hover_bg_color, 5%); + color: transparentize($fg_color,0.3); + } + + @if $t==insensitive { + background-color:lighten($insensitive_bg_color, 5%); + border-color: lighten($insensitive_bg_color, 5%); + color: $insensitive_fg_color; + } +} + +// On-screen Keyboard +@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) { +// +// Keyboard key drawing function +// +// $t: key type, +// $c: base key color for colored* types +// $tc: optional text color for colored* types +// +// possible $t values: +// normal, hover, active, insensitive, insensitive-active, +// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, +// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated +// + + // normal key + @if $t==normal { + color: $tc; + background-color: lighten($c, 3%); + } + + // focused key + @if $t==focus { + color: $tc; + background-color: mix(lighten($c, 3%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); + &:hover { + background-color: mix(lighten($c, 8%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + } + &:active { + background-color: mix(lighten($c, 10%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + } + } + + // hover key + @else if $t==hover { + color: $tc; + background-color: lighten($c, 7%); + } + + // active key + @else if $t==active { + color: $tc; + background-color: lighten($c, 10%); + } + + // checked key + @else if $t==checked { + color: $tc; + background-color: lighten($c, 15%); + } + + // insensitive key + @else if $t==insensitive { + color: $insensitive_fg_color; + background-color: $insensitive_bg_color; + } + + // reset + @else if $t==undecorated { + background-color: transparent; + background-image: none; + } +} + +// +// Button drawing function +// +// $t: button type, +// $c: base button colors, derived from fg_color +// $tc: base button colors, derived from fg_color +// +// possible $t values: +// normal, hover, active, insensitive, insensitive-active, +// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, +// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated +// +// since buttons are all flat an borderless now the mixin is simpler + +@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) { + + $button_bg_color: mix($tc, $c, $button_mix_factor); + transition-duration: 100ms; + + // normal button + @if $t==normal { + color: $tc; + background-color: $button_bg_color; + @if $flat { + background-color: transparent; + } + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px $button_inset_color; + } + } + + // focused button + @if $t==focus { + color: $tc; + background-color: mix($button_bg_color, $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important; + &:hover { + background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; + } + &:active { + background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; + } + } + + // hover button + @else if $t==hover { + color: $tc; + background-color: lighten($button_bg_color, 3%); + + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%); + background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%); + } + } + + // active button + @else if $t==active { + color: $tc; + background-color: lighten($button_bg_color, 6%); + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); + background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); + } + } + + // checked button + @else if $t==checked { + color: $tc; + background-color: lighten($button_bg_color, 9%); + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); + background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%); + } + &:hover { background-color: lighten($button_bg_color, 12%);} + &:active { background-color: lighten($button_bg_color, 15%);} + } + + // insensitive button + @else if $t==insensitive { + color: transparentize($tc, 0.5); + background-color: transparentize($tc, .95); + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5); + } + } + + // default/suggested button + @else if $t==default { + background-color: $selected_bg_color; + color: $selected_fg_color; + box-shadow: none; + &:focus { + box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%); + } + &:hover, &:focus { + background-color: lighten($selected_bg_color, 5%); + color: lighten($selected_fg_color, 5%); + } + &:active { + background-color: darken($selected_bg_color, 7%); + color: darken($selected_fg_color, 7%); + } + &:insensitive { + @include button(insensitive); + background-color: transparentize($selected_bg_color, .5); + color: transparentize($selected_fg_color, .5); + } + } + + // reset + @else if $t==undecorated { + background-color: transparent; + background-color: none; + box-shadow: none; + &:insensitive { + @include button(insensitive); + background-color: transparent; + color: transparentize($selected_fg_color, .5); + } + } +} + +// tile +@mixin tile_button($color, $flat: true) { + @extend %tile; + @if $flat { + background-color: transparent; + } @else { + background-color: transparentize($color, .84); + } + &:hover { background-color: transparentize($color, .9);} + &:selected, &:focus { + background-color: transparentize($color, .87); + &:hover { background-color: transparentize($color, .84);} + &:active { background-color: transparentize($color, .87);} + } + &:active { background-color: transparentize($color, .84);} + &:outlined, &:checked { + background-color: transparentize($color, .81); + &:active { background-color: transparentize($color, .78);} + &:hover { background-color: transparentize($color, .75);} + } + &:drop { + border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping + background-color: transparentize($selected_bg_color, .8); + } +} + +// overview icon, dash, app grid +@mixin overview_icon($color, $flat: true) { + transition-duration: 400ms; + .overview-icon { @extend %tile; } + @if $flat { + .overview-icon { background-color: transparent;} + } @else { + .overview-icon { background-color: transparentize($color, .81);} + } + &:hover .overview-icon { background-color: transparentize($color, .9);} + + &:selected .overview-icon, + &:focus .overview-icon { + background-color: transparentize($color, .87); + &:hover .overview-icon { background-color: transparentize($color, .84);} + &:active .overview-icon { background-color: transparentize($color, .87);} + } + &:active .overview-icon { background-color: transparentize($color, .84);} + &:outlined .overview-icon, + &:checked .overview-icon { + background-color: transparentize($color, .81); + &:active .overview-icon { background-color: transparentize($color, .78);} + &:hover .overview-icon { background-color: transparentize($color, .75);} + } + &:drop .overview-icon { + border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping + background-color: transparentize($selected_bg_color, .8); + } +} + +// styling for elements within popovers that look like notifications +@mixin card($flat: false) { + border-radius: $base_border_radius; + margin: $base_margin; + box-shadow: inset 0 0 0 1px $card_outer_borders_color; + + @if $flat { + @include button(undecorated); + box-shadow: none !important; + } @else { + @include button(normal, $c:$card_bg_color); + } + + &:focus { + @include button(focus, $c:$card_bg_color); + } + + &:hover { + @include button(hover, $c:$card_bg_color); + } + + &:active { + @include button(active, $c:$card_bg_color); + } +} |