mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
extract theme from current styling
This commit is contained in:
parent
23d96b554a
commit
be9e476874
@ -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">
|
||||||
|
@ -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
26
src/ui/web/css/form.css
Normal 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;
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
@ -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
33
src/ui/web/css/status.css
Normal 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
183
src/ui/web/css/themes/bubbles/theme.css
Normal 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;
|
||||||
|
}
|
@ -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;
|
|
||||||
}
|
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user