mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

extract theme from current styling

Browse source
This commit is contained in:
Bruno Windels 2020-08-12 11:52:03 +02:00
parent 23d96b554a
commit be9e476874
13 changed files with 296 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -9,6 +9,7 @@
<meta name="apple-mobile-web-app-title" content="Hydrogen Chat"> <meta name="apple-mobile-web-app-title" content="Hydrogen Chat">
<meta name="description" content="A matrix chat application"> <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/main.css">
<link rel="stylesheet" type="text/css" href="src/ui/web/css/themes/bubbles/theme.css">
</head> </head>
<body class="hydrogen"> <body class="hydrogen">
<script id="version" type="disabled"> <script id="version" type="disabled">

4
src/ui/web/css/avatar.css
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2020 Bruno Windels <bruno@windels.cloud> 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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; --avatar-size: 32px;
width: var(--avatar-size); width: var(--avatar-size);
height: var(--avatar-size); height: var(--avatar-size);
border-radius: 100px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
-moz-user-select: none; -moz-user-select: none;
@ -29,8 +29,6 @@ limitations under the License.
font-size: calc(var(--avatar-size) * 0.6); font-size: calc(var(--avatar-size) * 0.6);
text-align: center; text-align: center;
letter-spacing: calc(var(--avatar-size) * -0.05); letter-spacing: calc(var(--avatar-size) * -0.05);
background: white;
color: black;
speak: none; speak: none;
} }

26
src/ui/web/css/form.css Normal file
View file

@ -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;
}

4
src/ui/web/css/layout.css
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2020 Bruno Windels <bruno@windels.cloud> 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -17,9 +18,6 @@ limitations under the License.
html { html {
height: 100%; height: 100%;
} }
body {
margin: 0;
}
.SessionView { .SessionView {
display: flex; display: flex;

20
src/ui/web/css/left-panel.css
View file

@ -16,8 +16,6 @@ limitations under the License.
.LeftPanel { .LeftPanel {
background: #333;
color: white;
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
} }
@ -29,24 +27,10 @@ limitations under the License.
} }
.LeftPanel li { .LeftPanel li {
margin: 5px;
padding: 10px;
display: flex; display: flex;
align-items: center; 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 { .LeftPanel div.description {
margin: 0; margin: 0;
flex: 1 1 0; flex: 1 1 0;
@ -58,7 +42,3 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.LeftPanel .description .last-message {
font-size: 0.8em;
}

34
src/ui/web/css/login.css
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2020 Bruno Windels <bruno@windels.cloud> 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. 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 { .SessionLoadView {
display: flex; display: flex;
} }

82
src/ui/web/css/main.css
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2020 Bruno Windels <bruno@windels.cloud> 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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('timeline.css');
@import url('avatar.css'); @import url('avatar.css');
@import url('spinner.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 */ /* only if the body contains the whole app (e.g. we're not embedded in a page), make some changes */
body.hydrogen { body.hydrogen {
@ -32,10 +35,6 @@ body.hydrogen {
.hydrogen { .hydrogen {
margin: 0; 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 { .hiddenWithLayout {
@ -45,78 +44,3 @@ body.hydrogen {
.hidden { .hidden {
display: none !important; 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;
}

36
src/ui/web/css/room.css
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2020 Bruno Windels <bruno@windels.cloud> 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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. limitations under the License.
*/ */
.RoomPlaceholderView {
display: flex;
flex-direction: row;
}
.RoomHeader { .RoomHeader {
padding: 10px; align-items: center;
background-color: #333;
} }
.RoomHeader > *:last-child { .RoomHeader > *:last-child {
@ -30,16 +34,7 @@ limitations under the License.
} }
.RoomHeader button { .RoomHeader button {
width: 40px;
height: 40px;
display: none;
font-size: 1.5em;
padding: 0;
display: block; display: block;
background: white;
border: none;
font-weight: bolder;
line-height: 40px;
} }
.RoomHeader .back { .RoomHeader .back {
@ -52,24 +47,11 @@ limitations under the License.
} }
.RoomHeader .topic { .RoomHeader .topic {
font-size: 0.8em;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.back::before {
content: "☰";
}
.more::before {
content: "⋮";
}
.RoomHeader {
align-items: center;
}
.RoomHeader .description { .RoomHeader .description {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0; min-width: 0;
@ -82,14 +64,8 @@ limitations under the License.
margin: 0; margin: 0;
} }
.RoomView_error {
color: red;
}
.MessageComposer > input { .MessageComposer > input {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0.8em;
border: none;
} }

7
src/ui/web/css/spinner.css
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2020 Bruno Windels <bruno@windels.cloud> 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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with 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-duration: 2s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; 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; fill: none;
stroke: currentcolor; stroke: currentcolor;
stroke-width: 12; stroke-width: 12;

33
src/ui/web/css/status.css Normal file
View file

@ -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;
}

183
src/ui/web/css/themes/bubbles/theme.css Normal file
View file

@ -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;
}

49
src/ui/web/css/timeline.css
View file

@ -28,21 +28,11 @@ limitations under the License.
.message-container { .message-container {
flex: 0 1 auto; 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 */ /* first try break-all, then break-word, which isn't supported everywhere */
word-break: break-all; word-break: break-all;
word-break: break-word; word-break: break-word;
} }
.message-container .sender {
margin: 5px 0;
font-size: 0.9em;
font-weight: bold;
}
.message-container img { .message-container img {
display: block; display: block;
width: 100%; width: 100%;
@ -54,50 +44,11 @@ limitations under the License.
min-width: 0; min-width: 0;
} }
.TextMessageView.own .message-container {
margin-left: auto;
}
.TextMessageView .message-container time { .TextMessageView .message-container time {
float: right; 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 { .AnnouncementView {
margin: 5px 0;
padding: 5px 10%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.AnnouncementView > div {
margin: 0 auto;
padding: 10px 20px;
background-color: #333;
font-size: 0.9em;
color: #CCC;
text-align: center;
}

1
src/ui/web/view-gallery.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/themes/bubbles/theme.css">
</head> </head>
<body> <body>
<script type="text/javascript"> <script type="text/javascript">