voussoir/ycdl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Match voussoirkit common.css.

Browse source
This commit is contained in:
voussoir 2022-11-11 15:24:12 -08:00
parent 7240d03695
commit cc7c88abc9
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
1 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
frontends/ycdl_flask/static/css/common.css
View file

@ -3,8 +3,11 @@ This file contains styles that I want on almost all webpages that I make,
not specific to one project.
*/
/* SCREEN SIZE CAPTURE ****************************************************************************/
/*
These properties are used by javascript functions.
These properties are used by javascript functions in common.js.
See common.is_narrow_mode, is_wide_mode.
getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1"
*/
@media screen and (min-width: 800px)
@ -22,10 +25,7 @@ getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() =
}
}
.hidden
{
display: none !important;
}
/**************************************************************************************************/
html
{
@ -50,6 +50,8 @@ body
min-height: 100%;
margin: 0;
padding: 8px;
grid-row-gap: 8px;
background-color: var(--color_primary);
}
@ -65,21 +67,21 @@ input, select, textarea
background-color: var(--color_textfields);
}
input::placeholder, textarea::placeholder
input:disabled,
select:disabled,
textarea:disabled
{
background-color: var(--color_text_placeholder);
}
input::placeholder,
textarea::placeholder
{
color: var(--color_text_placeholder);
opacity: 1;
}
pre
{
white-space: pre-line;
}
.bold
{
font-weight: bold;
}
/* ELEMENTS I USE OFTEN ***************************************************************************/
#header
{
@ -88,7 +90,7 @@ pre
flex-direction: row;
height: 18px;
margin: 8px;
margin: 0;
background-color: var(--color_transparency);
}
#header button
@ -102,10 +104,7 @@ pre
flex: 1;
display: flex;
justify-content: center;
}
.header_element:hover
{
background-color: var(--color_transparency);
align-items: center;
}
#content_body
@ -114,14 +113,29 @@ pre
display: grid;
grid-auto-rows: min-content;
grid-gap: 8px;
/*
8px all around except the top, where the header already has a margin.
*/
margin: 8px;
margin-top: 0;
}
.panel
{
background-color: var(--color_transparency);
border-radius: 5px;
padding: 8px;
}
/* NONSEMANTICS ***********************************************************************************/
.hidden
{
display: none !important;
}
.bold
{
font-weight: bold;
}
/* BUTTONS ****************************************************************************************/
button,
button *
{
@ -162,6 +176,8 @@ button:active
background-color: #ffea57;
}
/* TABBED CONTAINER *******************************************************************************/
.tabbed_container
{
display: flex;
@ -213,6 +229,8 @@ button:active
/*border-top-color: transparent;*/
}
/* MESSAGE BUBBLES ********************************************************************************/
#message_area
{
display: grid;