Design attempt

This commit is contained in:
jdescottes
2013-11-27 23:24:03 +01:00
parent c04a645991
commit 42862e188d
3 changed files with 42 additions and 8 deletions

View File

@@ -2,12 +2,26 @@
* Piskel specific CSS for spectrum widgets
*/
/* Widget's main container */
.sp-container {
border-radius: 4px;
background-color: #2B2B2B;
border: solid 4px #888;
padding: 5px;
}
/* Color square container */
.sp-color, .sp-hue {
border : 1px solid #222;
}
/* Remove the padding on the input container */
.sp-replacer {
padding: 3px;
height: 50%;
border-width: 0;
box-sizing: border-box;
background-color: #888;
}
.sp-replacer:first-of-type {
padding-bottom: 0px;
@@ -30,19 +44,24 @@
border-width: 0;
}
.sp-palette-row-selection {
max-width: 62px;
}
.sp-palette .sp-thumb-el {
margin : 0 0 5px 0;
margin : 0 5px 5px 0;
width: 24px;
height: 24px;
border-color: #444;
}
.sp-picker-container, .sp-palette-container {
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
}
.sp-palette .sp-thumb-el {
width: 24px;
height: 24px;
border-left-width: 0;
border-right-width: 0;
}
.sp-slider {
@@ -64,4 +83,9 @@
background: none;
box-sizing:border-box;
box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
}
.sp-palette .sp-thumb-el.sp-thumb-active {
border-color: gold;
box-shadow: 0 0 0px 1px gold;
}