mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added brand color and input styles to dark theme

Browse source
This commit is contained in:
Alejandro Celaya 2021-02-15 23:45:13 +01:00 committed by Alejandro Celaya
parent 53f16ac8b5
commit f313a39b81
13 changed files with 152 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/App.scss
View file

@ -24,17 +24,3 @@
padding: 0 15px;
}
}
html:not([data-theme='dark']) {
--primary-color: #{$lightPrimaryColor};
--primary-color-alfa: #{$lightPrimaryColorAlfa};
--secondary-color: #{$lightSecondaryColor};
--text-color: #{$lightTextColor};
}
html[data-theme='dark'] {
--primary-color: #{$darkPrimaryColor};
--primary-color-alfa: #{$darkPrimaryColorAlfa};
--secondary-color: #{$darkSecondaryColor};
--text-color: #{$darkTextColor};
}

8
src/common/AsideMenu.scss
View file

@ -52,14 +52,10 @@
background-color: var(--secondary-color);
}
.aside-menu__item--selected {
color: #ffffff;
background-color: $mainColor;
}
.aside-menu__item--selected,
.aside-menu__item--selected:hover {
color: #ffffff;
background-color: $mainColor;
background-color: var(--brand-color);
}
.aside-menu__item--divider {

2
src/common/MainHeader.scss
View file

@ -1,8 +1,8 @@
@import '../utils/base';
.main-header.main-header {
background-color: $mainColor !important;
color: white;
background-color: var(--brand-color) !important;
.navbar-brand {
color: inherit !important;

10
src/common/react-tagsinput.scss
View file

@ -1,6 +1,6 @@
.react-tagsinput {
background-color: #ffffff;
border: 1px solid #cccccc;
background-color: var(--input-color);
border: 1px solid var(--input-border-color);
border-radius: .25rem;
overflow: hidden;
min-height: 2.6rem;
@ -10,7 +10,7 @@
.react-tagsinput--focused {
border-color: #80bdff;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
}
.react-tagsinput-tag {
@ -46,3 +46,7 @@
font-size: 1.25rem;
color: #495057;
}
.react-autosuggest__suggestion--highlighted {
background-color: var(--active-color);
}

98
src/index.scss
View file

@ -1,6 +1,7 @@
@import './utils/base';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tagsinput.scss';
@import './theme/theme';
* {
outline: none !important;
@ -14,24 +15,69 @@ body,
color: var(--text-color);
}
@media (min-width: $smMin) {
#root {
transition: filter 300ms;
}
.modal-open #root {
filter: blur(1.5px);
}
}
.bg-main {
background-color: $mainColor !important;
}
.card {
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.card,
.card-body,
.card-header,
.card-body {
background-color: var(--primary-color);
.list-group-item {
background-color: transparent;
}
.card-footer {
background-color: var(--primary-color-alfa);
}
.card {
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
background-color: var(--primary-color);
}
.modal-content,
.page-link,
.page-item.disabled .page-link,
.dropdown-menu {
background-color: var(--primary-color);
}
.modal-header,
.modal-footer,
.card-header,
.card-footer,
.table thead th,
.table th,
.table td,
.page-link,
.page-link:hover,
.page-item.disabled .page-link,
.dropdown-divider {
border-color: var(--border-color);
}
.page-link:hover {
background-color: var(--secondary-color);
}
.page-item.active .page-link {
background-color: var(--brand-color);
border-color: var(--brand-color);
}
.pagination .page-link {
cursor: pointer;
}
.container-xl {
@media (min-width: $xlgMin) {
max-width: 1320px;
@ -43,22 +89,29 @@ body,
}
}
.dropdown-item {
color: var(--text-color);
}
.dropdown-item:not(:disabled) {
cursor: pointer;
}
.dropdown-item:focus:not(:disabled),
.dropdown-item:hover:not(:disabled),
.dropdown-item.active:not(:disabled),
.dropdown-item:active:not(:disabled) {
background-color: $lightGrey !important;
color: inherit !important;
background-color: var(--active-color) !important;
color: var(--text-color) !important;
}
.badge-main {
color: #ffffff;
background-color: $mainColor;
background-color: var(--brand-color);
}
.table {
.table,
.table-hover tbody tr:hover {
color: var(--text-color);
}
@ -66,13 +119,10 @@ body,
background-color: var(--secondary-color);
}
.react-datepicker__input-container,
.react-datepicker-wrapper {
display: block !important;
}
.react-datepicker-popper {
z-index: 2;
.form-control,
.form-control:focus {
background-color: var(--input-color);
border-color: var(--input-border-color);
}
.navbar-brand {
@ -81,10 +131,6 @@ body,
}
}
.pagination .page-link {
cursor: pointer;
}
.indivisible {
white-space: nowrap;
}
@ -99,14 +145,6 @@ body,
white-space: nowrap;
}
.react-datepicker__day--keyboard-selected {
background-color: $mainColor;
&:hover {
background-color: darken($mainColor, 12%);
}
}
.progress-bar {
background-color: $mainColor;
}

2
src/servers/Overview.scss
View file

@ -2,7 +2,7 @@
.overview__card.overview__card {
text-align: center;
border-top: 3px solid $mainColor;
border-top: 3px solid var(--brand-color);
}
.overview__card-title {

2
src/short-urls/Paginator.scss
View file

@ -3,5 +3,5 @@
bottom: 0;
background-color: var(--primary-color-alfa);
padding: .75rem 0;
border-top: 1px solid rgba(black, .125);
border-top: 1px solid var(--border-color);
}

6
src/tags/TagCard.scss
View file

@ -1,3 +1,5 @@
@import '../utils/base';
.tag-card.tag-card {
margin-bottom: .5rem;
}
@ -26,11 +28,11 @@
}
.tag-card__tag-name {
color: #007bff;
color: $mainColor;
cursor: pointer;
}
.tag-card__tag-name:hover {
color: #0056b3;
color: darken($mainColor, 15%);
text-decoration: underline;
}

47
src/theme/theme.scss Normal file
View file

@ -0,0 +1,47 @@
@import '../utils/base';
// Light theme colors
$lightPrimaryColor: #ffffff;
$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
$lightSecondaryColor: $lightColor;
$lightTextColor: #212529;
$lightBorderColor: rgba(0, 0, 0, .125);
$lightActiveColor: $lightGrey;
$lightBrandColor: $mainColor;
$lightInputColor: $lightPrimaryColor;
$lightBorderInputColor: rgba(0, 0, 0, .19);
// Dark theme colors
$darkPrimaryColor: #161b22;
$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .7);
$darkSecondaryColor: #0f131a;
$darkTextColor: rgb(201, 209, 217);
$darkBorderColor: rgba(0, 0, 0, .2);
$darkActiveColor: $darkSecondaryColor;
$darkBrandColor: #0b2d4e;
$darkInputColor: darken($darkPrimaryColor, 2%);
$darkBorderInputColor: rgba(0, 0, 0, .3);
html:not([data-theme='dark']) {
--primary-color: #{$lightPrimaryColor};
--primary-color-alfa: #{$lightPrimaryColorAlfa};
--secondary-color: #{$lightSecondaryColor};
--text-color: #{$lightTextColor};
--border-color: #{$lightBorderColor};
--active-color: #{$lightActiveColor};
--brand-color: #{$lightBrandColor};
--input-color: #{$lightInputColor};
--input-border-color: #{$lightBorderInputColor};
}
html[data-theme='dark'] {
--primary-color: #{$darkPrimaryColor};
--primary-color-alfa: #{$darkPrimaryColorAlfa};
--secondary-color: #{$darkSecondaryColor};
--text-color: #{$darkTextColor};
--border-color: #{$darkBorderColor};
--active-color: #{$darkActiveColor};
--brand-color: #{$darkBrandColor};
--input-color: #{$darkInputColor};
--input-border-color: #{$darkBorderInputColor};
}

17
src/utils/DateInput.scss
View file

@ -32,3 +32,20 @@
background-color: #333333;
font-size: 14px;
}
.react-datepicker__input-container,
.react-datepicker-wrapper {
display: block !important;
}
.react-datepicker-popper {
z-index: 2;
}
.react-datepicker__day--keyboard-selected {
background-color: $mainColor;
&:hover {
background-color: darken($mainColor, 12%);
}
}

