Synchronize Etiquette common.css and YCDL common.css.

frontends/ycdl_flask/static/css/common.css

@@ -1,51 +1,112 @@
 :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);
 }
 
-body
-{
-    display: flex;
-    flex-direction: column;
-    background-color:#fff;
-    margin: 8px;
-}
-#header
-{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-    margin-bottom: 4px;
-}
-.header_element
-{
-    display: flex;
-    justify-content: center;
-    flex: 1;
-    background-color: rgba(0, 0, 0, 0.1);   
-}
-.header_element:hover
-{
-    background-color: rgba(0, 0, 0, 0.2);
-}
 .hidden
 {
     display: none !important;
 }
-#content_body
+
+html
 {
-    flex: 0 0 auto;
+    height: 100vh;
-    display: flex;
+    box-sizing: border-box;
-    flex-direction: row;
 }
 
+*, *: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: black;
+    color: var(--color_text_normal);
 }
 button:disabled
 {
@@ -81,3 +142,31 @@ button:active
 {
     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;
+}

frontends/ycdl_flask/static/css/ycdl.css

@@ -0,0 +1,7 @@
+#content_body
+{
+    justify-self: center;
+    min-width: 200px;
+    max-width: 1440px;
+    width: 95%;
+}

frontends/ycdl_flask/templates/channel.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    <link rel="stylesheet" href="/static/css/ycdl.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/spinner.js"></script>

frontends/ycdl_flask/templates/channels.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    <link rel="stylesheet" href="/static/css/ycdl.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
     <script src="/static/js/spinner.js"></script>
@@ -13,14 +14,7 @@
 <style>
 #content_body
 {
-    display: flex;
+    grid-gap: unset;
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: auto;
-    flex-direction: column;
-    width: 1440px;
-    margin: auto;
-    max-width: 100%;
 }
 #new_channel_textbox,
 #new_channel_button
@@ -30,7 +24,7 @@
 .channel_card_no_pending,
 .channel_card_pending
 {
-    margin: 8px;
+    margin: 8px 0;
     padding: 10px;
     border-radius: 4px;
     border: 1px solid #000;
@@ -50,12 +44,14 @@
 <body>
 {{header.make_header()}}
 <div id="content_body">
-    <span><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(false)">Refresh new videos</button></span>
+    <div><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(false)">Refresh new videos</button></div>
-    <span><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(true)">Refresh everything</button></span>
+    <div><button class="refresh_button button_with_spinner" onclick="refresh_all_channels_form(true)">Refresh everything</button></div>
     <div>
         <input type="text" id="new_channel_textbox" placeholder="Channel id">
         <button id="new_channel_button" class="button_with_spinner" onclick="add_channel_form()">Add new channel</button>
     </div>
+
+    <div id="channels">
     {% for channel in channels %}
     {% if channel.has_pending() %}
     <div class="channel_card_pending">
@@ -68,6 +64,7 @@
         {% endif %}
     </div>
     {% endfor %}
+    </div>
 </div>
 </body>
 

frontends/ycdl_flask/templates/root.html

@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/static/css/common.css">
+    <link rel="stylesheet" href="/static/css/ycdl.css">
 
 <style>
 body, a