141 lines
2.2 KiB
CSS
141 lines
2.2 KiB
CSS
/******************* Constants *******************/
|
|
:root {
|
|
--font-color: #EFEFEF;
|
|
--font-color-em: #8C8C8C;
|
|
--background-color-main: #404040;
|
|
--background-color-secondary: #505050;
|
|
--avatar-background: #B6B6B6;
|
|
--color01: #99CCFF;
|
|
--color01_bright: #58af58;
|
|
--color02: #ab7026;
|
|
--color02_bright: #ea9a36;
|
|
|
|
--body-maxwidth: 900px;
|
|
--footer-height: 3em;
|
|
}
|
|
|
|
/******************* Page *******************/
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
background-color: var(--background-color-main);
|
|
font-family: Lato, Helvetica, sans-serif;
|
|
font-size: large;
|
|
color: var(--font-color);
|
|
min-height: 100vh
|
|
}
|
|
body {
|
|
margin: auto;
|
|
position: relative;
|
|
height: 100%;
|
|
max-width: var(--body-maxwidth);
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
color: var(--font-color);
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
border-bottom: 0.08em dashed var(--font-color);
|
|
}
|
|
#page-wrap {
|
|
min-height: 100%;
|
|
margin-bottom: calc(0em - var(--footer-height));
|
|
}
|
|
#page-wrap:after {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
footer, #page-wrap:after {
|
|
/* .push must be the same height as footer */
|
|
height: var(--footer-height);
|
|
}
|
|
|
|
/******************* Header *******************/
|
|
|
|
#navbar {
|
|
position: relative;
|
|
padding: 2rem 1rem;
|
|
}
|
|
#navbar .title{
|
|
font-size: 2em;
|
|
}
|
|
|
|
#navbar-right {
|
|
position: absolute;
|
|
right: 1em;
|
|
bottom: 2em;
|
|
}
|
|
|
|
/******************* Footer *******************/
|
|
|
|
#footer {
|
|
width: 100%;
|
|
height: var(--footer-height);
|
|
vertical-align: bottom;
|
|
position: relative;
|
|
}
|
|
#footer_text {
|
|
position: absolute;
|
|
bottom: 0.1em;
|
|
left: 50%;
|
|
min-width: fit-content;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/******************* Container *******************/
|
|
|
|
.container {
|
|
margin: 0 1em;
|
|
}
|
|
|
|
/******************* Others *******************/
|
|
|
|
#my_canvas {
|
|
height: 50vh;
|
|
}
|
|
|
|
.cloud_words_input {
|
|
margin: 1em;
|
|
}
|
|
.cloud_words input:nth-of-type(2) {
|
|
margin-left: 0;
|
|
}
|
|
.cloud_words input:nth-last-of-type(2) {
|
|
margin-right: 0;
|
|
}
|
|
#cloud_words_submit {
|
|
display: block;
|
|
margin-top: 1em;
|
|
}
|
|
#cloud_create_submit {
|
|
margin-top: 1em;
|
|
}
|
|
.cloud_link {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#cloud_create #ftext_l{
|
|
vertical-align: top;
|
|
}
|
|
#cloud_create label::after{
|
|
content: '\00a0:';
|
|
}
|
|
|
|
summary:active, summary:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.download_link {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
details table {
|
|
margin-top: 0.5em;
|
|
margin-left: 1em;
|
|
}
|