173 lines
2.6 KiB
CSS
173 lines
2.6 KiB
CSS
: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_3d_shadow: rgba(0, 0, 0, 0.5);
|
|
--color_3d_highlight: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.hidden
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
html
|
|
{
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*, *:before, *:after
|
|
{
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
* { color: var(--color_text_normal); }
|
|
|
|
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;
|
|
}
|
|
|
|
pre
|
|
{
|
|
white-space: pre-line;
|
|
}
|
|
|
|
#header
|
|
{
|
|
grid-area: header;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
margin: 8px;
|
|
background-color: var(--color_transparency);
|
|
}
|
|
#header button
|
|
{
|
|
border: 0;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
}
|
|
.header_element
|
|
{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.header_element:hover
|
|
{
|
|
background-color: var(--color_transparency);
|
|
}
|
|
|
|
#content_body
|
|
{
|
|
grid-area: content_body;
|
|
display: grid;
|
|
grid-auto-rows: min-content;
|
|
grid-gap: 8px;
|
|
|
|
margin: 8px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
button,
|
|
button *
|
|
{
|
|
color: var(--color_text_normal);
|
|
}
|
|
button:disabled
|
|
{
|
|
background-color: #cccccc !important;
|
|
}
|
|
button
|
|
{
|
|
border-top: 2px solid var(--color_3d_highlight);
|
|
border-left: 2px solid var(--color_3d_highlight);
|
|
border-right: 2px solid var(--color_3d_shadow);
|
|
border-bottom: 2px solid var(--color_3d_shadow);
|
|
}
|
|
button:active
|
|
{
|
|
border-top: 2px solid var(--color_3d_shadow);
|
|
border-left: 2px solid var(--color_3d_shadow);
|
|
border-right: 2px solid var(--color_3d_highlight);
|
|
border-bottom: 2px solid var(--color_3d_highlight);
|
|
}
|
|
.gray_button
|
|
{
|
|
background-color: #cccccc;
|
|
}
|
|
.green_button
|
|
{
|
|
background-color: #6df16f;
|
|
}
|
|
.red_button
|
|
{
|
|
background-color: #ff4949;
|
|
}
|
|
.yellow_button
|
|
{
|
|
background-color: #ffea57;
|
|
}
|
|
|
|
#message_area
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-y: auto;
|
|
background-color: var(--color_transparency);
|
|
}
|
|
.message_bubble
|
|
{
|
|
width: 80%;
|
|
margin: 4px;
|
|
|
|
word-wrap: break-word;
|
|
}
|
|
.message_bubble *
|
|
{
|
|
color: var(--color_text_normal);
|
|
}
|
|
.message_positive
|
|
{
|
|
background-color: #afa;
|
|
}
|
|
.message_negative
|
|
{
|
|
background-color: #faa;
|
|
}
|