Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Change colors in more css files

Browse source
This commit is contained in:
RMidhunSuresh 2022-04-12 15:12:31 +05:30
parent bf74c3c67b
commit f26b51e5da
3 changed files with 45 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/platform/web/ui/css/right-panel.css
View file

@ -22,6 +22,7 @@
.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView { .RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--text-color);
} }
.RoomDetailsView_value { .RoomDetailsView_value {

7
src/platform/web/ui/css/themes/element/theme.css
View file

@ -285,6 +285,7 @@ a.button-action {
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
.PreSessionScreen { .PreSessionScreen {
/* needs transparency support */
box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1); box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
} }
@ -345,7 +346,7 @@ a.button-action {
} }
.RoomList li.active { .RoomList li.active {
background: rgba(141, 151, 165, 0.1); background: var(--background-color-secondary--darker-7);
border-radius: 5px; border-radius: 5px;
} }
@ -477,7 +478,7 @@ a {
.RoomGridView > div.focus-ring { .RoomGridView > div.focus-ring {
border: 2px solid rgba(134, 193, 165, 1); border: 2px solid var(--accent-color--darker-5);
border-radius: 12px; border-radius: 12px;
} }
@ -709,6 +710,7 @@ button.link {
} }
.lightbox { .lightbox {
/* needs transparency support */
background-color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75);
display: grid; display: grid;
grid-template: grid-template:
@ -777,6 +779,7 @@ button.link {
.menu { .menu {
border-radius: 8px; border-radius: 8px;
/* needs transparency support */
box-shadow: 2px 2px 10px rgba(0,0,0,0.5); box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
padding: 4px; padding: 4px;
background-color: var(--background-color-primary); background-color: var(--background-color-primary);

67
src/platform/web/ui/css/themes/element/timeline.css
View file

@ -21,8 +21,8 @@ limitations under the License.
bottom: 16px; bottom: 16px;
right: 32px; right: 32px;
border-radius: 100%; border-radius: 100%;
border: 1px solid #8d99a5; border: 1px solid var(--background-color-secondary--darker-7);
background-image: url("./icons/chevron-down.svg"); background-image: url("./icons/chevron-down.svg?primary=icon-color");
background-position: center; background-position: center;
background-color: white; background-color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -77,6 +77,7 @@ limitations under the License.
} }
.Timeline_message:hover:not(.disabled), .Timeline_message.selected, .Timeline_message.menuOpen { .Timeline_message:hover:not(.disabled), .Timeline_message.selected, .Timeline_message.menuOpen {
/* needs transparency support */
background-color: rgba(141, 151, 165, 0.1); background-color: rgba(141, 151, 165, 0.1);
border-radius: 4px; border-radius: 4px;
} }
@ -119,10 +120,11 @@ limitations under the License.
margin-top: -12px; margin-top: -12px;
margin-right: 4px; margin-right: 4px;
/* button visuals */ /* button visuals */
border: #ccc 1px solid; border: var(--background-color-primary--darker-10) 1px solid;
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: #fff; background-color: var(--background-color-primary);
color: inherit;
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
text-align: center; text-align: center;
@ -142,12 +144,12 @@ limitations under the License.
.Timeline_messageBody time, .Timeline_messageTime { .Timeline_messageBody time, .Timeline_messageTime {
font-size: 0.8em; font-size: 0.8em;
line-height: normal; line-height: normal;
color: #aaa; color: var(--timeline-time-text-color);
} }
.Timeline_messageBody.statusMessage { .Timeline_messageBody.statusMessage {
font-style: italic; font-style: italic;
color: #777; color: var(--light-text-color);
} }
.Timeline_messageBody { .Timeline_messageBody {
@ -190,7 +192,7 @@ limitations under the License.
} }
.Timeline_messageBody a.link { .Timeline_messageBody a.link {
color: #238cf5; color: var(--link-color);
text-decoration: none; text-decoration: none;
} }
@ -221,6 +223,7 @@ so the timeline doesn't jump when the image loads */
border-radius: 4px; border-radius: 4px;
display: block; display: block;
} }
/* stretch the image (to the spacer) on platforms /* stretch the image (to the spacer) on platforms
where we can trust the spacer to always have the correct height, where we can trust the spacer to always have the correct height,
otherwise the image starts with height 0 and with loading=lazy otherwise the image starts with height 0 and with loading=lazy
@ -249,21 +252,24 @@ only loads when the top comes into view*/
.Timeline_messageBody .media > time, .Timeline_messageBody .media > time,
.Timeline_messageBody .media > .sendStatus { .Timeline_messageBody .media > .sendStatus {
color: #2e2f32; color: var(--text-color);
display: block; display: block;
padding: 2px; padding: 2px;
margin: 4px; margin: 4px;
/* needs transparency support */
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
border-radius: 4px; border-radius: 4px;
} }
.Timeline_messageBody .media > .spacer { .Timeline_messageBody .media > .spacer {
/* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */ /* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */
width: 100%; width: 100%;
/* don't stretch height as it is a spacer, just in case it doesn't match with image height */ /* don't stretch height as it is a spacer, just in case it doesn't match with image height */
align-self: start; align-self: start;
} }
.Timeline_messageBody code, .Timeline_messageBody pre { .Timeline_messageBody code, .Timeline_messageBody pre {
background-color: #f8f8f8; background-color: var(--background-color-secondary);
font-family: monospace; font-family: monospace;
font-size: 0.9em; font-size: 0.9em;
} }
@ -275,13 +281,13 @@ only loads when the top comes into view*/
} }
.Timeline_messageBody pre { .Timeline_messageBody pre {
border: 1px solid rgb(229, 229, 229); border: 1px solid var(--light-border);
padding: 0.5em; padding: 0.5em;
max-height: 30em; max-height: 30em;
overflow: auto; overflow: auto;
} }
.Timeline_messageBody pre > code { .Timeline_messageBody pre>code {
background-color: unset; background-color: unset;
border-radius: unset; border-radius: unset;
display: block; display: block;
@ -291,17 +297,17 @@ only loads when the top comes into view*/
.Timeline_messageBody blockquote { .Timeline_messageBody blockquote {
margin-left: 0; margin-left: 0;
padding-left: 20px; padding-left: 20px;
border-left: 4px solid rgb(229, 229, 229); border-left: 4px solid var(--light-border);
} }
.Timeline_messageBody table { .Timeline_messageBody table {
border: 1px solid rgb(206, 206, 206); border: 1px solid var(--background-color-secondary--darker-15);
border-radius: 2px; border-radius: 2px;
border-spacing: 0; border-spacing: 0;
} }
.Timeline_messageBody thead th { .Timeline_messageBody thead th {
border-bottom: 1px solid rgb(206, 206, 206); border-bottom: 1px solid var(--background-color-secondary--darker-15);
} }
.Timeline_messageBody td, .Timeline_messageBody th { .Timeline_messageBody td, .Timeline_messageBody th {
@ -309,14 +315,14 @@ only loads when the top comes into view*/
} }
.Timeline_messageBody tbody tr:nth-child(2n) { .Timeline_messageBody tbody tr:nth-child(2n) {
background-color: #f6f6f6; background-color: var(--background-color-secondary);
} }
.Timeline_messageBody .pill { .Timeline_messageBody .pill {
padding: 0px 5px; padding: 0px 5px;
border-radius: 15px; border-radius: 15px;
background-color: #f6f6f6; background-color: var(--background-color-secondary);
border: 1px solid rgb(206, 206, 206); border: 1px solid var(--background-color-secondary--darker-10);
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -331,11 +337,11 @@ only loads when the top comes into view*/
} }
.Timeline_message.unsent .Timeline_messageBody { .Timeline_message.unsent .Timeline_messageBody {
color: #ccc; color: var(--light-text-color);
} }
.Timeline_message.unverified .Timeline_messageBody { .Timeline_message.unverified .Timeline_messageBody {
color: #ff4b55; color: var(--error-color);
} }
.Timeline_messageReactions { .Timeline_messageReactions {
@ -348,22 +354,27 @@ only loads when the top comes into view*/
line-height: 2.0rem; line-height: 2.0rem;
margin-right: 6px; margin-right: 6px;
padding: 1px 6px; padding: 1px 6px;
border: 1px solid #e9edf1; border: 1px solid var(--light-border);
border-radius: 10px; border-radius: 10px;
background-color: #f3f8fd; background-color: var(--background-color-secondary);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
vertical-align: middle; vertical-align: middle;
} }
.Timeline_messageReactions button.active { .Timeline_messageReactions button.active {
background-color: #e9fff9; background-color: var(--accent-color--lighter-60);
border-color: #0DBD8B; border-color: var(--accent-color);
} }
@keyframes glow-reaction-border { @keyframes glow-reaction-border {
0% { border-color: #e9edf1; } 0% {
100% { border-color: #0DBD8B; } border-color: var(--background-color-secondary);
}
100% {
border-color: var(--accent-color);
}
} }
.Timeline_messageReactions button.active.pending { .Timeline_messageReactions button.active.pending {
@ -377,8 +388,8 @@ only loads when the top comes into view*/
.Timeline_locationLink { .Timeline_locationLink {
padding: 0px 8px; padding: 0px 8px;
border-radius: 16px; border-radius: 16px;
border: 1px solid #e9edf1; border: 1px solid var(--light-border);
background-color: #f3f8fd; background-color: var(--background-color-secondary);
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
line-height: 2rem; line-height: 2rem;
@ -394,7 +405,7 @@ only loads when the top comes into view*/
.AnnouncementView > div { .AnnouncementView > div {
margin: 0 auto; margin: 0 auto;
padding: 10px 20px; padding: 10px 20px;
background-color: rgba(245, 245, 245, 0.90); background-color: var(--background-color-secondary);
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
} }