mirror of
https://github.com/element-hq/element-web
synced 2024-11-27 19:56:47 +03:00
factor out some more colours
This commit is contained in:
parent
8b38a326cb
commit
002339fb86
12 changed files with 54 additions and 20 deletions
|
@ -174,13 +174,13 @@ textarea {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e9e9e9;
|
||||
background-color: $dialog-background-bg-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog_background {
|
||||
opacity: 0.85;
|
||||
background-color: #000;
|
||||
background-color: $lightbox-background-bg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog {
|
||||
|
|
|
@ -58,7 +58,7 @@ limitations under the License.
|
|||
clear: both;
|
||||
margin-left: 63px;
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 26px;
|
||||
|
@ -166,10 +166,10 @@ limitations under the License.
|
|||
{
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
border-bottom: 1px solid rgba(151, 151, 151, 0.5);
|
||||
border-bottom: 1px solid $input-underline-color;
|
||||
padding: 0px;
|
||||
width: 240px;
|
||||
color: rgba(74, 74, 74, 0.9);
|
||||
color: $input-fg-color;
|
||||
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
|
@ -147,7 +147,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login_error {
|
||||
color: #ff2020;
|
||||
color: $warning-color;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
/*
|
||||
|
|
|
@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
|
|||
padding: 3px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #efefef;
|
||||
background-color: $plinth-bg-color;
|
||||
border-radius: 3px;
|
||||
background-image: url('img/icon-return.svg');
|
||||
background-position: 8px 70%;
|
||||
|
|
|
@ -16,10 +16,10 @@ limitations under the License.
|
|||
|
||||
.mx_ProgressBar {
|
||||
height: 5px;
|
||||
border: 1px solid black;
|
||||
border: 1px solid $progressbar-color;
|
||||
}
|
||||
|
||||
.mx_ProgressBar_fill {
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
background-color: $progressbar-color;
|
||||
}
|
||||
|
|
|
@ -61,7 +61,7 @@ limitations under the License.
|
|||
|
||||
.mx_MemberInfo h3 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 16px;
|
||||
|
|
|
@ -96,7 +96,7 @@ limitations under the License.
|
|||
|
||||
.mx_MemberList_invited h2 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding-left: 3px;
|
||||
|
|
|
@ -81,7 +81,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomSettings h3 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 36px;
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #454545;
|
||||
$primary-bg-color: #ffffff;
|
||||
|
@ -20,6 +19,12 @@ $warning-color: #ff0064;
|
|||
// left-panel style muted accent color
|
||||
$secondary-accent-color: #eaf5f0;
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: $secondary-accent-color;
|
||||
|
||||
// used by RoomDropTarget
|
||||
$droptarget-bg-color: rgba(255,255,255,0.5);
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: #eaf5f0;
|
||||
|
||||
|
@ -35,18 +40,27 @@ $input-border-color: #f0f0f0;
|
|||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #c7c7c7;
|
||||
|
||||
// used for UserSettings EditableText
|
||||
$input-underline-color: rgba(151, 151, 151, 0.5);
|
||||
$input-fg-color: rgba(74, 74, 74, 0.9);
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #f6f6f6;
|
||||
|
||||
$avatar-initial-color: #ffffff;
|
||||
|
||||
$h3-color: #3d3b39;
|
||||
|
||||
$dialog-background-bg-color: #e9e9e9;
|
||||
$lightbox-background-bg-color: #000;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(69, 69, 69, 0.8);
|
||||
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
$roomsublist-label-fg-color: #3d3b39;
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #d3efe1;
|
||||
|
||||
// ********************
|
||||
|
@ -64,8 +78,10 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
|||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
// ********************
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
|
@ -19,6 +19,12 @@ $warning-color: #ff0064;
|
|||
// left-panel style muted accent color
|
||||
$secondary-accent-color: $primary-bg-color;
|
||||
|
||||
// used by RoomDirectory permissions
|
||||
$plinth-bg-color: #474747;
|
||||
|
||||
// used by RoomDropTarget
|
||||
$droptarget-bg-color: rgba(45,45,45,0.5);
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: #eaf5f0;
|
||||
|
||||
|
@ -34,18 +40,27 @@ $input-border-color: #3a3a3a;
|
|||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #656565;
|
||||
|
||||
// used for UserSettings EditableText
|
||||
$input-underline-color: $primary-fg-color;
|
||||
$input-fg-color: $primary-fg-color;
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #373737;
|
||||
|
||||
$avatar-initial-color: #2d2d2d;
|
||||
|
||||
$h3-color: $primary-fg-color;
|
||||
|
||||
$dialog-background-bg-color: #000;
|
||||
$lightbox-background-bg-color: #000;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(186, 186, 186, 0.8);
|
||||
$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
$roomsublist-label-fg-color: $primary-fg-color;
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #454545;
|
||||
|
||||
// ********************
|
||||
|
@ -67,3 +82,6 @@ $e2e-warning-color: #ba6363;
|
|||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
|
@ -110,7 +110,7 @@ limitations under the License.
|
|||
padding-right: 5px;
|
||||
height: 15px;
|
||||
border-radius: 11px;
|
||||
background-color: $secondary-accent-color;
|
||||
background-color: $plinth-bg-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
|
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
padding-bottom: 5px;
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue