Merge pull request #6025 from nextcloud-libraries/chore/update-style

[next] chore: Update styles from server for styleguide

REUSE.toml

@@ -52,7 +52,7 @@ SPDX-FileCopyrightText = "2017-2024 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["styleguide/assets/img/app-background.jpg", "styleguide/assets/img/background/kamil-porembinski-clouds.jpg"]
+path = ["styleguide/assets/img/app-background.jpg", "styleguide/assets/img/background/jenna-kim-the-globe.webp"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "Kamil Porembiński"
 SPDX-License-Identifier = "CC-BY-SA-4.0"

styleguide/assets/dark.css

@@ -89,5 +89,5 @@
 	--gradient-primary-background:linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
 	--color-background-plain:#00679e;
 	--color-background-plain-text:#ffffff;
-	--image-background: url('./img/background/kamil-porembinski-clouds.jpg');
+	--image-background: url('./img/background/jenna-kim-the-globe.webp');
 }

styleguide/assets/default.css

@@ -49,30 +49,42 @@
   --color-border-maxcontrast: #7d7d7d;
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
+  --font-size-small: 13px;
+  /* 1.5 x font-size for accessibility */
+  --default-line-height: 1.5;
   --animation-quick: 100ms;
   --animation-slow: 300ms;
   /** Border width for input elements such as text fields and selects */
   --border-width-input: 1px;
   --border-width-input-focused: 2px;
-  --border-radius: 3px;
-  --border-radius-large: 10px;
+
+  /* Border radii (new values) */
+  --border-radius-small: 4px; /* For smaller elements */
+  --border-radius-element: 8px; /* For interactive elements such as buttons, input, navigation and list items */
+  --border-radius-container: 12px; /* For smaller containers like action menus */
+  --border-radius-container-large: 16px; /* For larger containers like body or modals */
+
+  /* Border radii (deprecated) */
+  --border-radius: var(--border-radius-small);
+  --border-radius-large: var(--border-radius-element);
   --border-radius-rounded: 28px;
-  /* Border radius of interactive elements such as buttons, input, navigation and list items. Available since Nextcloud 30. */
-  --border-radius-element: 8px;
   --border-radius-pill: 100px;
+
   --default-clickable-area: 34px;
   --clickable-area-large: 48px;
   --clickable-area-small: 24px;
-  --default-line-height: 24px;
   --default-grid-baseline: 4px;
   --header-height: 50px;
+  --header-menu-item-height: 44px;
   --navigation-width: 300px;
   --sidebar-min-width: 300px;
   --sidebar-max-width: 500px;
-  --list-min-width: 200px;
-  --list-max-width: 300px;
-  --header-menu-item-height: 44px;
-  --header-menu-profile-item-height: 66px;
+  /* Border radius of the body container */
+  --body-container-radius: var(--border-radius-container-large);
+  /* Margin of the body container */
+  --body-container-margin: calc(var(--default-grid-baseline) * 2);
+  /* Height of the body container to fully fill the view port */
+  --body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
   --breakpoint-mobile: 1024px;
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
@@ -95,5 +107,5 @@
   --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
   --color-background-plain: #00679e;
   --color-background-plain-text: #ffffff;
-  --image-background: url('./img/background/kamil-porembinski-clouds.jpg');
+  --image-background: url('./img/background/jenna-kim-the-globe.webp');
 }

styleguide/assets/icons.css

