simpleWordsCloud/css/style.css

141 lines
2.2 KiB
CSS
Raw Normal View History

2020-11-15 21:51:28 +01:00
/******************* 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;
2020-11-15 21:51:28 +01:00
}
/******************* 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 {
2020-11-23 21:38:34 +01:00
margin: auto;
2020-11-15 21:51:28 +01:00
position: relative;
height: 100%;
2020-11-23 21:38:34 +01:00
max-width: var(--body-maxwidth);
}
html, body {
height: 100%;
2020-11-15 21:51:28 +01:00
}
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);
}
2020-11-15 21:51:28 +01:00
/******************* Header *******************/
#navbar {
2020-11-23 21:31:09 +01:00
position: relative;
padding: 2rem 1rem;
2020-11-15 21:51:28 +01:00
}
2020-11-23 21:38:34 +01:00
#navbar .title{
font-size: 2em;
}
2020-11-15 21:51:28 +01:00
2020-11-23 21:31:09 +01:00
#navbar-right {
position: absolute;
right: 1em;
bottom: 2em;
}
2020-11-16 21:31:59 +01:00
/******************* 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%);
2020-11-16 21:31:59 +01:00
}
/******************* Container *******************/
.container {
margin: 0 1em;
}
/******************* Others *******************/
2020-11-15 21:51:28 +01:00
#my_canvas {
height: 50vh;
2020-11-15 21:51:28 +01:00
}
2020-11-16 21:31:59 +01:00
2020-11-16 22:13:13 +01:00
.cloud_words_input {
margin: 1em;
}
2020-11-23 11:01:37 +01:00
.cloud_words input:nth-of-type(2) {
margin-left: 0;
}
.cloud_words input:nth-last-of-type(2) {
margin-right: 0;
}
2020-11-16 22:13:13 +01:00
#cloud_words_submit {
display: block;
margin-top: 1em;
2020-11-16 21:31:59 +01:00
}
2020-11-23 11:01:37 +01:00
#cloud_create_submit {
margin-top: 1em;
}
.cloud_link {
margin-bottom: 1em;
}
2020-11-22 16:05:54 +01:00
#cloud_create #ftext_l{
vertical-align: top;
}
2020-11-23 11:01:37 +01:00
#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;
}