josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrote a ton of color themes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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;
}
}