1234 lines
22 KiB
CSS
1234 lines
22 KiB
CSS
:root {
|
||
--back-black: #1B1A20;
|
||
--back-gray: #A4BBC2;
|
||
--icon-size: 70%;
|
||
--top-outdent: 50px;
|
||
--panel-corner: 8px;
|
||
--pointed-item: #4172F4;
|
||
--selected-item: #444D53;
|
||
}
|
||
@font-face {
|
||
font-family: 'Golos Text';
|
||
font-style: normal;
|
||
font-weight: 400 900;
|
||
src: url('../fonts/GolosText-VariableFont_wght.ttf');
|
||
}
|
||
body{
|
||
font-family: "Golos Text";
|
||
font-optical-sizing: auto;
|
||
font-weight: unset;
|
||
font-style: normal;
|
||
}
|
||
body, editor{
|
||
margin: 0px;
|
||
padding: 0px;
|
||
background:none transparent;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
editor{
|
||
position: absolute;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
display: none;
|
||
}
|
||
|
||
.big-container{
|
||
overflow-y: hidden;
|
||
}
|
||
.gallery{
|
||
height: calc(100vh - 200px);
|
||
overflow-y: scroll;
|
||
}
|
||
#container {
|
||
display: flex;
|
||
margin: 0 auto;
|
||
position: absolute;
|
||
top: 49px;
|
||
left: 49px;
|
||
border-radius: var(--panel-corner);
|
||
overflow: hidden;
|
||
height: calc(100vh - 75px - 64px);
|
||
width: calc(100% - 54px);
|
||
background: black;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#container.no-panel {
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.canvas-container{
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
#settings {
|
||
position: absolute;
|
||
width: 300px;
|
||
height: 300px;
|
||
background: #CCCCCC;
|
||
left: 15px;
|
||
top: 235px;
|
||
display: none;
|
||
padding: 10px;
|
||
}
|
||
|
||
table {
|
||
margin: 0 auto; }
|
||
|
||
table tr th {
|
||
text-align: center;
|
||
background: #444444;
|
||
color: #FFFFFF;
|
||
padding: 3px; }
|
||
|
||
table tr td {
|
||
border: solid 1px;
|
||
padding: 3px; }
|
||
|
||
.field {
|
||
width: 50px; }
|
||
|
||
#information {
|
||
padding: 10px;
|
||
font-size: 22px;
|
||
background: pink;
|
||
border: 1px solid red;
|
||
margin-bottom: 3px; }
|
||
|
||
#intro-canvas, .upper-canvas{
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
display: block;
|
||
}
|
||
|
||
#intro-canvas {
|
||
background: rgba(255, 255, 255, 0);
|
||
background-size: 100%;
|
||
background-position: 50% 50%;
|
||
background-repeat: no-repeat;
|
||
/* image-rendering: pixelated;*/
|
||
}
|
||
|
||
#back-canvas {
|
||
position: absolute;
|
||
background: #292930;
|
||
}
|
||
|
||
.scroll-block{
|
||
height: 1px;
|
||
}
|
||
|
||
.canvas-container {
|
||
margin: auto; }
|
||
|
||
.pult {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 75px;
|
||
padding-left: 50px;
|
||
background: #595656;
|
||
bottom: 0px;
|
||
z-index: 101;
|
||
}
|
||
|
||
.img-magnifier-glass {
|
||
display: block;
|
||
position: absolute;
|
||
border: 1px solid #fff;
|
||
border-radius: 50%;
|
||
cursor: none;
|
||
width: 100px;
|
||
height: 100px;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
#control {
|
||
display: grid;
|
||
grid-template-columns: 1fr 4fr;
|
||
background: darkgray;
|
||
margin-bottom: 3px;
|
||
padding: 5px;
|
||
border: 1px solid darkblue; }
|
||
|
||
#lbl {
|
||
color: white;
|
||
font-size: 20px; }
|
||
|
||
.buttons {
|
||
display: inline-block;
|
||
background: lightgray;
|
||
margin: 10px;
|
||
padding: 5px;
|
||
cursor: pointer; }
|
||
|
||
#drop_file_zone {
|
||
background-color: #EEE;
|
||
border: #999 5px dashed;
|
||
width: 290px;
|
||
height: 200px;
|
||
padding: 8px;
|
||
font-size: 18px; }
|
||
|
||
#drag_upload_file {
|
||
width: 50%;
|
||
margin: 0 auto; }
|
||
|
||
#drag_upload_file p {
|
||
text-align: center; }
|
||
|
||
#selectfile {
|
||
display: none; }
|
||
|
||
#drop_file_zone {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto; }
|
||
|
||
.load-image-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
visibility: hidden; }
|
||
|
||
.load-image-container > div:first-child {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background: black;
|
||
opacity: 0.5;
|
||
width: 100%;
|
||
height: 100%; }
|
||
|
||
.legend{
|
||
position: absolute;
|
||
background: white;
|
||
overflow: scroll;
|
||
width: 200px;
|
||
height: 150px;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.legend-item{
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.legend-item *{
|
||
margin: 2px;
|
||
}
|
||
|
||
.legend-item-image{
|
||
width: 10px;
|
||
height: 10px
|
||
}
|
||
|
||
.legend-item-caption{
|
||
font-size: 10px;
|
||
color: black;
|
||
}
|
||
|
||
.panel{
|
||
border: 1px solid #35383E;
|
||
background: var(--back-black);
|
||
}
|
||
|
||
.hl, .vl{
|
||
background: #35383E;
|
||
}
|
||
|
||
.hl{
|
||
height: 2px;
|
||
width: 100%;
|
||
}
|
||
|
||
.vl {
|
||
width: 2px;
|
||
height: 100%;
|
||
}
|
||
|
||
.top-menu {
|
||
display: flex;
|
||
flex-direction: row;
|
||
position: relative;
|
||
left: var(--top-outdent);
|
||
/* font-size: 0;*/
|
||
/* font-family: Verdana;*/
|
||
cursor: pointer;
|
||
z-index: 100;
|
||
}
|
||
|
||
.left-menu {
|
||
display: grid;
|
||
grid-template-columns: auto;
|
||
position: absolute;
|
||
top: var(--top-outdent);
|
||
left: 0;
|
||
font-size: 0;
|
||
/* font-family: Verdana;*/
|
||
cursor: pointer;
|
||
z-index: 100;
|
||
}
|
||
|
||
.top-menu, .left-menu{
|
||
border-radius: var(--panel-corner);
|
||
}
|
||
|
||
.top-menu-button {
|
||
position: relative;
|
||
width: 32px;
|
||
height: 32px;
|
||
position: relative;
|
||
margin: 5px;
|
||
}
|
||
|
||
/*.top-menu-button-selected::before{*/
|
||
/* background: var(--selected-item) !important;*/
|
||
/*}*/
|
||
|
||
.top-menu-button-selected{
|
||
background: var(--pointed-item);
|
||
}
|
||
.top-menu-button.top-menu-button-selected:not(.zoom)::before, .top-menu-items.top-menu-button-selected:not(.zoom)::before {
|
||
background-color: white;
|
||
}
|
||
/*.top-menu-button:hover, .top-menu-button:hover div:not(.zoom-bullet), .top-menu-items:hover {*/
|
||
.top-menu-button, .top-menu-items {
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.top-menu-button:not(.zoom):hover, .top-menu-items:not(.zoom):hover {
|
||
background: var(--pointed-item);
|
||
}
|
||
|
||
.top-menu-button:not(.zoom):hover::before, .top-menu-items:not(.zoom):hover::before {
|
||
background-color: white;
|
||
}
|
||
|
||
.top-menu-button::after{
|
||
/* animation-duration: 1.5s;
|
||
animation-name: hide; */
|
||
}
|
||
|
||
.top-menu-button:not(.poupup-menu .top-menu-button):hover::after{
|
||
content: attr(value);
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
background: wheat;
|
||
font-size: 10px;
|
||
padding: 2px;
|
||
margin: 2px 0 0 10px;
|
||
border-radius: 2px;
|
||
opacity: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
@keyframes hide {
|
||
0% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.top-menu-button:hover > .top-menu-items-container {
|
||
visibility: visible; }
|
||
|
||
.top-menu-button::before {
|
||
content: "";
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
.top-menu-button::before, .top-menu-items::before{
|
||
background: #A4BBC2;
|
||
}
|
||
#menu::before{
|
||
mask: url("../icons/1_menu.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#pointer::before{
|
||
mask: url("../icons/1_pointer.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
.top-menu-items-container.zoom{
|
||
z-index: 101;
|
||
}
|
||
#scale{
|
||
width: 49px;
|
||
}
|
||
#scale::before{
|
||
mask: url("../icons/1_scale.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#scale::after {
|
||
content: attr(scale_value);
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: var(--back-gray);
|
||
}
|
||
#stick::before{
|
||
mask: url("../icons/1_stick.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#move::before{
|
||
mask: url("../icons/1_move.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#selection::before{
|
||
mask: url("../icons/1_selection.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#undo-btn::before{
|
||
mask: url("../icons/1_act-undo-btn.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#redo-btn::before{
|
||
mask: url("../icons/1_act-redo-btn.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#zoom-in::before{
|
||
mask: url("../icons/1_zoom-in.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#zoom-out::before{
|
||
mask: url("../icons/1_zoom-out.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
#zoom-text{
|
||
width: 30px;
|
||
}
|
||
#zoom-text::after {
|
||
content: attr(value);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 10px;
|
||
color: var(--back-gray);
|
||
}
|
||
|
||
#selected-tool {
|
||
position: relative;
|
||
left: 42px;
|
||
top: 5px;
|
||
width: 42px;
|
||
height: 42px;
|
||
color: #6E8086;
|
||
font-size: 10px;
|
||
--icon-img: url("") 50% 50% no-repeat;
|
||
}
|
||
#selected-tool::after {
|
||
content: attr(value);
|
||
display: flex;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 10px;
|
||
color: var(--back-gray);
|
||
}
|
||
|
||
#selected-tool::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: -100%;
|
||
top: -5px;
|
||
width: 100%;
|
||
height: 100%;
|
||
mask: var(--icon-img);
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
background: var(--back-gray);
|
||
z-index: 100;
|
||
}
|
||
|
||
#elements::before {
|
||
mask: url("../icons/2_elements.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#text::before {
|
||
mask: url("../icons/2_text.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#size::before {
|
||
mask: url("../icons/2_size.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#geometry::before {
|
||
mask: url("../icons/2_geometry.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#arrow::before {
|
||
mask: url("../icons/2_arrow.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#line::before {
|
||
mask: url("../icons/2_line.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#cap::before {
|
||
mask: url("../icons/2_cap.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#pencil::before {
|
||
mask: url("../icons/2_pencil.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#socket::before {
|
||
mask: url("../icons/2_socket.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#rect::before {
|
||
mask: url("../icons/2_rect.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#circle::before {
|
||
mask: url("../icons/2_circle.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
.top-menu-items {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.top-menu-items:not(#menu .top-menu-items)::before{
|
||
content: "";
|
||
height: 20px;
|
||
width: 20px;
|
||
margin: 5px 5px 5px 6px;
|
||
}
|
||
|
||
.top-menu-items div:last-child {
|
||
font-size: 13px;
|
||
user-select: none;
|
||
padding: 5px;
|
||
}
|
||
|
||
#elements .top-menu-items::after {
|
||
content: attr(value);
|
||
margin-left: 6px;
|
||
margin-right: 15px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
#petlya::before {
|
||
mask: url("../icons/3_petlya.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#naprav::before {
|
||
mask: url("../icons/3_naprav.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: 100%;
|
||
}
|
||
|
||
#gazlift::before {
|
||
mask: url("../icons/3_gazlift.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#podyomnik::before {
|
||
mask: url("../icons/3_podyomnik.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#sushka::before {
|
||
mask: url("../icons/3_sushka.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#lotok::before {
|
||
mask: url("../icons/3_lotok.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#vnutr-yaschik::before {
|
||
mask: url("../icons/3_vnutr-yaschik.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#butilochnitsa::before {
|
||
mask: url("../icons/3_butilochnitsa.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: 60%;
|
||
}
|
||
|
||
#dampfer::before {
|
||
mask: url("../icons/3_dampfer.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#tip-on::before {
|
||
mask: url("../icons/3_tip-on.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#zamok::before {
|
||
mask: url("../icons/3_zamok.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: var(--icon-size);
|
||
}
|
||
|
||
#skritiy-krepezh::before {
|
||
mask: url("../icons/3_skritiy-krepezh.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
mask-size: 100%;
|
||
}
|
||
|
||
.top-menu-items-container {
|
||
position: absolute;
|
||
left: 100%;
|
||
visibility: hidden;
|
||
padding-left: 10px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.top-menu-items-container-back{
|
||
color: white;
|
||
border-radius: var(--panel-corner);
|
||
overflow: hidden;
|
||
padding: 12px 12px 12px 12px;
|
||
}
|
||
|
||
.top-menu .top-menu-items-container{
|
||
left: 0px;
|
||
top: 100%;
|
||
padding: 10px 0 0 0;
|
||
}
|
||
|
||
.top-menu-button.zoom:not(#menu .top-menu-items)::before, .top-menu-items.zoom:not(#menu .top-menu-items)::before {
|
||
position: absolute;
|
||
left: -5px;
|
||
background: var(--pointed-item);
|
||
width: 4px;
|
||
border-radius: 4px;
|
||
height: 23px;
|
||
top: -5px;
|
||
}
|
||
|
||
.top-menu-items.zoom:last-child::before{
|
||
height: 15px !important;
|
||
}
|
||
|
||
.zoom div{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.zoom .top-menu-button {
|
||
height: auto; }
|
||
|
||
.zoom .top-menu-items {
|
||
position: relative;
|
||
border-color: transparent;
|
||
width: 42px;
|
||
height: 15px;
|
||
justify-content: center;
|
||
margin: 6px 0 6px 0;
|
||
}
|
||
|
||
.zoom .top-menu-items div {
|
||
width: 80%;
|
||
height: 1px;
|
||
/* border: 1px solid white;*/
|
||
}
|
||
|
||
.zoom .top-menu-items div::before {
|
||
position: absolute;
|
||
left: 25px;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.zoom .top-menu-items:nth-child(1) div::before {
|
||
content: "1x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(2) div::before {
|
||
content: "2x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(3) div::before {
|
||
content: "3x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(4) div::before {
|
||
content: "4x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(5) div::before {
|
||
content: "5x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(6) div::before {
|
||
content: "6x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(7) div::before {
|
||
content: "7x";
|
||
}
|
||
.zoom .top-menu-items:nth-child(8) div::before {
|
||
content: "8x";
|
||
}
|
||
|
||
.zoom-size-selected::after {
|
||
content: "";
|
||
position: absolute;
|
||
background: white;
|
||
border-radius: 50%;
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 0.5vw;
|
||
margin-bottom: 1.3vw;
|
||
left: -3px;
|
||
top: 2px;
|
||
margin: auto;
|
||
z-index: 100;
|
||
}
|
||
|
||
.zoom-bullet {
|
||
position: relative;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
background: white;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.zoom-bullet:first-child{
|
||
width: 2vw;
|
||
height: 2vw;
|
||
margin-top: 0.8vw;
|
||
margin-bottom: 0.3vw;
|
||
}
|
||
|
||
.zoom-bullet:last-child{
|
||
width: 0.7vw;
|
||
height: 0.7vw;
|
||
margin-top: 0.5vw;
|
||
margin-bottom: 1.3vw;
|
||
}
|
||
|
||
.palette {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
background: var(--back-black);
|
||
}
|
||
|
||
.color-cell {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 4px;
|
||
border-radius : 2px;
|
||
}
|
||
|
||
.color-cell:nth-child(1) {
|
||
background-color: #1F3675; }
|
||
|
||
.color-cell:nth-child(2) {
|
||
background-color: #3156B7; }
|
||
|
||
.color-cell:nth-child(3) {
|
||
background-color: #5D558A; }
|
||
|
||
.color-cell:nth-child(4) {
|
||
background-color: #7E1549; }
|
||
|
||
.color-cell:nth-child(5) {
|
||
background-color: #B84446; }
|
||
|
||
.color-cell:nth-child(6) {
|
||
background-color: #A43413; }
|
||
|
||
.color-cell:nth-child(7) {
|
||
background-color: #D76E10; }
|
||
|
||
.color-cell:nth-child(8) {
|
||
background-color: #B8855F; }
|
||
|
||
.color-cell:nth-child(9) {
|
||
background-color: #3B7A3A; }
|
||
|
||
.color-cell:nth-child(10) {
|
||
background-color: #FFFFFF; }
|
||
|
||
.color-cell:nth-child(11) {
|
||
background-color: #707070; }
|
||
|
||
.color-cell:nth-child(12) {
|
||
background-color: #000000; }
|
||
|
||
.color-cell:hover:after {
|
||
content: "";
|
||
position: absolute;
|
||
z-index: 100;
|
||
left: -2px;
|
||
top: -2px;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 2px;
|
||
border: 2px solid white; }
|
||
|
||
.color-cell-active:after {
|
||
content: "";
|
||
position: absolute;
|
||
z-index: 99;
|
||
left: -2px;
|
||
top: -2px;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 2px;
|
||
border: 2px solid white; }
|
||
|
||
.poupup-menu{
|
||
position: absolute;
|
||
top: 200px;
|
||
left: 200px;
|
||
border-radius: 4px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.poupup-menu .top-menu-items-container-back{
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 0;
|
||
}
|
||
|
||
#elements .top-menu-items::after {
|
||
content: attr(value);
|
||
margin-left: 6px;
|
||
margin-right: 15px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
#copy::before {
|
||
mask: url("../icons/4_copy.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#cut::before {
|
||
mask: url("../icons/4_cut.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
#delete::before {
|
||
mask: url("../icons/4_delete.svg");
|
||
mask-repeat: no-repeat;
|
||
mask-position: 50% 50%;
|
||
}
|
||
|
||
.img-preview {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 20px;
|
||
}
|
||
|
||
.img-preview img{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.img-preview img {
|
||
border: 1px solid black;
|
||
height: 200px;
|
||
}
|
||
|
||
.img-preview * {
|
||
margin: 5px; }
|
||
|
||
.gallery {
|
||
background: var(--back-black);
|
||
color: white; }
|
||
|
||
.gallery a {
|
||
color: white;
|
||
font-size: 17px;
|
||
font-weight: bold; }
|
||
|
||
.gallery > div {
|
||
display: inline-block; }
|
||
|
||
.load-frame {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 200px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #eff7fa;
|
||
/* padding: 20px;
|
||
background: gray;*/
|
||
}
|
||
.load-frame button{
|
||
margin-bottom: 50px;
|
||
width: 150px;
|
||
height: 50px;
|
||
font-size: 20px;
|
||
}
|
||
.load-frame > div div{
|
||
margin-bottom: 20px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.mfp-bg {
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1042;
|
||
overflow: hidden;
|
||
position: fixed;
|
||
background: #0b0b0b;
|
||
opacity: 0.8; }
|
||
|
||
.mfp-wrap {
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1043;
|
||
position: fixed;
|
||
outline: none !important;
|
||
-webkit-backface-visibility: hidden; }
|
||
|
||
.mfp-container {
|
||
text-align: center;
|
||
position: fixed;
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 0 8px;
|
||
box-sizing: border-box;
|
||
z-index: 800; }
|
||
|
||
.mfp-container:before {
|
||
content: '';
|
||
display: inline-block;
|
||
height: 100%;
|
||
vertical-align: middle; }
|
||
|
||
.mfp-align-top .mfp-container:before {
|
||
display: none; }
|
||
|
||
.mfp-content {
|
||
position: absolute;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin: 0 auto;
|
||
text-align: left;
|
||
z-index: 1045;
|
||
width: 100% !important;
|
||
height: 100%;
|
||
max-width: 1268px;
|
||
max-height: 869px;
|
||
left: 50vw;
|
||
top: 50vh;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.mfp-inline-holder .mfp-content,
|
||
.mfp-ajax-holder .mfp-content {
|
||
width: 100%;
|
||
cursor: auto; }
|
||
|
||
.mfp-ajax-cur {
|
||
cursor: progress; }
|
||
|
||
.mfp-zoom {
|
||
cursor: pointer;
|
||
cursor: -webkit-zoom-in;
|
||
cursor: -moz-zoom-in;
|
||
cursor: zoom-in; }
|
||
|
||
.mfp-auto-cursor .mfp-content {
|
||
cursor: auto; }
|
||
|
||
.mfp-loading.mfp-figure {
|
||
display: none; }
|
||
|
||
.mfp-hide {
|
||
display: none !important; }
|
||
|
||
.mfp-preloader {
|
||
color: #CCC;
|
||
position: absolute;
|
||
top: 50%;
|
||
width: auto;
|
||
text-align: center;
|
||
left: 8px;
|
||
right: 8px;
|
||
z-index: 1044; }
|
||
|
||
.mfp-preloader a {
|
||
color: #CCC; }
|
||
|
||
.mfp-preloader a:hover {
|
||
color: #FFF; }
|
||
|
||
.mfp-s-ready .mfp-preloader {
|
||
display: none; }
|
||
|
||
.mfp-s-error .mfp-content {
|
||
display: none; }
|
||
|
||
button::-moz-focus-inner {
|
||
padding: 0;
|
||
border: 0; }
|
||
|
||
iframe{
|
||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||
}
|
||
|
||
.mfp-close {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
margin-top: -1px;
|
||
font-style: normal;
|
||
font-size: 30px !important;
|
||
z-index: 801;
|
||
}
|
||
.mfp-close:after{
|
||
content: "×";
|
||
}
|
||
|
||
.mfp-iframe-scaler iframe {
|
||
position: absolute;
|
||
display: block;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #000; }
|
||
|
||
.mfp-iframe-scaler iframe:hover, .mfp-iframe-scaler iframe:active, .mfp-iframe-scaler iframe:focus {
|
||
top: 0;
|
||
left: 0;
|
||
margin: 0; }
|
||
|
||
.caption-bar-button {
|
||
cursor: pointer;
|
||
color: white;
|
||
border: 0;
|
||
display: block;
|
||
padding: 0;
|
||
opacity: 0.65;
|
||
transition: 400ms;
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.caption-bar-button:hover {
|
||
opacity: 0.93;
|
||
}
|
||
|
||
.drop-zone-container{
|
||
width: 100%;
|
||
}
|
||
#drop-zone{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #eff7fa;
|
||
padding-top: 70px;
|
||
font-family: 'Raleway', sans-serif;
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
}
|
||
.progress{
|
||
display: none;
|
||
}
|
||
#drop-zone div:first-child {
|
||
font-size: 100px;
|
||
font-weight: 300;
|
||
margin-top: -60px;
|
||
margin-bottom: -30px;
|
||
color: gray;
|
||
}
|
||
#drop-zone div:last-child{
|
||
font-size: 25px;
|
||
color: #9c9c9c;
|
||
}
|
||
.progress{
|
||
/* width: 200px;*/
|
||
height: 20px;
|
||
}
|
||
.progress div{
|
||
width: 0;
|
||
height: 100%;
|
||
background: #006889;
|
||
}
|
||
|
||
.thumb-gallery-item {
|
||
display: inline-block;
|
||
position: relative;
|
||
margin: 11px;
|
||
vertical-align: middle;
|
||
width: 100px;
|
||
height: 100px;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.thumb-gallery-item::before {
|
||
content: attr(data-cap);
|
||
position: absolute;
|
||
bottom: -30px;
|
||
font-size: 10px;
|
||
color: #464646;
|
||
}
|
||
.thumb-gallery-item:nth-child(4n - 3) {
|
||
margin-left: 20px;
|
||
}
|
||
.thumb-gallery-item:nth-child(4n) {
|
||
margin-right: 20px;
|
||
}
|
||
.thumb-gallery-temp-item{
|
||
}
|
||
.thumb-gallery-temp-item::after {
|
||
content: "";
|
||
opacity: 0.5;
|
||
background: white;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
.thumb-gallery-item:hover .close-button{
|
||
visibility: visible;
|
||
}
|
||
.close-button {
|
||
visibility: hidden;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
transform: translate(20%, -30%);
|
||
border-radius: 50%;
|
||
width: 15px;
|
||
height: 15px;
|
||
background: white;
|
||
cursor: pointer;
|
||
color: gray;
|
||
text-align: center;
|
||
line-height: 15px;
|
||
font-size: 10px;
|
||
z-index: 1;
|
||
}
|
||
.close-button:after {
|
||
content: "✖";
|
||
}
|
||
.save-btn-preview{
|
||
position: fixed;
|
||
left: 30px;
|
||
bottom: 30px;
|
||
color: white;
|
||
box-shadow: box-shadow: 10px 5px 5px black;
|
||
padding: 2px;
|
||
text-shadow: 1px 1px 2px black;
|
||
background: gray;
|
||
}
|
||
@media screen and (max-height: 680px) {
|
||
.left-menu{
|
||
grid-template-columns: auto auto;
|
||
}
|
||
#container{
|
||
left: 90px;
|
||
width: calc(100% - 95px);
|
||
}
|
||
.top-menu{
|
||
left: 87px;
|
||
}
|
||
.hl{
|
||
display: none;
|
||
}
|
||
}
|