Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-23 04:34:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Ensures all colors are using variables

Browse Source
This commit is contained in:
Alicia Sykes 2021-04-20 17:26:21 +01:00
parent 9f70181422
commit 3d342bb43d
9 changed files with 65 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/LinkItems/Item.vue
View File

@ -137,6 +137,7 @@ export default {
padding: 0;
z-index: 2;
span.text {
position: absolute;
white-space: nowrap;
transition: 1s;
float: left;

4
src/components/PageStrcture/Footer.vue
View File

@ -35,9 +35,9 @@ footer {
}
footer a{
color: var(--medium-grey);
color: var(--footer-text-color);
&:hover {
color: var(--primary);
color: var(--footer-text-color-link);
}
}

15
src/components/PageStrcture/Nav.vue
View File

@ -36,18 +36,17 @@ nav {
outline: none;
border: none;
border-radius: var(--curve-factor);
background: #607d8b33;
-webkit-box-shadow: 1px 1px 2px #232323;
box-shadow: 1px 1px 2px #232323;
color: var(--primary);
color: var(--nav-link-text-color);
background: var(--nav-link-background-color);
border: 1px solid var(--nav-link-border-color);
text-decoration: none;
&:hover {
background: #607d8b1c;
box-shadow: 1px 4px 3px #232323;
&.router-link-active, &:hover {
color: var(--nav-link-text-color-hover);
background: var(--nav-link-background-color-hover);
border: 1px solid var(--nav-link-border-color-hover);
}
}
.router-link-active {
border: 1px solid var(--primary);
}
}
</style>

4
src/components/PageStrcture/PageTitle.vue
View File

@ -22,12 +22,12 @@ export default {
display: flex;
flex-direction: column;
h1 {
color: var(--primary);
color: var(--heading-text-color);
font-size: 2.5rem;
margin: 0;
}
span.subtitle {
color: var(--primary);
color: var(--heading-text-color);
font-style: italic;
text-shadow: 1px 1px 2px #130f23;
opacity: var(--dimming-factor);

2
src/components/Settings/SearchBar.vue
View File

@ -84,7 +84,7 @@ export default {
outline: none;
border: none;
border-radius: var(--curve-factor);
background: var(--background);
background: var(--search-field-background);
color: var(--settings-text-color);
border: 1px solid var(--outline-color);
&:focus {

10
src/styles/color-palette.scss
View File

@ -31,6 +31,13 @@
--item-group-shadow: var(--item-shadow);
/* Specific components, using variables allows them to be overridden individually */
--heading-text-color: var(--primary);
--nav-link-text-color: var(--primary);
--nav-link-background-color: #607d8b33;
--nav-link-text-color-hover: var(--primary);
--nav-link-background-color-hover: #607d8b33;
--nav-link-border-color: transparent;
--nav-link-border-color-hover: var(--primary);
--item-text-color: var(--primary);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
@ -38,4 +45,7 @@
--settings-background: var(--background);
--settings-text-color: var(--primary);
--search-container-background: var(--background-darker);
--search-field-background: var(--background);
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
}

36
src/styles/color-themes.scss
View File

@ -17,6 +17,8 @@ html[data-theme='thebe'] {
--item-background-hover: #060913;
--item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
--primary: #9660ec;
--item-group-outer-background: #9660EC
linear-gradient(45deg, #9660ec 2%,#5f60ea 51%,#9660ec 100%);
}
html[data-theme='dracula'] {
@ -38,17 +40,23 @@ html[data-theme='dracula'] {
html[data-theme='bee'] {
--primary: #c3eb5c;
--item-background: #1c2636;
--item-group-background: #0b1021;
--nav-link-background-color: #0b1021;
}
html[data-theme='raspberry-jam'] {
--primary: #eb2d6c;
--item-background: #1c2636;
--item-group-background: #0b1021;
--nav-link-background-color: #0b1021;
}
html[data-theme='tiger'] {
--primary: #f58233;
--item-background: #1c2636;
--item-group-background: #0b1021;
--nav-link-background-color: #0b1021;
}
html[data-theme='matrix-red'] {
@ -138,6 +146,33 @@ html[data-theme='material'] {
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
}
html[data-theme='material-dark'] {
--primary: #08B0BB;
--settings-text-color: #08B0BB;
--background: #39434C;
--background-darker: #08B0BB;
--settings-background: #092b3a;
--item-group-background: #333C43;
--item-background: #414B55;
--item-background-hover: #414B55;
--settings-background: #131a1f;
--search-container-background: #131a1f;
--search-field-background: #39434c;
--heading-text-color: #131a1f;
--nav-link-text-color: #08B0BB;
--nav-link-background-color: #131a1f;
--nav-link-text-color-hover: #08B0BB;
--nav-link-background-color-hover: #131a1fc7;
--nav-link-border-color-hover: transparent;
--curve-factor: 2px;
--curve-factor-navbar: 0;
--item-group-padding: 5px 0 0;
--item-shadow: 2px 2px 3px #00000082, 0 1px 10px #00000040;
--item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
}
html[data-theme='colorful'] {
--primary: #e8eae1;
--background: #0b1021;
@ -161,5 +196,6 @@ html[data-theme='colorful'] {
background: currentColor;
span { color: #05070e; }
svg path { fill: #05070e; }
i.fas, i.fab, i.far, i.fal, i.fad { color: #05070e; }
}
}

1
src/utils/defaults.js
View File

@ -18,6 +18,7 @@ module.exports = {
'callisto',
'thebe',
'material',
'material-dark',
'dracula',
'matrix',
'matrix-red',

5
src/views/Home.vue
View File

@ -169,6 +169,11 @@ export default {
.item-group-container {
display: grid;
gap: 0.5rem;
margin: 0 auto;
max-width: 1200px;
@include monitor-up {
max-width: 1400px;
}
/* Options for alternate layouts, triggered by buttons */
&.orientation-horizontal {