ycdl/frontends/ycdl_flask/static/css/common.css

257 lines
4.3 KiB
CSS
Raw Normal View History

2020-08-11 03:55:23 +00:00
:root
{
--color_text_normal: black;
--color_text_link: blue;
--color_textfields: white;
--color_text_placeholder: gray;
--color_transparency: rgba(0, 0, 0, 0.1);
--color_dropshadow: rgba(0, 0, 0, 0.25);
--color_shadow: rgba(0, 0, 0, 0.5);
--color_highlight: rgba(255, 255, 255, 0.5);
2020-08-11 03:55:23 +00:00
}
@media screen and (min-width: 800px)
{
:root
{
--wide: 1;
}
}
@media screen and (max-width: 800px)
{
:root
{
--narrow: 1;
}
}
.hidden
{
display: none !important;
}
html
{
height: 100vh;
box-sizing: border-box;
}
*, *:before, *:after
{
box-sizing: inherit;
}
* { color: var(--color_text_normal); }
2016-11-29 04:16:16 +00:00
body
{
display: grid;
grid-template:
"header" auto
"content_body" 1fr
/1fr;
height: 100%;
margin: 0;
background-color: var(--color_primary);
}
a
{
color: var(--color_text_link);
cursor: pointer;
}
input, select, textarea
{
background-color: var(--color_textfields);
}
input::placeholder, textarea::placeholder
{
color: var(--color_text_placeholder);
opacity: 1;
2016-11-29 04:16:16 +00:00
}
pre
{
white-space: pre-line;
}
2020-09-06 00:47:53 +00:00
.bold
{
font-weight: bold;
}
2016-11-29 04:16:16 +00:00
#header
{
grid-area: header;
2016-11-29 04:16:16 +00:00
display: flex;
flex-direction: row;
margin: 8px;
background-color: var(--color_transparency);
}
#header button
{
border: 0;
cursor: pointer;
background-color: transparent;
2016-11-29 04:16:16 +00:00
}
.header_element
{
flex: 1;
2016-11-29 04:16:16 +00:00
display: flex;
justify-content: center;
}
.header_element:hover
{
background-color: var(--color_transparency);
}
2016-11-29 04:16:16 +00:00
#content_body
{
grid-area: content_body;
display: grid;
grid-auto-rows: min-content;
grid-gap: 8px;
2020-08-11 03:55:23 +00:00
/*
8px all around except the top, where the header already has a margin.
*/
margin: 8px;
margin-top: 0;
}
2020-08-11 03:55:23 +00:00
button,
button *
{
color: var(--color_text_normal);
2020-08-11 03:55:23 +00:00
}
button:disabled
{
background-color: #cccccc !important;
}
button
{
border-top: 2px solid var(--color_highlight);
border-left: 2px solid var(--color_highlight);
border-right: 2px solid var(--color_shadow);
border-bottom: 2px solid var(--color_shadow);
2020-08-11 03:55:23 +00:00
}
button:active
{
border-top: 2px solid var(--color_shadow);
border-left: 2px solid var(--color_shadow);
border-right: 2px solid var(--color_highlight);
border-bottom: 2px solid var(--color_highlight);
2020-08-11 03:55:23 +00:00
}
.gray_button
{
background-color: #cccccc;
}
.green_button
{
background-color: #6df16f;
}
.red_button
{
background-color: #ff4949;
}
.yellow_button
{
background-color: #ffea57;
}
2020-09-03 18:54:00 +00:00
.tabbed_container
{
display: flex;
flex-direction: column;
}
.tabbed_container .tab_buttons
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.tabbed_container .tab_button
{
/* outline: none; prevents the blue outline left after clicking on it */
outline: none;
flex: 1;
font-family: inherit;
font-size: 1.3em;
border-radius: 8px 8px 0 0;
background-color: transparent;
}
.tabbed_container .tab_button:hover
{
background-color: var(--color_transparency);
2020-09-03 18:54:00 +00:00
}
.tabbed_container .tab,
.tabbed_container .tab_button
{
border-width: 2px;
border-style: solid;
border-color: #888;
}
.tabbed_container .tab_button.tab_button_inactive
2020-09-03 18:54:00 +00:00
{
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.tabbed_container .tab_button.tab_button_active
2020-09-03 18:54:00 +00:00
{
background-color: var(--color_transparency);
2020-09-03 18:54:00 +00:00
border-bottom-color: transparent;
}
.tabbed_container .tab
{
/* This will be set by javascript after the tabs have been initialized.
That way, the tab panes don't have a missing top border while the dom is
loading or if javascript is disabled.
/*border-top-color: transparent;*/
}
#message_area
{
2020-09-15 22:04:50 +00:00
display: grid;
grid-auto-flow: row;
grid-auto-rows: min-content;
grid-gap: 8px;
padding: 8px;
overflow-y: auto;
background-color: var(--color_transparency);
}
2020-09-15 22:04:50 +00:00
#message_area > :last-child
{
2020-09-15 22:04:50 +00:00
/*
For some reason, the message_area's 8px padding doesn't apply to the bottom
when the container is scrolled.
*/
margin-bottom: 8px;
}
2020-09-15 22:04:50 +00:00
.message_bubble
{
padding: 2px;
word-wrap: break-word;
}
.message_bubble *
{
color: var(--color_text_normal);
}
.message_positive
{
background-color: #afa;
}
.message_negative
{
background-color: #faa;
}