kif/portal
10
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add dark mode

Browse source
This commit is contained in:
Lars Westermann 2019-05-31 22:51:22 +02:00
parent df8f04099a
commit f90a4dddba
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D
12 changed files with 296 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/jsMain/resources/style/_color.scss Normal file
View file

@ -0,0 +1,39 @@
$background-primary-color: #fff;
$background-secondary-color: #fcfcfc;
$text-primary-color: #333;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #B11D33;
$primary-text-color: #fff;
$error-color: #F00;
$error-text-color: #fff;
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$shadow-color: rgba($text-primary-color, 0.8);
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: rgba($error-color, 0.5);
@mixin color-setting {
:root {
--background-primary-color: $background-primary-color;
--background-secondary-color: $background-secondary-color;
--text-primary-color: $text-primary-color;
--text-secondary-color: $text-secondary-color;
--primary-color: $primary-color;
--primary-text-color: $primary-text-color;
--error-color: $error-color;
--error-text-color: $error-text-color;
--input-border-color: $input-border-color;
--table-border-color: $table-border-color;
--table-header-color: $table-header-color;
--shadow-color: $shadow-color;
--bg-disabled-color: $bg-disabled-color;
--bg-enabled-color: $bg-enabled-color;
--lever-disabled-color: $lever-disabled-color;
--lever-enabled-color: $lever-enabled-color;
--error-background-color: $error-background-color;
}
}

21
src/jsMain/resources/style/dark.scss Normal file
View file

@ -0,0 +1,21 @@
@import "_color.scss";
$background-primary-color: #2d2d2d;
$background-secondary-color: #373737;
$text-primary-color: #fff;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #dd213d;
$primary-text-color: #fff;
$error-color: #F00;
$error-text-color: #fff;
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$shadow-color: rgba($text-primary-color, 0.8);
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: rgba($error-color, 0.5);
@include color-setting;

255
src/jsMain/resources/style/style.scss
View file