@@ -19,8 +19,8 @@
   --original-icon-category-auth-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik03IDE4Yy0xLjY2NyAwLTMuMDgzLS41ODMtNC4yNS0xLjc1QzEuNTgzIDE1LjA4MyAxIDEzLjY2NyAxIDEyYzAtMS42NjcuNTgzLTMuMDgzIDEuNzUtNC4yNUMzLjkxNyA2LjU4MyA1LjMzMyA2IDcgNmMxLjM1IDAgMi41MjkuMzc5IDMuNTM4IDEuMTM3QzExLjU0NiA3Ljg5NiAxMi4yNSA4Ljg1IDEyLjY1IDEwSDIzdjRoLTJ2NGgtNHYtNGgtNC4zNWMtLjQgMS4xNS0xLjEwNCAyLjEwNC0yLjExMiAyLjg2M0M5LjUyOSAxNy42MjEgOC4zNSAxOCA3IDE4Wm0wLTRhMS45MyAxLjkzIDAgMCAwIDEuNDEzLS41ODdBMS45MyAxLjkzIDAgMCAwIDkgMTJhMS45MyAxLjkzIDAgMCAwLS41ODctMS40MTNBMS45MyAxLjkzIDAgMCAwIDcgMTBjLS41NSAwLTEuMDIxLjE5Ni0xLjQxMi41ODdBMS45MjcgMS45MjcgMCAwIDAgNSAxMmMwIC41NS4xOTYgMS4wMjEuNTg4IDEuNDEzLjM5MS4zOTEuODYyLjU4NyAxLjQxMi41ODdaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm8iIHRyYW5zZm9ybT0ibWF0cml4KC42MzYzNiAwIDAgLjYzNjM2IC4zNjQgLS4wMTgpIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
   --original-icon-category-customization-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Im0xNy4xNSAyMC43LTYuMDUtNi4xYTUuNjc3IDUuNjc3IDAgMCAxLTEuMDEyLjNjLS4zNDIuMDY3LS43MDUuMS0xLjA4OC4xLTEuNjY3IDAtMy4wODMtLjU4My00LjI1LTEuNzVDMy41ODMgMTIuMDgzIDMgMTAuNjY3IDMgOWMwLS42LjA4My0xLjE3MS4yNS0xLjcxM2E2LjU4IDYuNTggMCAwIDEgLjctMS41MzdMNy42IDkuNGwxLjgtMS44LTMuNjUtMy42NWE2LjU3IDYuNTcgMCAwIDEgMS41MzgtLjdBNS43NzMgNS43NzMgMCAwIDEgOSAzYzEuNjY3IDAgMy4wODMuNTgzIDQuMjUgMS43NUMxNC40MTcgNS45MTcgMTUgNy4zMzMgMTUgOWMwIC4zODMtLjAzMy43NDYtLjEgMS4wODctLjA2Ny4zNDItLjE2Ny42OC0uMyAxLjAxM2w2LjEgNi4wNWMuMi4yLjMuNDQyLjMuNzI1cy0uMS41MjUtLjMuNzI1bC0yLjEgMi4xYy0uMi4yLS40NDIuMy0uNzI1LjNhLjk4OC45ODggMCAwIDEtLjcyNS0uM1oiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgdHJhbnNmb3JtPSJtYXRyaXgoLS43Nzc3OCAwIDAgLjc3Nzc4IDE3LjMzMyAtMS4zMzMpIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
   --original-icon-category-customization-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Im0xNy4xNSAyMC43LTYuMDUtNi4xYTUuNjc3IDUuNjc3IDAgMCAxLTEuMDEyLjNjLS4zNDIuMDY3LS43MDUuMS0xLjA4OC4xLTEuNjY3IDAtMy4wODMtLjU4My00LjI1LTEuNzVDMy41ODMgMTIuMDgzIDMgMTAuNjY3IDMgOWMwLS42LjA4My0xLjE3MS4yNS0xLjcxM2E2LjU4IDYuNTggMCAwIDEgLjctMS41MzdMNy42IDkuNGwxLjgtMS44LTMuNjUtMy42NWE2LjU3IDYuNTcgMCAwIDEgMS41MzgtLjdBNS43NzMgNS43NzMgMCAwIDEgOSAzYzEuNjY3IDAgMy4wODMuNTgzIDQuMjUgMS43NUMxNC40MTcgNS45MTcgMTUgNy4zMzMgMTUgOWMwIC4zODMtLjAzMy43NDYtLjEgMS4wODctLjA2Ny4zNDItLjE2Ny42OC0uMyAxLjAxM2w2LjEgNi4wNWMuMi4yLjMuNDQyLjMuNzI1cy0uMS41MjUtLjMuNzI1bC0yLjEgMi4xYy0uMi4yLS40NDIuMy0uNzI1LjNhLjk4OC45ODggMCAwIDEtLjcyNS0uM1oiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgdHJhbnNmb3JtPSJtYXRyaXgoLS43Nzc3OCAwIDAgLjc3Nzc4IDE3LjMzMyAtMS4zMzMpIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
