changed breadcrumb button styles (#356)

nextmcloud · Jul 4, 2024 · 4769779 · 4769779
1 parent 6016c99
commit 4769779
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 59 deletions.
diff --git a/css/apps/photos.scss b/css/apps/photos.scss
@@ -19,19 +19,38 @@
 }
 
 .app-photos {
+
 	#app-content-vue {
+
+		// hide 'Add' button breadcrumbs for all menu pages
+		.timeline {
+
+			.photos-navigation {
+
+				&__content button.button-vue {
+					display: none;
+				}
+			}
+		}
+
 		.photos-navigation {
 			&__title__main {
 				font-size: 32px;
 			}
 
-			// hide 'Add' button breadcrumbs for all menu pages
-			&__content button.button-vue {
-				display: none;
+			&__content {
+
+				.upload-picker button {
+					display: none;
+				}
 			}
 
 			&__content-right {
-				margin-left: 8px;
+				margin: 0;
+
+				.upload-picker {
+					margin-right: 1rem;
+				}
 
 				// disable Share button for Albums, does not apply to empty album
 				form.upload-picker+button.button-vue--icon-only {
@@ -46,30 +65,33 @@
 			}
 
 			// 'Add', 'Add to album', 'Unselect all' and '...' buttons
-			&__content button,
-			&__content-right button {
-				all: unset;
-
-				.plus-icon {
-					border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
-					border-radius: 50%;
-				}
-
-				svg,
-				.button-vue__text {
-					color: var(--telekom-color-text-and-icon-primary-standard);
-				}
-
-				&:hover {
-					background-color: initial;
+			&__content,
+			&__content-right {
 
+				button {
+					all: unset;
+
 					.plus-icon {
-						border: 1px solid var(--telekom-color-text-and-icon-primary-hovered);
+						border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
+						border-radius: 50%;
 					}
-
+	
 					svg,
 					.button-vue__text {
-						color: var(--telekom-color-text-and-icon-primary-hovered);
+						color: var(--telekom-color-text-and-icon-primary-standard);
+					}
+
+					&:hover {
+						background-color: initial;
+
+						.plus-icon {
+							border: 1px solid var(--telekom-color-text-and-icon-primary-hovered);
+						}
+
+						svg,
+						.button-vue__text {
+							color: var(--telekom-color-text-and-icon-primary-hovered);
+						}
 					}
 				}
 			}
@@ -82,7 +104,6 @@
 					display: flex;
 				}
 			}
-
 		}
 
 		.files-list-viewer.timeline__file-list {
@@ -146,61 +167,69 @@
 		}
 
 		// grid view of files and folders
-		.grid-container .grid {
-			.grid-item-wrapper {
-				.folder {
-					border: 1px solid var(--telekom-color-functional-informational-subtle);
-
-					&:active,
-					&:hover,
-					&:focus {
-						.folder-name {
-							opacity: 1;
+		.grid-container {
+			padding: 2rem 3rem;
+
+			.grid {
+				.grid-item-wrapper {
+					.folder {
+						border: 1px solid var(--telekom-color-functional-informational-subtle);
+
+						&:active,
+						&:hover,
+						&:focus {
+							.folder-name {
+								opacity: 1;
+							}
 						}
-					}
 
-					.folder-name {
-						transition: none;
-						row-gap: 1rem;
+						.folder-name {
+							transition: none;
+							row-gap: 1rem;
 
-						// replace standart folder icon
-						span.icon-folder {
-							background-image: var(--icon-mime-folder-dark);
-							opacity: 1;
-						}
+							// replace standart folder icon
+							span.icon-folder {
+								background-image: var(--icon-mime-folder-dark);
+								opacity: 1;
+							}
 
-						&__name {
-							color: var(--color-text-light);
-							font-weight: bold;
-							text-shadow: none;
+							&__name {
+								color: var(--color-text-light);
+								font-weight: bold;
+								text-shadow: none;
+							}
 						}
-					}
 
-					.cover {
-						transition: none;
-						opacity: 0;
-					}
+						.cover {
+							transition: none;
+							opacity: 0;
+						}
 
-					.folder-content {
-						display: none;
+						.folder-content {
+							display: none;
+						}
 					}
-				}
 
-				.file {
-					.cover {
-						transition: none;
+					.file {
+						.cover {
+							transition: none;
+						}
 					}
 				}
 			}
 		}
 
 		// 'Albums' page
-		.collections.albums-list {
+		.collections, .collection {
 
 			.collections__list {
 				justify-content: normal;
 			}
 
+			.collection__media {
+				padding: 2rem 3rem;
+			}
+
 			.collection-cover {
 				border-radius: 0;
 
@@ -305,6 +334,10 @@
 				}
 			}
 		}
+
+		.album__location {
+			display: none;
+		}
 	}
 
 	// sidebar navigation
@@ -558,6 +591,13 @@
 		min-height: unset;
 	}
 
+	.dialog__actions {
+
+		.upload-picker {
+			display: block;
+		}
+	}
+
 	.file-picker {
 
 		.dialog__wrapper {

diff --git a/css/nmcdefault.scss b/css/nmcdefault.scss
@@ -75,6 +75,7 @@
   --background-invert-if-dark: none;
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: invert(100%);
+  --background-image-color-text: var(--telekom-color-text-and-icon-standard);
 
   --color-primary: var(--telekom-color-primary-standard);
   --color-primary-default: var(--telekom-color-primary-standard);