by roundabout, Thursday, 17 November 2016, 15:32:00 (1479396720), pushed by roundabout, Sunday, 11 May 2025, 13:22:02 (1746969722)
Author identity: nana-4 <hnmaigo@gmail.com>
15f07035836562249b720eb27b39170f1f627250
gnome-shell/sass/_common.scss
@@ -23,6 +23,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
*/
/* GLOBALS */
* {
transition-timing-function : $standard_curve;
@@ -233,7 +234,7 @@ StScrollBar {
color: $fg_color;
background-color: $base_color;
border: none;
box-shadow: $z-depth-4;
box-shadow: $shadow_4;
.modal-dialog-content-box {
padding: 24px;
}
@@ -584,7 +585,7 @@ StScrollBar {
.popup-menu-arrow { } //defined globally in the TOP BAR
.popup-sub-menu {
background-color: $alt_base_color;
box-shadow: $z-depth-0;
box-shadow: $shadow_0;
}
.popup-menu-content { padding: 8px 0; }
@@ -598,7 +599,7 @@ StScrollBar {
&:checked {
background-color: $primary_color;
color: $inverse_fg_color;
box-shadow: $z-depth-0;
box-shadow: $shadow_0;
font-weight: normal;
&.selected {
background-color: mix($inverse_fg_color, $primary_color, percentage($lower_opacity / 2));
@@ -654,7 +655,7 @@ StScrollBar {
margin: 5px 8px 8px;
background-color: $base_color;
border-radius: 2px;
box-shadow: $z-depth-2;
box-shadow: $shadow_2;
}
.popup-separator-menu-item {
@@ -794,7 +795,7 @@ StScrollBar {
color: $fg_color;
background-color: $base_color;
border: none;
box-shadow: $z-depth-4;
box-shadow: $shadow_4;
border-radius: 2px;
padding: 12px;
}
@@ -880,7 +881,7 @@ StScrollBar {
& > .system-status-icon { icon-shadow: none; }
}
.system-status-icon { @include em(16px); padding: 0 4px; }
.system-status-icon { icon-size: em(16px); padding: 0 4px; }
.unlock-screen &,
.login-screen &,
.lock-screen & {
@@ -1245,23 +1246,23 @@ StScrollBar {
// not really top bar only
.popup-menu-arrow { width: 16px; height: 16px; }
.popup-menu-icon { @include em(16px); }
.popup-menu-icon { icon-size: em(16px); }
//close buttons
.window-close {
height: $medium_size;
width: $medium_size;
-st-background-image-shadow: $z-depth-1;
-st-background-image-shadow: $shadow_1;
background-image: url("assets/window-close.svg");
background-size: $medium_size;
&:hover { -st-background-image-shadow: $z-depth-2; }
&:hover { -st-background-image-shadow: $shadow_2; }
&:active { background-image: url("assets/window-close-active.svg"); }
}
.window-close {
-shell-close-overlap: $medium_size / 2;
&:rtl { -st-background-image-shadow: $z-depth-1; }
&:rtl:hover { -st-background-image-shadow: $z-depth-2; }
&:rtl { -st-background-image-shadow: $shadow_1; }
&:rtl:hover { -st-background-image-shadow: $shadow_2; }
}
/* NETWORK DIALOGS */
@@ -1447,7 +1448,7 @@ StScrollBar {
padding: 7px 8px;
color: $fg_color;
background-color: $base_color;
box-shadow: $z-depth-2;
box-shadow: $shadow_2;
text-align: center;
-x-offset: 8px;
}
@@ -1525,7 +1526,7 @@ StScrollBar {
&:active .overview-icon,
&:checked .overview-icon {
background-color: $inverse_fill_color;
box-shadow: $z-depth-0;
box-shadow: $shadow_0;
transition-duration: 0.2s;
}
@@ -1661,13 +1662,13 @@ StScrollBar {
color: $fg_color;
background-color: $base_color;
border: none;
box-shadow: $z-depth-2;
box-shadow: $shadow_2;
&:hover { background-color: $base_color; }
&:focus { background-color: $base_color; }
.notification-icon { padding: 5px; }
.notification-content { padding: 5px; spacing: 5px; }
.secondary-icon { @include em(16px); }
.secondary-icon { icon-size: em(16px); }
.notification-actions {
background-color: transparent;
padding-top: 0;
@@ -1699,7 +1700,7 @@ StScrollBar {
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
}
.secondary-icon { @include em(16px); }
.secondary-icon { icon-size: em(16px); }
//chat bubbles
.chat-body { spacing: 5px; }
@@ -1846,7 +1847,7 @@ $legacy_icon_size: 24px;
-boxpointer-gap: 5px;
background-color: $base_color;
border-radius: 2px;
box-shadow: $z-depth-2;
box-shadow: $shadow_2;
}
// IBus Candidate Popup
@@ -1886,7 +1887,7 @@ $legacy_icon_size: 24px;
.candidate-page-button-previous { border-radius: 2px; border-right-width: 0; }
.candidate-page-button-next { border-radius: 2px; }
.candidate-page-button-icon { @include em(16px); }
.candidate-page-button-icon { icon-size: em(16px); }
/* Auth Dialogs & Screen Shield */
@@ -1928,19 +1929,18 @@ $legacy_icon_size: 24px;
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 0 16px;
@include button(flat-normal, $tc:$secondary_inverse_fg_color);
&:hover,&:focus { @include button(flat-hover, $c:$semi_inverse_fill_color, $tc:$inverse_fg_color); }
&:active { @include button(flat-active, $c:$inverse_fill_color, $tc:$inverse_fg_color); }
&:insensitive { @include button(flat-insensitive, $tc:$disabled_secondary_inverse_fg_color); }
&:default {
@include button(normal, $c:$suggested_color, $tc:$inverse_fg_color);
&:hover,&:focus { @include button(hover, $c:$suggested_color, $tc:$inverse_fg_color); }
&:active { @include button(active, $c:$suggested_color, $tc:$inverse_fg_color); }
&:insensitive { @include button(insensitive, $c:$disabled_inverse_fill_color, $tc:$disabled_inverse_fg_color); }
@include button(flat-normal, $tc: $inverse_fg_color);
&:hover,&:focus { @include button(flat-hover, $tc: $inverse_fg_color); }
&:active { @include button(flat-active, $tc: $inverse_fg_color); }
&:insensitive { @include button(flat-insensitive, $tc: $inverse_fg_color); }
}
}
}
.login-dialog-logo-bin { padding: 24px 0px; }
@@ -2039,12 +2039,12 @@ $legacy_icon_size: 24px;
width: 80px;
height: 48px;
-arrow-thickness: 12px;
-arrow-shadow: $z-depth-1;
-arrow-shadow: $shadow_1;
}
.screen-shield-clock {
color: white;
text-shadow: $z-depth-1;
text-shadow: $shadow_1;
font-weight: normal;
text-align: center;
padding-bottom: 1.5em;
@@ -2052,7 +2052,7 @@ $legacy_icon_size: 24px;
.screen-shield-clock-time {
@include font(display-4);
text-shadow: $z-depth-1;
text-shadow: $shadow_1;
}
.screen-shield-clock-date { @include font(display-2); }
@@ -2095,7 +2095,7 @@ $legacy_icon_size: 24px;
.screen-shield-background { //just the shadow, really
background: black;
box-shadow: $z-depth-5;
box-shadow: $shadow_5;
}
#lockDialogGroup {
@@ -2115,7 +2115,7 @@ $legacy_icon_size: 24px;
padding: 0;
border: none;
border-radius: 2px;
box-shadow: $z-depth-4;
box-shadow: $shadow_4;
& > #Toolbar {
padding: 0 8px;
border: none;
@@ -2212,5 +2212,5 @@ $legacy_icon_size: 24px;
border: none;
border-radius: 2px;
padding: 6px;
box-shadow: $z-depth-4;
box-shadow: $shadow_4;
}
gnome-shell/sass/_drawing.scss
@@ -1,249 +1,216 @@
// generic drawing of more complex things
// provide font size in pt, with px fallback
@mixin pt($size: $root-font-size) {
font-size: ($size * 0.75 / 1px) * 1pt;
@function pt($size: $root-font-size) {
@return ($size * 0.75 / 1px) + pt;
}
// provide icon size in em, with px fallback
@mixin em($size: 16px) {
icon-size: ($size / $root-font-size) * 1em;
@function em($size: 16px) {
@return ($size / $root-font-size) + em;
}
// Typography
// Reference URL:
// https://material.google.com/style/typography.html#typography-styles
@mixin font($size) {
@if $size==display-4 {
@if $size == display-4 {
// font-family: $large-font-family;
font-size: 112px;
font-weight: 300;
// line-height: 1;
}
@if $size==display-3 {
@if $size == display-3 {
// font-family: $large-font-family;
font-size: 56px;
font-weight: 400;
// line-height: 1;
}
@if $size==display-2 {
@if $size == display-2 {
// font-family: $large-font-family;
font-size: 45px;
font-weight: 400;
// line-height: 48px;
}
@if $size==display-1 {
@if $size == display-1 {
// font-family: $large-font-family;
font-size: 34px;
font-weight: 400;
// line-height: 40px;
}
@if $size==headline {
@include pt(24px);
@if $size == headline {
font-size: pt(24px);
font-weight: 400;
// line-height: 32px;
}
@if $size==title {
@include pt(20px);
@if $size == title {
font-size: pt(20px);
font-weight: 500;
// line-height: 1;
}
@if $size==subheading {
@include pt($subheading-size);
@if $size == subheading {
font-size: pt($subheading-size);
font-weight: 400;
// line-height: 24px;
}
@if $size==body-2 {
@include pt($root-font-size);
@if $size == body-2 {
font-size: pt($root-font-size);
font-weight: 500;
// line-height: 24px;
}
@if $size==body-1 {
@include pt($root-font-size);
@if $size == body-1 {
font-size: pt($root-font-size);
font-weight: 400;
// line-height: 20px;
}
@if $size==caption {
@include pt(12px);
@if $size == caption {
font-size: pt(12px);
font-weight: 400;
// line-height: 1;
}
@if $size==button {
@include pt($root-font-size);
@if $size == button {
font-size: pt($root-font-size);
font-weight: 500;
// line-height: 20px;
}
}
// shadows
// Reference URL:
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
$z-depth-0: 0 0 transparent;
$z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16 * 1.5), 0 3px 3px rgba(0, 0, 0, 0.23 * 1.5);
$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19 * 1.5), 0 6px 3px rgba(0, 0, 0, 0.23 * 1.5);
$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25 * 2), 0 10px 5px rgba(0, 0, 0, 0.22 * 2);
$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30 * 2), 0 15px 6px rgba(0, 0, 0, 0.22 * 2);
// entries
@mixin entry($t, $fc:$primary_color) {
@mixin entry($t, $fc: $primary_color) {
//
// Entries drawing function
// entry
//
// $t: entry type
// $fc: focus color
//
// possible $t values:
// normal, focus, insensitive
//
@if $t==normal {
background-color: if($fc!=$primary_color, rgba($bg_color, 0.01), rgba($base_color, 0.01));
border-color: transparent;
box-shadow: inset 0 -1px if($fc!=$primary_color, $fc, $fill_color);
}
@if $t==focus {
@if $t == focus {
border-color: transparent;
box-shadow: inset 0 -2px if($fc!=$primary_color, $fc, $primary_color);
box-shadow: inset 0 -2px $fc;
}
@if $t==hover { }
@if $t==insensitive {
@if $t == hover {
}
@if $t == insensitive {
color: $disabled_fg_color;
border-color: transparent;
box-shadow: inset 0 -1px if($fc!=$primary_color, $fc, $disabled_fill_color);
box-shadow: inset 0 -1px if($fc == $primary_color, $disabled_fill_color, $fc);
}
}
// buttons
@mixin button($t, $c:$base_color, $tc:$fg_color) {
@mixin button($t, $c: $base_color, $tc: $fg_color) {
//
// Button drawing function
// button
//
// $t: button type,
// $c: base button color for colored* types
// $tc: optional text color for colored* types
// $t: button type
// $c: base color
// $tc: text color
//
// possible $t values:
// normal, focus, hover, active, insensitive,
// flat-normal, flat-focus, flat-hover, flat-active, flat-insensitive
//
@if $t==normal {
//
// normal button
//
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
@if $t == normal {
color: if($tc == $fg_color, $secondary_fg_color, $tc);
background-color: $c;
border-color: transparent;
box-shadow: $z-depth-1;
box-shadow: $shadow_1;
text-shadow: none;
icon-shadow: none;
}
@if $t==focus {
//
// focused button
//
@if $t == focus {
color: $tc;
text-shadow: none;
icon-shadow: none;
box-shadow: 0 0 transparent;
// box-shadow: inset 0px 0px 0px 2px $fill_color;
box-shadow: $shadow_0;
// box-shadow: inset 0px 0px 0px 2px $fill_color;
}
@else if $t==hover {
//
// hovered button
//
color: if($tc!=$fg_color, $tc, $fg_color);
@if $t == hover {
color: $tc;
background-color: $c;
border-color: transparent;
box-shadow: $z-depth-2;
box-shadow: $shadow_2;
text-shadow: none;
icon-shadow: none;
}
@else if $t==active {
//
// pushed button
//
color: if($tc!=$fg_color, $tc, $fg_color);
@if $t == active {
color: $tc;
background-color: mix($tc, $c, percentage($lower_opacity));
border-color: transparent;
box-shadow: $z-depth-2;
box-shadow: $shadow_2;
text-shadow: none;
icon-shadow: none;
}
@else if $t==insensitive {
//
// insensitive button
//
color: if($tc!=$fg_color, $tc, $disabled_secondary_fg_color);
background-color: if($c!=$base_color, $c, $disabled_fill_color);
@if $t == insensitive {
color: if($tc == $fg_color, $disabled_secondary_fg_color, $tc);
background-color: if($c == $base_color, $disabled_fill_color, $c);
border-color: transparent;
box-shadow: 0 0 transparent;
box-shadow: $shadow_0;
text-shadow: none;
icon-shadow: none;
}
@if $t==flat-normal {
//
// normal flat button
//
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
@if $t == flat-normal {
color: if($tc != $inverse_fg_color, $secondary_fg_color, $secondary_inverse_fg_color);
background-color: transparent;
border-color: transparent;
box-shadow: 0 0 transparent;
box-shadow: $shadow_0;
text-shadow: none;
icon-shadow: none;
}
@if $t==flat-focus {
//
// focused flat button
//
color: $tc;
@if $t == flat-focus {
color: if($tc != $inverse_fg_color, $fg_color, $inverse_fg_color);
text-shadow: none;
icon-shadow: none;
box-shadow: 0 0 transparent;
// box-shadow: inset 0px 0px 0px 2px $fill_color;
box-shadow: $shadow_0;
// box-shadow: inset 0px 0px 0px 2px $fill_color;
}
@else if $t==flat-hover {
//
// hovered flat button
//
color: if($tc!=$fg_color, $tc, $fg_color);
background-color: if($c!=$base_color, $c, $semi_fill_color);
@if $t == flat-hover {
color: if($tc != $inverse_fg_color, $fg_color, $inverse_fg_color);
background-color: if($tc != $inverse_fg_color, $semi_fill_color, $semi_inverse_fill_color);
border-color: transparent;
box-shadow: 0 0 transparent;
box-shadow: $shadow_0;
text-shadow: none;
icon-shadow: none;
}
@else if $t==flat-active {
//
// pushed flat button
//
color: if($tc!=$fg_color, $tc, $fg_color);
background-color: if($c!=$base_color, $c, $fill_color);
@if $t == flat-active {
color: if($tc != $inverse_fg_color, $fg_color, $inverse_fg_color);
background-color: if($tc != $inverse_fg_color, $fill_color, $inverse_fill_color);
border-color: transparent;
box-shadow: 0 0 transparent;
box-shadow: $shadow_0;
text-shadow: none;
icon-shadow: none;
}
@else if $t==flat-insensitive {
//
// insensitive flat button
//
color: if($tc!=$fg_color, $tc, $disabled_secondary_fg_color);
@if $t == flat-insensitive {
color: if($tc != $inverse_fg_color, $disabled_secondary_fg_color, $disabled_secondary_inverse_fg_color);
background-color: transparent;
border-color: transparent;
box-shadow: 0 0 transparent;
box-shadow: $shadow_0;
text-shadow: none;
icon-shadow: none;
}
}
gnome-shell/sass/_extensions.scss
@@ -1,86 +1,86 @@
/* Dash to Dock */
#dashtodockContainer #dash {
background-color: $bg_color;
background-color: $bg_color;
}
#dashtodockContainer:overview #dash {
background-color: $inverse_bg_color;
background-color: $inverse_bg_color;
}
#dashtodockContainer.extended:overview #dash {
background-color: transparent;
background-color: transparent;
}
#dashtodockContainer.left #dash,
#dashtodockContainer.right #dash {
padding: 3px 0;
padding: 3px 0;
}
#dashtodockContainer.top #dash,
#dashtodockContainer.bottom #dash {
padding: 0 3px;
padding: 0 3px;
}
#dashtodockContainer.extended #dash {
padding: 0;
border-radius: 0;
padding: 0;
border-radius: 0;
}
#dashtodockContainer.left .dash-item-container > StWidget,
#dashtodockContainer.right .dash-item-container > StWidget,
#dashtodockContainer.extended.left .dash-item-container > StWidget,
#dashtodockContainer.extended.right .dash-item-container > StWidget {
padding: 3px 6px;
padding: 3px 6px;
}
#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
padding: 6px 6px 3px 6px;
padding: 6px 6px 3px 6px;
}
#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
padding: 3px 6px 6px 6px;
padding: 3px 6px 6px 6px;
}
#dashtodockContainer.top .dash-item-container > StWidget,
#dashtodockContainer.bottom .dash-item-container > StWidget,
#dashtodockContainer.extended.top .dash-item-container > StWidget,
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
padding: 6px 3px;
padding: 6px 3px;
}
#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
padding: 6px 3px 6px 6px;
padding: 6px 3px 6px 6px;
}
#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
padding: 6px 6px 6px 3px;
padding: 6px 6px 6px 3px;
}
#dashtodockContainer .app-well-app-running-dot {
background-color: transparent;
background-color: transparent;
}
#dashtodockContainer .dash-item-container > StWidget {
background-size: cover;
}
@each $p,$pt in ('.left', 'left'),
('.right', 'right'),
('.top', 'top'),
('.bottom', 'bottom') {
@each $n,$nb in ('.running1','running1'),
('.running2','running2'),
('.running3','running3'),
('.running4','running4') {
@each $f,$fc in ('',''),
('.focused','-focused') {
background-size: cover;
}
@each $p, $pt in ('.left', 'left'),
('.right', 'right'),
('.top', 'top'),
('.bottom', 'bottom') {
@each $n, $nb in ('.running1', 'running1'),
('.running2', 'running2'),
('.running3', 'running3'),
('.running4', 'running4') {
@each $f, $fc in ('', ''),
('.focused', '-focused') {
#dashtodockContainer#{$p} .dash-item-container > StWidget#{$n}#{$f} {
background-image: url("assets/#{$pt}-#{$nb}#{$fc}.svg");
background-image: url("assets/#{$pt}-#{$nb}#{$fc}.svg");
}
}
}
@@ -90,7 +90,7 @@
/* Simple Dock */
#dash:desktop {
background-color: $bg_color;
background-color: $bg_color;
}
@@ -102,6 +102,7 @@
selection-background-color: $primary_color;
selected-color: $inverse_fg_color;
@include entry(normal);
&:focus {
@include entry(focus);
color: $fg_color;
@@ -114,4 +115,3 @@
}
}
}
gnome-shell/sass/_variables.scss
@@ -54,11 +54,9 @@ $shadow_transition: box-shadow $shorter_duration $deceleration_curve;
// based shadow values:
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png
// box-shadow 1px blur doesn't draw correctly, see
// https://bugzilla.gnome.org/show_bug.cgi?id=738484
// $shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
$shadow_1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$shadow_2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
$shadow_3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
$shadow_4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
$shadow_5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
$shadow_0: 0 0 transparent;
$shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
$shadow_2: 0 3px 3px rgba(0, 0, 0, 0.16 * 1.5), 0 3px 3px rgba(0, 0, 0, 0.23 * 1.5);
$shadow_3: 0 10px 10px rgba(0, 0, 0, 0.19 * 1.5), 0 6px 3px rgba(0, 0, 0, 0.23 * 1.5);
$shadow_4: 0 14px 14px rgba(0, 0, 0, 0.25 * 2), 0 10px 5px rgba(0, 0, 0, 0.22 * 2);
$shadow_5: 0 19px 19px rgba(0, 0, 0, 0.30 * 2), 0 15px 6px rgba(0, 0, 0, 0.22 * 2);