This commit is contained in:
MakingCG
2020-03-29 11:42:32 +02:00
parent 7bed9ad7b8
commit 182091c21a
26 changed files with 234 additions and 135 deletions

View File

@@ -142,7 +142,7 @@
}
.popup-wrapper {
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
box-shadow: $light_mode_popup_shadow;
border-radius: 8px;
background: white;
margin: auto;
@@ -154,8 +154,8 @@
padding: 20px;
.title {
@include font-size(20);
font-weight: 900;
@include font-size(18);
font-weight: 700;
color: $text;
}
@@ -276,7 +276,8 @@
@media (prefers-color-scheme: dark) {
.popup-wrapper {
background: $dark_mode_foreground;
background: $dark_mode_background;
box-shadow: $dark_mode_popup_shadow;
}
.popup-header {
@@ -289,4 +290,10 @@
}
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px) {
.popup-wrapper {
background: $dark_mode_background;
}
}
</style>

View File

@@ -21,4 +21,10 @@
display: block;
margin-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
.text-label {
color: rgba($dark_mode_text_secondary, .4);
}
}
</style>

View File

@@ -73,7 +73,7 @@
.subtitle {
@include font-size(11);
font-weight: 100;
font-weight: 400;
color: $text-muted;
display: block;
}

View File

@@ -70,11 +70,12 @@
.folder-item {
display: block;
padding: 10px 20px;
padding: 15px 20px;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
border-bottom: 1px solid $light_mode_border;
.icon {
@include font-size(18);
@@ -140,13 +141,25 @@
@media (prefers-color-scheme: dark) {
.folder-item {
border-bottom: 1px solid $dark_mode_border_color;
.label {
color: $dark_mode_text_primary;
}
&:hover {
background: $dark_mode_background;
background: $dark_mode_foreground;
}
&.is-selected {
background: rgba($theme, .1);
}
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
.icon-chevron {
@@ -162,4 +175,14 @@
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px) {
.folder-item {
&:hover,
&.is-selected {
background: rgba($theme, .1);
}
}
}
</style>

View File

@@ -22,14 +22,13 @@
},
created() {
// Hide vignette
events.$on('popup:close', () => this.isVisibleVignette = false)
// Show vignette
events.$on('popup:move-item', () => this.isVisibleVignette = true)
events.$on('alert:open', () => this.isVisibleVignette = true)
events.$on('success:open', () => this.isVisibleVignette = true)
events.$on('mobileMenu:show', () => this.isVisibleVignette = true)
// Hide vignette
events.$on('popup:close', () => this.isVisibleVignette = false)
}
}
</script>
@@ -44,7 +43,7 @@
left: 0;
bottom: 0;
z-index: 19;
background: rgba(17, 20, 29, 0.5);
background: $light_mode_vignette;
}
// Dark mode