Match voussoirkit common.css.

frontends/ycdl_flask/static/css/common.css

@@ -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
+/* ELEMENTS I USE OFTEN ***************************************************************************/
-{
-    white-space: pre-line;
-}
-
-.bold
-{
-    font-weight: bold;
-}
 
 #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;
-}
+    align-items: center;
-.header_element:hover
-{
-    background-color: var(--color_transparency);
 }
 
 #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;