-  --original-icon-category-dashboard-dark: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNTI4LTYyNHYtMTkyaDI4OHYxOTJINTI4Wk0xNDQtNDMydi0zODRoMjg4djM4NEgxNDRabTM4NCAyODh2LTM4NGgyODh2Mzg0SDUyOFptLTM4NCAwdi0xOTJoMjg4djE5MkgxNDRaIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
-  --original-icon-category-dashboard-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNNTI4LTYyNHYtMTkyaDI4OHYxOTJINTI4Wk0xNDQtNDMydi0zODRoMjg4djM4NEgxNDRabTM4NCAyODh2LTM4NGgyODh2Mzg0SDUyOFptLTM4NCAwdi0xOTJoMjg4djE5MkgxNDRaIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
+  --original-icon-category-dashboard-dark: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNMjE2LTI0MHEtMzMgMC01Mi41LTE5LjVUMTQ0LTMxMnYtMzM2cTAtMzMgMTkuNS01Mi41VDIxNi03MjBoNDhxMzMgMCA1Mi41IDE5LjVUMzM2LTY0OHYzMzZxMCAzMy0xOS41IDUyLjVUMjY0LTI0MGgtNDhabTI0MCAwcS0zMyAwLTUyLjUtMTkuNVQzODQtMzEydi0zMzZxMC0zMyAxOS41LTUyLjVUNDU2LTcyMGg0OHEzMyAwIDUyLjUgMTkuNVQ1NzYtNjQ4djMzNnEwIDMzLTE5LjUgNTIuNVQ1MDQtMjQwaC00OFptMjQwIDBxLTMzIDAtNTIuNS0xOS41VDYyNC0zMTJ2LTMzNnEwLTMzIDE5LjUtNTIuNVQ2OTYtNzIwaDQ4cTMzIDAgNTIuNSAxOS41VDgxNi02NDh2MzM2cTAgMzMtMTkuNSA1Mi41VDc0NC0yNDBoLTQ4WiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
+  --original-icon-category-dashboard-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMjE2LTI0MHEtMzMgMC01Mi41LTE5LjVUMTQ0LTMxMnYtMzM2cTAtMzMgMTkuNS01Mi41VDIxNi03MjBoNDhxMzMgMCA1Mi41IDE5LjVUMzM2LTY0OHYzMzZxMCAzMy0xOS41IDUyLjVUMjY0LTI0MGgtNDhabTI0MCAwcS0zMyAwLTUyLjUtMTkuNVQzODQtMzEydi0zMzZxMC0zMyAxOS41LTUyLjVUNDU2LTcyMGg0OHEzMyAwIDUyLjUgMTkuNVQ1NzYtNjQ4djMzNnEwIDMzLTE5LjUgNTIuNVQ1MDQtMjQwaC00OFptMjQwIDBxLTMzIDAtNTIuNS0xOS41VDYyNC0zMTJ2LTMzNnEwLTMzIDE5LjUtNTIuNVQ2OTYtNzIwaDQ4cTMzIDAgNTIuNSAxOS41VDgxNi02NDh2MzM2cTAgMzMtMTkuNSA1Mi41VDc0NC0yNDBoLTQ4WiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
   --original-icon-category-files-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik00IDIwYy0uNTUgMC0xLjAyMS0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMiAxOFY2YzAtLjU1LjE5Ni0xLjAyMS41ODgtMS40MTNBMS45MjYgMS45MjYgMCAwIDEgNCA0aDZsMiAyaDhjLjU1IDAgMS4wMjEuMTk2IDEuNDEzLjU4Ny4zOTEuMzkyLjU4Ny44NjMuNTg3IDEuNDEzdjEwYTEuOTMgMS45MyAwIDAgMS0uNTg3IDEuNDEzQTEuOTMgMS45MyAwIDAgMSAyMCAyMEg0WiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvIiB0cmFuc2Zvcm09Im1hdHJpeCguNyAwIDAgLjcgLS40IC0uNCkiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
   --original-icon-category-files-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik00IDIwYy0uNTUgMC0xLjAyMS0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMiAxOFY2YzAtLjU1LjE5Ni0xLjAyMS41ODgtMS40MTNBMS45MjYgMS45MjYgMCAwIDEgNCA0aDZsMiAyaDhjLjU1IDAgMS4wMjEuMTk2IDEuNDEzLjU4Ny4zOTEuMzkyLjU4Ny44NjMuNTg3IDEuNDEzdjEwYTEuOTMgMS45MyAwIDAgMS0uNTg3IDEuNDEzQTEuOTMgMS45MyAwIDAgMSAyMCAyMEg0WiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvIiB0cmFuc2Zvcm09Im1hdHJpeCguNyAwIDAgLjcgLS40IC0uNCkiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=);
   --original-icon-category-games-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik0xMSA4LjI3NVY3Ljg1YTMuNDUxIDMuNDUxIDAgMCAxLTEuOC0xLjIzN0M4LjczMyA2LjAwNCA4LjUgNS4zIDguNSA0LjVjMC0uOTY3LjM0Mi0xLjc5MiAxLjAyNS0yLjQ3NUEzLjM3MyAzLjM3MyAwIDAgMSAxMiAxYy45NjcgMCAxLjc5Mi4zNDIgMi40NzUgMS4wMjVBMy4zNzMgMy4zNzMgMCAwIDEgMTUuNSA0LjVjMCAuOC0uMjMzIDEuNTA0LS43IDIuMTEzQTMuNDUxIDMuNDUxIDAgMCAxIDEzIDcuODV2LjQyNWw3IDQuMDI1Yy4zMTcuMTgzLjU2My40MjkuNzM4LjczOC4xNzUuMzA4LjI2Mi42NDUuMjYyIDEuMDEydjEuOWMwIC4zNjctLjA4Ny43MDQtLjI2MiAxLjAxM0ExLjk1NiAxLjk1NiAwIDAgMSAyMCAxNy43bC03IDQuMDI1QTEuOTcgMS45NyAwIDAgMSAxMiAyMmExLjk3IDEuOTcgMCAwIDEtMS0uMjc1TDQgMTcuN2ExLjk1MyAxLjk1MyAwIDAgMS0uNzM3LS43MzdBMi4wMiAyLjAyIDAgMCAxIDMgMTUuOTV2LTEuOWMwLS4zNjcuMDg4LS43MDQuMjYzLTEuMDEyLjE3NS0uMzA5LjQyLS41NTUuNzM3LS43MzhsNy00LjAyNVpNNi44IDEzbDUuMiAzIDUuMi0zLTQuMi0yLjQyNVYxNGgtMnYtMy40MjVMNi44IDEzWiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvIiB0cmFuc2Zvcm09Im1hdHJpeCguNjY2NjcgMCAwIC42NjY2NyAwIC4zMzMpIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
