|
:root { |
|
--panel-back: #141629; |
|
--panel-stroke: #222544; |
|
--main-back: #070a1b; |
|
--main-text-color: #fff; |
|
--secondary-text-color: #a0a5d0; |
|
--input-color: #22233e; |
|
--accent-color: #166ef1; |
|
--button-hover: #262746; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
html, |
|
body { |
|
margin: 0px; |
|
overflow: hidden; |
|
background: var(--main-back); |
|
height: 100%; |
|
} |
|
|
|
#logo { |
|
top: 0px; |
|
left: 0px; |
|
position: fixed; |
|
margin-right: 0px; |
|
text-align: center; |
|
height: 60px; |
|
line-height: 60px; |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 600; |
|
background: var(--panel-back); |
|
width: 76px; |
|
border-right: 1px solid var(--panel-stroke); |
|
box-sizing: border-box; |
|
} |
|
#logo:after { |
|
content: ""; |
|
display: block; |
|
height: 1px; |
|
width: 40px; |
|
background-color: var(--panel-stroke); |
|
margin-left: 18px; |
|
} |
|
#logo img { |
|
vertical-align: middle; |
|
width: 22px; |
|
} |
|
|
|
|
|
#top-canvas { |
|
position: absolute; |
|
top: 10px; |
|
left: 0px; |
|
z-index: 99999999; |
|
width: 100%; |
|
} |
|
#undo { |
|
position: absolute; |
|
top: 0px; |
|
left: 10px; |
|
font-family: Inter; |
|
font-size: 14px; |
|
color: var(--secondary-text-color); |
|
vertical-align: middle; |
|
opacity: 0.5; |
|
height: 32px; |
|
line-height: 32px; |
|
border-radius: 5px; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
font-weight: 500; |
|
background: var(--panel-back); |
|
} |
|
#redo { |
|
background: var(--panel-back); |
|
position: absolute; |
|
top: 0px; |
|
left: 94px; |
|
font-family: Inter; |
|
font-size: 14px; |
|
color: var(--secondary-text-color); |
|
vertical-align: middle; |
|
opacity: 0.5; |
|
height: 32px; |
|
line-height: 32px; |
|
border-radius: 5px; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
font-weight: 500; |
|
} |
|
#undo img, |
|
#redo img { |
|
vertical-align: middle; |
|
margin-top: -3px; |
|
margin-right: 3px; |
|
} |
|
#redo img { |
|
transform: scaleX(-1); |
|
} |
|
.history-active { |
|
opacity: 0.9 !important; |
|
z-index: 9999999; |
|
} |
|
.history-active:hover { |
|
cursor: pointer !important; |
|
background-color: var(--input-color) !important; |
|
} |
|
|
|
#other-controls { |
|
position: absolute; |
|
right: 20px; |
|
top: 0px; |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
height: 100%; |
|
font-size: 14px; |
|
} |
|
#zoom-options { |
|
top: 33px; |
|
right: -10px; |
|
position: absolute; |
|
background-color: var(--panel-back); |
|
width: 150px; |
|
border-radius: 5px 0px 5px 5px; |
|
overflow: hidden; |
|
} |
|
#zoom-level { |
|
margin-right: -10px; |
|
height: 32px; |
|
vertical-align: middle; |
|
width: 65px; |
|
text-align: right; |
|
background: var(--panel-back) !important; |
|
border-radius: 5px; |
|
opacity: 0.9; |
|
} |
|
#zoom-level span { |
|
line-height: 32px; |
|
} |
|
#zoom-level:hover { |
|
background-color: var(--button-hover) !important; |
|
cursor: pointer; |
|
} |
|
#zoom-level img { |
|
margin-left: 5px; |
|
margin-right: 5px; |
|
} |
|
.zoom-options-item { |
|
height: 32px; |
|
line-height: 32px; |
|
border-bottom: 1px solid var(--panel-stroke); |
|
text-indent: 15px; |
|
color: var(--main-text-color) !important; |
|
} |
|
.zoom-options-item:last-child { |
|
border-bottom: none !important; |
|
} |
|
.zoom-options-item:hover { |
|
cursor: pointer; |
|
background-color: var(--button-hover) !important; |
|
} |
|
.zoom-hidden { |
|
visibility: hidden !important; |
|
} |
|
.zoom-open { |
|
transform: scaleY(-1); |
|
} |
|
#hand-tool { |
|
height: 32px; |
|
width: 32px; |
|
position: absolute; |
|
top: 0px; |
|
right: 60px; |
|
line-height: 32px; |
|
text-align: center; |
|
background-color: var(--panel-back); |
|
border-radius: 5px; |
|
opacity: 0.9; |
|
} |
|
#hand-tool:not(.hand-active):hover { |
|
cursor: pointer; |
|
background-color: var(--button-hover) !important; |
|
} |
|
#hand-tool img { |
|
margin-bottom: -1px; |
|
margin-left: -1px; |
|
width: 14px; |
|
} |
|
.hand-active { |
|
background-color: var(--accent-color) !important; |
|
} |
|
.hand-active:hover { |
|
cursor: pointer; |
|
} |
|
|
|
#bottom-canvas { |
|
position: absolute; |
|
bottom: 0px; |
|
right: -20px; |
|
z-index: 9999999; |
|
width: 100%; |
|
} |
|
#sponsor { |
|
position: absolute; |
|
bottom: 10px; |
|
left: -10px; |
|
height: 32px; |
|
line-height: 32px; |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 500; |
|
color: var(--accent-color); |
|
background: rgba(22, 95, 205, 0.1); |
|
text-align: center; |
|
text-decoration: none; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
border-radius: 5px; |
|
} |
|
#sponsor img { |
|
margin-right: 3px; |
|
margin-bottom: -2px; |
|
} |
|
#sponsor:hover { |
|
background: rgba(22, 95, 205, 0.3) !important; |
|
} |
|
#alyssa-credit { |
|
color: var(--secondary-text-color); |
|
font-size: 14px; |
|
font-weight: 500; |
|
position: absolute; |
|
right: -20px; |
|
bottom: 15px; |
|
font-family: Inter; |
|
width: 200px; |
|
filter: drop-shadow(0px 1px 15px #141629); |
|
text-decoration: none !important; |
|
} |
|
#alyssa-credit:hover { |
|
filter: drop-shadow(0px 1px 10px #141629) !important; |
|
} |
|
#alyssa-credit span { |
|
color: var(--main-text-color) !important; |
|
text-decoration: none !important; |
|
display: inline-block; |
|
} |
|
#alyssa-credit img { |
|
display: inline-block; |
|
margin-left: 5px; |
|
border-radius: 50%; |
|
vertical-align: middle; |
|
width: 18px; |
|
margin-top: -2px; |
|
} |
|
.hide-folder { |
|
display: none !important; |
|
} |
|
.project-active { |
|
text-align: center !important; |
|
width: 50% !important; |
|
} |
|
|
|
#toolbar { |
|
position: absolute; |
|
height: calc(100% - 340px); |
|
width: 76px; |
|
background-color: var(--panel-back); |
|
border-right: 1px solid var(--panel-stroke); |
|
left: 0px; |
|
top: 0px; |
|
box-sizing: border-box; |
|
z-index: 99999; |
|
box-shadow: 1px 0px 0px #000000; |
|
} |
|
#tool-wrap { |
|
overflow-y: overlay; |
|
margin-top: 60px; |
|
height: calc(100% - 60px); |
|
} |
|
.tool { |
|
border-radius: 5px; |
|
width: 55px; |
|
height: 50px; |
|
text-align: center; |
|
position: relative; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-top: 10px; |
|
} |
|
.tool:not(.tool-active):hover { |
|
cursor: pointer; |
|
background-color: var(--input-color) !important; |
|
} |
|
.tool-active { |
|
background-color: var(--accent-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
} |
|
.tool-active:hover { |
|
cursor: pointer; |
|
} |
|
.tool img { |
|
margin: auto; |
|
width: 16px; |
|
margin-top: 7px; |
|
} |
|
#shape-tool img { |
|
width: 18px !important; |
|
} |
|
#upload-tool img { |
|
width: 20px !important; |
|
} |
|
#audio-tool img { |
|
width: 20px !important; |
|
} |
|
.tool p { |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-weight: 500; |
|
font-size: 12px; |
|
margin: 0px; |
|
} |
|
.tool-active p { |
|
color: var(--main-text-color) !important; |
|
} |
|
|
|
#behind-browser { |
|
position: absolute; |
|
height: 100%; |
|
width: 299px; |
|
left: 76px; |
|
background: var(--panel-back); |
|
border-right: 1px solid var(--panel-stroke); |
|
z-index: 1; |
|
box-sizing: border-box; |
|
} |
|
#browser { |
|
position: absolute; |
|
height: calc(100% - 450px); |
|
width: 299px; |
|
background-color: var(--panel-back); |
|
border-right: 1px solid var(--panel-stroke); |
|
left: 76px; |
|
top: 110px; |
|
box-sizing: border-box; |
|
z-index: 999999; |
|
overflow-y: overlay; |
|
display: block; |
|
overflow-x: hidden; |
|
} |
|
.collapsed { |
|
display: none !important; |
|
} |
|
#browser-container { |
|
width: 260px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
height: 100%; |
|
} |
|
#collapse { |
|
position: absolute; |
|
right: 18px; |
|
top: 23px; |
|
} |
|
#collapse:hover { |
|
cursor: pointer; |
|
} |
|
#images-grid { |
|
width: 100%; |
|
line-height: 0; |
|
-webkit-column-count: 2; |
|
-webkit-column-gap: 15px; |
|
-moz-column-count: 2; |
|
-moz-column-gap: 15px; |
|
column-count: 2; |
|
column-gap: 15px; |
|
padding-bottom: 10px; |
|
} |
|
.image-grid-item, |
|
.video-grid-item { |
|
width: 120px; |
|
margin-bottom: 15px; |
|
position: relative; |
|
} |
|
.image-grid-item:hover, |
|
.video-grid-item:hover { |
|
cursor: pointer; |
|
} |
|
.image-grid-item img, |
|
.video-grid-item img { |
|
width: 100%; |
|
background-image: url("assets/loading.gif"); |
|
background-size: 30px; |
|
background-color: var(--panel-back); |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
min-height: 25px; |
|
} |
|
.image-grid-item .credit { |
|
display: none; |
|
position: absolute; |
|
top: 5px; |
|
right: 5px; |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 12px; |
|
text-align: right; |
|
text-decoration: none; |
|
text-shadow: 0px 1px 5px #000000; |
|
width: 110px; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
z-index: 9; |
|
height: 20px; |
|
line-height: 20px; |
|
} |
|
.image-grid-item #time-video { |
|
font-size: 12px; |
|
color: var(--main-text-color); |
|
text-align: center; |
|
background: rgba(0, 0, 0, 0.8); |
|
border-radius: 5px; |
|
height: 25px; |
|
line-height: 25px; |
|
position: absolute; |
|
left: 5px; |
|
bottom: 5px; |
|
font-family: Inter; |
|
padding-left: 5px; |
|
padding-right: 5px; |
|
} |
|
.image-grid-item:hover .credit { |
|
display: block !important; |
|
} |
|
.delete-media { |
|
opacity: 0.9; |
|
position: absolute; |
|
top: 7px; |
|
right: 7px; |
|
width: 25px !important; |
|
z-index: 99999; |
|
visibility: hidden; |
|
} |
|
.image-grid-item:hover .delete-media, |
|
.video-grid-item:hover .delete-media { |
|
visibility: visible !important; |
|
} |
|
.more-active { |
|
visibility: visible !important; |
|
} |
|
.gallery-row { |
|
margin-top: 20px; |
|
display: grid; |
|
grid-gap: 15px; |
|
width: 100%; |
|
grid-auto-columns: auto; |
|
grid-template-columns: 52px 52px 52px 52px; |
|
overflow: hidden; |
|
} |
|
.scroll-row:before { |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
background: linear-gradient(270deg, rgba(20, 22, 41, 0) 0%, #141629 63.28%); |
|
width: 50px; |
|
height: 80px; |
|
margin-left: -10px; |
|
z-index: 99999; |
|
pointer-events: none; |
|
} |
|
.gallery-row::-webkit-scrollbar { |
|
width: 0; |
|
background: transparent; |
|
} |
|
#browser-search { |
|
margin-top: 15px; |
|
margin-bottom: 20px; |
|
} |
|
#search-fixed { |
|
position: fixed; |
|
top: 0px; |
|
width: 279px; |
|
padding-left: 19px; |
|
margin-left: -19px; |
|
z-index: 999999; |
|
background-color: var(--panel-back); |
|
padding-top: 10px; |
|
} |
|
.search-scrolling { |
|
box-shadow: 0px 8px 4px -4px rgba(12, 13, 26, 0.5); |
|
} |
|
.audio-browser { |
|
padding-bottom: 11px; |
|
} |
|
#browser-search input { |
|
background-color: var(--input-color); |
|
border: 0px; |
|
box-sizing: border-box; |
|
height: 35px; |
|
width: calc(100% - 70px); |
|
border-radius: 5px; |
|
text-indent: 28px; |
|
font-size: 14px; |
|
font-family: Inter; |
|
color: var(--main-text-color); |
|
outline: none !important; |
|
padding-right: 30px; |
|
display: inline-block; |
|
box-sizing: border-box; |
|
vertical-align: top; |
|
} |
|
#search-button { |
|
background-color: var(--accent-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
display: inline-block; |
|
width: 45px; |
|
color: #fff; |
|
font-family: Inter; |
|
font-size: 14px; |
|
height: 35px; |
|
vertical-align: top; |
|
box-sizing: border-box; |
|
text-align: center; |
|
line-height: 35px; |
|
font-weight: 500; |
|
margin-left: 5px; |
|
} |
|
#search-button:hover { |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
#search-icon { |
|
position: absolute; |
|
left: 30px; |
|
margin-top: 10px; |
|
} |
|
#delete-search { |
|
position: absolute; |
|
right: 75px; |
|
margin-top: 8px; |
|
width: 20px; |
|
visibility: hidden; |
|
} |
|
#delete-search:hover { |
|
cursor: pointer; |
|
opacity: 0.5; |
|
} |
|
.show-delete { |
|
visibility: visible !important; |
|
} |
|
#pixabay { |
|
right: 0px; |
|
margin-left: 0px; |
|
margin-top: 10px; |
|
margin-right: 75px; |
|
opacity: 0.4; |
|
position: absolute; |
|
display: inline-block; |
|
} |
|
.hide-pixabay { |
|
display: none !important; |
|
} |
|
|
|
#landing { |
|
width: calc(100% - 20px); |
|
display: block; |
|
} |
|
.upload-landing { |
|
margin-top: 15px !important; |
|
} |
|
.hide-landing { |
|
display: none !important; |
|
} |
|
#landing-text { |
|
color: var(--secondary-text-color); |
|
font-size: 12px; |
|
line-height: normal; |
|
font-family: Inter; |
|
} |
|
.audio-landing-text { |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
} |
|
#landing-text a { |
|
text-decoration: none !important; |
|
color: var(--main-text-color); |
|
} |
|
#categories { |
|
margin-top: 15px; |
|
} |
|
.category { |
|
width: 100%; |
|
border: 1px solid var(--panel-stroke); |
|
height: 38px; |
|
line-height: 38px; |
|
color: #fff; |
|
font-size: 12px; |
|
font-family: Inter; |
|
border-radius: 5px; |
|
margin-bottom: 8px; |
|
} |
|
.category:hover { |
|
cursor: pointer; |
|
background: var(--panel-stroke); |
|
} |
|
.category img { |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-left: 10px; |
|
margin-right: 10px; |
|
width: 20px; |
|
} |
|
#shapes-cont { |
|
padding-bottom: 10px; |
|
} |
|
#shapes-row .grid-item img { |
|
width: unset !important; |
|
} |
|
.grid-item, |
|
.grid-emoji-item { |
|
background-color: var(--input-color); |
|
border-radius: 5px; |
|
height: 60px; |
|
width: 60px; |
|
text-align: center; |
|
position: relative; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
visibility: visible; |
|
} |
|
.grid-item:hover, |
|
.grid-emoji-item:hover { |
|
cursor: pointer; |
|
} |
|
.grid-item img, |
|
.grid-emoji-item img { |
|
width: 30px; |
|
margin: auto; |
|
text-align: center; |
|
position: absolute; |
|
top: 0px; |
|
bottom: 0px; |
|
left: 0px; |
|
right: 0px; |
|
max-height: 100%; |
|
} |
|
.row-title { |
|
font-family: Inter; |
|
font-size: 14px; |
|
color: var(--secondary-text-color); |
|
font-weight: 500; |
|
} |
|
.right-arrow { |
|
position: absolute; |
|
margin-left: 253px; |
|
margin-top: 23px; |
|
z-index: 99999; |
|
} |
|
.right-arrow:hover, |
|
.left-arrow:hover { |
|
cursor: pointer; |
|
} |
|
.right-arrow img, |
|
.left-arrow img { |
|
width: 10px; |
|
} |
|
.left-arrow { |
|
position: absolute; |
|
margin-left: 0px; |
|
margin-top: 23px; |
|
z-index: 99999; |
|
} |
|
.arrow-hidden { |
|
visibility: hidden !important; |
|
} |
|
.left-arrow img { |
|
transform: scaleX(-1); |
|
} |
|
|
|
#no-results { |
|
color: var(--secondary-text-color); |
|
font-size: 14px; |
|
font-family: Inter; |
|
text-align: center; |
|
margin-top: 10px; |
|
line-height: normal; |
|
} |
|
|
|
.add-text { |
|
width: 100%; |
|
color: var(--main-text-color); |
|
background-color: var(--input-color); |
|
font-family: Inter; |
|
margin-bottom: 10px; |
|
border-radius: 5px; |
|
text-indent: 10px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
} |
|
.add-text:hover { |
|
cursor: pointer; |
|
background-color: var(--button-hover) !important; |
|
} |
|
#heading-text { |
|
font-size: 22px; |
|
font-weight: 700; |
|
height: 44px; |
|
line-height: 44px; |
|
} |
|
#subheading-text { |
|
font-size: 16px; |
|
font-weight: 500; |
|
height: 34px; |
|
line-height: 34px; |
|
} |
|
#body-text { |
|
font-size: 12px; |
|
font-weight: 400; |
|
height: 28px; |
|
line-height: 28px; |
|
} |
|
#item-text { |
|
font-size: 16px; |
|
font-weight: 500; |
|
height: 34px; |
|
line-height: 34px; |
|
} |
|
|
|
#upload-button, |
|
#audio-upload-button { |
|
height: 38px; |
|
line-height: 38px; |
|
width: 93%; |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 600; |
|
text-align: center; |
|
border-radius: 5px; |
|
background: var(--accent-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
margin-top: 20px; |
|
} |
|
.uploading { |
|
opacity: 0.6 !important; |
|
pointer-events: none !important; |
|
} |
|
#upload-button:hover, |
|
#audio-upload-button:hover { |
|
opacity: 0.6; |
|
cursor: pointer; |
|
} |
|
#upload-button img, |
|
#audio-upload-button img { |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-right: 5px; |
|
} |
|
.remove-audio { |
|
background-color: #e00e53 !important; |
|
} |
|
#upload-tabs { |
|
width: calc(100% - 20px); |
|
margin-top: 10px; |
|
margin-bottom: 10px; |
|
} |
|
.upload-tab { |
|
width: calc(100% / 2); |
|
display: inline-block; |
|
text-align: center; |
|
font-family: Inter; |
|
color: var(--secondary-text-color); |
|
font-size: 14px; |
|
font-weight: 500; |
|
vertical-align: middle; |
|
height: 42px; |
|
line-height: 40px; |
|
border-bottom: 1px solid var(--panel-stroke); |
|
box-sizing: border-box; |
|
} |
|
.upload-tab-active { |
|
border-bottom: 3px solid var(--accent-color) !important; |
|
color: var(--main-text-color) !important; |
|
} |
|
.upload-tab:not(.upload-tab-active):hover { |
|
cursor: pointer; |
|
opacity: 0.6; |
|
} |
|
|
|
#properties { |
|
position: absolute; |
|
right: 0px; |
|
top: 0px; |
|
width: 300px; |
|
height: calc(100% - 340px); |
|
background-color: var(--panel-back); |
|
border-left: 1px solid var(--panel-stroke); |
|
z-index: 999; |
|
overflow-y: overlay; |
|
} |
|
#properties-overlay { |
|
width: 100%; |
|
height: 100%; |
|
z-index: 99999; |
|
background-color: #000; |
|
opacity: 0.4; |
|
position: fixed; |
|
visibility: hidden; |
|
} |
|
.properties-disabled { |
|
visibility: visible !important; |
|
} |
|
|
|
#align { |
|
margin-left: auto; |
|
margin-right: auto; |
|
text-align: center; |
|
margin-top: 20px; |
|
margin-bottom: 15px; |
|
} |
|
#align-v, |
|
#align-h { |
|
display: inline-block; |
|
} |
|
#align-v { |
|
margin-right: 25px; |
|
} |
|
.align { |
|
margin-right: 15px; |
|
} |
|
.align:hover { |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
.align-off { |
|
opacity: 0.3 !important; |
|
pointer-events: none; |
|
} |
|
hr { |
|
width: 260px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
border: none; |
|
height: 1px; |
|
background-color: var(--panel-stroke); |
|
margin-bottom: 20px; |
|
} |
|
|
|
.panel-section { |
|
width: 260px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
.property-title { |
|
font-family: Inter; |
|
color: var(--main-text-color); |
|
font-weight: 600; |
|
font-size: 14px; |
|
margin-bottom: 10px; |
|
} |
|
table { |
|
width: 100%; |
|
} |
|
table, |
|
th { |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-weight: 500 !important; |
|
font-size: 14px; |
|
border-spacing: 0px 10px; |
|
} |
|
th { |
|
height: 35px; |
|
} |
|
.name-col { |
|
text-align: left; |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-weight: 400 !important; |
|
font-size: 14px; |
|
} |
|
.value-col { |
|
text-align: right; |
|
width: 189px; |
|
display: flex; |
|
align-items: center; |
|
margin-left: auto; |
|
} |
|
|
|
.nice-select, |
|
.list, |
|
li { |
|
background-color: var(--input-color) !important; |
|
border: none; |
|
width: 100% !important; |
|
height: 35px; |
|
padding-left: 11px; |
|
font-weight: normal !important; |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px !important; |
|
} |
|
.list { |
|
height: unset !important; |
|
max-height: 150px; |
|
overflow-y: overlay !important; |
|
} |
|
.nice-select:after { |
|
border-bottom: 1.5px solid var(--secondary-text-color) !important; |
|
border-right: 1.5px solid var(--secondary-text-color) !important; |
|
} |
|
|
|
input:invalid { |
|
outline: none !important; |
|
border: 0px !important; |
|
box-shadow: none !important; |
|
} |
|
input:required { |
|
box-shadow: none !important; |
|
} |
|
.property-input { |
|
display: inline-block; |
|
} |
|
.property-input input { |
|
background-color: var(--input-color) !important; |
|
border: none; |
|
color: var(--main-text-color); |
|
height: 35px; |
|
font-family: Inter !important; |
|
width: 91px; |
|
box-sizing: border-box; |
|
text-indent: 11px; |
|
border-radius: 5px; |
|
font-weight: normal; |
|
font-size: 14px; |
|
} |
|
.property-input:nth-child(2) input { |
|
margin-left: 7px; |
|
} |
|
.property-input:after { |
|
content: attr(data-label); |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-weight: 400; |
|
font-size: 14px; |
|
margin-top: 10px; |
|
margin-left: -20px; |
|
text-align: right; |
|
position: absolute; |
|
} |
|
input::-webkit-outer-spin-button, |
|
input::-webkit-inner-spin-button { |
|
-webkit-appearance: none; |
|
margin: 0; |
|
} |
|
|
|
input[type="number"] { |
|
-moz-appearance: textfield; |
|
} |
|
|
|
#canvas-color, |
|
#chroma-color |
|
#object-color, |
|
.object-color, |
|
#text-color, |
|
#object-color, |
|
#object-color-stroke, |
|
#object-color-shadow { |
|
align-items: center; |
|
display: flex; |
|
} |
|
#canvas-color input, |
|
#chroma-color input, |
|
#text-color input, |
|
#object-color input, |
|
#object-color-fill input, |
|
#object-color-stroke input, |
|
#object-color-shadow input { |
|
width: 80px; |
|
background-color: var(--input-color); |
|
border-radius: 0px 5px 5px 0px; |
|
color: var(--main-text-color); |
|
height: 35px; |
|
border: none; |
|
font-size: 14px; |
|
text-indent: 9px; |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-top: -27px; |
|
margin-left: -4px; |
|
font-family: Inter; |
|
font-weight: normal; |
|
box-sizing: border-box; |
|
margin-top: 0px; |
|
align-items: center; |
|
} |
|
#text-color input { |
|
margin-top: 0px!important; |
|
} |
|
#color-side, |
|
#color-chroma-side, |
|
#color-fill-side, |
|
#color-text-side, |
|
#color-stroke-side, |
|
#color-shadow-side { |
|
height: 35px; |
|
border-radius: 5px 0px 0px 5px; |
|
background-color: var(--main-text-color); |
|
width: 35px; |
|
display: inline-block; |
|
box-sizing: border-box; |
|
} |
|
#canvas-color-opacity input, |
|
#object-o input, |
|
#object-color-opacity input, |
|
#object-color-fill-opacity input, |
|
#color-text-opacity input, |
|
#object-color-stroke-opacity input, |
|
#object-color-shadow-opacity input, |
|
#object-shadow-o input, |
|
#text-h input, |
|
#text-v input { |
|
width: 71px !important; |
|
} |
|
|
|
#duration-cell { |
|
text-align: left !important; |
|
} |
|
|
|
#color-picker { |
|
position: absolute; |
|
top: 100px; |
|
left: 100px; |
|
} |
|
.pcr-app { |
|
background-color: var(--panel-back) !important; |
|
font-family: Inter; |
|
position: absolute !important; |
|
right: 320px !important; |
|
left: unset !important; |
|
top: 250px !important; |
|
z-index: 999999999!important; |
|
} |
|
.pcr-result { |
|
background-color: var(--input-color) !important; |
|
border-radius: 5px !important; |
|
color: #69708a !important; |
|
} |
|
.pcr-type { |
|
border-radius: 5px !important; |
|
background-color: var(--input-color) !important; |
|
} |
|
.pcr-type.active { |
|
background-color: #0f6df7 !important; |
|
} |
|
|
|
#select-opacity, |
|
.select-filter, |
|
#select-shadow-opacity, |
|
#select-line, |
|
#select-letter { |
|
width: 102px; |
|
margin-right: 7px; |
|
display: inline-block; |
|
vertical-align: middle; |
|
z-index: 1; |
|
} |
|
.rs-handle { |
|
background-color: var(--main-text-color) !important; |
|
border: 7px solid var(--main-text-color); |
|
box-sizing: border-box; |
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2) !important; |
|
width: 13px !important; |
|
height: 13px !important; |
|
margin-top: -8px !important; |
|
border-radius: 30px !important; |
|
position: absolute !important; |
|
transform: translate(-7.5px, 0px); |
|
} |
|
.rs-progress { |
|
background-color: #116df7 !important; |
|
height: 2px !important; |
|
border-radius: 30px !important; |
|
box-sizing: border-box !important; |
|
} |
|
.rs-bar { |
|
height: 2px !important; |
|
background-color: #222544 !important; |
|
border-radius: 30px !important; |
|
box-sizing: border-box !important; |
|
} |
|
.rs-wrap { |
|
position: relative !important; |
|
} |
|
.rs-theme-default .rs-progress, |
|
.rs-theme-default.rs-design-2d .rs-progress::before { |
|
background-color: #116df7 !important; |
|
border-radius: 30px 0px 0px 30px !important; |
|
} |
|
|
|
.align-text, |
|
.format-text, |
|
.line-join { |
|
display: inline-block; |
|
background-color: var(--input-color); |
|
height: 35px; |
|
width: 47px; |
|
box-sizing: border-box; |
|
text-align: center; |
|
line-height: 47px; |
|
position: relative; |
|
} |
|
.align-text:nth-of-type(1), |
|
.format-text:nth-of-type(1), |
|
.line-join:nth-of-type(1) { |
|
border-radius: 5px 0px 0px 5px; |
|
} |
|
.align-text:nth-of-type(4), |
|
.format-text:nth-of-type(4), |
|
.line-join:nth-of-type(4) { |
|
border-radius: 0px 5px 5px 0px; |
|
} |
|
.align-text img, |
|
.format-text img, |
|
.line-join img { |
|
position: absolute; |
|
top: 0px; |
|
right: 0px; |
|
left: 0px; |
|
bottom: 0px; |
|
margin: auto; |
|
} |
|
.align-text-active, |
|
.format-text-active, |
|
.line-join-active { |
|
background-color: var(--accent-color) !important; |
|
} |
|
.align-text:not(.align-text-active):hover, |
|
.format-text:not(.format-text-active):hover, |
|
.line-join:not(.line-join-active):hover { |
|
background-color: var(--button-hover) !important; |
|
cursor: pointer; |
|
} |
|
.format-text-active:hover { |
|
cursor: pointer; |
|
} |
|
.left-col { |
|
text-align: left !important; |
|
} |
|
|
|
#group-objects, |
|
#ungroup-objects { |
|
height: 35px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
background-color: var(--accent-color); |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-weight: 500; |
|
font-size: 14px; |
|
text-align: center; |
|
line-height: 35px; |
|
width: 100%; |
|
vertical-align: middle; |
|
} |
|
#image-buttons { |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
} |
|
#filters-button { |
|
height: 35px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
background-color: var(--input-color); |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-weight: 500; |
|
font-size: 14px; |
|
text-align: center; |
|
line-height: 35px; |
|
width: 48%; |
|
display: inline-block; |
|
vertical-align: middle; |
|
} |
|
.filters-video { |
|
width: 100%!important; |
|
} |
|
#crop-image { |
|
height: 35px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
background-color: var(--accent-color); |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-weight: 600; |
|
font-size: 14px; |
|
text-align: center; |
|
line-height: 35px; |
|
width: 48%; |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-left: 10px; |
|
} |
|
#crop-image img, #filters-button img { |
|
vertical-align: middle; |
|
margin-right: 5px; |
|
margin-top: -4px; |
|
} |
|
#crop-image:hover, |
|
#filters-button:hover, |
|
#group-objects:hover, |
|
#ungroup-objects:hover { |
|
cursor: pointer; |
|
opacity: 0.6; |
|
} |
|
|
|
#controls { |
|
position: absolute; |
|
bottom: 0px; |
|
left: 0px; |
|
width: 100%; |
|
height: 60px; |
|
border-top: 1px solid var(--panel-stroke); |
|
background-color: var(--panel-back); |
|
z-index: 99999999; |
|
box-shadow: 0px -1px 0px #000000; |
|
} |
|
#playback { |
|
position: absolute; |
|
margin: auto; |
|
left: 0px; |
|
right: 0px; |
|
text-align: center; |
|
height: 60px; |
|
bottom: 0px; |
|
} |
|
#playback * { |
|
margin-bottom: -25px; |
|
} |
|
#play-button:hover, |
|
#skip-backward:hover, |
|
#skip-forward:hover { |
|
cursor: pointer; |
|
} |
|
#skip-forward, |
|
#skip-backward { |
|
display: inline-block; |
|
} |
|
#skip-backward { |
|
transform: scaleX(-1); |
|
margin-right: 15px; |
|
} |
|
#skip-forward { |
|
margin-left: 15px; |
|
} |
|
#current-time { |
|
position: absolute; |
|
margin-left: auto; |
|
margin-right: auto; |
|
left: 0px; |
|
right: 0px; |
|
transform: translate(-110px, 20px); |
|
width: 100px; |
|
} |
|
#current-time input, |
|
#total-time input { |
|
text-align: left; |
|
background-color: transparent; |
|
color: var(--main-text-color); |
|
border: none; |
|
font-family: Inter; |
|
font-weight: normal; |
|
font-size: 14px; |
|
width: 62px; |
|
} |
|
#current-time input:focus, |
|
#total-time input:focus { |
|
border: none !important; |
|
outline: none !important; |
|
} |
|
#total-time { |
|
position: absolute; |
|
margin-left: auto; |
|
margin-right: auto; |
|
left: 0px; |
|
right: 0px; |
|
width: 100px; |
|
transform: translate(110px, 3px); |
|
} |
|
|
|
#share { |
|
width: 160px; |
|
position: absolute; |
|
right: 160px; |
|
top: 10px; |
|
height: 38px; |
|
line-height: 38px; |
|
text-align: center; |
|
background-color: #30314e; |
|
color: var(--main-text-color); |
|
border-radius: 5px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
font-family: Inter; |
|
font-weight: 500; |
|
font-size: 14px; |
|
} |
|
#share img { |
|
margin-bottom: -3px; |
|
margin-right: 5px; |
|
} |
|
#share:hover { |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
|
|
#download { |
|
height: 38px; |
|
font-family: Inter; |
|
color: var(--main-text-color); |
|
font-size: 14px; |
|
font-weight: 500; |
|
text-align: center; |
|
line-height: 38px; |
|
background-color: var(--accent-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
padding-left: 20px; |
|
padding-right: 20px; |
|
position: absolute; |
|
right: 15px; |
|
bottom: 12px; |
|
} |
|
#download img { |
|
vertical-align: middle; |
|
margin-right: 5px; |
|
margin-top: -2px; |
|
} |
|
#download:hover { |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
|
|
#import-export-modal { |
|
width: 300px; |
|
height: 265px; |
|
background-color: var(--panel-back); |
|
border: 1px solid var(--panel-stroke); |
|
border-radius: 5px; |
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3); |
|
position: absolute; |
|
right: 160px; |
|
bottom: 70px; |
|
visibility: hidden; |
|
display: block; |
|
z-index: 99999999999; |
|
} |
|
.subtitle { |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
margin-left: 20px; |
|
} |
|
.header-2 { |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
margin-left: 20px; |
|
} |
|
#import-project, |
|
#export-project { |
|
background: var(--input-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
color: #fff; |
|
text-align: center; |
|
height: 38px; |
|
line-height: 38px; |
|
margin-left: 20px; |
|
width: calc(100% - 40px); |
|
margin-left: auto; |
|
margin-right: auto; |
|
font-family: Inter; |
|
font-size: 14px; |
|
} |
|
#import-project img, |
|
#export-project img { |
|
vertical-align: middle; |
|
margin-right: 5px; |
|
margin-bottom: 5px; |
|
} |
|
#import-project:hover, |
|
#export-project:hover { |
|
cursor: pointer; |
|
opacity: 0.7; |
|
} |
|
|
|
#download-modal { |
|
width: 300px; |
|
height: 255px; |
|
background-color: var(--panel-back); |
|
border: 1px solid var(--panel-stroke); |
|
border-radius: 5px; |
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3); |
|
position: absolute; |
|
right: 17px; |
|
bottom: 70px; |
|
visibility: hidden; |
|
z-index: 9999999999; |
|
} |
|
#background-overlay { |
|
height: calc(100% - 60px); |
|
width: 100%; |
|
position: absolute; |
|
background: #070a1b; |
|
opacity: 0.6; |
|
visibility: hidden; |
|
z-index: 999999999; |
|
left: 0px; |
|
bottom: 60px; |
|
} |
|
.modal-open { |
|
visibility: visible !important; |
|
} |
|
.header { |
|
font-family: Inter; |
|
color: var(--main-text-color); |
|
font-style: normal; |
|
font-weight: bold; |
|
font-size: 14px; |
|
margin-left: 20px; |
|
} |
|
.subheader { |
|
font-family: Inter; |
|
color: var(--secondary-text-color); |
|
font-style: normal; |
|
font-weight: 500; |
|
font-size: 14px; |
|
margin-left: 20px; |
|
} |
|
#radio { |
|
margin-left: 10px; |
|
margin-bottom: 20px; |
|
} |
|
.magic-radio:checked + label:before { |
|
background-color: var(--accent-color) !important; |
|
border: 0px !important; |
|
} |
|
.magic-radio + label:after { |
|
background-color: #fff; |
|
border: 0px !important; |
|
} |
|
.magic-checkbox + label:before, |
|
.magic-radio + label:before { |
|
border: 0px !important; |
|
background-color: #3a3f61; |
|
} |
|
label { |
|
font-family: Inter; |
|
font-style: normal; |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: var(--main-text-color); |
|
margin-left: 10px; |
|
margin-bottom: 14px; |
|
} |
|
label span { |
|
color: var(--secondary-text-color); |
|
} |
|
#download-real { |
|
height: 38px; |
|
font-family: Inter; |
|
color: var(--main-text-color); |
|
font-size: 14px; |
|
font-weight: 600; |
|
text-align: center; |
|
line-height: 38px; |
|
background-color: var(--accent-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 5px; |
|
width: 85%; |
|
margin: auto; |
|
} |
|
#download-real:not(.downloading):hover { |
|
opacity: 0.6; |
|
cursor: pointer; |
|
} |
|
.downloading { |
|
opacity: 0.6 !important; |
|
pointer-events: none; |
|
} |
|
|
|
#canvas-area { |
|
position: absolute; |
|
top: 0px; |
|
left: 375px; |
|
height: calc(100% - 342px); |
|
width: calc(100% - 675px); |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
} |
|
.canvas-full { |
|
left: 76px !important; |
|
width: calc(100% - 376px) !important; |
|
} |
|
.canvas-container { |
|
left: 0px; |
|
top: 0px; |
|
right: 0px; |
|
bottom: 0px; |
|
margin: auto; |
|
} |
|
canvas { |
|
top: 0px !important; |
|
bottom: 0px !important; |
|
left: 0px; |
|
right: 0px; |
|
margin: auto; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
#replace-image { |
|
position: absolute; |
|
bottom: 10px; |
|
left: 0px; |
|
right: 0px; |
|
text-align: center; |
|
margin-left: auto; |
|
margin-right: auto; |
|
z-index: 999999999; |
|
opacity: 0; |
|
transition: all 0.25s cubic-bezier(0.05, 0.03, 0.35, 1); |
|
pointer-events: none; |
|
} |
|
.replace-active { |
|
bottom: 20px !important; |
|
opacity: 1 !important; |
|
} |
|
.load-media { |
|
position: absolute; |
|
bottom: 10px; |
|
left: 0px; |
|
right: 0px; |
|
text-align: center; |
|
margin-left: auto; |
|
margin-right: auto; |
|
z-index: 999999999; |
|
opacity: 0; |
|
transition: all 0.25s cubic-bezier(0.05, 0.03, 0.35, 1); |
|
pointer-events: none; |
|
} |
|
.loading-active { |
|
bottom: 20px !important; |
|
opacity: 1 !important; |
|
} |
|
|
|
#layer-list { |
|
position: absolute; |
|
height: 245px; |
|
width: 375px; |
|
left: 0px; |
|
bottom: 60px; |
|
background-color: var(--panel-back); |
|
box-sizing: border-box; |
|
border-right: 1px solid var(--panel-stroke); |
|
z-index: 9999999; |
|
} |
|
#layer-inner-list { |
|
width: 100%; |
|
height: 100%; |
|
overflow: overlay; |
|
margin-top: 5px; |
|
} |
|
.layer { |
|
width: 100%; |
|
margin-bottom: 2px; |
|
box-sizing: border-box; |
|
} |
|
.layer:hover { |
|
cursor: pointer; |
|
} |
|
.layer:nth-child(odd), |
|
.layer:nth-child(odd) .properties { |
|
background: var(--panel-back); |
|
} |
|
.layer:nth-child(even), |
|
layer:nth-child(even) .properties { |
|
background: var(--input-color); |
|
} |
|
.layer-selected { |
|
background: var(--accent-color) !important; |
|
} |
|
.layer-selected .properties { |
|
background: #0b2854 !important; |
|
} |
|
.layer-name, |
|
.property-name { |
|
height: 35px; |
|
width: 100%; |
|
color: var(--main-text-color); |
|
line-height: 35px; |
|
font-weight: 500; |
|
font-family: "Inter", sans-serif; |
|
font-size: 14px; |
|
text-indent: 25px; |
|
display: inline-block; |
|
} |
|
.layer-custom-name { |
|
background: transparent; |
|
color: var(--main-text-color); |
|
outline: none; |
|
border: 0px; |
|
font-weight: 500; |
|
font-size: 14px; |
|
font-family: "Inter"; |
|
height: 25px; |
|
} |
|
.name-active { |
|
background: #fff !important; |
|
color: #000 !important; |
|
border-radius: 5px; |
|
} |
|
.layer-custom-name:focus { |
|
outline: none; |
|
} |
|
.droparrow { |
|
margin-right: 12px; |
|
transform: rotate(30deg); |
|
opacity: 0.8; |
|
} |
|
.layer-icon { |
|
margin-top: -1px; |
|
margin-right: 10px; |
|
width: 13px; |
|
vertical-align: middle; |
|
} |
|
.layeron { |
|
|
|
|
|
|
|
transform: rotate(0deg) !important; |
|
} |
|
.droparrow:hover { |
|
opacity: 1 !important; |
|
} |
|
.layer-name:hover .lock, |
|
.layer-name:hover .freeze { |
|
opacity: 0.8 !important; |
|
} |
|
.layer-name:hover .lock:hover, |
|
.layer-name:hover .freeze:hover { |
|
opacity: 1 !important; |
|
} |
|
.layer-options { |
|
float: right; |
|
margin-top: 5px; |
|
margin-right: 15px; |
|
} |
|
.lock { |
|
display: inline-block; |
|
width: 17px; |
|
opacity: 0; |
|
margin-right: 7px; |
|
} |
|
.freeze { |
|
display: inline-block; |
|
width: 17px; |
|
opacity: 0; |
|
} |
|
.locked, |
|
.frozen { |
|
opacity: 1 !important; |
|
width: 17px; |
|
} |
|
.property-name { |
|
color: var(--secondary-text-color) !important; |
|
margin-bottom: 2px; |
|
text-indent: 50px !important; |
|
text-transform: capitalize; |
|
display: inline-block; |
|
} |
|
.property-name:not(:last-child) { |
|
border-bottom: 1px solid #222544; |
|
} |
|
.property-name:hover .freeze-prop { |
|
opacity: 0.8 !important; |
|
} |
|
.property-name:hover .freeze-prop:hover { |
|
opacity: 1 !important; |
|
} |
|
.freeze-prop { |
|
width: 17px; |
|
float: right; |
|
margin-right: 15px; |
|
margin-top: 7px; |
|
opacity: 0; |
|
} |
|
.property-keyframe { |
|
width: 9px; |
|
height: 9px; |
|
display: inline-block; |
|
margin-right: 12px; |
|
margin-left: -2px; |
|
background: var(--secondary-text-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 1px; |
|
transform: rotate(45deg); |
|
opacity: 0.8; |
|
} |
|
.property-keyframe:hover { |
|
opacity: 1 !important; |
|
} |
|
#layerhead { |
|
text-indent: 25px; |
|
font-family: "Inter", sans-serif; |
|
font-weight: 600; |
|
font-size: 12px; |
|
color: var(--secondary-text-color); |
|
line-height: 40px; |
|
height: 40px; |
|
width: 375px; |
|
position: fixed; |
|
margin-top: -35px; |
|
background-color: var(--panel-back); |
|
box-sizing: border-box; |
|
border-bottom: 1px solid var(--panel-stroke); |
|
border-top: 1px solid var(--panel-stroke); |
|
border-right: 1px solid var(--panel-stroke); |
|
} |
|
.hovering { |
|
background: var(--main-text-color); |
|
height: 2px !important; |
|
} |
|
#nothing { |
|
width: 20px; |
|
height: 20px; |
|
display: block; |
|
opacity: 0; |
|
position: absolute; |
|
} |
|
|
|
#timearea { |
|
position: absolute; |
|
bottom: 60px; |
|
left: 375px; |
|
height: 245px; |
|
background-color: var(--main-back); |
|
width: calc(100% - 375px); |
|
border-top: 1px solid var(--panel-stroke); |
|
z-index: 999; |
|
} |
|
#timeline-handle { |
|
height: 3px; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 337px; |
|
z-index: 999999999999 !important; |
|
} |
|
#timeline-handle:hover { |
|
cursor: ns-resize; |
|
background-color: var(--panel-stroke); |
|
} |
|
#seekarea { |
|
height: 100%; |
|
z-index: 99999; |
|
width: calc(100% - 375px); |
|
overflow-x: auto; |
|
overflow-y: hidden; |
|
position: fixed; |
|
border-bottom: 1px solid var(--panel-stroke); |
|
border-top: 1px solid var(--panel-stroke); |
|
margin-top: -35px; |
|
box-sizing: border-box; |
|
pointer-events: none; |
|
} |
|
#seekarea:before { |
|
content: ""; |
|
display: block; |
|
position: fixed; |
|
width: 100%; |
|
height: 40px; |
|
background-color: var(--main-back); |
|
} |
|
#seekevents { |
|
height: 40px; |
|
width: 100%; |
|
position: fixed; |
|
pointer-events: all; |
|
} |
|
#inner-seekarea { |
|
height: 100%; |
|
box-sizing: border-box; |
|
} |
|
#timeline { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
overflow: overlay; |
|
box-sizing: border-box; |
|
} |
|
#inner-timeline { |
|
width: 2000px; |
|
box-sizing: border-box; |
|
margin-top: 6px; |
|
} |
|
.row { |
|
height: 35px; |
|
width: 100%; |
|
position: relative; |
|
margin-bottom: 2px; |
|
} |
|
.row-el { |
|
height: 100%; |
|
width: 100%; |
|
position: absolute; |
|
background-color: #0b182c; |
|
} |
|
.main-row .row-el { |
|
background-color: #106cf6; |
|
cursor: pointer; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
} |
|
.main-row .row-el:before { |
|
background-color: var(--main-back); |
|
opacity: 0.7; |
|
display: block; |
|
content: ""; |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
z-index: 999; |
|
} |
|
.trim-row { |
|
position: absolute; |
|
background-color: inherit; |
|
display: block; |
|
content: ""; |
|
height: 100%; |
|
width: 100%; |
|
z-index: 9999; |
|
} |
|
.trim-row:before { |
|
width: 5px; |
|
position: absolute; |
|
display: block; |
|
content: ""; |
|
height: 100%; |
|
z-index: 9999 !important; |
|
} |
|
.trim-row:hover:before { |
|
cursor: ew-resize; |
|
} |
|
.trim-row:after { |
|
width: 7px; |
|
position: absolute; |
|
right: 0px; |
|
height: 100%; |
|
content: ""; |
|
z-index: 9999 !important; |
|
} |
|
.trim-row:hover:after { |
|
cursor: ew-resize; |
|
} |
|
.keyframe { |
|
z-index: 999; |
|
width: 0px; |
|
height: 0px; |
|
border-radius: 50%; |
|
background: var(--accent-color); |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
position: absolute; |
|
top: 50%; |
|
transform: translate(0, -50%); |
|
box-sizing: border-box; |
|
} |
|
.keyframe-selected:after { |
|
box-shadow: 0px 0px 0px 2px var(--main-text-color), |
|
inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05) !important; |
|
} |
|
.keyframe:after { |
|
content: ""; |
|
display: block; |
|
margin-left: -4.5px; |
|
width: 9px; |
|
height: 9px; |
|
background: inherit; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
border-radius: 1px; |
|
transform: rotate(45deg); |
|
box-sizing: border-box; |
|
} |
|
|
|
#line-snap { |
|
width: 1px; |
|
height: calc(100% - 5px); |
|
background-color: red; |
|
position: absolute; |
|
opacity: 0; |
|
z-index: 99999; |
|
margin-top: 5px; |
|
} |
|
.line-active { |
|
opacity: 1 !important; |
|
} |
|
|
|
#keyframe-properties { |
|
width: 220px; |
|
height: 90px; |
|
background-color: var(--panel-back); |
|
border: 1px solid var(--panel-stroke); |
|
position: absolute; |
|
top: 100px; |
|
left: 100px; |
|
border-radius: 5px; |
|
z-index: 99999999; |
|
opacity: 0; |
|
display: none; |
|
} |
|
#easing { |
|
width: 192px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
#buttons { |
|
display: table; |
|
width: 100%; |
|
height: 38px; |
|
margin-top: 60px; |
|
} |
|
#delete-keyframe, |
|
#apply-easing { |
|
display: table-cell; |
|
} |
|
#delete-keyframe span { |
|
background-color: #30314e; |
|
color: var(--main-text-color); |
|
border-radius: 5px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
font-family: Inter; |
|
font-weight: 600; |
|
font-size: 14px; |
|
text-align: center; |
|
line-height: 38px; |
|
display: block; |
|
width: 90%; |
|
height: 100%; |
|
} |
|
#apply-easing span { |
|
background-color: var(--accent-color); |
|
color: var(--main-text-color); |
|
border-radius: 5px; |
|
box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05), |
|
inset 0px -2px 1px rgba(0, 0, 0, 0.05); |
|
font-family: Inter; |
|
font-weight: 600; |
|
font-size: 14px; |
|
text-align: center; |
|
line-height: 38px; |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
#apply-easing span:hover, |
|
#delete-keyframe span:hover { |
|
opacity: 0.6; |
|
cursor: pointer; |
|
} |
|
.show-properties { |
|
opacity: 1 !important; |
|
display: block !important; |
|
} |
|
|
|
#seek-hover { |
|
height: 100%; |
|
background-color: #fff; |
|
width: 3px; |
|
opacity: 0.3; |
|
margin-top: 40px; |
|
pointer-events: none; |
|
top: 0px; |
|
z-index: 99999999; |
|
position: absolute; |
|
border-radius: 5px; |
|
} |
|
|
|
#seekbar { |
|
margin-top: 40px; |
|
height: 100%; |
|
width: 2px; |
|
background-color: var(--secondary-text-color); |
|
position: absolute; |
|
z-index: 99999999; |
|
pointer-events: all; |
|
top: 0px; |
|
} |
|
#seekbar:hover { |
|
outline: 3px solid rgba(255, 255, 255, 0.1); |
|
box-sizing: border-box; |
|
} |
|
#seekbar:hover, |
|
.keyframe:hover { |
|
cursor: ew-resize; |
|
} |
|
#seekbar:after { |
|
background: url(assets/seeker.svg); |
|
display: block; |
|
content: ""; |
|
position: absolute; |
|
width: 13px; |
|
height: 18px; |
|
margin-left: -6px; |
|
margin-top: -10px; |
|
z-index: 9; |
|
box-sizing: border-box; |
|
} |
|
|
|
#time-numbers { |
|
height: 40px; |
|
width: max-content; |
|
position: absolute; |
|
z-index: 99999999; |
|
top: 0px; |
|
} |
|
.time-number { |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 500; |
|
color: var(--secondary-text-color); |
|
text-align: center; |
|
width: 20px; |
|
position: relative; |
|
margin-top: 10px; |
|
display: inline-block; |
|
transform: translateX(-10px); |
|
} |
|
.time-number span { |
|
display: block; |
|
width: 1px; |
|
height: 6px; |
|
background-color: #3c406f; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-top: 6px; |
|
} |
|
#timeline-zoom { |
|
position: absolute; |
|
left: 64px; |
|
bottom: 30px; |
|
z-index: 99999; |
|
width: 135px; |
|
} |
|
#timeline-big, |
|
#timeline-small { |
|
position: absolute; |
|
bottom: 20px; |
|
left: 25px; |
|
width: 25px; |
|
} |
|
#timeline-small { |
|
left: 218px; |
|
width: 18px; |
|
} |
|
#speed { |
|
left: 250px; |
|
position: absolute; |
|
bottom: 12px; |
|
z-index: 99999; |
|
font-family: Inter; |
|
color: var(--main-text-color); |
|
border-radius: 5px; |
|
height: 40px; |
|
line-height: 40px; |
|
padding-left: 5px; |
|
padding-right: 5px; |
|
font-size: 14px; |
|
} |
|
.show-speed { |
|
visibility: visible!important; |
|
} |
|
.speed { |
|
width: 100%; |
|
height: 32px; |
|
font-size: 14px; |
|
text-indent: 15px; |
|
line-height: 32px; |
|
border-bottom: 1px solid var(--panel-stroke); |
|
} |
|
.speed:hover { |
|
cursor: pointer; |
|
background: var(--input-color); |
|
} |
|
#speed img { |
|
vertical-align: middle; |
|
} |
|
#speed:hover { |
|
cursor: pointer; |
|
background-color: var(--input-color); |
|
} |
|
#speed-arrow { |
|
transform: scaleY(1); |
|
} |
|
.arrow-on { |
|
transform: scaleY(-1)!important; |
|
} |
|
#speed-settings { |
|
background-color: var(--panel-back); |
|
width: 80px; |
|
position: absolute; |
|
z-index: 9999; |
|
margin-top: -220px; |
|
margin-left: -10px; |
|
border: 1px solid var(--panel-stroke); |
|
border-radius: 5px; |
|
visibility: hidden; |
|
} |
|
.noselect { |
|
-webkit-touch-callout: none; |
|
-webkit-user-select: none; |
|
-khtml-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
|
|
} |
|
#video-upload { |
|
display: none; |
|
} |
|
#filepick, |
|
#filepick2, |
|
#filepick3, |
|
#audio-thing { |
|
position: absolute; |
|
z-index: 9999; |
|
display: none; |
|
} |
|
|
|
#audio-list { |
|
width: 100%; |
|
display: block; |
|
width: calc(100% + 40px); |
|
margin-left: -20px; |
|
} |
|
.audio-item { |
|
width: calc(100% - 40px); |
|
height: 68px; |
|
border-radius: 5px; |
|
border: 1px solid var(--panel-stroke); |
|
margin-bottom: 10px; |
|
margin-left: 20px; |
|
box-sizing: border-box; |
|
} |
|
.audio-item:hover { |
|
cursor: pointer; |
|
background: var(--input-color); |
|
} |
|
.audio-item-active { |
|
border: 1px solid var(--accent-color); |
|
background-color: rgba(22, 95, 205, 0.1) !important; |
|
} |
|
.audio-preview { |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-top: 10px; |
|
margin-left: 8px; |
|
} |
|
.audio-preview img { |
|
width: 10px; |
|
} |
|
.audio-thumb { |
|
width: 50px; |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-left: 10px; |
|
margin-top: 6px; |
|
border-radius: 5px; |
|
} |
|
.audio-info { |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-left: 10px; |
|
font-family: Inter; |
|
font-size: 12px; |
|
margin-top: 8px; |
|
} |
|
.audio-info-title { |
|
color: var(--main-text-color); |
|
} |
|
.audio-info-desc { |
|
margin-top: 2px; |
|
color: var(--secondary-text-color) !important; |
|
text-decoration: none !important; |
|
} |
|
.audio-info-duration { |
|
margin-top: 3px; |
|
color: var(--secondary-text-color) !important; |
|
font-size: 10px !important; |
|
} |
|
#nolayers { |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-top: 60px; |
|
display: block; |
|
} |
|
.yaylayers { |
|
display: none !important; |
|
} |
|
::placeholder { |
|
color: var(--secondary-text-color); |
|
opacity: 1; |
|
} |
|
|
|
:-ms-input-placeholder { |
|
color: var(--secondary-text-color); |
|
} |
|
|
|
::-ms-input-placeholder { |
|
color: var(--secondary-text-color); |
|
} |
|
.selection-area { |
|
background: rgba(46, 115, 252, 0.11); |
|
border: 2px solid rgba(98, 155, 255, 0.81); |
|
border-radius: 0.1em; |
|
z-index: 999999999999 !important; |
|
} |
|
.gallery-row::-webkit-scrollbar, |
|
#layer-inner-list::-webkit-scrollbar { |
|
width: 0px !important; |
|
height: 0px !important; |
|
background: transparent !important; |
|
} |
|
|
|
|
|
#upload-popup { |
|
position: absolute; |
|
z-index: 999999999999; |
|
top: 0px; |
|
left: 0px; |
|
width: 100%; |
|
height: 100%; |
|
display: none; |
|
} |
|
#upload-popup-container { |
|
position: absolute; |
|
left: 0px; |
|
right: 0px; |
|
top: 0px; |
|
bottom: 0px; |
|
margin: auto; |
|
height: 320px; |
|
width: 500px; |
|
background: var(--panel-back); |
|
border: 1px solid var(--panel-stroke); |
|
border-radius: 5px; |
|
z-index: 9999999; |
|
} |
|
#upload-popup-header { |
|
height: 48px; |
|
width: 100%; |
|
position: relative; |
|
line-height: 48px; |
|
} |
|
#upload-popup-title { |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-weight: 600; |
|
font-size: 14px; |
|
margin-left: 15px; |
|
} |
|
#upload-popup-close { |
|
position: absolute; |
|
top: 12px; |
|
right: 15px; |
|
width: 20px; |
|
z-index: 999999999; |
|
} |
|
#upload-popup-close:hover { |
|
cursor: pointer; |
|
opacity: .7; |
|
} |
|
#upload-drop-area { |
|
width: calc(100% - 30px); |
|
margin: auto; |
|
margin-top: 0px; |
|
margin-bottom: 15px; |
|
height: 200px; |
|
border: 2px dashed var(--panel-stroke); |
|
border-radius: 5px; |
|
text-align: center; |
|
} |
|
#upload-drop-area:hover { |
|
cursor: pointer; |
|
background: var(--input-color); |
|
} |
|
.dropping { |
|
background: var(--input-color)!important; |
|
} |
|
#upload-drop-group { |
|
width: 200px; |
|
margin: auto; |
|
text-align: center; |
|
margin-top: 60px; |
|
} |
|
#upload-drop-group img { |
|
margin-bottom: 5px; |
|
} |
|
#upload-drop-title { |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 600; |
|
} |
|
#upload-drop-subtitle { |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 400; |
|
margin-top: 5px; |
|
} |
|
#upload-link { |
|
width: calc(100% - 30px); |
|
margin-left: auto; |
|
margin-right: auto; |
|
height: 48px; |
|
} |
|
#upload-link input { |
|
background: var(--input-color); |
|
border-radius: 5px; |
|
display: inline-block; |
|
box-sizing: border-box; |
|
vertical-align: middle; |
|
width: 83%; |
|
height: 38px; |
|
line-height: 38px; |
|
text-decoration: none; |
|
outline: none; |
|
border: 0px; |
|
text-indent: 10px; |
|
color: var(--main-text-color); |
|
} |
|
#upload-link-add { |
|
background: var(--accent-color); |
|
color: var(--main-text-color); |
|
text-align: center; |
|
font-family: Inter; |
|
height: 38px; |
|
line-height: 38px; |
|
border-radius: 5px; |
|
display: inline-block; |
|
width: 15%; |
|
margin-left: 5px; |
|
vertical-align: middle; |
|
box-sizing: border-box; |
|
font-size: 14px; |
|
} |
|
#upload-link-add:hover { |
|
opacity: .7; |
|
cursor: pointer; |
|
} |
|
.upload-show { |
|
display: block!important; |
|
} |
|
#upload-overlay { |
|
background: #000; |
|
opacity: .5; |
|
z-index: 99999; |
|
top: 0px; |
|
left: 0px; |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
} |
|
|
|
|
|
#filters-parent { |
|
top: 50px; |
|
right: 10px; |
|
width: 250px; |
|
height: calc(100% - 100px); |
|
position: absolute; |
|
z-index: 9999; |
|
background: var(--panel-back); |
|
border: 1px solid var(--panel-stroke); |
|
border-radius: 5px; |
|
overflow: hidden; |
|
visibility: hidden; |
|
} |
|
.show-filters { |
|
visibility: visible!important; |
|
} |
|
#filters { |
|
overflow-y: overlay; |
|
width: 100%; |
|
margin-top: 45px; |
|
height: calc(100% - 45px); |
|
} |
|
#blur { |
|
padding-bottom: 20px; |
|
} |
|
#filters-container { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
#filters-header { |
|
position: fixed; |
|
width: 250px; |
|
background: var(--panel-back); |
|
height: 45px; |
|
line-height: 45px; |
|
z-index: 99999; |
|
margin-top: -45px; |
|
box-shadow: 0px 8px 4px -4px rgb(12 13 26 / 50%); |
|
} |
|
#filters-header #filters-title { |
|
margin-top: 0px!important; |
|
} |
|
#filters-title { |
|
color: var(--main-text-color); |
|
font-size: 14px; |
|
font-weight: 500; |
|
font-family: Inter; |
|
margin-left: 15px; |
|
margin-top: 10px; |
|
} |
|
#reset-filters { |
|
float: right; |
|
margin-top: -20px; |
|
margin-right: 15px; |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
background: var(--input-color); |
|
border-radius: 5px; |
|
padding-left: 8px; |
|
padding-right: 8px; |
|
height: 25px; |
|
line-height: 25px; |
|
text-align: center; |
|
} |
|
#reset-filters:hover { |
|
cursor: pointer; |
|
opacity: .7; |
|
} |
|
#reset-filters img { |
|
margin-right: 3px; |
|
margin-bottom: -2px; |
|
} |
|
#filters-close { |
|
position: absolute; |
|
right: 15px; |
|
top: 13px; |
|
width: 20px; |
|
} |
|
#filters-close:hover { |
|
cursor: pointer; |
|
opacity: .6; |
|
} |
|
#filters .nice-select { |
|
width: calc(100% - 30px)!important; |
|
margin-left: 15px!important; |
|
margin-top: 15px!important; |
|
margin-bottom: 10px!important; |
|
} |
|
#filters hr { |
|
margin-top: 15px!important; |
|
margin-bottom: 15px!important; |
|
width: calc(100% - 30px)!important; |
|
margin-left: 15px!important; |
|
} |
|
.filter-row { |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-weight:400 !important; |
|
font-size: 14px; |
|
margin-top: 25px; |
|
margin-left: 15px; |
|
} |
|
.property-filter-input { |
|
display: inline-block; |
|
} |
|
.property-filter-input input { |
|
background-color: var(--input-color) !important; |
|
border: none; |
|
color: var(--main-text-color); |
|
height: 35px; |
|
font-family: Inter !important; |
|
width: 41px; |
|
box-sizing: border-box; |
|
text-indent: 11px; |
|
border-radius: 5px; |
|
font-weight: normal; |
|
font-size: 14px; |
|
} |
|
.property-filter-input:after { |
|
content: attr(data-label); |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-weight: 400; |
|
font-size: 14px; |
|
margin-top: 10px; |
|
margin-left: -20px; |
|
text-align: right; |
|
position: absolute; |
|
} |
|
.select-filter { |
|
float: right; |
|
margin-top: 10px; |
|
margin-right: 15px; |
|
width: 120px; |
|
} |
|
#status-toggle { |
|
width: 120px; |
|
background: var(--input-color); |
|
border-radius: 5px; |
|
float: right; |
|
margin-right: 15px; |
|
height: 35px; |
|
line-height: 35px; |
|
margin-top: -10px; |
|
overflow: hidden; |
|
} |
|
.status-trigger { |
|
width: 48%; |
|
color: var(--secondary-text-color); |
|
font-size: 14px; |
|
font-family: Inter; |
|
text-align: center; |
|
display: inline-block; |
|
box-sizing: border-box; |
|
} |
|
.status-active { |
|
background: var(--accent-color); |
|
color: var(--main-text-color)!important; |
|
} |
|
.status-trigger:not(.status-active):hover { |
|
cursor: pointer; |
|
opacity: .7; |
|
} |
|
#chroma-color { |
|
float: right; |
|
margin-right: 15px; |
|
margin-top: -8px; |
|
} |
|
#chroma-color input { |
|
margin-top: -27px!important; |
|
width: 85px!important; |
|
} |
|
#filter-color { |
|
margin-top: 30px; |
|
margin-bottom: 25px; |
|
} |
|
|
|
|
|
#eyedropper { |
|
text-align: center; |
|
margin-left: auto; |
|
margin-right: auto; |
|
display: block; |
|
margin-top: 5px; |
|
} |
|
.pcr-current-color:hover { |
|
cursor:pointer; |
|
} |
|
.lottie-canvas { |
|
display: none; |
|
} |
|
|
|
|
|
#animated-text { |
|
width: 100%!important; |
|
} |
|
#animated-text input { |
|
width: 119px; |
|
display: inline-block; |
|
} |
|
#animatedset { |
|
width: 30px; |
|
padding-left: 15px; |
|
padding-right: 15px; |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
background: var(--accent-color); |
|
border-radius: 5px; |
|
text-align: center; |
|
display: inline-block; |
|
height: 35px; |
|
line-height: 35px; |
|
vertical-align: middle; |
|
margin-left: 8px; |
|
margin-top: -3px; |
|
} |
|
#animatedset:hover { |
|
cursor: pointer; |
|
opacity: .7; |
|
} |
|
|
|
#order-toggle { |
|
width: 100%; |
|
background: var(--input-color); |
|
border-radius: 5px; |
|
height: 35px; |
|
line-height: 35px; |
|
overflow: hidden; |
|
} |
|
.order-toggle-item, .order-toggle-item-2 { |
|
width: 50%; |
|
color: var(--secondary-text-color); |
|
font-size: 14px; |
|
font-family: Inter; |
|
text-align: center; |
|
display: inline-block; |
|
box-sizing: border-box; |
|
} |
|
.order-toggle-item-active, .order-toggle-item-active-2 { |
|
background: var(--accent-color); |
|
color: var(--main-text-color)!important; |
|
} |
|
.order-toggle-item:not(.order-toggle-item-active):hover, .order-toggle-item-2:not(.order-toggle-item-active-2):hover { |
|
cursor: pointer; |
|
opacity: .7; |
|
} |
|
|
|
|
|
.animated-text-grid { |
|
display: grid; |
|
grid-gap: 15px; |
|
grid-auto-columns: auto; |
|
grid-template-columns: 75px 75px 75px; |
|
} |
|
.animated-text-item { |
|
background: var(--input-color); |
|
border-radius: 5px; |
|
height: 82px; |
|
width: 82px; |
|
text-align: center; |
|
position: relative; |
|
box-shadow: inset 0px 2px 2px rgb(255 255 255 / 5%), inset 0px -2px 1px rgb(0 0 0 / 5%); |
|
} |
|
.animated-text-item:hover { |
|
cursor: pointer; |
|
background: var(--button-hover)!important; |
|
} |
|
|
|
|
|
#more-over { |
|
position: absolute; |
|
background: var(--panel-back); |
|
width: 200px; |
|
border-radius: 5px; |
|
left: 80px; |
|
z-index: 999999999; |
|
border: 1px solid var(--panel-stroke); |
|
top: 200px; |
|
display: none; |
|
} |
|
.more-show { |
|
display: block!important; |
|
} |
|
#clear-project, #upload-lottie { |
|
height: 38px; |
|
color: var(--secondary-text-color); |
|
font-size: 14px; |
|
font-family: Inter; |
|
display: inline-block; |
|
width: 100%; |
|
line-height: 38px; |
|
vertical-align: middle; |
|
} |
|
#clear-project:hover, #upload-lottie:hover { |
|
cursor: pointer; |
|
background: var(--input-color)!important; |
|
} |
|
#clear-project img { |
|
vertical-align: middle; |
|
display: inline-block; |
|
margin-left: 15px; |
|
margin-right: 5px; |
|
margin-top: -5px; |
|
} |
|
#upload-lottie img { |
|
margin-left: 16px; |
|
margin-right: 5px; |
|
margin-top: -5px; |
|
vertical-align: middle; |
|
display: inline-block; |
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
width: 15px; |
|
height: 15px; |
|
background: transparent; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: transparent; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background-color: rgba(160, 165, 208, 0.2); |
|
border: 4.5px solid transparent; |
|
border-radius: 10px; |
|
background-clip: padding-box; |
|
opacity: 0.3; |
|
} |
|
::-webkit-scrollbar-thumb:hover { |
|
background-color: rgba(160, 165, 208, 0.4); |
|
} |
|
|
|
::-webkit-scrollbar-corner { |
|
background: transparent; |
|
} |
|
#optimized { |
|
padding: 20px; |
|
height: min-content; |
|
width: 300px; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
bottom: 0; |
|
margin: auto; |
|
border-radius: 5px; |
|
background: var(--panel-back); |
|
border: 1px solid var(--panel-stroke); |
|
box-sizing: border-box; |
|
box-shadow: 0 4px 100px rgb(0 0 0 / 25%); |
|
z-index: 9999999999; |
|
} |
|
#emoji { |
|
font-size: 16px; |
|
} |
|
#opt-title { |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 700; |
|
margin-top: 10px; |
|
} |
|
#opt-desc { |
|
color: var(--secondary-text-color); |
|
font-family: Inter; |
|
font-size: 14px; |
|
font-weight: 500; |
|
margin-top: 10px; |
|
line-height: 22px; |
|
} |
|
#disclaimer { |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
position: fixed; |
|
z-index: 999999999; |
|
display: none; |
|
} |
|
#opt-button { |
|
height: 40px; |
|
line-height: 40px; |
|
background: var(--accent-color); |
|
color: var(--main-text-color); |
|
font-family: Inter; |
|
text-align: center; |
|
font-size: 14px; |
|
margin-top: 20px; |
|
border-radius: 5px; |
|
box-shadow: inset 0 2px 2px rgb(255 255 255 / 5%), inset 0 -2px 1px rgb(0 0 0 / 5%); |
|
font-weight: 500; |
|
display: block; |
|
text-decoration: none; |
|
} |
|
#disc-overlay { |
|
background: #000; |
|
opacity: .6; |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
@media only screen and (max-width: 1000px) { |
|
#disclaimer { |
|
display: block!important; |
|
} |
|
#controls, #top-canvas, #bottom-canvas { |
|
display: none; |
|
} |
|
} |
|
|
