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
This commit is contained in:
parent
e02d6e5285
commit
15d387df5f
@ -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
|
||||
|
@ -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)
|
||||
|
@ -1 +0,0 @@
|
||||
gem "sass", "~> 3.4.0"
|
@ -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.
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user