+
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
diff --git a/server/ui-src/app.js b/server/ui-src/app.js
index dddf71b..4861314 100644
--- a/server/ui-src/app.js
+++ b/server/ui-src/app.js
@@ -1,8 +1,7 @@
import { createApp } from 'vue';
import App from './App.vue';
import "./assets/styles.scss";
-import "../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";
+import "bootstrap-icons/font/bootstrap-icons.scss";
import "bootstrap";
-import "./color-modes";
createApp(App).mount('#app');
diff --git a/server/ui-src/assets/_bootstrap_variables.scss b/server/ui-src/assets/_bootstrap_variables.scss
index 9f0ec33..f4ac6df 100644
--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -6,3 +6,4 @@ $link-decoration: none;
$primary: #2c3e50;
$list-group-disabled-color: #adb5bd;
$enable-negative-margins: true;
+$body-color-dark: #e7eaed;
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index f278445..85de0a6 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -56,8 +56,17 @@
z-index: 1500;
}
-.message.read:not(.active):not(.selected) {
- color: $gray-500;
+.message {
+ &.read {
+ color: $text-muted;
+
+ b {
+ font-weight: normal;
+ }
+ }
+ &.selected {
+ background: var(--bs-primary-bg-subtle);
+ }
}
#nav-plain-text .text-view,
@@ -180,20 +189,6 @@
border-top: 0;
}
-.message.selected {
- background: $gray-300;
-
- .text-muted {
- color: $body-color !important;
- }
-
- &.read {
- b {
- font-weight: normal;
- }
- }
-}
-
body.blur {
.privacy {
filter: blur(3px);
@@ -280,8 +275,8 @@ body.blur {
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css */
code[class*="language-"],
pre[class*="language-"] {
- color: #000;
- background: 0 0;
+ // color: #000;
+ // background: 0 0;
font-size: 0.85em;
text-align: left;
white-space: pre;
@@ -314,7 +309,7 @@ code[class*="language-"] {
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
- background-color: #fdfdfd;
+ // background-color: #fdfdfd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -364,7 +359,7 @@ pre[class*="language-"] {
.token.url,
.token.variable {
color: #a67f59;
- background: rgba(255, 255, 255, 0.5);
+ // background: rgba(255, 255, 255, 0.5);
}
.token.atrule,
.token.attr-value,
@@ -379,7 +374,7 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string {
color: #a67f59;
- background: rgba(255, 255, 255, 0.5);
+ // background: rgba(255, 255, 255, 0.5);
}
.token.important {
font-weight: 400;
@@ -390,9 +385,9 @@ pre[class*="language-"] {
.token.italic {
font-style: italic;
}
-.token.entity {
- cursor: help;
-}
+// .token.entity {
+// cursor: help;
+// }
.token.namespace {
opacity: 0.7;
}
diff --git a/server/ui-src/color-modes.js b/server/ui-src/color-modes.js
deleted file mode 100644
index f9c437e..0000000
--- a/server/ui-src/color-modes.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*!
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- */
-
-(() => {
- 'use strict';
-
- const getStoredTheme = () => localStorage.getItem('theme');
- const setStoredTheme = (theme) => localStorage.setItem('theme', theme);
-
- const getPreferredTheme = () => {
- const storedTheme = getStoredTheme();
- if (storedTheme) {
- return storedTheme;
- }
-
- return window.matchMedia('(prefers-color-scheme: dark)').matches
- ? 'dark'
- : 'light';
- };
-
- const setTheme = (theme) => {
- if (
- theme === 'auto' &&
- window.matchMedia('(prefers-color-scheme: dark)').matches
- ) {
- document.documentElement.setAttribute('data-bs-theme', 'dark');
- } else {
- document.documentElement.setAttribute('data-bs-theme', theme);
- }
- };
-
- setTheme(getPreferredTheme());
-
- const showActiveTheme = (theme, focus = false) => {
- const themeSwitcher = document.querySelector('#bd-theme');
-
- if (!themeSwitcher) {
- return;
- }
-
- const themeSwitcherText = document.querySelector('#bd-theme-text');
- const activeThemeIcon = document.querySelector('.theme-icon-active use');
- const btnToActive = document.querySelector(
- `[data-bs-theme-value="${theme}"]`
- );
- const svgOfActiveBtn = btnToActive
- .querySelector('svg use')
- .getAttribute('href');
-
- document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
- element.classList.remove('active');
- element.setAttribute('aria-pressed', 'false');
- });
-
- btnToActive.classList.add('active');
- btnToActive.setAttribute('aria-pressed', 'true');
- activeThemeIcon.setAttribute('href', svgOfActiveBtn);
- const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
- themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
-
- if (focus) {
- themeSwitcher.focus();
- }
- };
-
- window
- .matchMedia('(prefers-color-scheme: dark)')
- .addEventListener('change', () => {
- const storedTheme = getStoredTheme();
- if (storedTheme !== 'light' && storedTheme !== 'dark') {
- setTheme(getPreferredTheme());
- }
- });
-
- window.addEventListener('DOMContentLoaded', () => {
- showActiveTheme(getPreferredTheme());
-
- document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
- toggle.addEventListener('click', () => {
- const theme = toggle.getAttribute('data-bs-theme-value');
- setStoredTheme(theme);
- setTheme(theme);
- showActiveTheme(theme, true);
- });
- });
- });
-})();
-
-document.querySelectorAll('[data-bs-toggle="popover"]').forEach((popover) => {
- new bootstrap.Popover(popover);
-});
diff --git a/server/ui-src/templates/Attachments.vue b/server/ui-src/templates/Attachments.vue
index a13cf68..c4457ee 100644
--- a/server/ui-src/templates/Attachments.vue
+++ b/server/ui-src/templates/Attachments.vue
@@ -14,14 +14,18 @@ export default {
Mailpit
-