voussoir/etiquette
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:29:33 -08:00
parent b99c594931
commit a2ad5ef930
1 changed files with 29 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
frontends/etiquette_flask/static/css/common.css
View file

@ -3,6 +3,8 @@ This file contains styles that I want on almost all webpages that I make,
not specific to one project. not specific to one project.
*/ */
/* SCREEN SIZE CAPTURE ****************************************************************************/
/* /*
These properties are used by javascript functions in common.js. These properties are used by javascript functions in common.js.
See common.is_narrow_mode, is_wide_mode. See common.is_narrow_mode, is_wide_mode.
@ -23,6 +25,8 @@ getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() =
} }
} }
/**************************************************************************************************/
html html
{ {
height: 100vh; height: 100vh;
@ -46,6 +50,8 @@ body
min-height: 100%; min-height: 100%;
margin: 0; margin: 0;
padding: 8px;
grid-row-gap: 8px;
background-color: var(--color_primary); background-color: var(--color_primary);
} }
@ -68,21 +74,14 @@ textarea:disabled
background-color: var(--color_text_placeholder); background-color: var(--color_text_placeholder);
} }
input::placeholder, textarea::placeholder input::placeholder,
textarea::placeholder
{ {
color: var(--color_text_placeholder); color: var(--color_text_placeholder);
opacity: 1; opacity: 1;
} }
.hidden /* ELEMENTS I USE OFTEN ***************************************************************************/
{
display: none !important;
}
.bold
{
font-weight: bold;
}
#header #header
{ {
@ -91,8 +90,7 @@ input::placeholder, textarea::placeholder
flex-direction: row; flex-direction: row;
height: 18px; height: 18px;
margin: 8px; margin: 0;
margin-bottom: 0;
background-color: var(--color_transparency); background-color: var(--color_transparency);
} }
#header button #header button
@ -106,10 +104,7 @@ input::placeholder, textarea::placeholder
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
} align-items: center;
.header_element:hover
{
background-color: var(--color_transparency);
} }
#content_body #content_body
@ -118,8 +113,6 @@ input::placeholder, textarea::placeholder
display: grid; display: grid;
grid-auto-rows: min-content; grid-auto-rows: min-content;
grid-gap: 8px; grid-gap: 8px;
padding: 8px;
} }
.panel .panel
@ -129,6 +122,20 @@ input::placeholder, textarea::placeholder
padding: 8px; padding: 8px;
} }
/* NONSEMANTICS ***********************************************************************************/
.hidden
{
display: none !important;
}
.bold
{
font-weight: bold;
}
/* BUTTONS ****************************************************************************************/
button, button,
button * button *
{ {
@ -169,6 +176,8 @@ button:active
background-color: #ffea57; background-color: #ffea57;
} }
/* TABBED CONTAINER *******************************************************************************/
.tabbed_container .tabbed_container
{ {
display: flex; display: flex;
@ -220,6 +229,8 @@ button:active
/*border-top-color: transparent;*/ /*border-top-color: transparent;*/
} }
/* MESSAGE BUBBLES ********************************************************************************/
#message_area #message_area
{ {
display: grid; display: grid;