152 lines
3.9 KiB
CSS
152 lines
3.9 KiB
CSS
@font-face {
|
|
font-family: "SOADialogue";
|
|
src: url("font/SOADialogue.ttf") format(truetype);
|
|
}
|
|
@font-face {
|
|
font-family: "SOAUI";
|
|
src: url("font/SOAUI.ttf") format(truetype);
|
|
}
|
|
:root {
|
|
--pixel-scale: 2;
|
|
font-size: calc(var(--pixel-scale) * 1px);
|
|
--gradient-horiz-stripes: repeating-linear-gradient(to bottom,
|
|
#1d6c5a,
|
|
#1d6c5a 2rem,
|
|
#025a49 2rem,
|
|
#025a49 4rem
|
|
);
|
|
}
|
|
|
|
body {
|
|
background: var(--gradient-horiz-stripes);
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 9rem 4rem;
|
|
font-family: "SOAUI";
|
|
font-size: 10rem;
|
|
color: white;
|
|
}
|
|
|
|
main {
|
|
max-width: 256rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.textbox {
|
|
display: inline-block;
|
|
}
|
|
.textbox--simple {
|
|
--textbox-bg: #FFFFFF;
|
|
--textbox-bg-fade: #F7F7EF;
|
|
--textbox-text-color: #424231;
|
|
--textbox-text-shadow: #C6C6B5;
|
|
margin: 0 9rem;
|
|
border: 1rem solid var(--textbox-border-outer);
|
|
background: var(--textbox-border-inner);
|
|
position: relative;
|
|
}
|
|
.textbox--simple::before, .textbox--simple::after {
|
|
content: "";
|
|
display: block;
|
|
background: var(--textbox-handle-bg);
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
width: 7rem;
|
|
box-shadow: 3rem 0 0 -1rem var(--textbox-handle-bg), -3rem 0 0 -1rem var(--textbox-handle-bg), 6rem 0 0 -3rem var(--textbox-handle-bg), -6rem 0 0 -3rem var(--textbox-handle-bg), 0 1rem 0 0 var(--textbox-handle-border), 0 -1rem 0 0 var(--textbox-handle-border), 2rem 0 0 0rem var(--textbox-handle-border), -2rem 0 0 0rem var(--textbox-handle-border), 4rem 0 0 -1rem var(--textbox-handle-border), -4rem 0 0 -1rem var(--textbox-handle-border), 7rem 0 0 -3rem var(--textbox-handle-border), -7rem 0 0 -3rem var(--textbox-handle-border);
|
|
}
|
|
.textbox--simple::before {
|
|
left: 1rem;
|
|
transform: translateX(-100%);
|
|
border-right: 0;
|
|
}
|
|
.textbox--simple::after {
|
|
right: 1rem;
|
|
transform: translateX(100%);
|
|
border-left: 0;
|
|
}
|
|
.textbox--simple.textbox--theme-button {
|
|
margin: 0 10rem;
|
|
}
|
|
.textbox--simple.textbox--theme-button::before {
|
|
left: 0;
|
|
}
|
|
.textbox--simple.textbox--theme-button::after {
|
|
right: 0;
|
|
}
|
|
.textbox--simple.textbox--theme-button .textbox__text {
|
|
width: 14rem;
|
|
height: 10rem;
|
|
}
|
|
.textbox--yellow {
|
|
--textbox-border-outer: #7B6321;
|
|
--textbox-border-inner: #A58429;
|
|
--textbox-handle-bg: #FFB539;
|
|
--textbox-handle-border: #AD8400;
|
|
}
|
|
.textbox--red {
|
|
--textbox-border-outer: #632921;
|
|
--textbox-border-inner: #7B3129;
|
|
--textbox-handle-bg: #C63908;
|
|
--textbox-handle-border: #9C3108;
|
|
}
|
|
.textbox--green {
|
|
--textbox-border-outer: #215A18;
|
|
--textbox-border-inner: #216318;
|
|
--textbox-handle-bg: #42AD31;
|
|
--textbox-handle-border: #297321;
|
|
}
|
|
.textbox--blue {
|
|
--textbox-border-outer: #084263;
|
|
--textbox-border-inner: #085284;
|
|
--textbox-handle-bg: #1084C6;
|
|
--textbox-handle-border: #005A94;
|
|
}
|
|
.textbox--gray {
|
|
--textbox-border-outer: #4A4242;
|
|
--textbox-border-inner: #5A5A52;
|
|
--textbox-handle-bg: #7B7B73;
|
|
--textbox-handle-border: #5E5E55;
|
|
}
|
|
.textbox--pink {
|
|
--textbox-border-outer: #CE394A;
|
|
--textbox-border-inner: #E76B6B;
|
|
--textbox-handle-bg: #F79CA5;
|
|
--textbox-handle-border: #EF6B7B;
|
|
}
|
|
.textbox__text {
|
|
margin: 2rem;
|
|
width: 224rem;
|
|
min-height: 34rem;
|
|
max-width: calc(100vw - 34rem);
|
|
box-shadow: 0 2rem 0 -1rem var(--textbox-bg-fade), 0 -2rem 0 -1rem var(--textbox-bg-fade), 2rem 0 0 -1rem var(--textbox-bg-fade), -2rem 0 0 -1rem var(--textbox-bg-fade), inset 0 0 0 1rem var(--textbox-bg-fade);
|
|
background: var(--textbox-bg);
|
|
padding: 0 1rem;
|
|
font-family: "SOADialogue";
|
|
font-size: 12rem;
|
|
}
|
|
.textbox__text, .textbox__text .textbox__span {
|
|
color: var(--textbox-text-color);
|
|
text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow);
|
|
}
|
|
|
|
.textbox__span--red {
|
|
--textbox-text-color: #C54700;
|
|
--textbox-text-shadow: #EFC6A5;
|
|
}
|
|
.textbox__span--blue {
|
|
--textbox-text-color: #6352FF;
|
|
--textbox-text-shadow: #CEC6F7;
|
|
}
|
|
|
|
.theme-options-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 186rem;
|
|
gap: 8rem 6rem;
|
|
padding: 4rem 3rem;
|
|
}
|
|
|
|
/*# sourceMappingURL=style.css.map */
|