diff --git a/frontends/bringrss_flask/static/css/common.css b/frontends/bringrss_flask/static/css/common.css index ddaed20..7dc7bca 100644 --- a/frontends/bringrss_flask/static/css/common.css +++ b/frontends/bringrss_flask/static/css/common.css @@ -3,6 +3,8 @@ 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 in common.js. See common.is_narrow_mode, is_wide_mode. @@ -23,6 +25,8 @@ getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() = } } +/**************************************************************************************************/ + html { height: 100vh; @@ -46,6 +50,8 @@ body min-height: 100%; margin: 0; + padding: 8px; + grid-row-gap: 8px; background-color: var(--color_primary); } @@ -68,26 +74,14 @@ textarea:disabled background-color: var(--color_text_placeholder); } -input::placeholder, textarea::placeholder +input::placeholder, +textarea::placeholder { color: var(--color_text_placeholder); opacity: 1; } -pre -{ - white-space: pre-line; -} - -.hidden -{ - display: none !important; -} - -.bold -{ - font-weight: bold; -} +/* ELEMENTS I USE OFTEN ***************************************************************************/ #header { @@ -96,8 +90,7 @@ pre flex-direction: row; height: 18px; - margin: 8px; - margin-bottom: 0; + margin: 0; background-color: var(--color_transparency); } #header button @@ -111,10 +104,7 @@ pre flex: 1; display: flex; justify-content: center; -} -.header_element:hover -{ - background-color: var(--color_transparency); + align-items: center; } #content_body @@ -123,8 +113,6 @@ pre display: grid; grid-auto-rows: min-content; grid-gap: 8px; - - padding: 8px; } .panel @@ -134,6 +122,20 @@ pre padding: 8px; } +/* NONSEMANTICS ***********************************************************************************/ + +.hidden +{ + display: none !important; +} + +.bold +{ + font-weight: bold; +} + +/* BUTTONS ****************************************************************************************/ + button, button * { @@ -174,6 +176,8 @@ button:active background-color: #ffea57; } +/* TABBED CONTAINER *******************************************************************************/ + .tabbed_container { display: flex; @@ -225,6 +229,8 @@ button:active /*border-top-color: transparent;*/ } +/* MESSAGE BUBBLES ********************************************************************************/ + #message_area { display: grid;