Matrix-Programs/Scylla
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

Get rid of some inconsistent shadows and borders.

Browse Source
This commit is contained in:
Danila Fedorin 2019-05-19 01:34:14 -07:00
parent 8560f15047
commit 6e5702290a
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/scss/style.scss
View File

@ -10,12 +10,10 @@ $background-color-dark: darken($background-color, 4%);
$error-color: #f01d43; $error-color: #f01d43;
$error-color-dark: darken(#f01d43, 10%); $error-color-dark: darken(#f01d43, 10%);
$active-input-color: lighten($background-color-light, 2%); $inactive-input-color: lighten($background-color-light, 5%);
$active-input-border-color: $primary-color; $active-input-color: lighten($inactive-input-color, 5%);
$inactive-input-color: $background-color-light;
$inactive-input-border-color: darken($inactive-input-color, 10%);
$transition-duration: .125s; $transition-duration: .250s;
$inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25); $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
@ -36,20 +34,24 @@ body {
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
transition: background-color $transition-duration;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
&:focus {
transition: background-color $transition-duration;
}
} }
input, textarea { input, textarea {
@include input-common(); @include input-common();
overflow-x: hidden;
background-color: $inactive-input-color; background-color: $inactive-input-color;
color: white; color: white;
border: .5px solid $inactive-input-border-color; border: none;
padding: 10px;
&:focus { &:focus {
background-color: $active-input-color; background-color: $active-input-color;
border-color: $active-input-border-color;
} }
} }
@ -105,7 +107,6 @@ div.errors-wrapper {
div.error-wrapper { div.error-wrapper {
pointer-events: auto; pointer-events: auto;
width: 400px; width: 400px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
padding: 5px; padding: 5px;
background-color: $error-color; background-color: $error-color;
border: 1px solid $error-color-dark; border: 1px solid $error-color-dark;
@ -175,7 +176,6 @@ div.reconnect-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: $inactive-input-color; background-color: $inactive-input-color;
border: 1px solid $inactive-input-border-color;
border-radius: 3px; border-radius: 3px;
.feather-icon { .feather-icon {
@ -191,13 +191,12 @@ div.room-wrapper {
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
box-shadow: $inset-shadow;
padding: 5px; padding: 5px;
} }
div.typing-wrapper { div.typing-wrapper {
padding: 5px; padding: 5px;
height: 12px; height: 1em;
flex-shrink: 0; flex-shrink: 0;
} }
@ -217,7 +216,6 @@ div.message-wrapper {
margin: 3px; margin: 3px;
height: 40px; height: 40px;
width: 40px; width: 40px;
border-radius: 50px;
} }
} }