nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-26 02:20:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode switcher

Browse Source
This commit is contained in:
Peter Papp
2021-07-23 17:16:42 +02:00
parent be2690fd1c
commit 32d54fa50e
113 changed files with 565 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/Alert.vue
+1 -1
View File
@@ -167,7 +167,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.popup-wrapper {
background: $dark_mode_foreground;
}
resources/js/components/FilesView/ButtonBase.vue
+1 -1
View File
@@ -104,7 +104,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.button-base {
resources/js/components/FilesView/CheckBox.vue
+1 -1
View File
@@ -34,7 +34,7 @@ export default {
background-color: darken($light_background, 5%);
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.is-deactive {
background-color: lighten($dark_mode_foreground, 10%);
resources/js/components/FilesView/ContextMenu.vue
+1 -1
View File
@@ -378,7 +378,7 @@ export default {
padding: 0;
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.contextmenu {
background: $dark_mode_foreground;
}
resources/js/components/FilesView/DesktopToolbar.vue
+1 -1
View File
@@ -314,7 +314,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
resources/js/components/FilesView/DragUI.vue
+1 -1
View File
@@ -95,7 +95,7 @@ export default {
background: white;
}
@media (prefers-color-scheme: dark) {
.dark-mode {
#drag-ui {
background: $dark_mode_foreground;
}
resources/js/components/FilesView/EmptyFilePage.vue
+1 -1
View File
@@ -105,7 +105,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.text-content {
.title {
resources/js/components/FilesView/EmptyMessage.vue
+1 -1
View File
@@ -48,7 +48,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.empty-message {
.message {
resources/js/components/FilesView/FileActionsMobile.vue
+1 -1
View File
@@ -228,7 +228,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
#mobile-actions-wrapper {
background: $dark_mode_background;
}
resources/js/components/FilesView/FileItemGrid.vue
+5 -5
View File
@@ -10,7 +10,7 @@
<CheckBox v-if="mobileMultiSelect" :is-clicked="isClicked" class="check-box"/>
<!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.mimetype }}
</span>
@@ -35,12 +35,12 @@
<!--Shared Icon-->
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon text-theme" />
<link-icon size="12" class="shared-icon text-theme dark-text-theme" />
</div>
<!--Participant owner Icon-->
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<user-plus-icon size="12" class="shared-icon text-theme" />
<user-plus-icon size="12" class="shared-icon text-theme dark-text-theme" />
</div>
<!--Filesize-->
@@ -54,7 +54,7 @@
</div>
<span @mousedown.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! mobileMultiSelect && canShowMobileOptions">
<MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme" />
<MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme dark-text-theme" />
</span>
</div>
</div>
@@ -548,7 +548,7 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.file-wrapper {
resources/js/components/FilesView/FileItemList.vue
+5 -5
View File
@@ -16,7 +16,7 @@
<!--Thumbnail for item-->
<div class="icon-item">
<!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.mimetype | limitCharacters }}
</span>
@@ -39,12 +39,12 @@
<div class="item-info">
<!--Shared Icon-->
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon text-theme"></link-icon>
<link-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div>
<!--Participant owner Icon-->
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<user-plus-icon size="12" class="shared-icon text-theme"></user-plus-icon>
<user-plus-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div>
<!--Filesize and timestamp-->
@@ -59,7 +59,7 @@
<transition name="slide-from-right">
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
<span @mousedown.stop="showItemActions" class="show-actions">
<MoreVerticalIcon size="16" class="icon-action text-theme" />
<MoreVerticalIcon size="16" class="icon-action text-theme dark-text-theme" />
</span>
</div>
</transition>
@@ -520,7 +520,7 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.file-wrapper {
.icon-item {
resources/js/components/FilesView/FilePreview.vue
+1 -1
View File
@@ -67,7 +67,7 @@
background-color: white;
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.file-preview {
background-color: $dark_mode_background;
}
resources/js/components/FilesView/FilePreviewMedia.vue
+1 -1
View File
@@ -377,7 +377,7 @@ export default {
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.navigation-arrows {
.prev, .next {
resources/js/components/FilesView/FilePreviewToolbar.vue
+1 -1
View File
@@ -339,7 +339,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.navigation-panel {
background-color: $dark_mode_background;
color: $dark_mode_text_primary;
resources/js/components/FilesView/FolderIcon.vue
+1 -1
View File
@@ -97,7 +97,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.folder-icon {
&.is-deleted {
resources/js/components/FilesView/ImageMetaData.vue
+1 -1
View File
@@ -129,7 +129,7 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.meta-data-list {
li {
resources/js/components/FilesView/MobileActionButton.vue
+1 -1
View File
@@ -93,7 +93,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.mobile-action-button {
background: $dark_mode_foreground;
resources/js/components/FilesView/MobileActionButtonUpload.vue
+1 -1
View File
@@ -64,7 +64,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.mobile-action-button {
background: $dark_mode_foreground;
resources/js/components/FilesView/MobileToolbar.vue
+1 -1
View File
@@ -163,7 +163,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.mobile-toolbar {
background: $dark_mode_background;
resources/js/components/FilesView/MultiSelectToolbarMobile.vue
+1 -1
View File
@@ -120,7 +120,7 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.multiselect-actions {
background: $dark_mode_foreground;
resources/js/components/FilesView/Option.vue
+1 -1
View File
@@ -180,7 +180,7 @@ import {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.menu-option {
color: $dark_mode_text_primary;
resources/js/components/FilesView/OptionGroup.vue
+1 -1
View File
@@ -28,7 +28,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.menu-option-group {
border-color: $dark_mode_border_color;
}
resources/js/components/FilesView/ProcessingPopup.vue
+1 -1
View File
@@ -101,7 +101,7 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.popup-wrapper {
background: $dark_mode_foreground;
}
resources/js/components/FilesView/ProgressBar.vue
+3 -3
View File
@@ -30,16 +30,16 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.progress-bar {
background: $dark_mode_foreground;
}
}
@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
@media only screen and (min-width: 680px) {
.progress-bar {
.dark-mode .progress-bar {
background: $dark_mode_foreground;
}
}
resources/js/components/FilesView/SearchBar.vue
+1 -1
View File
@@ -130,7 +130,7 @@
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.search-bar {
input {
border-color: transparent;
resources/js/components/FilesView/TitlePreview.vue
+6 -6
View File
@@ -1,11 +1,11 @@
<template>
<div class="wrapper">
<div class="icon-wrapper">
<CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme" size="21" />
<image-icon v-if="icon === 'image'" class="icon text-theme" size="21" />
<video-icon v-if="icon === 'video'" class="icon text-theme" size="21" />
<folder-icon v-if="icon === 'folder'" class="icon text-theme" size="21" />
<file-icon v-if="icon === 'file'" class="icon text-theme" size="21" />
<CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme dark-text-theme" size="21" />
<image-icon v-if="icon === 'image'" class="icon text-theme dark-text-theme" size="21" />
<video-icon v-if="icon === 'video'" class="icon text-theme dark-text-theme" size="21" />
<folder-icon v-if="icon === 'folder'" class="icon text-theme dark-text-theme" size="21" />
<file-icon v-if="icon === 'file'" class="icon text-theme dark-text-theme" size="21" />
</div>
<div class="text">
<span class="title">{{ title }}</span>
@@ -77,7 +77,7 @@ export default {
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.wrapper {
.text {
.title {
resources/js/components/FilesView/ToolbarButton.vue
+1 -1
View File
@@ -109,7 +109,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.button {
background: transparent;
resources/js/components/FilesView/ToolbarButtonUpload.vue
+1 -1
View File
@@ -69,7 +69,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.button {
background: transparent;
resources/js/components/FilesView/UploadProgress.vue
+1 -1
View File
@@ -129,7 +129,7 @@
}
}
@media (prefers-color-scheme: dark) {
.dark-mode {
.progress-bar {
background: $dark_mode_foreground;
}