From be9e4768747b5cfd1b0ed9224bad92047d12253a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 12 Aug 2020 11:52:03 +0200
Subject: [PATCH] extract theme from current styling

---
 index.html                              |   1 +
 src/ui/web/css/avatar.css               |   4 +-
 src/ui/web/css/form.css                 |  26 ++++
 src/ui/web/css/layout.css               |   4 +-
 src/ui/web/css/left-panel.css           |  20 ---
 src/ui/web/css/login.css                |  34 +++++
 src/ui/web/css/main.css                 |  82 +----------
 src/ui/web/css/room.css                 |  36 +----
 src/ui/web/css/spinner.css              |   7 +
 src/ui/web/css/status.css               |  33 +++++
 src/ui/web/css/themes/bubbles/theme.css | 183 ++++++++++++++++++++++++
 src/ui/web/css/timeline.css             |  49 -------
 src/ui/web/view-gallery.html            |   1 +
 13 files changed, 296 insertions(+), 184 deletions(-)
 create mode 100644 src/ui/web/css/form.css
 create mode 100644 src/ui/web/css/status.css
 create mode 100644 src/ui/web/css/themes/bubbles/theme.css
diff --git a/index.html b/index.html
index 4aeff03b..3a1633a2 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
         <meta name="apple-mobile-web-app-title" content="Hydrogen Chat">
         <meta name="description" content="A matrix chat application">
         <link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
+        <link rel="stylesheet" type="text/css" href="src/ui/web/css/themes/bubbles/theme.css">
 	</head>
 	<body class="hydrogen">
         <script id="version" type="disabled">
diff --git a/src/ui/web/css/avatar.css b/src/ui/web/css/avatar.css
index 0314fd45..f64d39ae 100644
--- a/src/ui/web/css/avatar.css
+++ b/src/ui/web/css/avatar.css
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,7 +19,6 @@ limitations under the License.
     --avatar-size: 32px;
     width: var(--avatar-size);
     height: var(--avatar-size);
-    border-radius: 100px;
     overflow: hidden;
     flex-shrink: 0;
     -moz-user-select: none;
@@ -29,8 +29,6 @@ limitations under the License.
     font-size: calc(var(--avatar-size) * 0.6);
     text-align: center;
     letter-spacing: calc(var(--avatar-size) * -0.05);
-    background: white;
-    color: black;
     speak: none;
 }
 
diff --git a/src/ui/web/css/form.css b/src/ui/web/css/form.css
new file mode 100644
index 00000000..14dba7f3
--- /dev/null
+++ b/src/ui/web/css/form.css
@@ -0,0 +1,26 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.form > div {
+  margin: 0.4em 0;
+}
+
+.form input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css
index b49955ec..d48dfd98 100644
--- a/src/ui/web/css/layout.css
+++ b/src/ui/web/css/layout.css
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,9 +18,6 @@ limitations under the License.
 html {
     height: 100%;
 }
-body {
-    margin: 0;
-}
 
 .SessionView {
     display: flex;
diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css
index e8f82cc5..9400da4d 100644
--- a/src/ui/web/css/left-panel.css
+++ b/src/ui/web/css/left-panel.css
@@ -16,8 +16,6 @@ limitations under the License.
 
 
 .LeftPanel {
-    background: #333;
-    color: white;
     overflow-y: auto;
     overscroll-behavior: contain;
 }
@@ -29,24 +27,10 @@ limitations under the License.
 }
 
 .LeftPanel li {
-    margin: 5px;
-    padding: 10px;
     display: flex;
     align-items: center;
 }
 
