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

Fixed home page styles for bootstrap 5

Browse Source
This commit is contained in:
Alejandro Celaya
2022-03-06 10:38:26 +01:00
parent d8e4a4b891
commit 56313e5db8
3 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/Home.scss
View File

@@ -1,6 +1,10 @@
@import '../utils/base'; @import '../utils/base';
@import '../utils/mixins/vertical-align'; @import '../utils/mixins/vertical-align';
$mainCardWidth: 720px;
$totalColumns: 12;
$logoColumns: 5;
.home { .home {
position: relative; position: relative;
padding-top: 15px; padding-top: 15px;
@@ -21,12 +25,12 @@
.home__logo { .home__logo {
@include vertical-align(); @include vertical-align();
width: calc(100% - 3rem); width: calc(#{$mainCardWidth / $totalColumns * $logoColumns} - 3rem);
} }
.home__main-card { .home__main-card {
margin: 0 auto; margin: 0 auto;
max-width: 720px; max-width: $mainCardWidth;
@media (min-width: $mdMin) { @media (min-width: $mdMin) {
@include vertical-align(); @include vertical-align();

4
src/servers/ServersListGroup.scss
View File

@@ -17,6 +17,10 @@
padding: .75rem 2.5rem .75rem 1rem; padding: .75rem 2.5rem .75rem 1rem;
} }
.servers-list__server-item:not(:hover) {
color: $mainColor;
}
.servers-list__server-item:hover { .servers-list__server-item:hover {
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }

14
src/utils/theme/index.ts
View File

@@ -12,14 +12,8 @@ export const PRIMARY_DARK_COLOR = '#161b22';
export type Theme = 'dark' | 'light'; export type Theme = 'dark' | 'light';
export const changeThemeInMarkup = (theme: Theme) => { export const changeThemeInMarkup = (theme: Theme) =>
const html = document.getElementsByTagName('html'); document.getElementsByTagName('html')?.[0]?.setAttribute('data-theme', theme);
html?.[0]?.setAttribute('data-theme', theme); export const isDarkThemeEnabled = (): boolean =>
}; document.getElementsByTagName('html')?.[0]?.getAttribute('data-theme') === 'dark';
export const isDarkThemeEnabled = (): boolean => {
const html = document.getElementsByTagName('html');
return html?.[0]?.getAttribute('data-theme') === 'dark';
};