@@ -71,8 +71,8 @@
   --original-icon-download-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Im0xMiAxNi01LTUgMS40LTEuNDUgMi42IDIuNlY0aDJ2OC4xNWwyLjYtMi42TDE3IDExbC01IDVabS02IDRjLS41NSAwLTEuMDIxLS4xOTYtMS40MTItLjU4N0ExLjkyNyAxLjkyNyAwIDAgMSA0IDE4di0zaDJ2M2gxMnYtM2gydjNhMS45MyAxLjkzIDAgMCAxLS41ODcgMS40MTNBMS45MyAxLjkzIDAgMCAxIDE4IDIwSDZaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm8iIHRyYW5zZm9ybT0ibWF0cml4KC44NzUgMCAwIC44NzUgLTIuNSAtMi41KSIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
   --original-icon-edit-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik04IDE4aDh2LTJIOHYyWm0wLTRoOHYtMkg4djJabS0yIDhjLS41NSAwLTEuMDIxLS4xOTYtMS40MTItLjU4N0ExLjkyNyAxLjkyNyAwIDAgMSA0IDIwVjRjMC0uNTUuMTk2LTEuMDIxLjU4OC0xLjQxM0ExLjkyNiAxLjkyNiAwIDAgMSA2IDJoOGw2IDZ2MTJhMS45MyAxLjkzIDAgMCAxLS41ODcgMS40MTNBMS45MyAxLjkzIDAgMCAxIDE4IDIySDZabTctMTNoNWwtNS01djVaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm8iIHRyYW5zZm9ybT0ibWF0cml4KC43IDAgMCAuNyAtLjQgLS40KSIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
   --original-icon-edit-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik04IDE4aDh2LTJIOHYyWm0wLTRoOHYtMkg4djJabS0yIDhjLS41NSAwLTEuMDIxLS4xOTYtMS40MTItLjU4N0ExLjkyNyAxLjkyNyAwIDAgMSA0IDIwVjRjMC0uNTUuMTk2LTEuMDIxLjU4OC0xLjQxM0ExLjkyNiAxLjkyNiAwIDAgMSA2IDJoOGw2IDZ2MTJhMS45MyAxLjkzIDAgMCAxLS41ODcgMS40MTNBMS45MyAxLjkzIDAgMCAxIDE4IDIySDZabTctMTNoNWwtNS01djVaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm8iIHRyYW5zZm9ybT0ibWF0cml4KC43IDAgMCAuNyAtLjQgLS40KSIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
