Synchronize Etiquette common.css and YCDL common.css.

frontends/etiquette_flask/static/css/common.css

@@ -1,13 +1,6 @@
 :root
 {
-    --color_primary: #00d8f4;
-    --color_secondary: #ffffd4;
-
-    --color_tag_object_bg: #fff;
-    --color_tag_object_fg: blue;
-
     --color_text_normal: black;
-    --color_text_bubble: black;
     --color_text_link: blue;
 
     --color_textfields: white;
@@ -17,8 +10,11 @@
     --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);
+}
 
-    --size_sticky_side: 300px;
+.hidden
+{
+    display: none !important;
 }
 
 html
@@ -32,39 +28,8 @@ html
     box-sizing: inherit;
 }
 
-body
-{
-    height: 100%;
-    margin: 0;
-}
-
 * { color: var(--color_text_normal); }
 
-a
-{
-    color: var(--color_text_link);
-    cursor: pointer;
-}
-
-input, select, textarea
-{
-    margin-top: 2px;
-    margin-bottom: 2px;
-
-    padding: 2px;
-
-    border: none;
-    border-radius: 2px;
-
-    background-color: var(--color_textfields);
-}
-
-input::placeholder, textarea::placeholder
-{
-    color: var(--color_text_placeholder);
-    opacity: 1;
-}
-
 body
 {
     display: grid;
@@ -73,20 +38,60 @@ body
         "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: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr 1fr auto;
+    flex-direction: row;
-    grid-template-rows: auto;
 
     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;
@@ -97,114 +102,11 @@ body
     margin: 8px;
     margin-top: 0;
 }
-#header button
-{
-    border: 0;
-    cursor: pointer;
-    background-color: transparent;
-}
-.header_element
-{
-    display: flex;
-    flex: 1;
-    justify-content: center;
-}
-.header_element:hover
-{
-    background-color: var(--color_secondary);
-}
-
-pre
-{
-    white-space: pre-line;
-}
-
-#left
-{
-    grid-area: left;
-}
-#right
-{
-    grid-area: right;
-}
-
-#content_body.sticky_side_left
-{
-    grid-template:
-        "left right"
-        /var(--size_sticky_side) 1fr;
-}
-#content_body.sticky_side_right
-{
-    grid-template:
-        "left right"
-        /1fr var(--size_sticky_side);
-}
-
-#content_body.sticky_side_left #left,
-#content_body.sticky_side_right #right
-{
-    display: grid;
-    grid-auto-rows: min-content;
-
-    z-index: 1;
-    position: fixed;
-    bottom: 8px;
-    top: 34px;
-    padding: 8px;
-    width: var(--size_sticky_side);
-    overflow-y: auto;
-    background-color: var(--color_transparency);
-}
-#content_body.sticky_side_left #left
-{
-    left: 8px;
-}
-#content_body.sticky_side_right #right
-{
-    right: 8px;
-}
-@media screen and (max-width: 800px)
-{
-    #content_body.sticky_side_right #right
-    {
-        outline: 8px solid var(--color_primary);
-        background-color: var(--color_primary) !important;
-    }
-    #content_body.sticky_side_right #right:before
-    {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: var(--color_transparency);
-        z-index: -1;
-    }
-}
-
-.editor_input
-{
-    width: 100%;
-    max-width: 800px;
-}
-
-.hidden
-{
-    display: none !important;
-}
-.panel
-{
-    background-color: var(--color_transparency);
-    border-radius: 5px;
-    padding: 8px;
-}
 
 button,
 button *
 {
-    color: black;
+    color: var(--color_text_normal);
 }
 button:disabled
 {
@@ -241,57 +143,12 @@ button:active
     background-color: #ffea57;
 }
 
-.remove_tag_button,
-.remove_tag_button_perm
-{
-    /*position: absolute;*/
-    vertical-align: middle;
-    font-size: 7pt;
-
-    min-width:  18px;
-    min-height: 14px;
-    /*padding: 0;*/
-
-}
-/*
-The Remove button will be display:none by default, but is shown when the tag
-is hovered over.
-*/
-.remove_tag_button
-{
-    display: none;
-}
-.tag_object:hover + * .remove_tag_button,
-.tag_object:hover + .remove_tag_button,
-.remove_tag_button:hover,
-.remove_tag_button_perm:hover
-{
-    display:inline;
-}
-
-.tag_object
-{
-    border-radius: 2px;
-    padding-left: 2px;
-    padding-right: 2px;
-
-    background-color: var(--color_tag_object_bg);
-    color: var(--color_tag_object_fg);
-
-    font-size: 0.9em;
-    text-decoration: none;
-    font-family: monospace;
-    line-height: 1.5;
-}
 #message_area
 {
     display: flex;
-    flex: 2;
     flex-direction: column;
     align-items: center;
-
     overflow-y: auto;
-
     background-color: var(--color_transparency);
 }
 .message_bubble
