selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wrote a ton of color themes

This commit is contained in:
Alicia Sykes 2021-04-15 19:30:30 +01:00
parent 8b3d3cab88
commit 7f3e8dd818
17 changed files with 209 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -37,8 +37,9 @@ export default {
</script>
<style lang="scss">
@import '../src/styles/global-styles.scss';
@import '../src/styles/color-palette.scss';
@import '@/styles/global-styles.scss';
@import '@/styles/color-palette.scss';
@import '@/styles/color-themes.scss';
body {
background: var(--background);

6
src/components/LinkItems/Collapsable.vue
View File

@ -90,13 +90,11 @@ export default {
@import '@/styles/media-queries.scss';
.collapsable {
padding: 5px;
padding: var(--item-group-padding);
margin: 10px;
border-radius: var(--curve-factor);
background: var(--primary);
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
box-shadow: 1px 1px 2px #130f23;
box-shadow: var(--item-group-shadow);
height: fit-content;
width: 100%;
width: stretch;

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

@ -82,7 +82,7 @@ export default {
trigger: 'hover focus',
hideOnTargetClick: true,
html: false,
delay: { show: 350, hide: 200 },
delay: { show: 600, hide: 200 },
};
},
},
@ -100,17 +100,17 @@ export default {
color: var(--primary);
vertical-align: middle;
margin: 0.5rem;
background: #607d8b33;
background: var(--item-background);
text-align: center;
padding: 2px;
outline: 2px solid transparent;
border: 1px solid var(--outline-color);
border-radius: var(--curve-factor);
box-shadow: 1px 1px 2px #373737;
box-shadow: var(--item-shadow);
cursor: pointer;
&:hover {
box-shadow: 1px 2px 4px #373737;
background: #607d8b4d;
box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover);
}
&:focus {
outline: 2px solid var(--primary);
@ -130,6 +130,7 @@ export default {
overflow: hidden;
position: relative;
padding: 0;
z-index: 2;
span.text {
position: absolute;
white-space: nowrap;
@ -150,8 +151,7 @@ export default {
.overflow-dots {
display: block;
opacity: 1;
// background: var(--background-transparent);
background: #283e51;
background: var(--item-background);
position: absolute;
z-index: 5;
right: 0;
@ -181,14 +181,9 @@ export default {
}
}
/* Colourize icons on hover */
.tile-svg {
filter: drop-shadow(4px 8px 3px var(--transparent-50));
}
.tile-icon {
filter:
drop-shadow(4px 8px 3px var(--transparent-50))
saturate(2);
/* Apply transofmation of icons on hover */
.tile-icon, .tile-svg {
filter: var(--item-icon-transform-hover);
}
}

2
src/components/LinkItems/ItemGroup.vue
View File

@ -78,7 +78,7 @@ export default {
border-radius: var(--curve-factor);
background: #607d8b33;
color: var(--primary);
box-shadow: 1px 1px 2px #373737;
box-shadow: var(--item-shadow);
}
.there-are-items {

2
src/components/LinkItems/ItemIcon.vue
View File

@ -85,6 +85,6 @@ export default {
.tile-icon {
width: 60px;
filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
filter: var(--item-icon-transform);
}
</style>

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

@ -26,7 +26,7 @@ export default {
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
font-size: 3rem;
font-size: 2.5rem;
margin: 0;
}
span.subtitle {

8
src/components/Settings/ItemSizeSelector.vue
View File

@ -46,14 +46,14 @@ export default {
<style scoped lang="scss">
span.options-label {
color: var(--primary);
color: var(--settings-text-color);
}
.display-options {
color: var(--primary);
color: var(--settings-text-color);
svg {
path {
fill: var(--primary);
fill: var(--settings-text-color);
}
width: 1rem;
height: 1rem;
@ -65,7 +65,7 @@ span.options-label {
border-radius: var(--curve-factor);
cursor: pointer;
&:hover, &.selected {
background: var(--primary);
background: var(--settings-text-color);
path { fill: var(--background); }
}
}

8
src/components/Settings/LayoutSelector.vue
View File

@ -46,14 +46,14 @@ export default {
<style scoped lang="scss">
span.options-label {
color: var(--primary);
color: var(--settings-text-color);
}
.display-options {
color: var(--primary);
color: var(--settings-text-color);
svg {
path {
fill: var(--primary);
fill: var(--settings-text-color);
}
width: 1rem;
height: 1rem;
@ -65,7 +65,7 @@ span.options-label {
border-radius: var(--curve-factor);
cursor: pointer;
&:hover, &.selected {
background: var(--primary);
background: var(--settings-text-color);
path { fill: var(--background); }
}
}

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

@ -66,10 +66,10 @@ export default {
align-items: center;
border-radius: 0 0 var(--curve-factor-navbar) 0;
padding: 0 0.2rem 0.2rem 0;
background: var(--background-darker);
background: var(--search-container-background);
label {
display: inline;
color: var(--primary);
color: var(--settings-text-color);
margin: 0.5rem;
display: inline;
}
@ -83,16 +83,16 @@ export default {
border: none;
border-radius: var(--curve-factor);
background: var(--background);
color: var(--primary);
color: var(--settings-text-color);
border: 1px solid var(--outline-color);
&:focus {
border-color: var(--primary);
border-color: var(--settings-text-color);
opacity: var(--dimming-factor);
}
}
.clear-search {
position: absolute;
color: var(--primary);
color: var(--settings-text-color);
margin: 0.55rem 0 0 -2.2rem;
padding: 0 0.4rem;
font-style: normal;

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

@ -68,7 +68,7 @@ export default {
flex: 1;
padding: 0.5rem 1rem;
border-radius: var(--curve-factor-navbar) 0 0;
background: var(--background);
background: var(--settings-background);
div {
margin-left: 0.5rem;
opacity: var(--dimming-factor);

13
src/components/Settings/ThemeSelector.vue
View File

@ -91,24 +91,27 @@ export default {
.theme-dropdown {
div.vs__dropdown-toggle {
border-color: var(--primary);
border-color: var(--settings-text-color);
border-radius: var(--curve-factor);
min-width: 10rem;
height: 1.8rem;
font-size: 0.85rem;
cursor: pointer;
}
span.vs__selected, li.vs__dropdown-option {
color: var(--primary);
color: var(--settings-text-color);
text-transform: capitalize;
}
svg.vs__open-indicator {
fill: var(--primary);
fill: var(--settings-text-color);
}
ul.vs__dropdown-menu {
width: auto;
background: var(--background);
z-index: 5;
}
li.vs__dropdown-option--highlight {
background: var(--primary);
background: var(--settings-text-color);
color: var(--background);
}
button.vs__clear {
@ -123,7 +126,7 @@ export default {
height: 100%;
span.theme-label {
font-size: 1rem;
color: var(--primary);
color: var(--settings-text-color);
margin: 1px 0 2px 0;
}
}

3
src/data/conf.yml
View File

@ -2,9 +2,6 @@
pageInfo:
title: Hello World
description: 'This is a demo'
appConfig:
theme: 'Default'
externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
sections:
- name: Firewall
items:

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

@ -19,46 +19,18 @@
--curve-factor: 5px;
--curve-factor-navbar: 16px;
--dimming-factor: 0.8;
}
html[data-theme='hacker-red'] {
--background: #000;
--background-darker: #000;
--primary: red;
--outline-color: red;
--curve-factor: 0px;
}
/* Settings for specific components */
--item-group-padding: 5px;
--item-shadow: 1px 1px 2px #130f23;
--item-group-shadow: var(--item-shadow);
--item-hover-shadow: 1px 2px 4px #373737;
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
html[data-theme='hacker-green'] {
--background: #000;
--background-darker: #000;
--primary: #2bca2b;
--outline-color: #2bca2b;
--curve-factor: 0px;
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
--settings-text-color: var(--primary);
--settings-background: var(--background);
--search-container-background: var(--background-darker);
}
html[data-theme='hacker-pink'] {
--background: #000;
--background-darker: #000;
--primary: #e435f1;
--outline-color: #e435f1;
--curve-factor: 0px;
}
html[data-theme='high-contrast-light'] {
--background: #fff;
--background-darker: #fff;
--item-group-background: #fff;
--primary: #000;
--outline-color: #000;
--curve-factor: 0px;
}
html[data-theme='high-contrast-dark'] {
--background: #000;
--background-darker: #000;
--item-group-background: #000;
--primary: #fff;
--outline-color: #fff;
--curve-factor: 0px;
}

138
src/styles/color-themes.scss Normal file
View File

@ -0,0 +1,138 @@
html[data-theme='nord'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #BF616A; }
.collapsable:nth-child(2n) { background: #D08770; }
.collapsable:nth-child(3n) { background: #EBCB8B; }
.collapsable:nth-child(4n) { background: #A3BE8C; }
}
html[data-theme='nord-frost'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #8FBCBB; }
.collapsable:nth-child(2n) { background: #88C0D0; }
.collapsable:nth-child(3n) { background: #81A1C1; }
.collapsable:nth-child(4n) { background: #5E81AC; }
}
html[data-theme='callisto'] {
--background: #141b33;
--background-darker: #060913;
--item-group-background: #0b1021;
--item-background: #141b33;
--item-background-hover: #060913;
--item-hover-shadow: 0 1px 3px #00ccb4b3, 0 1px 2px #00ccb4bf;
--primary: #00CCB4;
}
html[data-theme='thebe'] {
--background: #141b33;
--background-darker: #060913;
--item-group-background: #0b1021;
--item-background: #141b33;
--item-background-hover: #060913;
--item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
--primary: #9660ec;
}
html[data-theme='dracula'] {
--background: #44475a;
--background-darker: #282a36;
--item-group-background: #282a36;
--item-background: none;
--item-background-hover: #191b22;
--item-shadow: none;
--item-hover-shadow: none;
--settings-text-color: #98ace9;
--primary: #6272a4;
.collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; span {color: #8be9fd; }}}
.collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; span {color: #50fa7b; }}}
.collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; span {color: #ffb86c; }}}
.collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; span {color: #ff79c6; }}}
.collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; span {color: #bd93f9; }}}
}
html[data-theme='bee'] {
--primary: #c3eb5c;
--item-group-background: #0b1021;
}
html[data-theme='raspberry-jam'] {
--primary: #eb2d6c;
--item-group-background: #0b1021;
}
html[data-theme='tiger'] {
--primary: #f58233;
--item-group-background: #0b1021;
}
html[data-theme='matrix-red'] {
--background: #000;
--background-darker: #000;
--primary: red;
--outline-color: red;
--curve-factor: 0px;
}
html[data-theme='matrix'] {
--background: #000;
--background-darker: #000;
--primary: #2bca2b;
--outline-color: #2bca2b;
--curve-factor: 0px;
}
html[data-theme='hacker-girl'] {
--background: #000;
--background-darker: #000;
--primary: #e435f1;
--outline-color: #e435f1;
--curve-factor: 0px;
}
html[data-theme='high-contrast-light'] {
--background: #fff;
--background-darker: #fff;
--item-group-background: #fff;
--item-background: #fff;
--primary: #000;
--outline-color: #000;
--curve-factor: 0px;
}
html[data-theme='high-contrast-dark'] {
--background: #000;
--background-darker: #000;
--item-group-background: #000;
--primary: #fff;
--outline-color: #fff;
--curve-factor: 0px;
}
html[data-theme='material'] {
--primary: #29B6F6;
--settings-text-color: #01579b;
--background: #e2e1e0;
--background-darker: #01579B;
--settings-background: #01579B;
--item-group-background: #f8f8f8;
--item-background: #fff;
--item-background-hover: #fff;
--settings-background: #29B6F6;
--search-container-background: #29B6F6;
--curve-factor: 2px;
--curve-factor-navbar: 0;
--item-group-padding: 5px 0 0;
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--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);
}

4
src/styles/themes/DemoTheme.scss
View File

@ -1,4 +0,0 @@
body {
background: red !important;
border: 2px dashed yellow;
}

17
src/utils/defaults.js
View File

@ -1,4 +1,19 @@
module.exports = {
defaultTheme: 'Default',
builtInThemes: ['hacker-green', 'hacker-red', 'hacker-pink'],
builtInThemes: [
'nord',
'nord-frost',
'callisto',
'thebe',
'material',
'dracula',
'matrix',
'matrix-red',
'hacker-girl',
'bee',
'raspberry-jam',
'tiger',
'high-contrast-light',
'high-contrast-dark',
],
};

6
src/views/Home.vue
View File

@ -155,12 +155,12 @@ export default {
</script>
<style lang="scss" scoped>
@import '../../src/styles/media-queries.scss';
@import '@/styles/media-queries.scss';
.home {
background: var(--background);
padding-bottom: 1px;
min-height: 90%;
background: var(--background);
min-height: calc(100vh - 126px);
}
/* Outside container wrapping the item groups*/