Variable fixes
This commit is contained in:
@@ -182,7 +182,7 @@ pub fn initial_admin_setup() -> Html {
|
||||
};
|
||||
|
||||
html! {
|
||||
<div class="setup-container">
|
||||
<div class="setup-container rundbg">
|
||||
<div class="setup-box">
|
||||
<h1>{ "Initial Admin Setup" }</h1>
|
||||
<p>{ "Create your first administrator account" }</p>
|
||||
|
||||
@@ -390,7 +390,7 @@ pub fn sidebar() -> Html {
|
||||
<TicketMenu/>
|
||||
<li class="logout-item">
|
||||
<button
|
||||
class="logout-button"
|
||||
class="sidebar-button"
|
||||
onclick={on_logout.clone()}
|
||||
>
|
||||
{ "Logout" }
|
||||
@@ -417,8 +417,9 @@ pub fn sidebar() -> Html {
|
||||
<Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
|
||||
<Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
|
||||
<li class="logout-item">
|
||||
<crate::darkmode::ThemeToggle/>
|
||||
<button
|
||||
class="logout-button"
|
||||
class="sidebar-button"
|
||||
onclick={on_logout.clone()}
|
||||
>
|
||||
{ "Logout" }
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
backgroud: #fff;
|
||||
border-radius: &border-radius;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
padding: $spacing-md;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use "variables" as *;
|
||||
|
||||
.u-hidden { display: none !important; }
|
||||
.u-gap-sm { gap: $spacing-sm; }
|
||||
.text-muted { color: $color-muted; }
|
||||
.u-gap-sm { gap: var(--spacing-sm); }
|
||||
.text-muted { color: var(--color-muted); }
|
||||
|
||||
|
||||
@@ -1,8 +1,22 @@
|
||||
$color-bg: #ffffff;
|
||||
$color-sidebar: #570000;
|
||||
$color-accent: #2563eb;
|
||||
$color-muted: #6b7280;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
$border-radius: 6px;
|
||||
$rundbgbackgroundcolor: #a0a0a0;
|
||||
:root {
|
||||
--color-bg: #ffffff;
|
||||
--color-sidebar: #570000;
|
||||
--color-accent: #2563eb;
|
||||
--color-muted: #6b7280;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--border-radius: 6px;
|
||||
--rundbgbackgroundcolor: #a0a0a0;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--color-bg: #000000;
|
||||
--color-sidebar: #570000;
|
||||
--color-accent: #2563eb;
|
||||
--color-muted: #6b7280;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--border-radius: 6px;
|
||||
--rundbgbackgroundcolor: #a0a0a0;
|
||||
|
||||
}
|
||||
|
||||
@@ -4,17 +4,17 @@
|
||||
.diagnostics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.diagnostics-section {
|
||||
background-color: $color-bg;
|
||||
border-radius: $border-radius;
|
||||
padding: $spacing-md;
|
||||
background-color: var(--color-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 $spacing-md 0;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
color: #1f2937;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
@@ -26,7 +26,7 @@
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
height: 205px;
|
||||
padding: $spacing-md;
|
||||
padding: var(--spacing-md);
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
background-color: $color-accent;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
.weekday-labels {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: $spacing-md;
|
||||
padding: var(--spacing-md);
|
||||
padding-top: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
.value {
|
||||
font-size: 11px;
|
||||
color: $color-muted;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -92,9 +92,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: $spacing-md;
|
||||
padding: var(--spacing-md);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: $border-radius;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
|
||||
.room-count {
|
||||
font-size: 12px;
|
||||
color: $color-muted;
|
||||
color: var(--color-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: $color-sidebar;
|
||||
background: var(--color-sidebar);
|
||||
color: #fffefe;
|
||||
min-height: 100%;
|
||||
padding: $spacing-md;
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
|
||||
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; flex: 1; }
|
||||
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; }
|
||||
|
||||
a, .menu-toggle {
|
||||
color: #ffffff;
|
||||
@@ -36,10 +36,10 @@
|
||||
.logout-item {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
padding-top: $spacing-sm;
|
||||
padding-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
.sidebar-button {
|
||||
background: rgba(255, 93, 43, 0.527);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.801);
|
||||
@@ -52,7 +52,7 @@
|
||||
&:active { background: rgba(255,255,255,0.2); }
|
||||
}
|
||||
|
||||
&.user { width: 220px; background: darken($color-sidebar, 6%); }
|
||||
&.user { width: 220px; background: darken(#570000, 6%); }
|
||||
|
||||
.home-svg {
|
||||
width: 24px;
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
|
||||
.ticket-card {
|
||||
@include card();
|
||||
border-left: 4px solid $color-accent;
|
||||
border-left: 4px solid var(--color-accent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
.meta { color: $color-muted; font-size: 0.9rem; }
|
||||
.meta { color: var(--color-muted); font-size: 0.9rem; }
|
||||
.title { font-weight: 600; }
|
||||
|
||||
}
|
||||
@@ -17,7 +17,7 @@
|
||||
max-width: auto;
|
||||
margin:0 0;
|
||||
background-color: #90ff82;
|
||||
background-color: $rundbgbackgroundcolor;
|
||||
background-color: var(--rundbgbackgroundcolor);
|
||||
padding-bottom: 8px;
|
||||
color: white;
|
||||
padding-left: 8px;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@use "components/icon";
|
||||
|
||||
body {
|
||||
background: variables.$color-bg;
|
||||
background: var(--color-bg);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
@@ -37,7 +37,7 @@ body {
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: variables.$spacing-md;
|
||||
padding: var(--spacing-md);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sidebar.open { left: 0; }
|
||||
.content { margin-left: 0; padding: variables.$spacing-md; box-sizing: border-box; }
|
||||
.content { margin-left: 0; padding: var(--spacing-md); box-sizing: border-box; }
|
||||
}
|
||||
|
||||
.rundbg {
|
||||
@@ -62,7 +62,7 @@ body {
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
margin: 0 auto;
|
||||
background-color: variables.$rundbgbackgroundcolor;
|
||||
background-color: var(--rundbgbackgroundcolor);
|
||||
padding-bottom: 96px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
|
||||
Reference in New Issue
Block a user