@ -1,3 +1,5 @@
@import "_color.scss";
@mixin no-select() {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -7,35 +9,14 @@
user-select: none;
}
$background-primary-color: #fff;
$background-secondary-color: #fcfcfc;
$text-primary-color: #333;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #B11D33;
$primary-text-color: #fff;
$error-color: #D55225;
$error-text-color: #fff;
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$border-radius: 0.2rem;
$transitionTime: 150ms;
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: #FFCDD2;
@include color-setting;
body, html {
color: $text-primary-color;
background: $background-secondary-color;
color: var(--text-primary-color);
background: var(--background-secondary-color);
font-family: 'Montserrat', Roboto, Arial, sans-serif;
font-weight: 600;
@ -57,14 +38,14 @@ body, html {
a {
text-decoration: none;
outline: none;
color: $primary-color;
color: var(--primary-color);
&:hover {
text-decoration: none;
}
&:active {
color: $primary-color;
color: var(--primary-color);
}
}
@ -98,8 +79,8 @@ a {
}
.menu {
background-color: $background-secondary-color;
color: $text-primary-color;
background-color: var(--background-secondary-color);
color: var(--text-primary-color);
width: 100%;
clear: both;
height: 6rem;
@ -107,7 +88,7 @@ a {
a {
padding: 0 1rem;
color: $text-primary-color;
color: var(--text-primary-color);
height: 100%;
display: inline-block;
font-family: "Bungee", sans-serif;
@ -132,14 +113,14 @@ a {
}
&.active::after {
background: $text-primary-color;
background: var(--text-primary-color);
}
&:hover {
background-color: $table-border-color;
background-color: var(--table-border-color);
&::after {
background: $primary-color;
background: var(--primary-color);
}
}
}
@ -162,7 +143,7 @@ a {
cursor: default;
padding: 0 1rem;
color: $text-primary-color;
color: var(--text-primary-color);
height: 100%;
font-size: 2rem;
position: relative;
@ -171,7 +152,7 @@ a {
.menu-content {
display: none;
position: absolute;
background-color: $background-secondary-color;
background-color: var(--background-secondary-color);
z-index: 5;
left: 0;
right: 0;
@ -264,14 +245,10 @@ a {
}
tr {
border-top: solid 1px $table-border-color;
&:nth-child(odd) {
//background-color: rgba($text-primary-color, 0.01);
}
border-top: solid 1px var(--table-border-color);
&:first-child {
background-color: $table-header-color;
background-color: var(--table-header-color);
height: 2.5rem;
line-height: 2.5rem;
}
@ -281,7 +258,7 @@ a {
line-height: 2rem;
&:hover {
background-color: $table-header-color;
background-color: var(--table-header-color);
}
}
}
@ -295,16 +272,16 @@ a {
}
&.error {
background-color: $error-background-color;
background-color: var(--error-background-color);
}
}
.table-select-box {
position: absolute;
z-index: 1;
background: $background-primary-color;
background: var(--background-primary-color);
width: 10rem;
border: solid 1px $input-border-color;
border: solid 1px var(--input-border-color);
border-radius: $border-radius;
padding: 0.5rem 0;
@ -312,26 +289,27 @@ a {
padding: 0 0.5rem;
&:hover {
background-color: $table-header-color;
background-color: var(--table-header-color);
}
}
}
}
.form-control {
border: solid 1px $input-border-color;
border: solid 1px var(--input-border-color);
outline: none;
padding: 0 1rem;
line-height: 2.5rem;
height: 2.5rem;
width: 100%;
background-color: $background-primary-color;
background-color: var(--background-primary-color);
border-radius: $border-radius;
margin: 1px;
transition: border-color $transitionTime;
color: var(--text-primary-color);
&:focus {
border-color: $primary-color;
border-color: var(--primary-color);
border-width: 2px;
}
}
@ -344,7 +322,7 @@ textarea.form-control {
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $text-primary-color;
text-shadow: 0 0 0 var(--text-primary-color);
}
.form-group {
@ -385,7 +363,7 @@ select:-moz-focusring {
left: 0;
width: 36px;
height: 14px;
background-color: $bg-disabled-color;
background-color: var(--bg-disabled-color);
border-radius: 14px;
z-index: 1;
transition: background-color 0.28s cubic-bezier(.4, 0, .2, 1);
@ -398,7 +376,7 @@ select:-moz-focusring {
left: 0;
width: 20px;
height: 20px;
background-color: $lever-disabled-color;
background-color: var(--lever-disabled-color);
border-radius: 14px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
z-index: 2;
@ -411,12 +389,12 @@ select:-moz-focusring {
input:checked + label {
&:before {
background-color: $bg-enabled-color;
background-color: var(--bg-enabled-color);
}
&:after {
left: 16px;
background-color: $lever-enabled-color;
background-color: var(--lever-enabled-color);
}
}
}
@ -426,12 +404,12 @@ select:-moz-focusring {
}
.form-btn {
border: solid 1px $input-border-color;
border: solid 1px var(--input-border-color);
outline: none;
padding: 0 1rem;
line-height: 2rem;
background-color: $background-primary-color;
color: $primary-color;
background-color: var(--background-primary-color);
color: var(--primary-color);
display: inline-block;
margin-right: 0.6rem;
@ -446,21 +424,21 @@ select:-moz-focusring {
cursor: pointer;
&:focus, &:hover {
border-color: $primary-color;
outline-color: $primary-color;
border-color: var(--primary-color);
outline-color: var(--primary-color);
}
}
.btn-primary {
background-color: $primary-color;
color: $primary-text-color;
border-color: $primary-color;
background-color: var(--primary-color);
color: var(--primary-text-color);
border-color: var(--primary-color);
}
.btn-danger {
background-color: $error-color;
color: $error-text-color;
border-color: $error-color;
background-color: var(--error-color);
color: var(--error-text-color);
border-color: var(--error-color);
}
button::-moz-focus-inner, input::-moz-focus-inner, select::-moz-focus-inner {
@ -522,9 +500,28 @@ form {
float: left;
}
i {
font-size: 1.5rem;
padding: 0 0.5rem;
a {
i {
font-size: 1.8rem;
padding: 0 0.5rem;
position: relative;
}
&:first-child i::after {
content: '';
position: absolute;
left: 100%;
height: 100%;
width: 4rem;
}
&:last-child i::after {
content: '';
position: absolute;
height: 100%;
left: -4rem;
width: 4rem;
}
}
}
@ -589,8 +586,8 @@ form {
white-space: nowrap;
text-overflow: ellipsis;
background-color: $primary-color;
color: $primary-text-color;
background-color: var(--primary-color);
color: var(--primary-text-color);
padding: 0 0.5rem;
margin: 0.5rem;
@ -609,7 +606,7 @@ form {
}
&.drag {
box-shadow: 0 0.1rem 0.2rem rgba($text-primary-color, 0.8);
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
z-index: 2;
.calendar-tools {
@ -625,7 +622,7 @@ form {
top: 0;
width: 100%;
height: 100%;
background-color: $background-primary-color;
background-color: var(--background-primary-color);
opacity: 0.6;
}
@ -635,7 +632,7 @@ form {
.calendar[data-editable = "true"].edit {
.calendar-table {
width: calc(100% - 16rem);
border-right: solid 1px $table-border-color;
border-right: solid 1px var(--table-border-color);
}
.calendar-edit-main {
@ -655,8 +652,8 @@ form {
display: none;
z-index: 10;
border: solid 1px $input-border-color;
box-shadow: 0 0.1rem 0.2rem $primary-text-color;
border: solid 1px var(--input-border-color);
box-shadow: 0 0.1rem 0.2rem var(--primary-text-color);
a {
padding: 0.2rem;
@ -686,8 +683,8 @@ form {
white-space: nowrap;
text-overflow: ellipsis;
background-color: $primary-color;
color: $primary-text-color;
background-color: var(--primary-color);
color: var(--primary-text-color);
padding: 0 0.5rem;
@ -705,7 +702,7 @@ form {
}
&.drag {
box-shadow: 0 0.1rem 0.2rem rgba($text-primary-color, 0.8);
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
z-index: 2;
.calendar-tools {
@ -721,12 +718,12 @@ form {
top: 0;
width: 100%;
height: 100%;
background-color: $background-primary-color;
background-color: var(--background-primary-color);
opacity: 0.6;
}
&.error {
outline: solid 0.4rem $error-color;
outline: solid 0.4rem var(--error-color);
}
@include no-select()
@ -754,14 +751,14 @@ form {
height: 100%;
left: 0;
top: 0;
border-left: solid 1px $table-border-color;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
}
}
.calendar-row {
border-top: solid 1px $table-border-color;
border-top: solid 1px var(--table-border-color);
line-height: 3rem;
height: 3rem;
@ -774,12 +771,12 @@ form {
height: 100%;
left: 0;
top: 0;
border-left: solid 1px $table-border-color;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
&:hover {
background-color: $table-header-color;
background-color: var(--table-header-color);
}
.calendar-entry {
@ -796,7 +793,7 @@ form {
width: 6rem;
left: 0;
text-align: center;
border-right: solid 1px $table-border-color;
border-right: solid 1px var(--table-border-color);
}
.calendar-link {
@ -827,7 +824,7 @@ form {
height: 100%;
left: 0;
top: 0;
border-left: solid 1px $table-border-color;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
}
@ -847,12 +844,12 @@ form {
width: 100%;
left: 0;
top: 0;
border-left: solid 1px $table-border-color;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
&:hover {
background-color: $table-header-color;
background-color: var(--table-header-color);
}
.calendar-entry {
@ -873,7 +870,7 @@ form {
}
&:nth-child(4n + 2) .calendar-cell::before {
border-top: solid 1px $table-border-color;
border-top: solid 1px var(--table-border-color);
}
}
@ -920,8 +917,8 @@ form {
width: 1.1rem;
height: 0.5rem;
transform: rotate(-45deg);
border-left: solid 0.3rem $background-primary-color;
border-bottom: solid 0.3rem $background-primary-color;
border-left: solid 0.3rem var(--background-primary-color);
border-bottom: solid 0.3rem var(--background-primary-color);
}
}
@ -942,7 +939,7 @@ form {
height: 3rem;
border-radius: 1.5rem;
z-index: 1;
border: solid 0.1rem $text-primary-color;
border: solid 0.1rem var(--text-primary-color);
}
input:checked ~ label::before {
@ -954,8 +951,8 @@ form {
width: 1.1rem;
height: 0.5rem;
transform: rotate(-45deg);
border-left: solid 0.3rem $text-primary-color;
border-bottom: solid 0.3rem $text-primary-color;
border-left: solid 0.3rem var(--text-primary-color);
border-bottom: solid 0.3rem var(--text-primary-color);
}
label input {
@ -993,8 +990,8 @@ form {
text-align: center;
font-weight: bold;
color: $primary-text-color;
background: $primary-color;
color: var(--primary-text-color);
background: var(--primary-color);
}
}
@ -1018,8 +1015,8 @@ form {
display: none;
padding: 0.5rem 0;
background: $background-primary-color;
border: solid 1px $input-border-color;
background: var(--background-primary-color);
border: solid 1px var(--input-border-color);
border-radius: $border-radius;
span {
@ -1028,7 +1025,7 @@ form {
display: block;
&:hover {
background-color: $table-header-color;
background-color: var(--table-header-color);
}
}
@ -1068,7 +1065,7 @@ form {
top: 0;
left: 0;
font-size: 1.2rem;
color: $primary-color;
color: var(--primary-color);
line-height: 2rem;
padding: 0 1rem;
@ -1078,7 +1075,7 @@ form {
opacity: 0.5;
font-size: 1.2rem;
line-height: 2rem;
color: $text-primary-color;
color: var(--text-primary-color);
}
}
@ -1148,11 +1145,11 @@ form {
}
td {
border-top: solid 1px $table-border-color;
border-top: solid 1px var(--table-border-color);
}
th {
background-color: $table-header-color;
background-color: var(--table-header-color);
}
td, th {
@ -1161,7 +1158,7 @@ form {
}
.post-footer {
color: $text-secondary-color;
color: var(--text-secondary-color);
padding: 0 1rem;
font-size: 0.8rem;
font-weight: 400;
@ -1195,9 +1192,9 @@ form {
.post-edit-image {
width: 100%;
padding-top: 75%;
border: solid 1px $input-border-color;
border: solid 1px var(--input-border-color);
margin: 0;
background-color: $background-primary-color;
background-color: var(--background-primary-color);
background-position: center;
background-size: cover;
}
@ -1213,7 +1210,7 @@ form {
height: 1px;
left: 0;
right: 0;
background: $table-border-color;
background: var(--table-border-color);
}
}
@ -1258,3 +1255,49 @@ form {
flex-direction: row;
}
}
.footer {
height: 5rem;
}
.footer-credit {
float: left;
}
.footer-theme {
float: right;
line-height: 2rem;
margin-top: 0.5rem;
a {
display: block;
position: relative;
padding-left: 2.5rem;
&::after {
content: '';
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
position: absolute;
top: 1rem;
left: 1rem;
transform: translate(-50%, -50%);
border: solid 0.2rem transparent;
}
&.selected::after {
border-color: var(--primary-color) !important;
}
}
#theme-light::after {
background-color: #fff;
border-color: #fff;
}
#theme-dark::after {
background-color: #2d2d2d;
border-color: #2d2d2d;
}
}