mirror of https://github.com/Lissy93/dashy.git
Adds material dark theme
This commit is contained in:
Alicia Sykes
parent
453b162cac
commit
f08a4dfbad
|
|
@ -9,14 +9,14 @@
|
|||
:style="`--open-icon: ${getUnicodeOpeningIcon()}; ${customStyles}`"
|
||||
>
|
||||
<!-- Item Text -->
|
||||
<div class="tile-title" :id="`tile-${id}`" >
|
||||
<div :class="`tile-title ${!icon? 'bounce': ''}`" :id="`tile-${id}`" >
|
||||
<span class="text">{{ title }}</span>
|
||||
<div class="overflow-dots">...</div>
|
||||
<p class="description">{{ description }}</p>
|
||||
</div>
|
||||
<!-- Item Icon -->
|
||||
<Icon :icon="icon" :url="url" :size="itemSize" :color="color"
|
||||
v-bind:style="customStyles" class="icon-container" />
|
||||
v-bind:style="customStyles" class="bounce" />
|
||||
<!-- Small icon, showing opening method on hover -->
|
||||
<ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
|
||||
:position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ html[data-theme='material-original'] {
|
|||
--heading-text-color: #fff;
|
||||
}
|
||||
|
||||
html[data-theme='material-dark'] {
|
||||
html[data-theme='material-dark-original'] {
|
||||
--primary: #08B0BB;
|
||||
--settings-text-color: #08B0BB;
|
||||
--background: #39434C;
|
||||
|
|
@ -275,50 +275,12 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'] {
|
|||
}
|
||||
}
|
||||
|
||||
html[data-theme='material'] {
|
||||
html[data-theme='material'], html[data-theme='material-dark'] {
|
||||
--font-body: 'Raleway', serif;
|
||||
--font-headings: 'Francois One', serif;
|
||||
--primary: #363636;
|
||||
--background: #f5f5f5;
|
||||
--background-darker: #4285f4;
|
||||
--item-group-outer-background: none;
|
||||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-background: #fff;
|
||||
--item-background-hover: #fff;
|
||||
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
|
||||
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
|
||||
--item-text-color: #363636;
|
||||
--item-group-heading-text-color-hover: #363636;
|
||||
--item-icon-transform-hover: none;
|
||||
--nav-link-background-color: #0c4eba;
|
||||
--nav-link-text-color: #fff;
|
||||
--nav-link-border-color: #0c4eba;
|
||||
--settings-text-color: #363636;
|
||||
--config-code-color: #363636;
|
||||
--config-settings-background: #fff;
|
||||
--config-settings-color: #363636;
|
||||
--heading-text-color: #fff;
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 8px;
|
||||
--search-container-background: #4285f4;
|
||||
header {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
.page-titles span.subtitle {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
section.filter-container form label {
|
||||
color: #fff;
|
||||
}
|
||||
.prism-editor-wrapper {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.collapsable {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -404,15 +366,15 @@ html[data-theme='material'] {
|
|||
left: 0px;
|
||||
height: 100%;
|
||||
width: 1rem;
|
||||
background-color: #ccd3dd80;
|
||||
background: #ccd3dd80;
|
||||
border-radius: 0 60% 60% 0;
|
||||
transform: scale(0,1);
|
||||
transform-origin: left center;
|
||||
transition: all 0.2s linear 0s;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
&:hover {
|
||||
div.icon-container {
|
||||
&:hover, &:focus-within {
|
||||
div.bounce {
|
||||
text-indent: 1rem;
|
||||
}
|
||||
&:before {
|
||||
|
|
@ -446,6 +408,101 @@ html[data-theme='material'] {
|
|||
}
|
||||
}
|
||||
|
||||
html[data-theme='material'] {
|
||||
--primary: #363636;
|
||||
--background: #f5f5f5;
|
||||
--background-darker: #4285f4;
|
||||
--item-group-outer-background: none;
|
||||
--item-group-shadow: none;
|
||||
--item-group-background: none;
|
||||
--item-background: #fff;
|
||||
--item-background-hover: #fff;
|
||||
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
|
||||
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
|
||||
--item-text-color: #363636;
|
||||
--item-group-heading-text-color-hover: #363636;
|
||||
--item-icon-transform-hover: none;
|
||||
--nav-link-background-color: #0c4eba;
|
||||
--nav-link-text-color: #fff;
|
||||
--nav-link-border-color: #0c4eba;
|
||||
--settings-text-color: #363636;
|
||||
--config-code-color: #363636;
|
||||
--config-settings-background: #fff;
|
||||
--config-settings-color: #363636;
|
||||
--heading-text-color: #fff;
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 8px;
|
||||
--search-container-background: #4285f4;
|
||||
|
||||
header {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
.page-titles span.subtitle {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
section.filter-container form label {
|
||||
color: #fff;
|
||||
}
|
||||
.prism-editor-wrapper {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='material-dark'] {
|
||||
--primary: #08B0BB;
|
||||
--background: #313941;
|
||||
--background-darker: #08B0BB;
|
||||
--settings-background: #092b3a;
|
||||
--settings-text-color: #08B0BB;
|
||||
|
||||
--item-group-background: none;
|
||||
--item-group-outer-background: none;
|
||||
--item-group-shadow: none;
|
||||
--item-group-padding: 5px 0 0;
|
||||
--item-group-heading-text-color: #e0e0e0;
|
||||
--item-group-heading-text-color-hover: #08B0BB;
|
||||
|
||||
--item-text-color: #e0e0e0;
|
||||
--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);
|
||||
--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;
|
||||
|
||||
--welcome-popup-background: #131a1f;
|
||||
--welcome-popup-text-color: var(--primary);
|
||||
--config-settings-background: #131a1f;
|
||||
--config-settings-color: #41e2ed;
|
||||
--scroll-bar-color: #08B0BB;
|
||||
--scroll-bar-background: #131a1f;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-left: 1px solid #131a1f;
|
||||
}
|
||||
.item {
|
||||
&:before, &:active {
|
||||
background: #131a1f !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='minimal-light'] {
|
||||
--primary: #a5a5a5;
|
||||
--background: #ffffff;
|
||||
|
|
|
|||
|
|
@ -14,15 +14,16 @@ module.exports = {
|
|||
theme: 'default',
|
||||
fontAwesomeKey: '0821c65656',
|
||||
builtInThemes: [
|
||||
'nord',
|
||||
'nord-frost',
|
||||
'callisto',
|
||||
'thebe',
|
||||
'dracula',
|
||||
'material',
|
||||
'material-dark',
|
||||
'colorful',
|
||||
'nord',
|
||||
'nord-frost',
|
||||
'minimal-dark',
|
||||
'minimal-light',
|
||||
'colorful',
|
||||
'matrix',
|
||||
'matrix-red',
|
||||
'hacker-girl',
|
||||
|
|
@ -30,7 +31,7 @@ module.exports = {
|
|||
'bee',
|
||||
'tiger',
|
||||
'material-original',
|
||||
'material-dark',
|
||||
'material-dark-original',
|
||||
'high-contrast-dark',
|
||||
'high-contrast-light',
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue