From 15d387df5fd3eca1d8c08546b7666ab46474a0de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Tue, 4 Apr 2017 17:49:10 +0200 Subject: [PATCH] build: Switch to sassc for generating style GTK+ switched from ruby-based sass to c-based sassc for performance reasons. It makes sense to follow suit, if not to not require two tools for the same job ... https://bugzilla.gnome.org/show_bug.cgi?id=783210 --- configure.ac | 2 +- data/Makefile.am | 4 +-- data/theme/Gemfile | 1 - data/theme/README | 12 ++++---- data/theme/gnome-shell-high-contrast.css | 35 ++++++++++++++++++++---- data/theme/gnome-shell.css | 35 ++++++++++++++++++++---- data/theme/parse-sass.sh | 8 ++++-- 7 files changed, 72 insertions(+), 25 deletions(-) delete mode 100644 data/theme/Gemfile diff --git a/configure.ac b/configure.ac index 07e77ea4d..352448eea 100644 --- a/configure.ac +++ b/configure.ac @@ -250,7 +250,7 @@ if test -z "$GDBUS_CODEGEN"; then AC_MSG_ERROR([gdbus-codegen not found]) fi -AC_PATH_PROG([SASS],[sass],[]) +AC_PATH_PROG([SASSC],[sassc],[]) AC_CONFIG_FILES([ Makefile diff --git a/data/Makefile.am b/data/Makefile.am index 01280346e..c27054eba 100644 --- a/data/Makefile.am +++ b/data/Makefile.am @@ -69,9 +69,9 @@ dist_theme_files = \ $(NULL) %.css: %.scss $(theme_sources) - @if test -n "$(SASS)"; then \ + @if test -n "$(SASSC)"; then \ if $(AM_V_P); then PS4= set -x; else echo " GEN $@"; fi; \ - $(SASS) --sourcemap=none -f -q --update $<; \ + $(SASSC) -a $< $@; \ fi resource_files = $(shell $(GLIB_COMPILE_RESOURCES) --sourcedir=$(srcdir)/theme --generate-dependencies $(srcdir)/gnome-shell-theme.gresource.xml) diff --git a/data/theme/Gemfile b/data/theme/Gemfile deleted file mode 100644 index 99f8e2a63..000000000 --- a/data/theme/Gemfile +++ /dev/null @@ -1 +0,0 @@ -gem "sass", "~> 3.4.0" diff --git a/data/theme/README b/data/theme/README index 4c95dfd9a..e8a584517 100644 --- a/data/theme/README +++ b/data/theme/README @@ -3,10 +3,10 @@ Summary * Do not edit the CSS directly, edit the source SCSS files and process them with SASS (running `make` should do that when you have the required software installed, as described below; - run `/.parse-sass.sh` manually if it doesn't) -* To be able to use the lates/adequate version of sass, install ruby, gem, sass & bundle. - On Fedora F20, this is done with `sudo dnf install rubygems && gem install bundle && bundle install` - from the same directory this README resides in. + run `./parse-sass.sh` manually if it doesn't) +* Most SASS preprocessors should produce similar results, however the build system + integration and 'parse-sass.sh' script use sassc. You should be able to install + it with `pkcon install sassc` or your distribution's package manager. How to tweak the theme ---------------------- @@ -31,6 +31,4 @@ _common.scss - actual definitions of style for each widget. This is where your changes. You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the -_common.scss file, you can either run the ./parse-sass.sh script or keep SASS watching for changes as you -edit. This is done by running `bundle exec sass --watch --sourcemap=none .` If sass is out of date, or is -missing, you can install it with `bundle install`. +_common.scss file, you can either run make or the ./parse-sass.sh script. diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css index 30c11e2fb..ba743a463 100644 --- a/data/theme/gnome-shell-high-contrast.css +++ b/data/theme/gnome-shell-high-contrast.css @@ -118,6 +118,7 @@ StEntry { /* Scrollbars */ StScrollView.vfade { -st-vfade-offset: 68px; } + StScrollView.hfade { -st-hfade-offset: 68px; } @@ -152,14 +153,18 @@ StScrollBar { /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } + .check-box StBin { width: 24px; height: 22px; background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); } + .check-box:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); } + .check-box:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } + .check-box:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } @@ -337,6 +342,7 @@ StScrollBar { .show-processes-dialog-app-list-item-icon:ltr { padding-right: 17px; } + .show-processes-dialog-app-list-item-icon:rtl { padding-left: 17px; } @@ -720,9 +726,17 @@ StScrollBar { #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 0 5px; } - .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { + .unlock-screen #panel .panel-button, + .login-screen #panel .panel-button, + .lock-screen #panel .panel-button { color: white; } - .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { + .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, + .login-screen #panel .panel-button:focus, + .login-screen #panel .panel-button:hover, + .login-screen #panel .panel-button:active, + .lock-screen #panel .panel-button:focus, + .lock-screen #panel .panel-button:hover, + .lock-screen #panel .panel-button:active { color: white; } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { @@ -796,6 +810,7 @@ StScrollBar { .events-section-title:hover, .events-section-title:focus { background-color: #0d0d0d; } + .datemenu-today-button:active, .world-clocks-button:active, .weather-button:active, @@ -937,7 +952,7 @@ StScrollBar { color: #999999; font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, - fake this with some bottom padding */ + fake this with some bottom padding */ padding-bottom: 0.13em; } .message-secondary-bin > StIcon { @@ -1242,6 +1257,7 @@ StScrollBar { .list-search-result:active, .list-search-result:checked { background-color: rgba(23, 25, 26, 0.9); } + .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, .list-search-result:focus, .list-search-result:selected, @@ -1249,7 +1265,8 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.1); transition-duration: 200ms; } -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, +.app-well-app:active .overview-icon, +.app-well-app:checked .overview-icon, .app-well-app.app-folder:active .overview-icon, .app-well-app.app-folder:checked .overview-icon, .show-apps:active .overview-icon, @@ -1258,7 +1275,10 @@ StScrollBar { .grid-search-result:checked .overview-icon { background-color: rgba(23, 25, 26, 0.9); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } -.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, + +.app-well-app:hover .overview-icon, +.app-well-app:focus .overview-icon, +.app-well-app:selected .overview-icon, .app-well-app.app-folder:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-well-app.app-folder:selected .overview-icon, @@ -1686,7 +1706,8 @@ StScrollBar { padding: 100px 0px; } .login-dialog-user-selection-box .login-dialog-not-listed-label { padding-left: 2px; } - .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label { + .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, + .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label { color: #eeeeec; } .login-dialog-not-listed-label { @@ -1736,6 +1757,7 @@ StScrollBar { .user-widget-label:ltr { padding-left: 18px; } + .user-widget-label:rtl { padding-right: 18px; } @@ -1863,6 +1885,7 @@ StScrollBar { .lg-dialog StEntry { selection-background-color: #bbbbbb; selected-color: #333333; } + .lg-dialog .shell-link { color: #999999; } .lg-dialog .shell-link:hover { diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index d9bf7a1e7..f9e7fd8f5 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -118,6 +118,7 @@ StEntry { /* Scrollbars */ StScrollView.vfade { -st-vfade-offset: 68px; } + StScrollView.hfade { -st-hfade-offset: 68px; } @@ -152,14 +153,18 @@ StScrollBar { /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } + .check-box StBin { width: 24px; height: 22px; background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); } + .check-box:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); } + .check-box:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } + .check-box:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } @@ -337,6 +342,7 @@ StScrollBar { .show-processes-dialog-app-list-item-icon:ltr { padding-right: 17px; } + .show-processes-dialog-app-list-item-icon:rtl { padding-left: 17px; } @@ -720,9 +726,17 @@ StScrollBar { #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 0 5px; } - .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { + .unlock-screen #panel .panel-button, + .login-screen #panel .panel-button, + .lock-screen #panel .panel-button { color: white; } - .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { + .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, + .login-screen #panel .panel-button:focus, + .login-screen #panel .panel-button:hover, + .login-screen #panel .panel-button:active, + .lock-screen #panel .panel-button:focus, + .lock-screen #panel .panel-button:hover, + .lock-screen #panel .panel-button:active { color: white; } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { @@ -796,6 +810,7 @@ StScrollBar { .events-section-title:hover, .events-section-title:focus { background-color: #454c4c; } + .datemenu-today-button:active, .world-clocks-button:active, .weather-button:active, @@ -937,7 +952,7 @@ StScrollBar { color: #8e8e80; font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, - fake this with some bottom padding */ + fake this with some bottom padding */ padding-bottom: 0.13em; } .message-secondary-bin > StIcon { @@ -1242,6 +1257,7 @@ StScrollBar { .list-search-result:active, .list-search-result:checked { background-color: rgba(23, 25, 26, 0.9); } + .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, .list-search-result:focus, .list-search-result:selected, @@ -1249,7 +1265,8 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.1); transition-duration: 200ms; } -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, +.app-well-app:active .overview-icon, +.app-well-app:checked .overview-icon, .app-well-app.app-folder:active .overview-icon, .app-well-app.app-folder:checked .overview-icon, .show-apps:active .overview-icon, @@ -1258,7 +1275,10 @@ StScrollBar { .grid-search-result:checked .overview-icon { background-color: rgba(23, 25, 26, 0.9); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } -.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, + +.app-well-app:hover .overview-icon, +.app-well-app:focus .overview-icon, +.app-well-app:selected .overview-icon, .app-well-app.app-folder:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-well-app.app-folder:selected .overview-icon, @@ -1686,7 +1706,8 @@ StScrollBar { padding: 100px 0px; } .login-dialog-user-selection-box .login-dialog-not-listed-label { padding-left: 2px; } - .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label { + .login-dialog-not-listed-button:focus .login-dialog-user-selection-box .login-dialog-not-listed-label, + .login-dialog-not-listed-button:hover .login-dialog-user-selection-box .login-dialog-not-listed-label { color: #eeeeec; } .login-dialog-not-listed-label { @@ -1736,6 +1757,7 @@ StScrollBar { .user-widget-label:ltr { padding-left: 18px; } + .user-widget-label:rtl { padding-right: 18px; } @@ -1863,6 +1885,7 @@ StScrollBar { .lg-dialog StEntry { selection-background-color: #bbbbbb; selected-color: #333333; } + .lg-dialog .shell-link { color: #999999; } .lg-dialog .shell-link:hover { diff --git a/data/theme/parse-sass.sh b/data/theme/parse-sass.sh index e9cda2564..eca547eee 100755 --- a/data/theme/parse-sass.sh +++ b/data/theme/parse-sass.sh @@ -1,3 +1,7 @@ -#!/usr/bin/bash +#!/usr/bin/sh -bundle exec sass --update --sourcemap=none . +srcdir=`dirname $0` +for scss in $srcdir/*.scss +do + sassc -a $scss ${scss%%.scss}.css +done