Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/styles/color-themes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,26 @@ html[data-theme='dracula'] {
--nav-link-border-color-hover: none;
--item-group-outer-background: var(--background-darker);
--login-form-background: var(--background-darker);
.item { border: 1px solid var(--primary); }
h1, h2, h3 { font-weight: normal; }

/* Ensure specific borders for items */
.item {
border: 1px solid var(--primary);
}

/* Make headings normal weight */
h1, h2, h3 {
font-weight: normal;
}

/* Handle nth-child color variations */
.collapsable, .nav a.nav-item {
&:nth-child(1n) { --index-color: #8be9fd; }
&:nth-child(2n) { --index-color: #50fa7b; }
&:nth-child(3n) { --index-color: #ffb86c; }
&:nth-child(4n) { --index-color: #ff79c6; }
&:nth-child(5n) { --index-color: #bd93f9; }

/* Use the index color for various properties */
--item-group-heading-text-color: var(--index-color);
--item-group-heading-text-color-hover: var(--index-color);
--item-group-shadow: inset 0 2px 1px var(--index-color), 1px 1px 2px #000000cc;
Expand All @@ -59,7 +69,10 @@ html[data-theme='dracula'] {
--nav-link-text-color-hover: var(--index-color);
--nav-link-shadow-hover: inset 0 2px 1px var(--index-color), 1px 1px 2px #000000cc;

.item:hover { border-color: var(--index-color); }
/* Change border color on hover */
.item:hover {
border-color: var(--index-color);
}
}
}

Expand Down
154 changes: 84 additions & 70 deletions src/styles/style-helpers.scss
Original file line number Diff line number Diff line change
@@ -1,70 +1,84 @@
@import '@/styles/media-queries.scss';

/* Fancy scrollbar */
.scroll-bar {
&::-webkit-scrollbar {
width: var(--scroll-bar-width);
height: var(--scroll-bar-width);
}
&::-webkit-scrollbar-track {
border-radius: var(--curve-factor);
background-color: var(--scroll-bar-background);
}
&::-webkit-scrollbar-thumb {
background: var(--scroll-bar-color);
border-radius: var(--curve-factor);
}
}

.svg-button {
color: var(--primary);
svg {
path {
fill: var(--settings-text-color);
}
width: 1rem;
height: 1rem;
margin: 0.2rem;
padding: 0.2rem;
text-align: center;
background: var(--background);
border: 1px solid currentColor;
border-radius: var(--curve-factor);
cursor: pointer;
&:hover, &.selected {
background: var(--settings-text-color);
path { fill: var(--background); }
}
&.disabled {
opacity: var(--dimming-factor);
cursor: not-allowed;
&:hover {
border: 1px solid currentColor;
background: var(--background);
path { fill: var(--settings-text-color); }
}
}
}
}

/* Custom highlight color */
.highlight {
::selection {
background-color: var(--highlight-background);
color: var(--highlight-color);
}
::-moz-selection, ::-o-selection, ::-ms-selection, ::-webkit-selection {
background-color: var(--highlight-background);
color: var(--highlight-color);
}
}

/* Single-style helpers */
.bold { font-weight: bold; }
.light { font-weight: lighter; }
.text-left { text-align: left;}
.text-right { text-align: right;}
.text-center { text-align: center;}
.horizontal-center { margin: 0 auto; }
.border-box { box-sizing: border-box; }

@import '@/styles/media-queries.scss';

/* Fancy scrollbar */
.scroll-bar {
&::-webkit-scrollbar {
width: var(--scroll-bar-width);
height: var(--scroll-bar-width);
}
&::-webkit-scrollbar-track {
border-radius: var(--curve-factor);
background-color: var(--scroll-bar-background);
}
&::-webkit-scrollbar-thumb {
background: var(--scroll-bar-color);
border-radius: var(--curve-factor);
}
}

.svg-button {
color: var(--primary);
text-align: center;
background: var(--background);
border: 1px solid currentColor;
border-radius: var(--curve-factor);
cursor: pointer;

svg {
width: 1rem;
height: 1rem;
margin: 0.2rem;
padding: 0.2rem;

path {
fill: var(--settings-text-color);
}

&:hover, &.selected {
background: var(--settings-text-color);

path {
fill: var(--background);
}
}

&.disabled {
opacity: var(--dimming-factor);
cursor: not-allowed;

&:hover {
border: 1px solid currentColor;
background: var(--background);

path {
fill: var(--settings-text-color);
}
}
}
}
}

/* Custom highlight color */
.highlight {
::selection {
background-color: var(--highlight-background);
color: var(--highlight-color);
}
/* Use proper vendor prefixes for older versions of browsers */
::-moz-selection,
::-o-selection,
::-ms-selection,
::-webkit-selection {
background-color: var(--highlight-background);
color: var(--highlight-color);
}
}

/* Single-style helpers */
.bold { font-weight: bold; }
.light { font-weight: lighter; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.horizontal-center { margin: 0 auto; }
.border-box { box-sizing: border-box; }
Loading