-  --original-icon-encryption-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGhlaWdodD0iMzIiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik01IDIxYy0uNTUgMC0xLjAyMS0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMyAxOVY1YzAtLjU1LjE5Ni0xLjAyMS41ODgtMS40MTNBMS45MjYgMS45MjYgMCAwIDEgNSAzaDd2Mkg1djE0aDE0di03aDJ2N2ExLjkzIDEuOTMgMCAwIDEtLjU4NyAxLjQxM0ExLjkzIDEuOTMgMCAwIDEgMTkgMjFINVptNC43LTUuMy0xLjQtMS40TDE3LjYgNUgxNFYzaDd2N2gtMlY2LjRsLTkuMyA5LjNaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS4zMzMgLTEuMzMzKSBzY2FsZSgxLjQ0NDQ0KSIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
-  --original-icon-encryption-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGhlaWdodD0iMzIiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik01IDIxYy0uNTUgMC0xLjAyMS0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMyAxOVY1YzAtLjU1LjE5Ni0xLjAyMS41ODgtMS40MTNBMS45MjYgMS45MjYgMCAwIDEgNSAzaDd2Mkg1djE0aDE0di03aDJ2N2ExLjkzIDEuOTMgMCAwIDEtLjU4NyAxLjQxM0ExLjkzIDEuOTMgMCAwIDEgMTkgMjFINVptNC43LTUuMy0xLjQtMS40TDE3LjYgNUgxNFYzaDd2N2gtMlY2LjRsLTkuMyA5LjNaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS4zMzMgLTEuMzMzKSBzY2FsZSgxLjQ0NDQ0KSIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
+  --original-icon-encryption-dark: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNDU2LTQzMmgxNTYuNDhxMjQuOTYgMCA0Mi4yNC0xNy4zOVE2NzItNDY2Ljc3IDY3Mi00OTEuODlxMC0yNS4xMS0xNy40Mi00Mi42MVQ2MTItNTUyaC0xcS00LjgzLTMwLjcyLTI3Ljk5LTUxLjM2UTU1OS44NS02MjQgNTI4LTYyNHEtMjYgMC00NS45OCAxMi45Ni0xOS45OSAxMi45Ni0zMC40NiAzNS4wNC0yOC41NCAxLjkyLTQ4LjA1IDIyLjU2UTM4NC01MzIuOCAzODQtNTA0cTAgMjguOCAyMSA1MC40IDIxIDIxLjYgNTEgMjEuNlpNMTIwLTE0NHEtMjkuNyAwLTUwLjg1LTIxLjE1UTQ4LTE4Ni4zIDQ4LTIxNnYtNTA0aDcydjUwNGg2MzN2NzJIMTIwWm0xNDQtMTQ0cS0yOS43IDAtNTAuODUtMjEuMTVRMTkyLTMzMC4zIDE5Mi0zNjB2LTQzMnEwLTI5LjcgMjEuMTUtNTAuODVRMjM0LjMtODY0IDI2NC04NjRoMTY4bDk2IDk2aDI2NHEzMC0xIDUxIDIwLjQ0IDIxIDIxLjQ1IDIxIDUxLjU2djMzNnEwIDI5LjctMjEuMTUgNTAuODVRODIxLjctMjg4IDc5Mi0yODhIMjY0WiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
+  --original-icon-encryption-white: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNNDU2LTQzMmgxNTYuNDhxMjQuOTYgMCA0Mi4yNC0xNy4zOVE2NzItNDY2Ljc3IDY3Mi00OTEuODlxMC0yNS4xMS0xNy40Mi00Mi42MVQ2MTItNTUyaC0xcS00LjgzLTMwLjcyLTI3Ljk5LTUxLjM2UTU1OS44NS02MjQgNTI4LTYyNHEtMjYgMC00NS45OCAxMi45Ni0xOS45OSAxMi45Ni0zMC40NiAzNS4wNC0yOC41NCAxLjkyLTQ4LjA1IDIyLjU2UTM4NC01MzIuOCAzODQtNTA0cTAgMjguOCAyMSA1MC40IDIxIDIxLjYgNTEgMjEuNlpNMTIwLTE0NHEtMjkuNyAwLTUwLjg1LTIxLjE1UTQ4LTE4Ni4zIDQ4LTIxNnYtNTA0aDcydjUwNGg2MzN2NzJIMTIwWm0xNDQtMTQ0cS0yOS43IDAtNTAuODUtMjEuMTVRMTkyLTMzMC4zIDE5Mi0zNjB2LTQzMnEwLTI5LjcgMjEuMTUtNTAuODVRMjM0LjMtODY0IDI2NC04NjRoMTY4bDk2IDk2aDI2NHEzMC0xIDUxIDIwLjQ0IDIxIDIxLjQ1IDIxIDUxLjU2djMzNnEwIDI5LjctMjEuMTUgNTAuODVRODIxLjctMjg4IDc5Mi0yODhIMjY0WiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
   --original-icon-error-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik0xMiAxN2EuOTcyLjk3MiAwIDAgMCAuNzEzLS4yODdBLjk3Mi45NzIgMCAwIDAgMTMgMTZhLjk2OC45NjggMCAwIDAtLjI4Ny0uNzEyQS45NjkuOTY5IDAgMCAwIDEyIDE1YS45NjUuOTY1IDAgMCAwLS43MTIuMjg4QS45NjUuOTY1IDAgMCAwIDExIDE2YzAgLjI4My4wOTYuNTIxLjI4OC43MTNBLjk2OC45NjggMCAwIDAgMTIgMTdabS0xLTRoMlY3aC0ydjZabS0yLjc1IDhMMyAxNS43NXYtNy41TDguMjUgM2g3LjVMMjEgOC4yNXY3LjVMMTUuNzUgMjFoLTcuNVoiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgdHJhbnNmb3JtPSJzY2FsZSguNjY2NjcpIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
   --original-icon-error-white: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik0xMiAxN2EuOTcyLjk3MiAwIDAgMCAuNzEzLS4yODdBLjk3Mi45NzIgMCAwIDAgMTMgMTZhLjk2OC45NjggMCAwIDAtLjI4Ny0uNzEyQS45NjkuOTY5IDAgMCAwIDEyIDE1YS45NjUuOTY1IDAgMCAwLS43MTIuMjg4QS45NjUuOTY1IDAgMCAwIDExIDE2YzAgLjI4My4wOTYuNTIxLjI4OC43MTNBLjk2OC45NjggMCAwIDAgMTIgMTdabS0xLTRoMlY3aC0ydjZabS0yLjc1IDhMMyAxNS43NXYtNy41TDguMjUgM2g3LjVMMjEgOC4yNXY3LjVMMTUuNzUgMjFoLTcuNVoiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybyIgdHJhbnNmb3JtPSJzY2FsZSguNjY2NjcpIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
   --original-icon-external-dark: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Ik01IDIxYy0uNTUgMC0xLjAyMS0uMTk2LTEuNDEyLS41ODdBMS45MjcgMS45MjcgMCAwIDEgMyAxOVY1YzAtLjU1LjE5Ni0xLjAyMS41ODgtMS40MTNBMS45MjYgMS45MjYgMCAwIDEgNSAzaDd2Mkg1djE0aDE0di03aDJ2N2ExLjkzIDEuOTMgMCAwIDEtLjU4NyAxLjQxM0ExLjkzIDEuOTMgMCAwIDEgMTkgMjFINVptNC43LTUuMy0xLjQtMS40TDE3LjYgNUgxNFYzaDd2N2gtMlY2LjRsLTkuMyA5LjNaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm8iIHRyYW5zZm9ybT0ibWF0cml4KC43Nzc3OCAwIDAgLjc3Nzc4IC0xLjMzMyAtMS4zMzMpIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);