From fbaccb03f215b7739eb2585ae308c338c3aec8c3 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 22 Dec 2016 13:06:01 +0100 Subject: [PATCH] introduce css variables --- src/css/dialogs-browse-local.css | 2 +- src/css/dialogs-cheatsheet.css | 8 ++++---- src/css/dialogs-create-palette.css | 8 ++++---- src/css/dialogs-import-image.css | 2 +- src/css/dialogs-performance-info.css | 2 +- src/css/dialogs-unsupported-browser.css | 2 +- src/css/dialogs.css | 4 ++-- src/css/forms.css | 4 ++-- src/css/frames-list.css | 8 ++++---- src/css/notifications.css | 4 ++-- src/css/pensize.css | 4 ++-- src/css/reset.css | 2 +- src/css/settings-application.css | 2 +- src/css/settings-export.css | 7 ++++--- src/css/settings-resize.css | 12 ++++++------ src/css/settings.css | 4 ++-- src/css/spectrum/spectrum-overrides.css | 4 ++-- src/css/style.css | 8 ++++---- src/css/toolbox-animated-preview.css | 10 +++++----- src/css/toolbox-layers-list.css | 4 ++-- src/css/toolbox-palettes-list.css | 2 +- src/css/tools.css | 2 +- src/css/variables.css | 3 +++ .../settings/exportimage/GifExportController.js | 2 +- src/piskel-style-list.js | 1 + src/templates/settings.html | 10 +++++----- src/templates/settings/export/misc.html | 4 ++-- src/templates/settings/export/png.html | 4 ++-- src/templates/settings/import.html | 2 +- 29 files changed, 68 insertions(+), 63 deletions(-) create mode 100644 src/css/variables.css diff --git a/src/css/dialogs-browse-local.css b/src/css/dialogs-browse-local.css index c1884055..f6ce2523 100644 --- a/src/css/dialogs-browse-local.css +++ b/src/css/dialogs-browse-local.css @@ -29,7 +29,7 @@ .local-piskel-list-head { font-weight: bold; - color: gold; + color: var(--highlight-color); } .local-piskel-load-button, diff --git a/src/css/dialogs-cheatsheet.css b/src/css/dialogs-cheatsheet.css index acf342ca..27dcf58f 100644 --- a/src/css/dialogs-cheatsheet.css +++ b/src/css/dialogs-cheatsheet.css @@ -3,7 +3,7 @@ bottom: 10px; left: 10px; - color : gold; + color : var(--highlight-color); font-weight: bold; font-size : 1.25em; line-height: 20px; @@ -113,8 +113,8 @@ } .cheatsheet-shortcut-editable .cheatsheet-key { - border-color: gold; - color: gold; + border-color: var(--highlight-color); + color: var(--highlight-color); } .cheatsheet-shortcut-editing .cheatsheet-key { @@ -140,7 +140,7 @@ padding : 10px; overflow: hidden; - background-color : gold; + background-color : var(--highlight-color); } .cheatsheet-helptext { diff --git a/src/css/dialogs-create-palette.css b/src/css/dialogs-create-palette.css index 2ebfc9db..3ca38335 100644 --- a/src/css/dialogs-create-palette.css +++ b/src/css/dialogs-create-palette.css @@ -103,7 +103,7 @@ transition : border-color 0.2s; } .create-palette-color:hover { - border:1px solid gold; + border:1px solid var(--highlight-color); } .colors-list-drop-proxy { @@ -111,17 +111,17 @@ } .create-palette-new-color { - border:2px dotted gold; + border:2px dotted var(--highlight-color); border-radius: 2px; line-height: 40px; text-align: center; font-size: 20px; - color: gold; + color: var(--highlight-color); } .create-palette-color.selected { - border:2px solid gold; + border:2px solid var(--highlight-color); } .create-palette-remove-color { diff --git a/src/css/dialogs-import-image.css b/src/css/dialogs-import-image.css index 538ffe5a..051710d1 100644 --- a/src/css/dialogs-import-image.css +++ b/src/css/dialogs-import-image.css @@ -81,7 +81,7 @@ font-style: italic; font-weight: normal; text-shadow: none; - color: gold; + color: var(--highlight-color); } [name=smooth-resize-checkbox] { diff --git a/src/css/dialogs-performance-info.css b/src/css/dialogs-performance-info.css index 3e7401d2..69b692ae 100644 --- a/src/css/dialogs-performance-info.css +++ b/src/css/dialogs-performance-info.css @@ -49,7 +49,7 @@ } .dialog-performance-info-body sup { - color: gold; + color: var(--highlight-color); cursor: pointer; } diff --git a/src/css/dialogs-unsupported-browser.css b/src/css/dialogs-unsupported-browser.css index d91e65ff..257bb556 100644 --- a/src/css/dialogs-unsupported-browser.css +++ b/src/css/dialogs-unsupported-browser.css @@ -28,5 +28,5 @@ } #current-user-agent { - color: gold; + color: var(--highlight-color); } diff --git a/src/css/dialogs.css b/src/css/dialogs.css index a8a35645..257912c8 100644 --- a/src/css/dialogs.css +++ b/src/css/dialogs.css @@ -39,7 +39,7 @@ -moz-box-sizing : border-box; border-radius: 3px; - border : 3px solid gold; + border : 3px solid var(--highlight-color); background: #444; overflow: auto; } @@ -76,7 +76,7 @@ .dialog-head { width: 100%; - background: gold; + background: var(--highlight-color); margin: 0; padding: 10px; color: black; diff --git a/src/css/forms.css b/src/css/forms.css index 47778c72..de93c90e 100644 --- a/src/css/forms.css +++ b/src/css/forms.css @@ -50,11 +50,11 @@ .button:hover { text-decoration: none; background-color: #484848; - color: gold; + color: var(--highlight-color); } .button-primary { - background-color: rgb(255,215,0); /* gold */ + background-color: var(--highlight-color); border-color: rgb(179, 164, 0); border-top-color: white; diff --git a/src/css/frames-list.css b/src/css/frames-list.css index 7de71faa..c7a3afc5 100644 --- a/src/css/frames-list.css +++ b/src/css/frames-list.css @@ -79,7 +79,7 @@ } .add-frame-action:hover { - border-color: gold; + border-color: var(--highlight-color); } .preview-tile { @@ -153,7 +153,7 @@ } .preview-tile.selected { - border-color: gold; + border-color: var(--highlight-color); } .preview-tile.selected:after { @@ -162,7 +162,7 @@ top: 38px; right: -9px; border: transparent 4px solid; - border-left-color: gold; + border-left-color: var(--highlight-color); border-width: 6px 0 6px 6px; border-style: solid; } @@ -173,6 +173,6 @@ */ .preview-tile-drop-proxy { - border: 3px dashed gold; + border: 3px dashed var(--highlight-color); background-color: rgba(255, 215,0, 0.2); } diff --git a/src/css/notifications.css b/src/css/notifications.css index b1ab2885..3cdfbb31 100644 --- a/src/css/notifications.css +++ b/src/css/notifications.css @@ -43,7 +43,7 @@ padding: 10px; width: 360px; border-top-right-radius: 2px; - border: gold 2px solid; + border: var(--highlight-color) 2px solid; border-left: 0; border-bottom: 0; background-color: #444; @@ -69,6 +69,6 @@ margin-top: 8px; height : 4px; width : 300px; - background : linear-gradient(to left, gold, gold) no-repeat -300px 0; + background : linear-gradient(to left, var(--highlight-color), var(--highlight-color)) no-repeat -300px 0; background-color : black; } \ No newline at end of file diff --git a/src/css/pensize.css b/src/css/pensize.css index d00779e5..696f045e 100644 --- a/src/css/pensize.css +++ b/src/css/pensize.css @@ -44,11 +44,11 @@ } .pen-size-option.selected:before { - background-color: gold; + background-color: var(--highlight-color); } .pen-size-option.selected { - border-color: gold; + border-color: var(--highlight-color); } .pen-size-option.labeled:before { diff --git a/src/css/reset.css b/src/css/reset.css index 12690c3f..8ad4e37a 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -47,5 +47,5 @@ input[type="range"] { } a, a:visited { - color:gold; + color: var(--highlight-color); } \ No newline at end of file diff --git a/src/css/settings-application.css b/src/css/settings-application.css index d8a9b6d0..2951bd08 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -27,7 +27,7 @@ } .background-picker.selected { - border-color: gold; + border-color: var(--highlight-color); } .layer-opacity-input { diff --git a/src/css/settings-export.css b/src/css/settings-export.css index 182aa534..0c475dff 100644 --- a/src/css/settings-export.css +++ b/src/css/settings-export.css @@ -113,7 +113,7 @@ width: 100%; height: 1px; z-index: 0; - background-color: gold; + background-color: var(--highlight-color); } .export-tab { @@ -128,11 +128,12 @@ .export-tab.selected, .export-tab:hover { - color: gold; + color: var(--highlight-color); } .export-tab.selected { - border-color: gold gold #444 gold; + border-color: var(--highlight-color); + border-bottom-color: #444; border-style: solid; border-width: 1px; } diff --git a/src/css/settings-resize.css b/src/css/settings-resize.css index ce8d97b7..5b547e0d 100644 --- a/src/css/settings-resize.css +++ b/src/css/settings-resize.css @@ -49,7 +49,7 @@ } .resize-origin-option.selected { - border : 3px solid gold; + border : 3px solid var(--highlight-color); } .resize-origin-option:before { @@ -65,7 +65,7 @@ content: ''; width: 4px; height: 4px; - background: gold; + background: var(--highlight-color); } .disabled .resize-origin-option.selected:before { @@ -85,23 +85,23 @@ } .resize-origin-option[data-neighbor="bottom"]:before { - border-top-color: gold; + border-top-color: var(--highlight-color); margin-left: -4px; } .resize-origin-option[data-neighbor="left"]:before { - border-right-color: gold; + border-right-color: var(--highlight-color); margin-top: -4px; margin-left: -6px; } .resize-origin-option[data-neighbor="top"]:before { - border-bottom-color: gold; + border-bottom-color: var(--highlight-color); margin-top: -6px; margin-left: -4px; } .resize-origin-option[data-neighbor="right"]:before { - border-left-color: gold; + border-left-color: var(--highlight-color); margin-top: -4px; } \ No newline at end of file diff --git a/src/css/settings.css b/src/css/settings.css index f5a615ef..a745c4ce 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -52,7 +52,7 @@ background-color: #444; margin-right: 0; padding-right: 2px; - border-left : 3px solid gold; + border-left : 3px solid var(--highlight-color); } /************************************************************************************************/ @@ -77,7 +77,7 @@ text-transform: uppercase; border-bottom: 1px #aaa solid; padding-bottom: 5px; - color: gold; + color: var(--highlight-color); } .settings-description { diff --git a/src/css/spectrum/spectrum-overrides.css b/src/css/spectrum/spectrum-overrides.css index 46a51795..7b293c2b 100644 --- a/src/css/spectrum/spectrum-overrides.css +++ b/src/css/spectrum/spectrum-overrides.css @@ -100,8 +100,8 @@ } .sp-palette .sp-thumb-el.sp-thumb-active { - border-color: gold; - box-shadow: 0 0 0px 1px gold; + border-color: var(--highlight-color); + box-shadow: 0 0 0px 1px var(--highlight-color); } .sp-input { diff --git a/src/css/style.css b/src/css/style.css index 3f69f9f3..c76ac6bd 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -17,11 +17,11 @@ body { } .no-overflow { - overflow : hidden; + overflow: hidden; } -.image-link { - color : gold; +.highlight { + color: var(--highlight-color); } .pull-top, @@ -59,7 +59,7 @@ body { * TOOLTIPS */ .tooltip-shortcut { - color:gold; + color: var(--highlight-color); } .tooltip-container { diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css index 86f30a2e..2d7b7db9 100644 --- a/src/css/toolbox-animated-preview.css +++ b/src/css/toolbox-animated-preview.css @@ -79,7 +79,7 @@ .preview-toggle-onion-skin-enabled, .preview-toggle-onion-skin-enabled:hover { - color : gold; + color : var(--highlight-color); } .preview-contextual-actions { @@ -114,8 +114,8 @@ } .original-size-button-enabled { - color: gold; - border-color: gold; + color: var(--highlight-color); + border-color: var(--highlight-color); } .preview-contextual-action { @@ -128,13 +128,13 @@ } .open-popup-preview-button:hover { - border-color: gold; + border-color: var(--highlight-color); } /** * The regular image is provided bby the sprite icons.png+icons.css */ .icon-minimap-popup-preview-arrow-white:hover { - background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold.png); + background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-var(--highlight-color).png); background-position: 0 0; } diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css index 83b094fc..b03e861c 100644 --- a/src/css/toolbox-layers-list.css +++ b/src/css/toolbox-layers-list.css @@ -35,7 +35,7 @@ .layers-toggle-preview-enabled, .layers-toggle-preview-enabled:hover { - color : gold; + color : var(--highlight-color); } /** @@ -88,5 +88,5 @@ .current-layer-item, .current-layer-item:hover { background : #333; - color: gold; + color: var(--highlight-color); } \ No newline at end of file diff --git a/src/css/toolbox-palettes-list.css b/src/css/toolbox-palettes-list.css index 7b2c63d5..136571cf 100644 --- a/src/css/toolbox-palettes-list.css +++ b/src/css/toolbox-palettes-list.css @@ -127,7 +127,7 @@ right: 0; background-color: black; - color: gold; + color: var(--highlight-color); font-family: Tahoma; font-size: 0.5em; diff --git a/src/css/tools.css b/src/css/tools.css index ff54cbf9..9406517e 100644 --- a/src/css/tools.css +++ b/src/css/tools.css @@ -17,7 +17,7 @@ position : absolute; height : 100%; width : 100%; - border: 3px solid gold; + border: 3px solid var(--highlight-color); box-sizing: border-box; } diff --git a/src/css/variables.css b/src/css/variables.css new file mode 100644 index 00000000..07172635 --- /dev/null +++ b/src/css/variables.css @@ -0,0 +1,3 @@ +html, body { + --highlight-color: gold; +} \ No newline at end of file diff --git a/src/js/controller/settings/exportimage/GifExportController.js b/src/js/controller/settings/exportimage/GifExportController.js index 75088aee..bf4d0f44 100644 --- a/src/js/controller/settings/exportimage/GifExportController.js +++ b/src/js/controller/settings/exportimage/GifExportController.js @@ -150,7 +150,7 @@ ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) { if (imageUrl) { - var linkTpl = '{{shortLink}}'; + var linkTpl = '{{shortLink}}'; var linkHtml = pskl.utils.Template.replace(linkTpl, { link : imageUrl, shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...') diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index b0719cad..337bf7c6 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -1,6 +1,7 @@ // This list is used both by the grunt build and index.html (in debug mode) (typeof exports != "undefined" ? exports : pskl_exports).styles = [ + "css/variables.css", "css/reset.css", "css/style.css", "css/animations.css", diff --git a/src/templates/settings.html b/src/templates/settings.html index 843fcd73..d9b643e2 100644 --- a/src/templates/settings.html +++ b/src/templates/settings.html @@ -2,35 +2,35 @@
diff --git a/src/templates/settings/export/misc.html b/src/templates/settings/export/misc.html index 054b3101..a9e93ef7 100644 --- a/src/templates/settings/export/misc.html +++ b/src/templates/settings/export/misc.html @@ -5,7 +5,7 @@
- Export as C File: + Export as C File: C file with frame rendered as array. @@ -14,7 +14,7 @@
- Export selected frame as PNG File: + Export selected frame as PNG File: PNG export of the currently selected frame. diff --git a/src/templates/settings/export/png.html b/src/templates/settings/export/png.html index ff032ce6..85d9eddd 100644 --- a/src/templates/settings/export/png.html +++ b/src/templates/settings/export/png.html @@ -2,7 +2,7 @@
Export your animation as a PNG spritesheet containing all frames.
-
Spritesheet layout options:
+
Spritesheet layout options:
Columns @@ -25,7 +25,7 @@
- Export for PixiJS Movie: + Export for PixiJS Movie:
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html index 85d9e3ac..de9c9224 100644 --- a/src/templates/settings/import.html +++ b/src/templates/settings/import.html @@ -45,7 +45,7 @@