[gnome-shell/wip/sassWithSomeFixes: 30/62] theme: rewrite to be structured - using SASS - trying to reuse as much of the gtk adwaita as possibl
- From: Carlos Soriano Sánchez <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/sassWithSomeFixes: 30/62] theme: rewrite to be structured - using SASS - trying to reuse as much of the gtk adwaita as possibl
- Date: Mon, 10 Nov 2014 16:10:44 +0000 (UTC)
commit 1763ab8d6deefb03f68508682dc682c2ca14795c
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Mon Nov 10 15:21:52 2014 +0100
theme: rewrite to be structured
- using SASS
- trying to reuse as much of the gtk adwaita as possible
- ignore data/theme/gnome-shell.css since now it is generated
.gitignore | 1 +
data/theme/_colors.scss | 44 +++
data/theme/_common.scss | 94 ++++++
data/theme/_drawing.scss | 311 ++++++++++++++++++++
.../{gnome-shell.css => _gnome-shell-old.scss} | 181 ------------
data/theme/gnome-shell.scss | 6 +
6 files changed, 456 insertions(+), 181 deletions(-)
---
diff --git a/.gitignore b/.gitignore
index bd6eb74..739ab4c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,6 +45,7 @@ docs/reference/*/*.types
docs/reference/*/html/
docs/reference/*/xml/
docs/reference/shell/doc-gen-*
+data/theme/gnome-shell.css
gtk-doc.make
js/misc/config.js
js/js-resources.c
diff --git a/data/theme/_colors.scss b/data/theme/_colors.scss
new file mode 100644
index 0000000..d1fa4b6
--- /dev/null
+++ b/data/theme/_colors.scss
@@ -0,0 +1,44 @@
+// When color definition differs for dark and light variant,
+// it gets @if ed depending on $variant
+
+
+$base_color: if($variant =='light', #ffffff, #292929);
+$bg_color: if($variant =='light', #ededed, #393f3f);
+$fg_color: if($variant =='light', #2e3436, #eeeeec);
+
+$selected_fg_color: #ffffff;
+$selected_bg_color: if($variant == 'light', #4a90d9, darken(#4a90d9,20%));
+$selected_borders_color: if($variant=='light', darken($selected_bg_color, 30%),
+ darken($selected_bg_color, 20%));
+$borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%));
+$borders_edge: if($variant =='light', white, transparentize($fg_color, 0.9));
+$link_color: if($variant == 'light', darken($selected_bg_color,10%),
+ lighten($selected_bg_color,20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%),
+ lighten($selected_bg_color,10%));
+$top_hilight: $borders_edge;
+
+$warning_color: #f57900;
+$error_color: #cc0000;
+$success_color: if($variant =='light', #73d216, darken(#73d216,10%));
+$destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
+
+$osd_fg_color: #eeeeec;
+$osd_bg_color: #2e3436;
+$osd_borders_color: transparentize(black, 0.3);
+$osd_outer_borders_color: transparentize(white, 0.9);
+
+$tooltip_borders_color: $osd_outer_borders_color;
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main colors.
+$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
+$backdrop_bg_color: $bg_color;
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
+$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%),
lighten($backdrop_bg_color,15%));
+$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
+$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
new file mode 100644
index 0000000..b9e6f08
--- /dev/null
+++ b/data/theme/_common.scss
@@ -0,0 +1,94 @@
+//This is the RIGHT PLACE to edit the stylesheet
+
+//let's start by telling people not to edit the generated CSS:
+$cakeisalie: "This stylesheet is generated, DO NOT EDIT";
+/* #{$cakeisalie} */
+
+/* Copyright 2009, Red Hat, Inc.
+ *
+ * Portions adapted from Mx's data/style/default.css
+ * Copyright 2009 Intel Corporation
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms and conditions of the GNU Lesser General Public License,
+ * version 2.1, as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+
+/* GLOBALS */
+$font-size: 11;
+$font-family: Cantarell, Sans-Serif;
+
+stage {
+ font-family: $font-family;
+ @include fontsize($font-size);
+ color: $fg_color;
+}
+
+/* WIDGETS */
+
+/* Buttons */
+//one would think we may want a generic button class:
+.candidate-page-button,
+.notification-button,
+.notification-icon-button,
+.hotplug-notification-item,
+.hotplug-resident-eject-button,
+.modal-dialog-button,
+.app-view-control {
+ border-radius: 3px;
+ border-width: 1px;
+ padding: 4px 32px;
+ @include button(normal);
+ &:hover { @include button(hover); }
+ &:focus { @include button(focus); }
+ &:insensitive { @include button(insensitive); }
+ &:active { @include button(active); }
+}
+
+/* Entries */
+
+/* Scrollbars */
+
+StScrollBar {
+ padding: 0;
+ &.vfade { -st-vfade-offset: 68px; }
+ &.hfade { -st-hfade-offset: 68px; }
+
+ StScrollView & {
+ min-width: 14px;
+ min-height: 14px;
+ }
+
+ StBin#trough {
+ border-radius: 0;
+ background-color: $osd_bg_color;
+ }
+
+ StButton#vhandle, StButton#hhandle {
+ border-radius: 6px;
+ background-color: $bg_color;
+ border: 3px solid $osd_bg_color;
+ &:hover { background-color: lighten($bg_color,10%); }
+ &:active { background-color: $selected_bg_color; }
+ }
+}
+
+/* links */
+.shell-link {
+ color: $link_color;
+ &:hover { color: lighten($link_color,10%); }
+}
+
+/* TOP BAR */
+
+/* NOTIFICATIONS & MESSAGE TRAY */
diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss
new file mode 100644
index 0000000..acd989b
--- /dev/null
+++ b/data/theme/_drawing.scss
@@ -0,0 +1,311 @@
+// Drawing mixins
+
+// generic drawing of more complex things
+
+ function _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 _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
+
+ function entry_gradient($c) {
+ @return linear-gradient(to bottom, darken($c,3%), $c 90%);
+}
+
+ mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
+//
+// Entries drawing function
+//
+// $t: entry type
+// $fc: focus color
+// $edge: set to none to not draw the bottom edge or specify a color to not
+// use the default one
+//
+// possible $t values:
+// normal, focus, insensitive, backdrop, backdrop-insensitive;
+//
+ background-color: transparent;
+ background-image: entry_gradient($base_color);
+ $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1));
+ $_entry_edge: if($edge == none, none, _widget_edge($edge));
+ $_inner_shadows: inset 0 3px transparentize(black, 0.98),
+ inset 0 2px transparentize(black, 0.97),
+ inset 0 1px transparentize(black, 0.92);
+
+ // we need to match the same shadow types (inset/outset) in various states
+ // hence transparent shadows istead of resetting them when not needed
+ $_blank_inner_shadows: inset 0 3px transparentize(black, 1),
+ inset 0 2px transparentize(black, 1),
+ inset 0 1px transparentize(black, 1);
+ $_focus_glow_color: if($variant=='light', transparentize($fc,0.85),
+ transparentize($fc,0.3));
+
+ @if $t==normal {
+ border-color: $borders_color;
+ @include _shadows($_inner_shadows,
+ inset 0 0 0 1px transparentize($fc,1),
+ $_entry_edge);
+ // the second transparent shadow is needed for the transition to work
+ }
+ @if $t==focus {
+ @include _shadows($_inner_shadows,
+ inset 0 0 0 1px $_focus_glow_color,
+ $_entry_edge);
+ @if $variant == 'light' { border-color: $fc; }
+ @else {
+ border-color: if($fc==$selected_bg_color,
+ $selected_borders_color,
+ darken($fc,35%));
+ }
+ }
+ @if $t==insensitive {
+ color: $insensitive_fg_color;
+ border-color: $borders_color;
+ background-image: linear-gradient(to bottom, $insensitive_bg_color);
+ @include _shadows($_blank_inner_shadows, $_entry_edge);
+
+ }
+ @if $t==backdrop {
+ color: $backdrop_fg_color;
+ border-color: $backdrop_borders_color;
+ background-image: linear-gradient(to bottom, $backdrop_base_color);
+ @include _shadows($_blank_inner_shadows, $_blank_edge);
+ }
+ @if $t==backdrop-insensitive {
+ color: $backdrop_insensitive_color;
+ border-color: $backdrop_borders_color;
+ background-image: linear-gradient(to bottom, $insensitive_bg_color);
+ @include _shadows($_blank_inner_shadows, $_blank_edge);
+ }
+}
+
+// buttons
+
+ function _border_color ($c) { @return darken($c,25%); } // colored buttons want
+ // the border form the
+ // base color
+
+ function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
+//
+// calculate the color of text shadows
+//
+// $tc is the text color
+// $bg is the background color
+//
+ $_lbg: lightness($bg)/100%;
+ @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
+ @else { @return transparentize(black,$_lbg*0.8); }
+}
+
+ function _button_hilight_color($c) {
+//
+// calculate the right top hilight color for buttons
+//
+// $c: base color;
+//
+ @if lightness($c)>90% { @return white; }
+ @else if lightness($c)>80% { @return transparentize(white, 0.3); }
+ @else if lightness($c)>50% { @return transparentize(white, 0.5); }
+ @else if lightness($c)>40% { @return transparentize(white, 0.7); }
+ @else { @return transparentize(white, 0.9); }
+}
+
+ mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
+//
+// helper function for the text emboss effect
+//
+// $tc is the optional text color, not the shadow color
+//
+// TODO: this functions needs a way to deal with special cases
+//
+
+ $_shadow: _text_shadow_color($tc, $bg);
+
+ @if lightness($tc)<50% {
+ text-shadow: 0 1px $_shadow;
+ icon-shadow: 0 1px $_shadow;
+ }
+ @else {
+ text-shadow: 0 -1px $_shadow;
+ icon-shadow: 0 -1px $_shadow;
+ }
+}
+
+ mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) {
+//
+// Button drawing function
+//
+// $t: button type,
+// $c: base button color for colored* types
+// $tc: optional text color for colored* types
+// $edge: set to none to not draw the bottom edge or specify a color to not
+// use the default one
+//
+// 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
+//
+
+ $_hilight_color: _button_hilight_color($c);
+ $_button_edge: if($edge == none, none, _widget_edge($edge));
+ $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
+
+
+ @if $t==normal {
+ //
+ // normal button
+ //
+ $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5),
+ $osd_bg_color);
+
+ color: $osd_fg_color;
+ background-color: $_bg;
+ border-color: $osd_borders_color;
+ box-shadow: inset 0 1px lighten($osd_bg_color,10%);
+ text-shadow: 0 1px black;
+ icon-shadow: 0 1px black;
+ }
+ @if $t==focus {
+ //
+ // focused button
+ //
+ $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5),
+ $osd_bg_color);
+
+ color: $osd_fg_color;
+ border-color: $selected_bg_color;
+ box-shadow: inset 0 1px lighten($osd_bg_color,10%);
+ text-shadow: 0 1px black;
+ icon-shadow: 0 1px black;
+ }
+
+ @else if $t==hover {
+ //
+ // active osd button
+ //
+ $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3),
+ lighten($osd_bg_color,10%));
+
+ color: white;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ box-shadow: inset 0 1px lighten($osd_bg_color,20%);
+ text-shadow: 0 1px black;
+ icon-shadow: 0 1px black;
+
+ }
+ @else if $t==active {
+ //
+ // active osd button
+ //
+ $_bg: if($c!=$bg_color, $c, $osd_borders_color);
+
+ color: white;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ box-shadow: none;
+ text-shadow: none;
+ icon-shadow: none;
+ }
+ @else if $t==insensitive {
+ //
+ // insensitive osd button
+ //
+ $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3);
+
+ color: $insensitive_fg_color;
+ border-color: $osd_borders_color;
+ background-color: $_bg;
+ box-shadow: none;
+ text-shadow: none;
+ icon-shadow: none;
+ }
+ @else if $t==undecorated {
+ //
+ // reset
+ //
+ border-color: transparent;
+ background-color: transparent;
+ background-image: none;
+
+ @include _shadows(inset 0 1px transparentize(white,1),
+ $_blank_edge);
+
+ text-shadow: none;
+ icon-shadow: none;
+ }
+}
+
+ mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
+ color: mix($tc,$bg_color,80%);
+ @if $flat { background-image: linear-gradient(to bottom,$c); }
+ @else {
+ background-image: linear-gradient(to bottom,
+ mix(black,$c,15%) 5%,
+ mix(black,$c,10%) 20%,
+ mix(black,$c,10%) 90%,
+ $c);
+ }
+
+ border-color: if($c!=$bg_color, _border_color($c), $border_color);
+
+ @if not($noedge) {
+ @if lightness($c) > 60% {
+ box-shadow: inset 0 -1px $borders_edge,
+ 0 1px $borders_edge;
+ }
+ @else {
+ box-shadow: inset 0 -1px transparentize($borders_edge,0.5),
+ 0 1px transparentize($borders_edge,0.5);
+ }
+ }
+ @else { box-shadow: none; }
+}
+
+ mixin progressbar_fill($d:horizontal) {
+ $dir: if($d==vertical,right,bottom);
+ background-image: linear-gradient(to $dir, $selected_bg_color 2px,
+ lighten($selected_bg_color,6%));
+}
+
+ function headerbar_gradient($c, $tc:lighten($c,4%)) {
+//
+// headerbar gradient helper function
+//
+// $c: base color
+// $tc: top color
+//
+ @return linear-gradient(to bottom, $tc, $c);
+}
+
+ mixin headerbar_fill($c:$bg_color, $tc:lighten($c,4%), $hc:$top_hilight) {
+//
+// headerbar fill
+//
+// $c: base color
+// $tc: top color
+// $hc: top highlight color
+//
+ background-image: headerbar_gradient($c, $tc);
+ box-shadow: inset 0 -1px mix(_border_color($c), $c, 30%), // bottom shade
+ inset 0 1px $hc; // top highlight
+
+}
diff --git a/data/theme/gnome-shell.css b/data/theme/_gnome-shell-old.scss
similarity index 92%
rename from data/theme/gnome-shell.css
rename to data/theme/_gnome-shell-old.scss
index b0c2fc7..a8ba428 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/_gnome-shell-old.scss
@@ -20,84 +20,6 @@
/* Text Styles */
/* default text style */
-stage {
- font-family: cantarell, sans-serif;
- font-size: 11pt;
- color: white;
-}
-
-/* links */
-.shell-link {
- color: #0000ff;
- text-decoration: underline;
-}
-
-.shell-link:hover {
- color: #0000e0;
-}
-
-/* small */
-.app-well-menu,
-.run-dialog-error-label {
- font-size: 9pt;
-}
-
-/* small bold */
-.dash-label,
-.window-caption,
-.switcher-list,
-.app-well-app > .overview-icon,
-.show-apps > .overview-icon,
-.grid-search-result .overview-icon {
- font-size: 9pt;
- font-weight: bold;
-}
-
-/* Scroll Bars */
-
-StScrollBar {
- padding: 0px;
-}
-
-StScrollView.vfade {
- -st-vfade-offset: 68px;
-}
-
-StScrollView.hfade {
- -st-hfade-offset: 68px;
-}
-
-StScrollView StScrollBar {
- min-width: 14px;
- min-height: 14px;
-}
-
-StScrollBar StBin#trough {
- background-color: rgba(0,0,0,0.3);
- border-radius: 8px;
-}
-
-StScrollBar StButton#vhandle {
- background-color: #5d6464;
- border: 2px solid #242424;
- border-radius: 8px;
-}
-
-StScrollBar StButton#hhandle {
- background-color: #5d6464;
- border: 2px solid #242424;
- border-radius: 8px;
-}
-
-StScrollBar StButton#hhandle:hover,
-StScrollBar StButton#vhandle:hover {
- background-color: #777d7c;
-}
-
-StScrollBar StButton#hhandle:active,
-StScrollBar StButton#vhandle:active {
- background-color: #3465a4;
-}
/* Check Boxes */
@@ -232,10 +154,6 @@ StScrollBar StButton#vhandle:active {
border-width: 0px;
}
-.app-well-menu {
- max-width: 400px;
-}
-
/* The remaining popup-menu sizing is all done in ems, so that if you
* override .popup-menu.font-size, everything else will scale with it.
*/
@@ -415,92 +333,6 @@ StScrollBar StButton#vhandle:active {
spacing: 12px;
}
-/* Buttons */
-
-.candidate-page-button,
-.notification-button,
-.notification-icon-button,
-.hotplug-notification-item,
-.hotplug-resident-eject-button,
-.modal-dialog-button,
-.app-view-control {
- border: 1px solid #8b8b8b;
- background-gradient-direction: vertical;
- background-gradient-start: rgba(255, 255, 255, 0.2);
- background-gradient-end: rgba(255, 255, 255, 0);
-}
-
-.modal-dialog-button {
- font-weight: bold;
-}
-
-.candidate-page-button:hover,
-.notification-button:hover,
-.notification-icon-button:hover,
-.hotplug-notification-item:hover,
-.hotplug-resident-eject-button:hover,
-.modal-dialog-button:hover {
- background-gradient-start: rgba(255, 255, 255, 0.3);
- background-gradient-end: rgba(255, 255, 255, 0.1);
-}
-
-.notification-button:focus,
-.notification-icon-button:focus,
-.hotplug-notification-item:focus,
-.modal-dialog-button:focus,
-.app-view-control:focus {
- border-width: 2px;
-}
-
-.app-view-control:first-child:ltr:focus,
-.app-view-control:last-child:rtl:focus {
- border-right-width: 1px;
-}
-
-.candidate-page-button:active,
-.candidate-page-button:pressed,
-.notification-button:active,
-.notification-icon-button:active,
-.hotplug-notification-item:active,
-.hotplug-resident-eject-button:active,
-.modal-dialog-button:active,
-.modal-dialog-button:pressed,
-.app-view-control:checked {
- background-gradient-start: rgba(255, 255, 255, 0);
- background-gradient-end: rgba(255, 255, 255, 0.2);
-}
-
-.candidate-page-button:insensitive,
-.notification-button:insensitive,
-.notification-icon-button:insensitive,
-.modal-dialog-button:insensitive {
- border-color: #666666;
- color: #9f9f9f;
- background-gradient-direction: none;
- background-color: rgba(102, 102, 102, 0.15);
-}
-
-/* Common radii */
-
-.search-entry,
-.modal-dialog-button,
-.notification-button,
-.hotplug-notification-item,
-.app-view-controls,
-#screenShieldNotifications {
- border-radius: 18px;
-}
-
-.app-view-control:first-child:ltr,
-.app-view-control:last-child:rtl {
- border-radius: 18px 0px 0px 18px;
- border-right-width: 0px;
-}
-
-.app-view-control:last-child:ltr,
-.app-view-control:first-child:rtl {
- border-radius: 0px 18px 18px 0px;
-}
/* Entries */
@@ -829,7 +661,6 @@ StScrollBar StButton#vhandle:active {
.window-clone-border {
border: 4px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
}
.notification-close {
@@ -1495,10 +1326,6 @@ StScrollBar StButton#vhandle:active {
text-align: right;
}
-.events-day-time-ellipses {
- color: rgba(153, 153, 153, 1.0);
-}
-
.events-day-time:rtl {
text-align: left;
}
@@ -1978,14 +1805,6 @@ StScrollBar StButton#vhandle:active {
padding-top: 50px;
}
-.modal-dialog-button {
- padding: 4px 32px 5px;
-}
-
-.modal-dialog-button:focus {
- padding: 3px 31px 4px;
-}
-
/* Run Dialog */
.run-dialog-label {
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss
new file mode 100644
index 0000000..1ef9f29
--- /dev/null
+++ b/data/theme/gnome-shell.scss
@@ -0,0 +1,6 @@
+$variant: 'dark';
+
+ import "_gnome-shell-old.scss"; //temporary
+ import "_colors"; //use gtk colors
+ import "_drawing";
+ import "_common";
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