-.LeftPanel li {
-    border-bottom: 1px #555 solid;
-}
-
-.LeftPanel li:last-child {
-    border-bottom: none;
-}
-
-.LeftPanel li > * {
-    margin-right: 10px;
-}
-
 .LeftPanel div.description {
     margin: 0;
     flex: 1 1 0;
@@ -58,7 +42,3 @@ limitations under the License.
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-
-.LeftPanel .description .last-message {
-    font-size: 0.8em;
-}
diff --git a/src/ui/web/css/login.css b/src/ui/web/css/login.css
index 6286589f..d8387e73 100644
--- a/src/ui/web/css/login.css
+++ b/src/ui/web/css/login.css
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +15,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/** contains styles for everything before the session view, like the session picker, login, load view, ... */
+
+.SessionPickerView {
+    padding: 0.4em;
+}
+
+.SessionPickerView ul {
+    list-style: none;
+    padding: 0;
+}
+
+.SessionPickerView li {
+    margin: 0.4em 0;
+    padding: 0.5em;
+}
+
+.SessionPickerView .sessionInfo {
+    cursor: pointer;
+    display: flex;
+}
+
+.SessionPickerView li span.userId {
+    flex: 1;
+}
+
+.SessionPickerView li span.error {
+    margin: 0 20px;
+}
+
+.LoginView {
+    padding: 0.4em;
+}
+
 .SessionLoadView {
     display: flex;
 }
diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css
index 56b16eb4..bbe8dcad 100644
--- a/src/ui/web/css/main.css
+++ b/src/ui/web/css/main.css
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,6 +22,8 @@ limitations under the License.
 @import url('timeline.css');
 @import url('avatar.css');
 @import url('spinner.css');
+@import url('form.css');
+@import url('status.css');
 
 /* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */
 body.hydrogen {
@@ -32,10 +35,6 @@ body.hydrogen {
 
 .hydrogen {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
-                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    background-color: black;
-    color: white;
 }
 
 .hiddenWithLayout {
@@ -45,78 +44,3 @@ body.hydrogen {
 .hidden {
     display: none !important;
 }
-
-.SessionStatusView {
-    display: flex;
-    padding: 5px;
-    background-color: #555;
-}
-
-.SessionStatusView p {
-    margin: 0 10px;
-    word-break: break-all;
-    word-break: break-word;
-}
-
-.SessionStatusView button {
-    border: none;
-    background: none;
-    color: currentcolor;
-    text-decoration: underline;
-}
-
-
-.RoomPlaceholderView {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-}
-
-.SessionPickerView {
-  padding: 0.4em;
-}
-
-.SessionPickerView ul {
-  list-style: none;
-  padding: 0;
-}
-
-.SessionPickerView li {
-  margin: 0.4em 0;
-  font-size: 1.2em;
-  background-color: grey;
-  padding: 0.5em;
-}
-
-.SessionPickerView .sessionInfo {
-  cursor: pointer;
-  display: flex;
-}
-
-.SessionPickerView li span.userId {
-  flex: 1;
-}
-
-.SessionPickerView li span.error {
-  margin: 0 20px;
-}
-
-.LoginView {
-  padding: 0.4em;
-}
-
-a {
-    color: white;
-}
-
-.form > div {
-  margin: 0.4em 0;
-}
-
-.form input {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-}
-
diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css
index f8994aff..2f00ec0c 100644
--- a/src/ui/web/css/room.css
+++ b/src/ui/web/css/room.css
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,10 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.RoomPlaceholderView {
+    display: flex;
+    flex-direction: row;
+}
 
 .RoomHeader {
-    padding: 10px;
-    background-color: #333;
+    align-items: center;
 }
 
 .RoomHeader > *:last-child {
@@ -30,16 +34,7 @@ limitations under the License.
 }
 
 .RoomHeader button {
-    width: 40px;
-    height: 40px;
-    display: none;
-    font-size: 1.5em;
-    padding: 0;
     display: block;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    line-height: 40px;
 }
 
 .RoomHeader .back {
@@ -52,24 +47,11 @@ limitations under the License.
 }
 
 .RoomHeader .topic {
-    font-size: 0.8em;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.back::before {
-    content: "☰";
-}
-
-.more::before {
-    content: "⋮";
-}
-
-.RoomHeader {
-    align-items: center;
-}
-
 .RoomHeader .description {
     flex: 1 1 auto;
     min-width: 0;
@@ -82,14 +64,8 @@ limitations under the License.
     margin: 0;
 }
 
-.RoomView_error {
-    color: red;
-}
-
 .MessageComposer > input {
     display: block;
     width: 100%;
     box-sizing: border-box;
-    padding: 0.8em;
-    border: none;
 }
diff --git a/src/ui/web/css/spinner.css b/src/ui/web/css/spinner.css
index 55eca628..69793447 100644
--- a/src/ui/web/css/spinner.css
+++ b/src/ui/web/css/spinner.css
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -37,6 +38,12 @@ limitations under the License.
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
+    /**
+     * TODO
+     * see if with IE11 we can just set a static stroke state and make it rotate?
+     */
+    stroke-dasharray: 0 0 10 90;
+
     fill: none;
     stroke: currentcolor;
     stroke-width: 12;
diff --git a/src/ui/web/css/status.css b/src/ui/web/css/status.css
new file mode 100644
index 00000000..de891de1
--- /dev/null
+++ b/src/ui/web/css/status.css
@@ -0,0 +1,33 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.SessionStatusView {
+    display: flex;
+}
+
+.SessionStatusView p {
+    margin: 0 10px;
+    word-break: break-all;
+    word-break: break-word;
+}
+
+.SessionStatusView button {
+    border: none;
+    background: none;
+    color: currentcolor;
+    text-decoration: underline;
+}
diff --git a/src/ui/web/css/themes/bubbles/theme.css b/src/ui/web/css/themes/bubbles/theme.css
new file mode 100644
index 00000000..c3fb5f92
--- /dev/null
+++ b/src/ui/web/css/themes/bubbles/theme.css
@@ -0,0 +1,183 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.hydrogen {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
+                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: black;
+    color: white;
+}
+
+.avatar {
+    border-radius: 100%;
+    background: white;
+    color: black;
+}
+
+.LeftPanel {
+    background: #333;
+    color: white;
+}
+
+.LeftPanel ul {
+    padding: 0;
+    margin: 0;
+}
+
+.LeftPanel li {
+    margin: 5px;
+    padding: 10px;
+    /* vertical align */
+    align-items: center;
+}
+
+.LeftPanel li {
+    border-bottom: 1px #555 solid;
+}
+
+.LeftPanel li:last-child {
+    border-bottom: none;
+}
+
+.LeftPanel li > * {
+    margin-right: 10px;
+}
+
+.LeftPanel .description .last-message {
+    font-size: 0.8em;
+}
+
+a {
+    color: white;
+}
+
+
+.SessionStatusView {
+    padding: 5px;
+    background-color: #555;
+}
+
+.RoomPlaceholderView {
+    align-items: center;
+    justify-content: center;
+}
+
+.SessionPickerView li {
+  font-size: 1.2em;
+  background-color: grey;
+}
+
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomHeader button {
+    width: 40px;
+    height: 40px;
+    font-size: 1.5em;
+    padding: 0;
+    background: white;
+    border: none;
+    font-weight: bolder;
+    line-height: 40px;
+}
+
+.back::before {
+    content: "☰";
+}
+
+.more::before {
+    content: "⋮";
+}
+
+.RoomHeader .topic {
+    font-size: 0.8em;
+}
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomView_error {
+    color: red;
+}
+
+.MessageComposer > input {
+    padding: 0.8em;
+    border: none;
+}
+
+.message-container {
+    max-width: 80%;
+    padding: 5px 10px;
+    margin: 5px 10px;
+    background: blue;
+}
+
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.TextMessageView .message-container time {
+    padding: 2px 0 0px 20px;
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.message-container time {
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.own time {
+    color: lightgreen;
+}
+
+.own .message-container {
+    background-color: darkgreen;
+}
+
+.TextMessageView.own .message-container {
+    margin-left: auto;
+}
+
+.TextMessageView.pending .message-container {
+    background-color: #333;
+}
+
+.message-container p {
+    margin: 5px 0;
+}
+
+.AnnouncementView {
+    margin: 5px 0;
+    padding: 5px 10%;
+}
+
+.AnnouncementView > div {
+    margin: 0 auto;
+    padding: 10px 20px;
+    background-color: #333;
+    font-size: 0.9em;
+    color: #CCC;
+    text-align: center;
+}
diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css
index a6f356bc..2d421a59 100644
--- a/src/ui/web/css/timeline.css
+++ b/src/ui/web/css/timeline.css
@@ -28,21 +28,11 @@ limitations under the License.
 
 .message-container {
     flex: 0 1 auto;
-    max-width: 80%;
-    padding: 5px 10px;
-    margin: 5px 10px;
-    background: blue;
     /* first try break-all, then break-word, which isn't supported everywhere */
     word-break: break-all;  
     word-break: break-word;
 }
 
-.message-container .sender {
-    margin: 5px 0;
-    font-size: 0.9em;
-    font-weight: bold;
-}
-
 .message-container img {
     display: block;
     width: 100%;
@@ -54,50 +44,11 @@ limitations under the License.
     min-width: 0;
 }
 
-.TextMessageView.own .message-container {
-    margin-left: auto;
-}
-
 .TextMessageView .message-container time {
     float: right;
-    padding: 2px 0 0px 20px;
-    font-size: 0.9em;
-    color: lightblue;
-}
-
-.message-container time {
-    font-size: 0.9em;
-    color: lightblue;
-}
-
-.own time {
-    color: lightgreen;
-}
-
-.own .message-container {
-    background-color: darkgreen;
-}
-
-.TextMessageView.pending .message-container {
-    background-color: #333;
-}
-
-.message-container p {
-    margin: 5px 0;
 }
 
 .AnnouncementView {
-    margin: 5px 0;
-    padding: 5px 10%;
     display: flex;
     align-items: center;
 }
-
-.AnnouncementView > div {
-    margin: 0 auto;
-    padding: 10px 20px;
-    background-color: #333;
-    font-size: 0.9em;
-    color: #CCC;
-    text-align: center;
-}
diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html
index a6e849b1..857d2b57 100644
--- a/src/ui/web/view-gallery.html
+++ b/src/ui/web/view-gallery.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="css/main.css">
+        <link rel="stylesheet" type="text/css" href="css/themes/bubbles/theme.css">
 	</head>
 	<body>
         <script type="text/javascript">
