mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

introduce css variables

Browse Source
This commit is contained in:
Julian Descottes 2016-12-22 13:06:01 +01:00
parent dd9b1e0189
commit fbaccb03f2
29 changed files with 68 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/dialogs-browse-local.css
View File

@ -29,7 +29,7 @@
.local-piskel-list-head {
font-weight: bold;
color: gold;
color: var(--highlight-color);
}
.local-piskel-load-button,

8
src/css/dialogs-cheatsheet.css
View File

@ -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 {

8
src/css/dialogs-create-palette.css
View File

@ -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 {

2
src/css/dialogs-import-image.css
View File

@ -81,7 +81,7 @@
font-style: italic;
font-weight: normal;
text-shadow: none;
color: gold;
color: var(--highlight-color);
}
[name=smooth-resize-checkbox] {

2
src/css/dialogs-performance-info.css
View File

@ -49,7 +49,7 @@
}
.dialog-performance-info-body sup {
color: gold;
color: var(--highlight-color);
cursor: pointer;
}

2
src/css/dialogs-unsupported-browser.css
View File

@ -28,5 +28,5 @@
}
#current-user-agent {
color: gold;
color: var(--highlight-color);
}

4
src/css/dialogs.css
View File

@ -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;

4
src/css/forms.css
View File

@ -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;

8
src/css/frames-list.css
View File

@ -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);
}

4
src/css/notifications.css
View File

@ -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;
}

4
src/css/pensize.css
View File

@ -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 {

2
src/css/reset.css
View File

@ -47,5 +47,5 @@ input[type="range"] {
}
a, a:visited {
color:gold;
color: var(--highlight-color);
}

2
src/css/settings-application.css
View File

@ -27,7 +27,7 @@
}
.background-picker.selected {
border-color: gold;
border-color: var(--highlight-color);
}
.layer-opacity-input {

7
src/css/settings-export.css
View File

@ -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;
}

12
src/css/settings-resize.css
View File

@ -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;
}

4
src/css/settings.css
View File

@ -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 {

4
src/css/spectrum/spectrum-overrides.css
View File

@ -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 {

8
src/css/style.css
View File

@ -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 {

10
src/css/toolbox-animated-preview.css
View File

@ -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;
}

4
src/css/toolbox-layers-list.css
View File

@ -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);
}

2
src/css/toolbox-palettes-list.css
View File

@ -127,7 +127,7 @@
right: 0;
background-color: black;
color: gold;
color: var(--highlight-color);
font-family: Tahoma;
font-size: 0.5em;

2
src/css/tools.css
View File

@ -17,7 +17,7 @@
position : absolute;
height : 100%;
width : 100%;
border: 3px solid gold;
border: 3px solid var(--highlight-color);
box-sizing: border-box;
}

3
src/css/variables.css Normal file
View File

@ -0,0 +1,3 @@
html, body {
--highlight-color: gold;
}

2
src/js/controller/settings/exportimage/GifExportController.js
View File

@ -150,7 +150,7 @@
ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
if (imageUrl) {
var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
var linkTpl = '<a class="highlight" href="{{link}}" target="_blank">{{shortLink}}</a>';
var linkHtml = pskl.utils.Template.replace(linkTpl, {
link : imageUrl,
shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')

1
src/piskel-style-list.js
View File

@ -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",

10
src/templates/settings.html
View File

@ -2,35 +2,35 @@
<div
data-setting="user"
class="tool-icon icon-settings-gear-white"
title="<span style='color:gold'>PREFERENCES</span></br>"
title="<span class='highlight'>PREFERENCES</span></br>"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="resize"
class="tool-icon icon-settings-resize-white"
title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
title="<span class='highlight'>RESIZE</span></br>Resize the drawing area"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="save"
class="tool-icon icon-settings-save-white"
title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
title="<span class='highlight'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
rel="tooltip" data-placement="left" >
</div>
<div
data-setting="export"
class="tool-icon icon-settings-export-white"
title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
title="<span class='highlight'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
rel="tooltip" data-placement="left">
</div>
<div
data-setting="import"
class="tool-icon icon-settings-open-folder-white"
title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
title="<span class='highlight'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
rel="tooltip" data-placement="left">
</div>

4
src/templates/settings/export/misc.html
View File

@ -5,7 +5,7 @@
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;">Export as C File: </span>
<span class="highlight">Export as C File: </span>
<span class="export-info">
C file with frame rendered as array.
</span>
@ -14,7 +14,7 @@
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;">Export selected frame as PNG File: </span>
<span class="highlight">Export selected frame as PNG File: </span>
<span class="export-info">
PNG export of the currently selected frame.
</span>

4
src/templates/settings/export/png.html
View File

@ -2,7 +2,7 @@
<div class="export-panel-png">
<div class="export-panel-header export-info">Export your animation as a PNG spritesheet containing all frames.</div>
<div class="export-panel-section png-export-layout-section">
<div style="color: gold; padding-bottom: 5px;">Spritesheet layout options:</div>
<div class="highlight" style="padding-bottom: 5px;">Spritesheet layout options:</div>
<div style="display: flex; line-height: 20px;">
<div style="flex: 1;">
<span>Columns</span>
@ -25,7 +25,7 @@
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span style="color: gold;" class="export-panel-row">Export for PixiJS Movie: </span>
<span class="highlight export-panel-row">Export for PixiJS Movie: </span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button>

2
src/templates/settings/import.html
View File

@ -45,7 +45,7 @@
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
Restore a backup of <span class="highlight">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>