privacyguides/privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 Activity

Fix issues with dark theme

Browse Source 
Fixes #1318
This commit is contained in:
Dawid Potocki
2019-09-16 19:25:26 +12:00
parent 6f15ac297f
commit 337b0a15ee
23 changed files with 70 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/css/dark.scss
View File

@ -1,13 +1,15 @@
---
---
$dark-400: #181b21;
$dark-300: #22262e;
$dark-200: #343a46;
$dark-100: #464f60;
@import '_vars';
$dark-900: #181b21;
$dark-800: #22262e;
$dark-700: #343a46;
$dark-600: #464f60;
$light: #d8d8d8;
$primary: #345e8e;
$danger: #b63f4a;
$secondary: $dark-100;
$secondary: $dark-600;
$success: #2c7f40;
$warning: #c6a339;
$info: #218899;
@ -18,7 +20,7 @@ $info: #218899;
*/
body {
background: $dark-400;
background: $dark-900;
color: $light;
}
a {
@ -37,12 +39,11 @@ img {
*/
.alert a {
color: #214D97;
color: lighten($primary, 30%);
}
.bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
.btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
.text-secondary { color: $secondary !important; }
.alert-secondary, .btn-secondary:hover {
color: $light;
background-color: darken($secondary, 10%);
@ -60,12 +61,15 @@ img {
.bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
.btn-warning, .card-warning .card-header { border-color: $warning !important; }
.btn-warning:hover { color: $dark-700 !important }
.text-warning { color: $warning !important; }
.card-warning > .text-dark { color: $dark-400 !important; }
.card-warning > .text-dark { color: $dark-900 !important; }
.alert-warning a { color: darken($primary, 6%); }
.badge-warning a { color: $primary; }
.alert-warning, .btn-warning:hover {
color: $light;
background-color: darken($warning, 10%);
border-color: darken($warning, 10%);
color: $dark-900;
background-color: darken($warning, 8%);
border-color: darken($warning, 8%);
}
.bg-info, .btn-info, .badge-info { background-color: $info !important; }
@ -101,33 +105,33 @@ img {
.dropdown-item:hover {
color: $light;
background-color: $dark-300;
background-color: $dark-800;
}
.form-control,
.form-control:focus {
color: $light;
background: $dark-300;
border-color: $dark-300;
background: $dark-800;
border-color: $dark-800;
}
.form-control[readonly],
.form-control:disabled {
background: $dark-300;
background: $dark-800;
}
.card,
.jumbotron,
.list-group-item {
background: $dark-300;
background: $dark-800;
}
.blockquote {
border-color: $dark-300;
border-color: $dark-800;
}
.bg-dark {
background-color: $dark-300 !important;
background-color: $dark-800 !important;
}
.dropdown-item {
@ -135,24 +139,25 @@ img {
}
.list-group-item {
border-color: $dark-200;
border-color: $dark-700;
}
.text-dark {
color: $light !important;
}
table[data-sortable].sortable-theme-bootstrap {
color: $light;
background-color: $dark-300;
background-color: $dark-800;
}
table[data-sortable].sortable-theme-bootstrap th,
table[data-sortable].sortable-theme-bootstrap td {
border-color: $dark-100 !important;
border-color: $dark-600 !important;
}
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
color: $light;
background: $dark-200;
background: $dark-700;
}
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
border-bottom-color: $light;
@ -168,8 +173,8 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
.nav-dropdown {
color: $light;
background-color: $dark-400;
border-color: $dark-300;
background-color: $dark-900;
border-color: $dark-800;
}
.nav-theme-icon:before {
@ -177,3 +182,12 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
font-size: 1em;
content: "\f185";
}
.twitter { background: desaturate($twitter, 25%); }
.mastodon { background: desaturate($mastodon, 25%); }
.facebook { background: desaturate($facebook, 25%); }
.stumbleupon { background: desaturate($stumbleupon, 25%); }
.reddit { background: desaturate($reddit, 25%); }
.linkedin { background: desaturate($linkedin, 25%); }
.email { background: desaturate($email, 25%); }
.diaspora { background: desaturate($diaspora, 25%); }