/*BODY============================================================================*/
body {
font-family: arial;
overflow: hidden;
padding: 0;
margin: 0;
}
/*GLOBAL============================================================================*/
.disabled {
opacity: 0.2;
}
.hidden {
display: none;
}
/*CONTAINER============================================================================*/
.container {
width: 100%;
height: auto;
background: none;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
}
.container.hidden {
display: none;
}
.container.ten {width: 10%;}
.container.twenty {width: 20%;}
.container.thirty {width: 30%;}
.container.third {width: calc(100% / 3);}
.container.fourty {width: 40%;}
.container.half {width: 50%;}
.container.fifty {width: 50%;}
.container.sixty {width: 60%;}
.container.seventy {width: 70%;}
.container.eighty {width: 80%;}
.container.ninety {width: 90%;}
.container.left {
justify-content: left;
}
.container.center {
justify-content: center;
}
.container.right {
justify-content: right;
}
/*APP============================================================================*/
.app_header {
background: white;
box-shadow: rgb(228, 228, 228) 0 1px;
box-sizing: border-box;
position: absolute;
top: 0px;
left: 0px;
height: 60px;
overflow: hidden;
padding: 0 10px;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
}
.app_main {
position: absolute;
top: 60px;
left: 0;
height: calc(100% - 60px);
width: 100%;
}
.app_divider {
background-color: rgb(228, 228, 228);
border: none;
box-shadow: none;
box-sizing: border-box;
height: 40px;
outline: none;
width: 1px;
margin: 10px 10px;
/*float: left;*/
}
.app_button {
opacity: 1;
/*transition: opacity 300ms ease-in-out;*/
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: 26px;
border: 1px solid white;
border-radius: 6px;
box-shadow: none;
box-sizing: border-box;
color: black;
cursor: pointer;
height: 40px;
outline: none;
width: 40px;
margin: 10px 0;
}
.app_button:hover {
background-color: rgb(242, 242, 242);
border: 1px solid rgb(228, 228, 228);
}
.app_button.disabled, .color_button.disabled:hover {
opacity: 0.2;
}
/* LEFT */
.app_button.blank {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.save {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.open {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.copy {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.copyHEX {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.copyRGB {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.paste {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.undo {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.redo {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.trash {
background-image: url('data:image/svg+xml;utf8,');
}
/* MIDDLE */
.app_button.add {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.duplicate {
background-image: url('data:image/svg+xml;utf8,');
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.picker {
-webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.picker::-webkit-color-swatch-wrapper {
padding: 0;
}
.app_button.picker::-webkit-color-swatch {
opacity: 0;
border: none;
border-radius: 10px;
}
.app_button.palette {
background-image: url('data:image/svg+xml;utf8,');
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.random {
background-image: url('data:image/svg+xml;utf8,');
}
/* RIGHT */
.app_button.exportPNG {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.exportSVG {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.report {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.contrast {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.office {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.test {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.complementary {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.saturations {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.shades {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.browse {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.about {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.help {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.home {
background-image: url('data:image/svg+xml;utf8,');
}
/* MODAL */
.app_button.close {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.load {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.reload {
background-image: url('data:image/svg+xml;utf8,');
}
.app_button.list {
background-image: url('data:image/svg+xml;utf8,');
}
/*CONTAINER============================================================================*/
.container_plus {
position: absolute;
top: 60px;
left: 0px;
width: 100%;
height: calc(100% - 60px);
overflow: hidden;
transition: width ease-in-out 0.2s;
}
.container_plus.toolbox {
width: calc(100% - 300px);
}
.container_color {
position: absolute;
top: 60px;
left: 0px;
width: 100%;
height: calc(100% - 60px);
overflow: hidden;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
transition: width ease-in-out 0.2s;
}
.container_color.toolbox {
width: calc(100% - 300px);
}
.color {
align-items: flex-start;
border-top: 0px solid white;
box-sizing: border-box;
display: flex;
flex-grow: 1;
position: relative;
height: 100%;
width: 100%;
transition: border ease-in-out 0.2s;
}
.color:hover > .color_button {
opacity: 0.5;
}
.color:hover > .color_button.disabled {
opacity: 0.2;
}
.color.selected {
border-top: 50px solid white;
}
.color.label {
justify-content: center;
align-items: center;
}
.color_hover {
background: red;
border: none;
//border-radius: 30px;
bottom: 100px;
box-shadow: none;
box-sizing: border-box;
color: black;
height: 230px;
left: 50%;
outline: none;
position: absolute;
transform: translate(-50%, 0%);
width: 100%;
}
.color_hover:hover ~ .color_button {
opacity: 0.5;
}
.color_label {
font-weight: bold;
margin: 0;
}
.color_label.vertical {
writing-mode: vertical-rl;
}
.color_button {
opacity: 0;
/*transition: opacity 300ms ease-in-out;*/
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: 26px;
border: none;
border-radius: 20px;
box-shadow: none;
box-sizing: border-box;
color: black;
cursor: pointer;
height: 40px;
left: 50%;
outline: none;
position: absolute;
transform: translate(-50%, -50%);
width: 40px;
}
.color_button:hover {
opacity: 1 !important;
}
.color_button.disabled:hover {
opacity: 0.2 !important;
}
.color_button.add {
background-image: url('data:image/svg+xml;utf8,');
}
.color_button.remove {
background-image: url('data:image/svg+xml;utf8,');
bottom: 270px;
}
.color_button.left {
background-image: url('data:image/svg+xml;utf8,');
bottom: 270px;
}
.color_button.right {
background-image: url('data:image/svg+xml;utf8,');
bottom: 220px;
}
.color_button.drag {
background-image: url('data:image/svg+xml;utf8,');
bottom: 220px;
}
.color_button.left_chevron {
background-image: url('data:image/svg+xml;utf8,');
bottom: 270px;
}
.color_button.right_chevron {
background-image: url('data:image/svg+xml;utf8,');
bottom: 220px;
}
.color_button.lock {
background-image: url('data:image/svg+xml;utf8,');
bottom: 170px;
}
.color_button.lock.locked {
background-image: url('data:image/svg+xml;utf8,');
}
.color_button.picker {
background-image: url('data:image/svg+xml;utf8,');
bottom: 120px;
height: 40px;
padding: 0;
width: 40px;
-webkit-appearance: none;
}
.color_button.picker::-webkit-color-swatch-wrapper {
padding: 0;
}
.color_button.picker::-webkit-color-swatch {
opacity: 0;
border: none;
border-radius: 10px;
}
.color_button.info {
background-image: url('data:image/svg+xml;utf8,');
}
.color_button.random {
background-image: url('data:image/svg+xml;utf8,');
}
.color_input {
background: none;
border: none;
box-shadow: none;
box-sizing: border-box;
color: black;
cursor: pointer;
outline: none;
position: absolute;
text-align: center;
text-transform: uppercase;
transform: translate(-50%, -50%);
padding: 0px 0px;
width: 100%;
}
.color_input.dark {
color: white;
}
.color_input.rgb {
font-size: 24px;
font-weight: bold;
left: 50%;
bottom: 70px; /* 50px */
}
/*.color_input.rgb:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.color_input.rgb.dark:hover {
background-color: rgba(255, 255, 255, 0.05);
}*/
.color_input.hsl {
font-size: 14px;
left: 50%;
bottom: 56px; /* 33px */
opacity: 0.6;
}
.color_input.hex {
font-size: 14px;
left: 50%;
bottom: 33px; /* 10px */
opacity: 0.6;
}
.color_input.name {
cursor: default;
font-size: 14px;
font-weight: bold;
left: 50%;
bottom: 10px; /* 10px */
opacity: 0.6;
}
.color_plus {
opacity: 0.5;
/*transition: opacity 300ms ease-in-out;*/
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: 26px;
border: none;
border-radius: 20px;
cursor: pointer;
height: 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
width: 40px;
z-index: 50;
}
.color_plus:hover {
opacity: 1;
}
.color_plus {
background-image: url('data:image/svg+xml;utf8,');
}
/*TEXT============================================================================*/
kbd {
background-color: whitesmoke;
border: 1px solid lightgrey;
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-family: monospace;
font-size: 16px;
padding: 5px 8px;
margin: -5px 0;
}
/*TOOLBOX============================================================================*/
.toolbox {
background: none;
position: absolute;
top: 60px;
right: 0px;
width: 0;
height: calc(100% - 60px);
overflow: hidden;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
transition: width ease-in-out 0.2s;
}
.toolbox.active {
width: 300px;
}
.toolbox_box {
box-sizing: border-box;
width: 100%;
height: 100%;
overflow: hidden;
align-items: flex-start;
box-sizing: border-box;
flex-wrap: nowrap;
}
.toolbox_header {
background: none;
box-shadow: rgb(228, 228, 228) 0 1px;
box-sizing: border-box;
height: 60px;
overflow: hidden;
padding: 0 10px;
width: 100%;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
}
.toolbox_container {
background: none;
box-sizing: border-box;
width: 100%;
height: calc(100% - 60px - 20px);
overflow-y: auto;
padding: 20px 20px 20px 20px;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
font-size: 20px;
}
.toolbox_data {
background: none;
box-sizing: border-box;
width: 100%;
height: 20px;
overflow-y: auto;
padding: 0 20px;
font-size: 10px;
font-weight: bold;
line-height: 20px;
}
.toolbox_palette {
width: 100%;
height: auto;
background: none;
overflow: hidden;
padding: 0 0 20px 0;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
}
/*MODAL============================================================================*/
.modal {
display: none;
background: rgba(0, 0, 0, 0);
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
left: 0px;
z-index: 500;
}
.modal.active {
display: flex;
}
.modal_box {
background: white;
border-radius: 14px;
box-shadow: rgb(0 0 0 / 10%) 0 0 20px;
box-sizing: border-box;
height: 500px;
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: 660px;
align-items: flex-start;
box-sizing: border-box;
flex-wrap: wrap;
transition: height ease-in-out 0.2s;
transition: width ease-in-out 0.2s;
}
.modal_header {
background: none;
box-shadow: rgb(228, 228, 228) 0 1px;
box-sizing: border-box;
height: 60px;
overflow: hidden;
padding: 0 10px;
width: 100%;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
}
.modal_container {
background: none;
box-sizing: border-box;
width: 100%;
height: calc(100% - 60px - 20px); /*420px;*/
overflow-y: auto;
padding: 20px 20px 0 20px;
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
font-size: 20px;
}
.modal_data {
background: none;
box-sizing: border-box;
width: 100%;
height: 20px;
overflow-y: auto;
padding: 0 20px;
font-size: 10px;
font-weight: bold;
line-height: 20px;
}
.modal_textarea {
border: 1px solid rgb(228, 228, 228);
border-radius: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
outline: none;
padding: 10px;
resize: none;
word-wrap: break-word;
}
/*MOBILE============================================================================*/
@media only screen and (hover: none) and (pointer: coarse){
.color.selected .color_button {
opacity: 1 !important;
}
}
.container_color.mobile .color_input {
display: none;
}
.container_color.mobile .color_button.remove {
bottom: 170px;
}
.container_color.mobile .color_button.drag {
bottom: 120px;
}
.container_color.mobile .color_button.lock {
bottom: 70px;
}
.container_color.mobile .color_button.picker {
bottom: 20px;
}
@media screen and (max-width: 1348px) {
.app_button.picker, .app_button.random, .app_button.shades {
display: none;
}
.app_button.complementary, .app_button.saturations, .app_button.shades {
display: none;
}
}
@media screen and (max-width: 1048px) {
.app_divider {
display: none;
}
.app_button.save, .app_button.copyHEX, .app_button.copyRGB {
display: none;
}
.app_button.duplicate, .app_button.add, .app_button.picker, .app_button.random {
display: none;
}
.app_button.exportPNG, .app_button.exportSVG, .app_button.contrast, .app_button.office, .app_button.complementary, .app_button.saturations, .app_button.shades {
display: none;
}
.modal_box {
border-radius: 0px;
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 748px) {
.container_color.toolbox, .container_plus.toolbox {
width: 0%;
}
.toolbox.active {
width: 100%;
}
}