diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css
index 993aabd..4e65eb8 100644
--- a/frontends/etiquette_flask/static/css/common.css
+++ b/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;
- grid-template-columns: 1fr 1fr 1fr 1fr auto;
- grid-template-rows: auto;
+ 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;
@@ -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
{
diff --git a/frontends/etiquette_flask/static/css/etiquette.css b/frontends/etiquette_flask/static/css/etiquette.css
new file mode 100644
index 0000000..69b2d72
--- /dev/null
+++ b/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;
+}
diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index 0aed784..5f40e32 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -101,6 +101,7 @@ h2, h3
+
{% if theme %}{% endif %}
@@ -156,6 +157,7 @@ ALBUM_ID = undefined;
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html
index 06c739e..35d6583 100644
--- a/frontends/etiquette_flask/templates/bookmarks.html
+++ b/frontends/etiquette_flask/templates/bookmarks.html
@@ -6,6 +6,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index fe61c71..541604b 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -7,6 +7,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/login.html b/frontends/etiquette_flask/templates/login.html
index e6761a4..7663018 100644
--- a/frontends/etiquette_flask/templates/login.html
+++ b/frontends/etiquette_flask/templates/login.html
@@ -6,6 +6,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index 91cb880..8cbed7c 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -7,6 +7,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/root.html b/frontends/etiquette_flask/templates/root.html
index e238398..f13e7fa 100644
--- a/frontends/etiquette_flask/templates/root.html
+++ b/frontends/etiquette_flask/templates/root.html
@@ -5,6 +5,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 1a01d52..eaf25c5 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -10,6 +10,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index dec7d15..7cdc17c 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -11,6 +11,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/template.html b/frontends/etiquette_flask/templates/template.html
index d36da04..9073b38 100644
--- a/frontends/etiquette_flask/templates/template.html
+++ b/frontends/etiquette_flask/templates/template.html
@@ -6,6 +6,7 @@
+
{% if theme %}{% endif %}
diff --git a/frontends/etiquette_flask/templates/user.html b/frontends/etiquette_flask/templates/user.html
index 271b028..5b4c413 100644
--- a/frontends/etiquette_flask/templates/user.html
+++ b/frontends/etiquette_flask/templates/user.html
@@ -6,6 +6,7 @@
+
{% if theme %}{% endif %}