mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
new css stylesheet
This commit is contained in:
Kyle
806
css/style-9.css
Normal file
806
css/style-9.css
Normal file
@@ -0,0 +1,806 @@
|
||||
/*fonts*/
|
||||
@font-face {
|
||||
font-family: gothammedium;
|
||||
src: url("/fonts/gotham-medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenb;
|
||||
src: url("/fonts/beleren-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenbsc;
|
||||
src: url("/fonts/beleren-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrix;
|
||||
src: url("/fonts/matrix.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixb;
|
||||
src: url("/fonts/matrix-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantin;
|
||||
src: url("/fonts/mplantin.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantini;
|
||||
src: url("/fonts/mplantin-i.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: plantinsemibold;
|
||||
src: url("/fonts/plantin-semibold.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: goudymedieval;
|
||||
src: url("/fonts/goudy-medieval.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: phyrexianold;
|
||||
src: url("/fonts/phyrexian.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: phyrexian;
|
||||
src: url("/fonts/phy.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Montserrat-SemiBold;
|
||||
src: url("/fonts/Montserrat-SemiBold.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Montserrat-Medium;
|
||||
src: url("/fonts/Montserrat-Medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Acme-Regular;
|
||||
src: url("/fonts/Acme-Regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: fritz-quadrata;
|
||||
src: url("/fonts/fritz-quadrata.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: japanese-title;
|
||||
src: url("/fonts/NudMotoyaExAporo_W6.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: japanese;
|
||||
src: url('/fonts/2012c863631ba71f874aba70590795a1.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: invocation;
|
||||
src: url('/fonts/invocation.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: invocation-text;
|
||||
src: url('/fonts/shango-gothic-bold.ttf');
|
||||
}
|
||||
/*Variables*/
|
||||
:root {
|
||||
--site-background: url('/img/lowpolyBackground.svg');
|
||||
--color-primary: #35603E;
|
||||
--color-selected: #ae9;
|
||||
--color-highlight: #8f8;
|
||||
--font-color: #fff;
|
||||
--font-color-2: #bbb;
|
||||
--input-background: #333;
|
||||
--input-background-selected: #555;
|
||||
--darkened-backdrop-filter: grayscale(1) brightness(0.3);
|
||||
--regular-backdrop-filter: none;
|
||||
--window-diagonal-size: 400px;
|
||||
}
|
||||
/*Main Site Elements*/
|
||||
.background {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(--site-background);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: var(--regular-backdrop-filter);
|
||||
}
|
||||
html {
|
||||
font-size: 12pt;
|
||||
overflow-x: hidden;
|
||||
background: #151515;
|
||||
color: var(--font-color);
|
||||
}
|
||||
body {
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
header, footer, .main-content {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
header, footer {
|
||||
backdrop-filter: var(--darkened-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--darkened-backdrop-filter);
|
||||
}
|
||||
header {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.header-extension {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
footer {
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: calc(1fr - 4rem);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
@media only screen and (min-width: 750px) {
|
||||
footer {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
footer > div > * {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
/*Viewport*/
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
/*Scrollbar Mod*/
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0;
|
||||
background: #222;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
/*Fonts*/
|
||||
.title {
|
||||
font-family: belerenbsc;
|
||||
}
|
||||
h1.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
.shadow {
|
||||
text-shadow: 0.2rem 0.2rem 0.5rem black;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-family: Montserrat-SemiBold, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
::selection {
|
||||
color: var(--font-color);
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
::moz-selection {
|
||||
color: var(--font-color);
|
||||
background: var(--color-highlight);;
|
||||
}
|
||||
/*General styles*/
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.fake-hidden {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
}
|
||||
.margin-bottom {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin-bottom-large {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.margin-bottom-larger {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.margin-top {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.padding {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.readable-background {
|
||||
backdrop-filter: var(--darkened-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--darkened-backdrop-filter);
|
||||
}
|
||||
.box-shadow {
|
||||
box-shadow: 0 2px 8px #0008;
|
||||
}
|
||||
.split-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.layer {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.vertical-center {
|
||||
margin: auto;
|
||||
}
|
||||
@media only screen and (min-width: 750px) {
|
||||
.layer {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
/*Hamburger*/
|
||||
.hamburger {
|
||||
position: fixed;
|
||||
right: 0rem;
|
||||
top: 0rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
stroke-linejoin: round;
|
||||
stroke-miterlimit: 1.5;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
background: var(--color-primary);
|
||||
border-radius: 0 0 0 0.5rem;
|
||||
}
|
||||
.hamburger > path {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 8px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.line1, .line3 {
|
||||
stroke-dasharray: 80 183;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.line2 {
|
||||
stroke-dasharray: 80 80;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.opened > .line1, .opened > .line3 {
|
||||
stroke-dasharray: 103 183;
|
||||
stroke-dashoffset: -80;
|
||||
}
|
||||
.opened > .line2 {
|
||||
stroke-dasharray: 0 60;
|
||||
stroke-dashoffset: -40;
|
||||
}
|
||||
.circle {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
background: var(--color-primary);
|
||||
border-radius: 100%;
|
||||
transition: 0.333s ease;
|
||||
}
|
||||
.hamburger:hover + .circle {
|
||||
/*padding: 3rem;
|
||||
right: -1rem;
|
||||
top: -1rem;*/
|
||||
}
|
||||
.hamburger.opened + .circle {
|
||||
padding: var(--window-diagonal-size);
|
||||
right: calc(0px - var(--window-diagonal-size));
|
||||
top: calc(0px - var(--window-diagonal-size));
|
||||
transition: 0.75s cubic-bezier(.53,.47,.76,-0.52);
|
||||
}
|
||||
/*Menus*/
|
||||
.menu {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 200vh;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
transition: 0.5s;
|
||||
text-align: center;
|
||||
}
|
||||
.menu.menu-visible {
|
||||
bottom: 0;
|
||||
transition-delay: 0.667s;
|
||||
}
|
||||
.menu > div {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
/*Main (Nav) Menu*/
|
||||
.main-menu {
|
||||
padding: 2rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
.main-menu > h2 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
/*notifications*/
|
||||
.notification-container {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
left: 1.5rem;
|
||||
width: calc(100vw - 3rem);
|
||||
max-height: 75vh;
|
||||
overflow-y: scroll;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.notification {
|
||||
border-top: 0.25rem solid var(--color-selected);
|
||||
background: var(--input-background);
|
||||
display: grid;
|
||||
grid-template-columns: auto 2rem;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.notification > h3 {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.notification.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
/*Inputs*/
|
||||
.input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: var(--input-background);
|
||||
color: inherit;
|
||||
font-size: 1.25rem;
|
||||
font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
|
||||
font-weight: 100;
|
||||
border-width: 0.25rem 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: #0000;
|
||||
padding: 0 0.25rem 0.25rem 0.25rem;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.input:hover {
|
||||
box-shadow: 0 0px 16px black;
|
||||
transition: 0.05s;
|
||||
}
|
||||
.input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.input:active {
|
||||
border-color: var(--color-selected);
|
||||
}
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.input:disabled:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.input-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
.input-description {
|
||||
color: var(--font-color-2);
|
||||
font-style: italic;
|
||||
}
|
||||
input[type=checkbox].input {
|
||||
/*nothing for now*/
|
||||
}
|
||||
.input:not([type=text]):not([type=number]):not([type=url]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
textarea.input {
|
||||
cursor: text !important;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
min-height: 10rem;
|
||||
max-height: 20rem;
|
||||
transition: height 0s;
|
||||
}
|
||||
/*Checkboxes*/
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 2.25rem;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.25rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: #efefef;
|
||||
}
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 0.5rem;
|
||||
top: 0.25rem;
|
||||
width: 0.25rem;
|
||||
height: 0.75rem;
|
||||
border: solid var(--color-primary);
|
||||
border-width: 0 0.25rem 0.25rem 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/*Collapsible*/
|
||||
.collapsible {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.collapsible:after {
|
||||
content: '';
|
||||
border: solid white;
|
||||
border-width: 0 0.15em 0.15em 0;
|
||||
display: inline-block;
|
||||
padding: 0.15em;
|
||||
transform: rotate(-135deg) translate(-0.2em, 0.2em);
|
||||
-webkit-transform: rotate(-135deg) translate(-0.2em, 0.2em);
|
||||
}
|
||||
.collapsible.collapsed:after {
|
||||
transform: rotate(45deg) translate(0, -0.3em);
|
||||
-webkit-transform: rotate(45deg) translate(0, -0.3em);
|
||||
}
|
||||
.collapsed + div {
|
||||
display: none;
|
||||
}
|
||||
/*Videos*/
|
||||
.video {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 30px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video iframe, .video object, .video embed, .video video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*drop to upload*/
|
||||
.drop-area {
|
||||
border: 2px dashed gray;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.drop-area.hover {
|
||||
border-color: var(--color-selected);
|
||||
}
|
||||
|
||||
|
||||
/*Animated cards*/
|
||||
.animated-scene {
|
||||
perspective: 100rem;
|
||||
}
|
||||
.animated-card-1 {
|
||||
animation: animatedcardone 3s ease-in-out 0s alternate infinite;
|
||||
-moz-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
|
||||
-webkit-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
|
||||
-o-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.animation-delay-2 {
|
||||
animation-delay: 1s !important;
|
||||
}
|
||||
.animation-delay-4 {
|
||||
animation-delay: 2s !important;
|
||||
}
|
||||
@keyframes animatedcardone {
|
||||
0% {transform: rotateY(15deg);}
|
||||
100% {transform: rotateY(-15deg);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*Home Page only*/
|
||||
.sample-grid {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.sample-grid > img {
|
||||
display: block;
|
||||
max-width: 375px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
@media only screen and (min-width: 750px) {
|
||||
.sample-grid {
|
||||
grid-template-columns: 375px auto;
|
||||
}
|
||||
.sample-grid.right {
|
||||
grid-template-columns: auto 375px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*Creator related only*/
|
||||
/*Creator Grid/Canvas/Menu*/
|
||||
.creator-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
grid-gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.creator-canvas {
|
||||
max-width: 750px;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
/*backdrop-filter: hue-rotate(80deg);*/
|
||||
}
|
||||
.creator-menu {
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (min-width: 1250px) {
|
||||
.creator-grid {
|
||||
grid-template-columns: 750px auto;
|
||||
padding: 1rem;
|
||||
justify-items: left;
|
||||
}
|
||||
.creator-menu {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
.creator-canvas {
|
||||
border-radius: 37.5px;
|
||||
}
|
||||
}
|
||||
/*Creator Menu Tabs*/
|
||||
.creator-menu-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
grid-gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
/*Selectables*/
|
||||
.selectable {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
padding: 1rem;
|
||||
padding-top: 0.9rem;
|
||||
border-top: 0.1rem;
|
||||
border-style: solid;
|
||||
border-color: #0000;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectable.selected {
|
||||
padding-top: 0.5rem;
|
||||
border-top: 0.5rem;
|
||||
border-style: solid;
|
||||
border-color: var(--color-selected);
|
||||
transition: 0.5s !important;
|
||||
}
|
||||
.selectable:hover {
|
||||
box-shadow: 0 0px 16px black;
|
||||
transition: 0.05s;
|
||||
}
|
||||
/*Draggables*/
|
||||
.draggable {
|
||||
background: var(--input-background);
|
||||
touch-action: none;
|
||||
}
|
||||
.dragging {
|
||||
box-shadow: 0 0px 16px black;
|
||||
background: var(--input-background-selected);
|
||||
cursor: move;
|
||||
}
|
||||
.frame-list{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 0.25rem;
|
||||
user-select: none;
|
||||
}
|
||||
/*Frame/Mask-Pickers*/
|
||||
.frame-picker, .mask-picker {
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
height: 20rem;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
grid-auto-rows: 6.5rem;
|
||||
}
|
||||
.frame-picker {
|
||||
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
|
||||
justify-items: left;
|
||||
align-items: left;
|
||||
}
|
||||
.mask-picker {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.frame-option, .mask-option {
|
||||
cursor: pointer;
|
||||
background: var(--input-background);
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
padding: 0.25rem 0;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.frame-option.selected, .mask-option.selected {
|
||||
background: var(--input-background-selected);
|
||||
}
|
||||
.frame-option > img, .mask-option > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.mask-option {
|
||||
display: grid;
|
||||
grid-template-columns: 6rem auto;
|
||||
text-align: left;
|
||||
grid-gap: 0.5rem;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
}
|
||||
.mask-option > img {
|
||||
max-height: 6rem;
|
||||
}
|
||||
/*Frame Elements*/
|
||||
.frame-element {
|
||||
display: grid;
|
||||
grid-template-columns: 4rem 4rem 1fr 4rem;
|
||||
grid-gap: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
}
|
||||
.frame-element > h4 {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.frame-element > img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
object-fit: contain;
|
||||
padding: none;
|
||||
}
|
||||
.frame-element:hover {
|
||||
box-shadow: 0 0px 16px black;
|
||||
transition: 0.05s;
|
||||
}
|
||||
.frame-element-close {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.frame-element-editor, .textbox-editor {
|
||||
display: none;
|
||||
position: fixed;
|
||||
max-width: calc(100vw - 6rem);
|
||||
width: 64rem; /*multiple of 16?*/
|
||||
max-height: calc(100vh - 6rem);
|
||||
height: auto;
|
||||
overflow-y: scroll;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
-o-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: var(--color-primary);
|
||||
border: 0.5rem solid #333;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0.5rem 0.5rem 1rem 0.5rem black;
|
||||
z-index: 10;
|
||||
padding: 2rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
.frame-element-editor.opened, .textbox-editor.opened {
|
||||
display: grid;
|
||||
}
|
||||
.frame-element-editor > .frame-element-editor-title, .textbox-editor > .textbox-editor-title {
|
||||
grid-column: 1 / -2;
|
||||
}
|
||||
.frame-element-editor > .frame-element-editor-close, .textbox-editor > .textbox-editor-close {
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
height: auto;
|
||||
grid-column: -1 span 1;
|
||||
user-select: none;
|
||||
justify-self: right;
|
||||
}
|
||||
/*Text tab*/
|
||||
.text-option {
|
||||
background: var(--input-background);
|
||||
}
|
||||
.text-codes {
|
||||
max-width: calc(100vw - 3rem);
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.text-codes > * {
|
||||
border: 1px solid black;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
/*download button*/
|
||||
.download {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.download:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/*supporters*/
|
||||
.supporters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
grid-gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
Reference in New Issue
Block a user