@@ -303,7 +160,7 @@ is hovered over.
 }
 .message_bubble *
 {
-    color: var(--color_text_bubble);
+    color: var(--color_text_normal);
 }
 .message_positive
 {

frontends/etiquette_flask/static/css/etiquette.css

@@ -0,0 +1,153 @@
+:root
+{
+    --color_primary: #00d8f4;
+    --color_secondary: #ffffd4;
+
+    --color_tag_object_bg: #fff;
+    --color_tag_object_fg: blue;
+
+    --size_sticky_side: 300px;
+}
+
+input, select, textarea
+{
+    margin-top: 2px;
+    margin-bottom: 2px;
+
+    padding: 2px;
+
+    border: none;
+    border-radius: 2px;
+}
+
+.header_element:hover
+{
+    background-color: var(--color_secondary);
+}
+
+#left
+{
+    grid-area: left;
+}
+#right
+{
+    grid-area: right;
+}
+
+#content_body.sticky_side_left
+{
+    grid-template:
+        "left right"
+        /var(--size_sticky_side) 1fr;
+}
+#content_body.sticky_side_right
+{
+    grid-template:
+        "left right"
+        /1fr var(--size_sticky_side);
+}
+
+#content_body.sticky_side_left #left,
+#content_body.sticky_side_right #right
+{
+    display: grid;
+    grid-auto-rows: min-content;
+
+    z-index: 1;
+    position: fixed;
+    bottom: 8px;
+    top: 34px;
+    padding: 8px;
+    width: var(--size_sticky_side);
+    overflow-y: auto;
+    background-color: var(--color_transparency);
+}
+#content_body.sticky_side_left #left
+{
+    left: 8px;
+}
+#content_body.sticky_side_right #right
+{
+    right: 8px;
+}
+
+@media screen and (max-width: 800px)
+{
+    #content_body.sticky_side_right #right
+    {
+        outline: 8px solid var(--color_primary);
+        background-color: var(--color_primary) !important;
+    }
+    #content_body.sticky_side_right #right:before
+    {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: var(--color_transparency);
+        z-index: -1;
+    }
+}
+
+.editor_input
+{
+    width: 100%;
+    max-width: 800px;
+}
+
+.panel
+{
+    background-color: var(--color_transparency);
+    border-radius: 5px;
+    padding: 8px;
+}
+
+.remove_tag_button,
+.remove_tag_button_perm
+{
+    /*position: absolute;*/
+    vertical-align: middle;
+    font-size: 7pt;
+
+    min-width:  18px;
+    min-height: 14px;
+    /*padding: 0;*/
+
+}
+/*
+The Remove button will be display:none by default, but is shown when the tag
+is hovered over.
+*/
+.remove_tag_button
+{
+    display: none;
+}
+.tag_object:hover + * .remove_tag_button,
+.tag_object:hover + .remove_tag_button,
+.remove_tag_button:hover,
+.remove_tag_button_perm:hover
+{
+    display:inline;
+}
+
+.tag_object
+{
+    border-radius: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
+
+    background-color: var(--color_tag_object_bg);
+    color: var(--color_tag_object_fg);
+
+    font-size: 0.9em;
+    text-decoration: none;
+    font-family: monospace;
+    line-height: 1.5;
+}
+
+#message_area
+{
+    flex: 2;
+}

frontends/etiquette_flask/templates/album.html

@@ -101,6 +101,7 @@ h2, h3
     <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/etiquette.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
@@ -156,6 +157,7 @@ ALBUM_ID = undefined;
     <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/etiquette.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}

frontends/etiquette_flask/templates/bookmarks.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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>

frontends/etiquette_flask/templates/clipboard.html

@@ -7,6 +7,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/etiquette.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}

frontends/etiquette_flask/templates/login.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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>

frontends/etiquette_flask/templates/photo.html

@@ -7,6 +7,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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>

frontends/etiquette_flask/templates/root.html

@@ -5,6 +5,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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>

frontends/etiquette_flask/templates/search.html

@@ -10,6 +10,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/etiquette.css">
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <link rel="stylesheet" href="/static/css/clipboard_tray.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}

frontends/etiquette_flask/templates/tags.html

@@ -11,6 +11,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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>

frontends/etiquette_flask/templates/template.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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>

frontends/etiquette_flask/templates/user.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/etiquette.css">
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>