simpleWordsCloud/css/style.css

120 lines
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;
--nav-maxwidth: 900px;
--nav-height: 5em;
--body-maxwidth: 900px;
--footer-maxwidth: 900px;
--footer-height: 3em;
--padding-border: 1em;
}
/******************* 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: 0;
position: relative;
height: 100%;
}
html, body {
height: 100%;
}
a {
color: 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 {
font-size: 2em;
padding: 2rem 1rem;
}
/******************* Footer *******************/
#footer {
width: 100%;
height: var(--footer-height);
vertical-align: bottom;
position: relative;
}
#footer_text {
position: absolute;
bottom: 0.1em;
left: 50%;
transform: translateX(-50%);
}
/******************* Container *******************/
.container {
margin: 0 1em;
}
/******************* Others *******************/
#my_canvas {
height: 400px;
}
.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;
}