dark mode for teams

2026-04-19 08:32:14 +00:00 · 2021-10-26 06:57:40 +02:00
parent d4990d8d5f
commit fda82d6dbf
117 changed files with 371 additions and 240 deletions
--- a/resources/js/components/FilesView/Alert.vue
+++ b/resources/js/components/FilesView/Alert.vue
@@ -167,7 +167,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .popup-wrapper {
            background: $dark_mode_foreground;
        }
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/FilesView/ButtonBase.vue
@@ -104,7 +104,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .button-base {

--- a/resources/js/components/FilesView/CheckBox.vue
+++ b/resources/js/components/FilesView/CheckBox.vue
@@ -34,7 +34,7 @@ export default {
    background-color: darken($light_background, 5%);
 }

-.dark-mode {
+.dark {
    
    .is-deactive {
        background-color: lighten($dark_mode_foreground, 10%);
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -157,7 +157,7 @@ export default {
 	padding: 0;
 }

-.dark-mode {
+.dark {
 	.contextmenu {
 		background: $dark_mode_foreground;
 	}
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -361,7 +361,7 @@
 	}
 }

-.dark-mode {
+.dark {
 	.team-preview:hover {
 		background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/FilesView/DragUI.vue
@@ -95,7 +95,7 @@ export default {
    background: white;
 }

-.dark-mode {
+.dark {
    #drag-ui {
        background: $dark_mode_foreground;
    }
--- a/resources/js/components/FilesView/EmptyFilePage.vue
+++ b/resources/js/components/FilesView/EmptyFilePage.vue
@@ -72,7 +72,7 @@
 		}
 	}

-	.dark-mode {
+	.dark {
 		.text-content {

 			.title {
--- a/resources/js/components/FilesView/EmptyMessage.vue
+++ b/resources/js/components/FilesView/EmptyMessage.vue
@@ -50,7 +50,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .empty-message {

            .message {
--- a/resources/js/components/FilesView/FileActionsMobile.vue
+++ b/resources/js/components/FilesView/FileActionsMobile.vue
@@ -105,7 +105,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        #mobile-actions-wrapper {
            background: $dark_mode_background;
        }
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -554,7 +554,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .file-wrapper {

--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -21,7 +21,7 @@
 					:size="28"
 					:is-border="true"
 					:member="item.data.relationships.user"
-					class="absolute -right-2 -bottom-2"
+					class="absolute -right-2 -bottom-2 z-10"
 				/>

                <!--If is file or image, then link item-->
@@ -524,7 +524,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .file-wrapper {
        .icon-item {
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -120,7 +120,7 @@
 	}
 }

-.dark-mode {
+.dark {

    .folder-icon {
        &.is-deleted {
--- a/resources/js/components/FilesView/ImageMetaData.vue
+++ b/resources/js/components/FilesView/ImageMetaData.vue
@@ -129,7 +129,7 @@ export default {
 	}
 }

-.dark-mode {
+.dark {

 	.meta-data-list {
 		li {
--- a/resources/js/components/FilesView/MemberAvatar.vue
+++ b/resources/js/components/FilesView/MemberAvatar.vue
@@ -5,7 +5,7 @@
 			v-if="member.data.attributes.avatar"
 			:src="member.data.attributes.avatar"
 			:alt="member.data.attributes.name"
-			:class="[borderRadius, {'border-3 border-white': isBorder}]"
+			:class="[borderRadius, {'border-3 border-white dark:border-dark-background': isBorder}]"
 			class=""
 		>
 		<div
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -98,7 +98,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .mobile-action-button {
            background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/MobileActionButtonUpload.vue
+++ b/resources/js/components/FilesView/MobileActionButtonUpload.vue
@@ -64,7 +64,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .mobile-action-button {
            background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
+++ b/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
@@ -88,7 +88,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .multiselect-actions {
        background: $dark_mode_foreground;
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -141,7 +141,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .mobile-toolbar {
            background: $dark_mode_background;
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -187,7 +187,7 @@ import {
    }
 }

-.dark-mode {
+.dark {

    .menu-option {
        color: $dark_mode_text_primary;
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -28,7 +28,7 @@
    }
 }

-.dark-mode {
+.dark {
    .menu-option-group {
        border-color: $dark_mode_border_color;
    }
--- a/resources/js/components/FilesView/OptionUpload.vue
+++ b/resources/js/components/FilesView/OptionUpload.vue
@@ -74,7 +74,7 @@ import {
    }
 }

-.dark-mode {
+.dark {

    .menu-option {
        color: $dark_mode_text_primary;
--- a/resources/js/components/FilesView/ProcessingPopup.vue
+++ b/resources/js/components/FilesView/ProcessingPopup.vue
@@ -101,7 +101,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {
    .popup-wrapper {
        background: $dark_mode_foreground;
    }
--- a/resources/js/components/FilesView/ProgressBar.vue
+++ b/resources/js/components/FilesView/ProgressBar.vue
@@ -30,7 +30,7 @@ export default {
 		}
 	}

-	.dark-mode {
+	.dark {

 		.progress-bar {
 			background: $dark_mode_foreground;
@@ -39,7 +39,7 @@ export default {

 	@media only screen and (min-width: 680px) {

-		.dark-mode .progress-bar {
+		.dark .progress-bar {
 			background: $dark_mode_foreground;
 		}
 	}
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/FilesView/SearchBar.vue
@@ -82,7 +82,7 @@
 		}
    }

-    .dark-mode {
+    .dark {
        .search-bar {
 			background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/TitlePreview.vue
+++ b/resources/js/components/FilesView/TitlePreview.vue
@@ -77,7 +77,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {
    .wrapper {
        .text {
            .title {
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -115,7 +115,7 @@
    }
 }

-.dark-mode {
+.dark {
    .button {
        background: transparent;

--- a/resources/js/components/FilesView/UploadProgress.vue
+++ b/resources/js/components/FilesView/UploadProgress.vue
@@ -129,7 +129,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .progress-bar {
            background: $dark_mode_foreground;
        }