4
src/utils/DropdownBtn.scss
View file

@ -7,9 +7,9 @@
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
.show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
color: #6c757d;
background-color: var(--primary-color);
background-color: var(--input-color);
text-align: left;
border-color: rgba(0, 0, 0, .125);
border-color: var(--input-border-color);
}
.dropdown-btn__toggle.dropdown-btn__toggle:after {

13
src/utils/base.scss
View file

@ -12,21 +12,10 @@ $responsiveTableBreakpoint: $mdMax;
// Colors
$mainColor: #4696e5;
$lightColor: #f5f6fe;
$lightGrey: #dddddd;
$lightGrey: #eeeeee;
$dangerColor: #dc3545;
$mediumGrey: #dee2e6;
// Themes
$lightPrimaryColor: #ffffff;
$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
$lightSecondaryColor: $lightColor;
$lightTextColor: #212529;
$darkPrimaryColor: #161b22;
$darkPrimaryColorAlfa: rgba(#161b22, .5);
$darkSecondaryColor: #0d1117;
$darkTextColor: #ffffff;
// Misc
$headerHeight: 57px;
$asideMenuWidth: 260px;

2
src/visits/VisitsStats.scss
View file

@ -25,6 +25,6 @@
.visits-stats__nav-link.active {
border-color: $mainColor;
background-color: white !important;
background-color: var(--primary-color) !important;
color: $mainColor !important;
}