diff --git a/backend/static/css/style.css b/backend/static/css/style.css
index 5d0fb40..52298d9 100644
--- a/backend/static/css/style.css
+++ b/backend/static/css/style.css
@@ -1,4 +1,180 @@
:root {
+ /* Navbar */
+ --navbar-background-color: #343a40;
+ --navbar-text-color: rgba(255, 255, 255, .5);
+ --navbar-text-color-hover: rgba(255, 255, 255, .75);
+ --navbar-text-color-active: rgba(255, 255, 255, 1);
+
+ /* Common */
+ --background-color: #ffffff;
+ --background-color-var: #f5f5f5;
+ --text-color: #212529;
+ --text-color-var: #343a40;
+
+ /* Modals */
+ --modal-background-color: #ffffff;
+ --modal-separator-color: #dee2e6;
+ --modal-close-color: #212529;
+
+ /* Tables */
+ --table-border-color: #dee2e6;
+
+ /* Input */
+ --input-background-color: #ffffff;
+
+ /* Misc */
+ --copy-highlight-color: rgba(251, 255, 0, 0.6);
+}
+
+
+body {
+ padding-top: 5rem;
+ background-color: var(--background-color);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+.site {
+ height: auto;
+ min-height: 100%;
+}
+
+main {
+ padding-bottom: 60px;
+ /* Höhe des Footers */
+}
+
+.footer {
+ margin-top: -60px;
+ width: 100%;
+ height: 60px;
+ /* Set the fixed height of the footer here */
+ /*line-height: 60px; /* Vertically center the text there */
+ background-color: var(--background-color-var);
+}
+
+.topbutton {
+ width: 100%;
+}
+
+table td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+table.entries tbody tr[data-index="0"] {
+ background-color: #007bff80;
+ font-weight: 600;
+}
+
+table.entries tbody tr[data-index="1"] {
+ background-color: #007bff40;
+ font-weight: 500;
+}
+
+table.entries tbody tr[data-index="2"] {
+ background-color: #007bff20;
+ font-weight: 400;
+}
+
+table.entries tbody tr[data-index="3"] {
+ background-color: #007bff10;
+}
+
+table td:first-child {
+ max-width: 200px !important;
+}
+
+.fa-solid {
+ vertical-align: auto;
+}
+
+@media (min-width: 768px) {
+ .topbutton {
+ width: auto;
+ }
+}
+
+@media print {
+ body {
+ font-size: 1.3em;
+ }
+
+ .footer {
+ display: none !important;
+ }
+
+ .admincontrols {
+ display: none;
+ }
+}
+
+body {
+ background-color: var(--background-color);
+ color: var(--text-color);
+}
+
+.footer {
+ background-color: var(--background-color-var);
+}
+
+.modal-content {
+ background-color: var(--background-color);
+ color: var(--text-color);
+}
+
+.modal-header {
+ background-color: var(--background-color);
+ color: var(--text-color-var);
+ border-color: var(var(--modal-separator-color));
+}
+
+.modal-footer {
+ background-color: var(--background-color);
+ color: var(--text-color-var);
+ border-color: var(var(--modal-separator-color));
+}
+
+.form-control {
+ background-color: var(--input-background-color);
+ color: var(--text-color)
+}
+
+.form-control:focus {
+ background-color: var(--input-background-color);
+ color: var(--text-color)
+}
+
+.table td,
+.table th {
+ border-color: var(--table-border-color)
+}
+
+.table thead th {
+ border-color: var(--table-border-color)
+}
+
+table td.buttoncell {
+ text-align: end;
+}
+
+.close {
+ color: var(--text-color)
+}
+
+pre {
+ color: var(--text-color-var)
+}
+
+#entrytable td>span:hover {
+ background-color: var(--copy-highlight-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
/* Navbar */
--navbar-background-color: #343a40;
--navbar-text-color: rgba(255, 255, 255, .5);
@@ -6,189 +182,20 @@
--navbar-text-color-active: rgba(255, 255, 255, 1);
/* Common */
- --background-color: #ffffff;
- --background-color-var: #f5f5f5;
- --text-color: #212529;
- --text-color-var: #343a40;
+ --background-color: #121212;
+ --background-color-var: #232323;
+ --text-color: #f5f5f5;
+ --text-color-var: #a2a2a2;
/* Modals */
- --modal-background-color: #ffffff;
- --modal-separator-color: #dee2e6;
- --modal-close-color: #212529;
+ --modal-background-color: #121212;
+ --modal-separator-color: #232323;
+ --modal-close-color: #f5f5f5;
/* Tables */
- --table-border-color: #dee2e6;
+ --table-border-color: #232323;
/* Input */
- --input-background-color: #ffffff;
-}
-
-
-body {
- padding-top: 5rem;
- background-color: var(--background-color);
-}
-
-html,
-body {
- height: 100%;
-}
-
-.site {
- height: auto;
- min-height: 100%;
-}
-
-main {
- padding-bottom: 60px;
- /* Höhe des Footers */
-}
-
-.footer {
- margin-top: -60px;
- width: 100%;
- height: 60px;
- /* Set the fixed height of the footer here */
- /*line-height: 60px; /* Vertically center the text there */
- background-color: var(--background-color-var);
-}
-
-.topbutton {
- width: 100%;
-}
-
-table td {
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-table.entries tbody tr[data-index="0"] {
- background-color: #007bff80;
- font-weight: 600;
-}
-
-table.entries tbody tr[data-index="1"] {
- background-color: #007bff40;
- font-weight: 500;
-}
-
-table.entries tbody tr[data-index="2"] {
- background-color: #007bff20;
- font-weight: 400;
-}
-
-table.entries tbody tr[data-index="3"] {
- background-color: #007bff10;
-}
-
-table td:first-child {
- max-width: 200px !important;
-}
-
-.fa-solid {
- vertical-align: auto;
-}
-
-@media (min-width: 768px) {
- .topbutton {
- width: auto;
- }
-}
-
-@media print {
- body {
- font-size: 1.3em;
- }
-
- .footer {
- display: none !important;
- }
-
- .admincontrols {
- display: none;
- }
-}
-
-body {
- background-color: var(--background-color);
- color: var(--text-color);
-}
-
-.footer {
- background-color: var(--background-color-var);
-}
-
-.modal-content {
- background-color: var(--background-color);
- color: var(--text-color);
-}
-
-.modal-header {
- background-color: var(--background-color);
- color: var(--text-color-var);
- border-color: var(var(--modal-separator-color));
-}
-
-.modal-footer {
- background-color: var(--background-color);
- color: var(--text-color-var);
- border-color: var(var(--modal-separator-color));
-}
-
-.form-control {
- background-color: var(--input-background-color);
- color: var(--text-color)
-}
-
-.form-control:focus {
- background-color: var(--input-background-color);
- color: var(--text-color)
-}
-
-.table td,
-.table th {
- border-color: var(--table-border-color)
-}
-
-.table thead th {
- border-color: var(--table-border-color)
-}
-
-table td.buttoncell {
- text-align: end;
-}
-
-.close {
- color: var(--text-color)
-}
-
-pre {
- color: var(--text-color-var)
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- /* Navbar */
- --navbar-background-color: #343a40;
- --navbar-text-color: rgba(255, 255, 255, .5);
- --navbar-text-color-hover: rgba(255, 255, 255, .75);
- --navbar-text-color-active: rgba(255, 255, 255, 1);
-
- /* Common */
- --background-color: #121212;
- --background-color-var: #232323;
- --text-color: #f5f5f5;
- --text-color-var: #a2a2a2;
-
- /* Modals */
- --modal-background-color: #121212;
- --modal-separator-color: #232323;
- --modal-close-color: #f5f5f5;
-
- /* Tables */
- --table-border-color: #232323;
-
- /* Input */
- --input-background-color: #343434;
- }
+ --input-background-color: #343434;
+ }
}
\ No newline at end of file
diff --git a/backend/templates/base.html b/backend/templates/base.html
index 54676d3..afd2047 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -15,9 +15,12 @@
+
+
+
-
+
@@ -88,16 +91,12 @@
-
+
-
-
+
+
@@ -105,6 +104,9 @@
+
+
{% block extrajs %}{% endblock %}
{% endblock %}
\ No newline at end of file
diff --git a/backend/templates/songlist.html b/backend/templates/songlist.html
index 7392a81..10df759 100644
--- a/backend/templates/songlist.html
+++ b/backend/templates/songlist.html
@@ -99,9 +99,13 @@
enqueue(localStorage.getItem("clientId"),id, name, function (response) {
console.log(response);
entryID = response["entry_id"];
- bootbox.alert({
- message: "Deine Eintragung wurde erfolgreich vorgenommen.",
- });
+ toast = {
+ title: "Erfolgreich eingetragen",
+ message: "Du wurdest erfolgreich eingetragen.",
+ status: TOAST_STATUS.SUCCESS,
+ timeout: 5000
+ }
+ Toast.create(toast);
console.log("Entry ID: " + entryID);
addEntry(entryID);
$("#enqueueModal").modal('hide');