forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-31 17:46:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed visits table styles for dark theme

Browse Source
This commit is contained in:
Alejandro Celaya
2021-02-19 19:30:29 +01:00
parent 9523277311
commit 61af43f9d9
4 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.scss
View File

@@ -69,6 +69,12 @@ body,
border-color: var(--border-color); border-color: var(--border-color);
} }
.table-bordered,
.table-bordered thead th,
.table-bordered thead td {
border-color: var(--table-border-color);
}
.page-link:hover { .page-link:hover {
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }

4
src/theme/theme.scss
View File

@@ -6,6 +6,7 @@ $lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
$lightSecondaryColor: $lightColor; $lightSecondaryColor: $lightColor;
$lightTextColor: #212529; $lightTextColor: #212529;
$lightBorderColor: rgba(0, 0, 0, .125); $lightBorderColor: rgba(0, 0, 0, .125);
$lightTableBorderColor: $mediumGrey;
$lightActiveColor: $lightGrey; $lightActiveColor: $lightGrey;
$lightBrandColor: $mainColor; $lightBrandColor: $mainColor;
$lightInputColor: $lightPrimaryColor; $lightInputColor: $lightPrimaryColor;
@@ -18,6 +19,7 @@ $darkPrimaryColorAlfa: rgba($darkPrimaryColor, .7);
$darkSecondaryColor: #0f131a; $darkSecondaryColor: #0f131a;
$darkTextColor: rgb(201, 209, 217); $darkTextColor: rgb(201, 209, 217);
$darkBorderColor: rgba(0, 0, 0, .2); $darkBorderColor: rgba(0, 0, 0, .2);
$darkTableBorderColor: #12161b;
$darkActiveColor: $darkSecondaryColor; $darkActiveColor: $darkSecondaryColor;
$darkBrandColor: #0b2d4e; $darkBrandColor: #0b2d4e;
$darkInputColor: darken($darkPrimaryColor, 2%); $darkInputColor: darken($darkPrimaryColor, 2%);
@@ -35,6 +37,7 @@ html:not([data-theme='dark']) {
--input-color: #{$lightInputColor}; --input-color: #{$lightInputColor};
--input-disabled-color: #{$lightDisabledInputColor}; --input-disabled-color: #{$lightDisabledInputColor};
--input-border-color: #{$lightBorderInputColor}; --input-border-color: #{$lightBorderInputColor};
--table-border-color: #{$lightTableBorderColor};
} }
html[data-theme='dark'] { html[data-theme='dark'] {
@@ -48,4 +51,5 @@ html[data-theme='dark'] {
--input-color: #{$darkInputColor}; --input-color: #{$darkInputColor};
--input-disabled-color: #{$darkDisabledInputColor}; --input-disabled-color: #{$darkDisabledInputColor};
--input-border-color: #{$darkBorderInputColor}; --input-border-color: #{$darkBorderInputColor};
--table-border-color: #{$darkTableBorderColor};
} }

3
src/utils/DateInput.scss
View File

@@ -13,7 +13,8 @@
background-color: var(--primary-color) !important; background-color: var(--primary-color) !important;
} }
.card .date-input-container__input:not(:disabled) { .card .date-input-container__input:not(:disabled),
.dropdown .date-input-container__input:not(:disabled) {
background-color: var(--input-color) !important; background-color: var(--input-color) !important;
} }

4
src/utils/mixins/sticky-cell.scss
View File

@@ -12,7 +12,7 @@
left: 0; left: 0;
bottom: -1px; bottom: -1px;
right: -1px; right: -1px;
background: $mediumGrey; background: var(--table-border-color);
z-index: -2; z-index: -2;
} }
@@ -27,7 +27,7 @@
left: 1px; left: 1px;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: white; background: var(--primary-color);
z-index: -1; z-index: -1;
} }