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

Issue #467: style changes: smaller toolbox borders, layout fixes

Browse Source
This commit is contained in:
juliandescottes 2016-05-08 13:28:19 +02:00
parent c1d8c7a20e
commit 7c47aa9ecd
6 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/layout.css
View File

@ -13,6 +13,8 @@
.column-wrapper { .column-wrapper {
text-align: center; text-align: center;
font-size: 0; font-size: 0;
display: flex;
position: absolute; position: absolute;
left: 100px; /* Reserve room for tools on the left edge of the screen. */ left: 100px; /* Reserve room for tools on the left edge of the screen. */
top: 0; top: 0;
@ -20,10 +22,6 @@
bottom: 0; bottom: 0;
} }
.column {
display: inline-block;
}
.left-column { .left-column {
vertical-align: top; vertical-align: top;
height: 100%; height: 100%;
@ -40,7 +38,7 @@
vertical-align: top; vertical-align: top;
height: 100%; height: 100%;
display: inline-flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;

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

@ -3,7 +3,7 @@
* Layers container * Layers container
*/ */
.layers-list-container { .layers-list-container {
min-height: 83px; min-height: 85px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -42,21 +42,10 @@
* Layers buttons * Layers buttons
*/ */
.layers-button-container {
overflow : hidden;
flex-shrink: 0;
}
.layers-button { .layers-button {
margin: 0; margin: 0;
width: 16.66667%; width: 16.66667%;
float : left; float : left;
/* Override border propery on .button elements from form.css */
border-left-width: 0;
}
.layers-button:last-child {
border-right-width: 0;
} }
/** /**

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

@ -15,13 +15,10 @@
* Palettes action buttons * Palettes action buttons
*/ */
.palettes-list-actions { .palettes-list-container .toolbox-buttons {
flex-shrink: 0;
background-color: #3f3f3f; background-color: #3f3f3f;
border-bottom-color: #222;
height: 24px; height: 24px;
padding: 0; padding: 0;
overflow: hidden;
} }
.palettes-list-button, .palettes-list-button,
@ -39,9 +36,6 @@
height: 100%; height: 100%;
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
border-style: solid;
border-width: 1px 0 1px 0;
color: #aaa; color: #aaa;
font-size : 0.75em; font-size : 0.75em;

20
src/css/toolbox.css
View File

@ -1,9 +1,9 @@
.toolbox-container { .toolbox-container {
border: 4px solid #888; border: 2px solid #888;
font-size: medium; font-size: medium;
color: white; color: white;
text-align: left; text-align: left;
border-radius: 4px; border-radius: 2px;
margin-top: 5px; margin-top: 5px;
overflow: hidden; overflow: hidden;
} }
@ -16,3 +16,19 @@
height: 17px; height: 17px;
background: #222; background: #222;
} }
.toolbox-buttons {
flex-shrink: 0;
overflow: hidden;
border-top: 1px solid #666;
border-bottom: 1px solid #222;
}
.toolbox-buttons .button {
/* Override border propery on .button elements from form.css */
border-width: 0 1px 0 0;
}
.toolbox-buttons button:last-child {
border-right-width: 0;
}

2
src/templates/layers-list.html
View File

@ -4,7 +4,7 @@
data-placement="left" data-placement="left"
class="layers-toggle-preview piskel-icon-eye"></div> class="layers-toggle-preview piskel-icon-eye"></div>
</h3> </h3>
<div class="layers-button-container"> <div class="toolbox-buttons">
<button data-action="add" <button data-action="add"
class="button layers-button piskel-icon-plus" class="button layers-button piskel-icon-plus"
title="Create a new layer" rel="tooltip" data-placement="top" ></button> title="Create a new layer" rel="tooltip" data-placement="top" ></button>

2
src/templates/palettes-list.html
View File

@ -1,6 +1,6 @@
<div class="toolbox-container palettes-list-container"> <div class="toolbox-container palettes-list-container">
<h3 class="toolbox-title palettes-title">Palettes</h3> <h3 class="toolbox-title palettes-title">Palettes</h3>
<div class="palettes-list-actions"> <div class="toolbox-buttons">
<button <button
class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add" class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
title="Create a new palette" rel="tooltip" data-placement="top" ></button> title="Create a new palette" rel="tooltip" data-placement="top" ></button>