mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Added sortable palette (basic mode)
Started advanced palette block
This commit is contained in:
unsettledgames
@ -125,7 +125,7 @@ body {
|
||||
z-index: 1120;
|
||||
list-style-type: none;
|
||||
overflow-y:scroll;
|
||||
overflow-x:hidden; // TODO: make the scroll bar a bit fancier
|
||||
overflow-x:hidden;
|
||||
#add-layer-button {
|
||||
path {
|
||||
fill: $baseicon;
|
||||
@ -178,7 +178,7 @@ body {
|
||||
|
||||
.layers-menu-entry {
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
font-size: 1em;
|
||||
color: $basetext;
|
||||
background-color: lighten($basecolor, 4%);
|
||||
@ -775,6 +775,31 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
div.update {
|
||||
input {
|
||||
background: $indent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: $indenttext;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/*
|
||||
input {
|
||||
background: $indent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: $indenttext;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
*/
|
||||
|
||||
button.default {
|
||||
float: right;
|
||||
background: $basehover;
|
||||
@ -789,17 +814,6 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: $indent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: $indenttext;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
background: $basehover url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
|
||||
border: none;
|
||||
@ -1038,9 +1052,9 @@ svg {
|
||||
input[type=number] {
|
||||
position:relative;
|
||||
margin-left:10px;
|
||||
height:15px;
|
||||
width:40px;
|
||||
padding:8px;
|
||||
height:15px !important;
|
||||
width:40px !important;
|
||||
padding:8px !important;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-outer-spin-button,
|
||||
@ -1212,4 +1226,287 @@ svg {
|
||||
background: $baseselected;
|
||||
}
|
||||
}
|
||||
}
|
||||
/***********************COLOUR PICKER*****************************/
|
||||
#colour-picker {
|
||||
background-color:$basecolor;
|
||||
width:250px;
|
||||
position:absolute;
|
||||
display:inline-block;
|
||||
|
||||
input[type=text] {
|
||||
background-color:$basetext;
|
||||
color:$basecolor;
|
||||
box-shadow:none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
width: 100%;
|
||||
margin: 2.2px 0;
|
||||
background-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
background: #484d4d;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 25.6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
margin-top: -2.2px;
|
||||
width: 18px;
|
||||
height: 30px;
|
||||
background: $basetext;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
background: #484d4d;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 25.6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
width: 18px;
|
||||
height: 30px;
|
||||
background: $basetextweak;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
|
||||
how to remove the vertical space around the range input in IE*/
|
||||
@supports (-ms-ime-align:auto) {
|
||||
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
|
||||
input[type=range].slider {
|
||||
margin: 0;
|
||||
/*Edge starts the margin from the thumb, not the track as other browsers do*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cp-modes {
|
||||
margin: 0 0 0 0;
|
||||
font-size:0;
|
||||
height:40px;
|
||||
float:left;
|
||||
display:flex;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color:$basetextweak;
|
||||
|
||||
button {
|
||||
font-size:14px;
|
||||
left:0;
|
||||
right:0;
|
||||
margin:0 0 0 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
height:100%;
|
||||
width:37x;
|
||||
background-color:$basehover;
|
||||
color:$basetext;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color:$baseicon;
|
||||
color:$basetext;
|
||||
}
|
||||
|
||||
button.cp-selected-mode {
|
||||
background-color:$baseicon;
|
||||
color:$basetext;
|
||||
}
|
||||
|
||||
input {
|
||||
width:50px;
|
||||
right:0;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color:yellow;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:2;
|
||||
position:relative;
|
||||
}
|
||||
}
|
||||
|
||||
#sliders-container {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.cp-slider-entry {
|
||||
width:100%;
|
||||
height:30px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin-top:2px;
|
||||
position:relative;
|
||||
|
||||
label {
|
||||
width: 20px;
|
||||
font-size:15px;
|
||||
font-style: bold;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
text-align:center;
|
||||
width: 30px;
|
||||
overflow:visible;
|
||||
margin-left:4px;
|
||||
}
|
||||
}
|
||||
|
||||
.colour-picker-slider {
|
||||
width:90%;
|
||||
}
|
||||
|
||||
#cp-minipicker {
|
||||
width:100%;
|
||||
height:100px;
|
||||
position:relative;
|
||||
margin: 0 0 0 0;
|
||||
z-index: inherit 2000;
|
||||
|
||||
input {
|
||||
width:100%;
|
||||
margin: none;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
.cp-colours-previews {
|
||||
width:100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.cp-colour-preview {
|
||||
width:100%;
|
||||
position:relative;
|
||||
background-color:blue;
|
||||
color:$basecolor;
|
||||
float:left;
|
||||
height:30px;
|
||||
justify-content: center;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
#cp-colour-picking-modes {
|
||||
width:100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size:14px;
|
||||
left:0;
|
||||
right:0;
|
||||
margin:0 0 0 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
height:30px;
|
||||
width:16.66666%;
|
||||
float:left;
|
||||
overflow:hidden;
|
||||
background-color:$basehover;
|
||||
color:$basetext;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color:$baseicon;
|
||||
color:$basetext;
|
||||
}
|
||||
|
||||
button.cp-selected-mode {
|
||||
background-color:$baseicon;
|
||||
color:$basetext;
|
||||
}
|
||||
}
|
||||
|
||||
#cp-canvas-container {
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#cp-spectrum {
|
||||
width:100%;
|
||||
height:100px;
|
||||
position:absolute;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cp-picker-icon{
|
||||
width:16px;
|
||||
height:16px;
|
||||
border-radius:100%;
|
||||
position:absolute;
|
||||
background-color:white;
|
||||
z-index:2;
|
||||
border:2px solid black;
|
||||
}
|
||||
|
||||
|
||||
/***************PALETTE BLOCK****************/
|
||||
div#palette-block {
|
||||
z-index:1000;
|
||||
position:relative;
|
||||
resize: horizontal;
|
||||
padding: 0 0 0 0;
|
||||
margin: 0 0 0 0;
|
||||
width:600px;
|
||||
height:400px;
|
||||
}
|
||||
|
||||
div#palette-container {
|
||||
display:inline-block;
|
||||
background-color:black;
|
||||
position:relative;
|
||||
scrollbar-color: #332f35 #232125;
|
||||
scroll-behavior: smooth;
|
||||
/*
|
||||
&::-webkit-scrollbar {
|
||||
background: #232125;
|
||||
width: 0.5em;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
margin-top: -0.125em;
|
||||
width: 0.5em;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #332f35;
|
||||
border-radius: 0.25em;
|
||||
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #232125;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
ul#palette-list {
|
||||
list-style:none;
|
||||
margin: 0 0 0 0;
|
||||
padding: 0 0 0 0;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
|
||||
li {
|
||||
float:left;
|
||||
width:50px;
|
||||
height:50px;
|
||||
border:none;
|
||||
|
||||
min-width:20px;
|
||||
min-height:20px;
|
||||
max-width:75px;
|
||||
max-height:75px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user