Added sortable palette (basic mode)

Started advanced palette block
This commit is contained in:
unsettledgames
2021-01-03 23:59:11 +01:00
parent 47b99bb430
commit 5ab5ceb6b0
10 changed files with 1415 additions and 35 deletions

View File

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