Delete all
This commit is contained in:
MeBeBruno committed
1 parent
339e0c72ad
commit
6959030639
14 files changed
-2209
No files matched your search
@@ -1,335 +0,0 @@
|
||||
let websocket_connection;
|
||||
let pending_administrator_form = null;
|
||||
let stopwatch_interval_identifier = null;
|
||||
|
||||
function initialize_lucide_icons() {
|
||||
if (typeof lucide !== "undefined") {
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
function update_game_stopwatch() {
|
||||
const stopwatch_element = document.getElementById("game-stopwatch");
|
||||
if (!stopwatch_element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const start_time_string = stopwatch_element.getAttribute("data-start-time");
|
||||
if (!start_time_string) {
|
||||
return;
|
||||
}
|
||||
|
||||
const start_date = new Date(start_time_string);
|
||||
if (isNaN(start_date.getTime())) {
|
||||
return;
|
||||
}
|
||||
|
||||
const current_date = new Date();
|
||||
const difference_in_milliseconds = current_date.getTime() - start_date.getTime();
|
||||
|
||||
if (difference_in_milliseconds < 0) {
|
||||
stopwatch_element.textContent = "00:00 Minuten";
|
||||
return;
|
||||
}
|
||||
|
||||
const total_seconds = Math.floor(difference_in_milliseconds / 1000);
|
||||
const days_passed = Math.floor(total_seconds / 86400);
|
||||
const hours_passed = Math.floor((total_seconds % 86400) / 3600);
|
||||
const minutes_passed = Math.floor((total_seconds % 3600) / 60);
|
||||
const seconds_passed = total_seconds % 60;
|
||||
|
||||
let output_string = "";
|
||||
|
||||
if (days_passed === 1) {
|
||||
output_string += "1 Tag und ";
|
||||
} else if (days_passed > 1) {
|
||||
output_string += days_passed + " Tage und ";
|
||||
}
|
||||
|
||||
const padded_minutes = String(minutes_passed).padStart(2, "0");
|
||||
const padded_seconds = String(seconds_passed).padStart(2, "0");
|
||||
|
||||
if (hours_passed === 1) {
|
||||
output_string += "1:" + padded_minutes + ":" + padded_seconds + " Stunde";
|
||||
} else if (hours_passed > 1) {
|
||||
output_string += hours_passed + ":" + padded_minutes + ":" + padded_seconds + " Stunden";
|
||||
} else {
|
||||
output_string += padded_minutes + ":" + padded_seconds + " Minuten";
|
||||
}
|
||||
|
||||
stopwatch_element.textContent = output_string;
|
||||
}
|
||||
|
||||
function initialize_application_behavior() {
|
||||
initialize_lucide_icons();
|
||||
|
||||
if (stopwatch_interval_identifier) {
|
||||
clearInterval(stopwatch_interval_identifier);
|
||||
}
|
||||
stopwatch_interval_identifier = setInterval(update_game_stopwatch, 1000);
|
||||
update_game_stopwatch();
|
||||
|
||||
const tab_buttons = document.querySelectorAll(".tab-button");
|
||||
tab_buttons.forEach(function(current_button) {
|
||||
current_button.addEventListener("click", function() {
|
||||
const target_identifier = current_button.getAttribute("data-target");
|
||||
const parent_container = current_button.closest(".application-content");
|
||||
|
||||
parent_container.querySelectorAll(".tab-button").forEach(function(button_element) {
|
||||
button_element.classList.remove("active-tab");
|
||||
});
|
||||
parent_container.querySelectorAll(".tab-content").forEach(function(content_element) {
|
||||
content_element.classList.remove("active-content");
|
||||
});
|
||||
|
||||
current_button.classList.add("active-tab");
|
||||
const target_panel = document.getElementById(target_identifier);
|
||||
if (target_panel) {
|
||||
target_panel.classList.add("active-content");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const player_forms = document.querySelectorAll(".asynchronous-form");
|
||||
player_forms.forEach(function(current_form) {
|
||||
current_form.addEventListener("submit", function(form_submission_event) {
|
||||
form_submission_event.preventDefault();
|
||||
execute_form_submission(current_form);
|
||||
});
|
||||
});
|
||||
|
||||
const administrator_forms = document.querySelectorAll(".admin-asynchronous-form");
|
||||
administrator_forms.forEach(function(current_form) {
|
||||
current_form.addEventListener("submit", function(form_submission_event) {
|
||||
form_submission_event.preventDefault();
|
||||
pending_administrator_form = current_form;
|
||||
const administrator_modal = document.getElementById("admin-confirmation-modal");
|
||||
if (administrator_modal) {
|
||||
const time_input = document.getElementById("modal_execution_time");
|
||||
if (time_input) {
|
||||
time_input.value = "";
|
||||
}
|
||||
administrator_modal.classList.add("active-modal");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const confirm_administrator_button = document.getElementById("confirm-admin-action");
|
||||
if (confirm_administrator_button) {
|
||||
confirm_administrator_button.addEventListener("click", function() {
|
||||
if (pending_administrator_form) {
|
||||
const time_input = document.getElementById("modal_execution_time");
|
||||
if (time_input && time_input.value) {
|
||||
let hidden_time_input = pending_administrator_form.querySelector("input[name='execution_time']");
|
||||
if (!hidden_time_input) {
|
||||
hidden_time_input = document.createElement("input");
|
||||
hidden_time_input.type = "hidden";
|
||||
hidden_time_input.name = "execution_time";
|
||||
pending_administrator_form.appendChild(hidden_time_input);
|
||||
}
|
||||
hidden_time_input.value = time_input.value;
|
||||
} else {
|
||||
let hidden_time_input = pending_administrator_form.querySelector("input[name='execution_time']");
|
||||
if (hidden_time_input) {
|
||||
hidden_time_input.remove();
|
||||
}
|
||||
}
|
||||
execute_form_submission(pending_administrator_form);
|
||||
pending_administrator_form = null;
|
||||
const administrator_modal = document.getElementById("admin-confirmation-modal");
|
||||
if (administrator_modal) {
|
||||
administrator_modal.classList.remove("active-modal");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const cancel_administrator_button = document.getElementById("cancel-admin-action");
|
||||
if (cancel_administrator_button) {
|
||||
cancel_administrator_button.addEventListener("click", function() {
|
||||
pending_administrator_form = null;
|
||||
const administrator_modal = document.getElementById("admin-confirmation-modal");
|
||||
if (administrator_modal) {
|
||||
administrator_modal.classList.remove("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const trigger_elimination_button = document.getElementById("trigger-elimination");
|
||||
if (trigger_elimination_button) {
|
||||
trigger_elimination_button.addEventListener("click", function() {
|
||||
const elimination_modal = document.getElementById("elimination-confirm-modal");
|
||||
if (elimination_modal) {
|
||||
elimination_modal.classList.add("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const proceed_elimination_button = document.getElementById("proceed-elimination");
|
||||
if (proceed_elimination_button) {
|
||||
proceed_elimination_button.addEventListener("click", function() {
|
||||
websocket_connection.emit("request_elimination");
|
||||
const elimination_modal = document.getElementById("elimination-confirm-modal");
|
||||
if (elimination_modal) {
|
||||
elimination_modal.classList.remove("active-modal");
|
||||
}
|
||||
const waiting_modal = document.getElementById("waiting-modal");
|
||||
if (waiting_modal) {
|
||||
waiting_modal.classList.add("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const cancel_elimination_button = document.getElementById("cancel-elimination");
|
||||
if (cancel_elimination_button) {
|
||||
cancel_elimination_button.addEventListener("click", function() {
|
||||
const elimination_modal = document.getElementById("elimination-confirm-modal");
|
||||
if (elimination_modal) {
|
||||
elimination_modal.classList.remove("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const confirm_button = document.getElementById("confirm-elimination");
|
||||
if (confirm_button) {
|
||||
confirm_button.addEventListener("click", function() {
|
||||
websocket_connection.emit("confirm_elimination");
|
||||
const modal_element = document.getElementById("verification-modal");
|
||||
if (modal_element) {
|
||||
modal_element.classList.remove("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reject_button = document.getElementById("reject-elimination");
|
||||
if (reject_button) {
|
||||
reject_button.addEventListener("click", function() {
|
||||
websocket_connection.emit("reject_elimination");
|
||||
const modal_element = document.getElementById("verification-modal");
|
||||
if (modal_element) {
|
||||
modal_element.classList.remove("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const acknowledge_rejection_button = document.getElementById("acknowledge-rejection");
|
||||
if (acknowledge_rejection_button) {
|
||||
acknowledge_rejection_button.addEventListener("click", function() {
|
||||
const rejection_modal = document.getElementById("rejection-modal");
|
||||
if (rejection_modal) {
|
||||
rejection_modal.classList.remove("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const open_name_modal_button = document.getElementById("trigger-name-change-modal");
|
||||
if (open_name_modal_button) {
|
||||
open_name_modal_button.addEventListener("click", function() {
|
||||
const name_modal = document.getElementById("name-change-modal");
|
||||
if (name_modal) {
|
||||
name_modal.classList.add("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const close_name_modal_button = document.getElementById("cancel-name-change");
|
||||
if (close_name_modal_button) {
|
||||
close_name_modal_button.addEventListener("click", function() {
|
||||
const name_modal = document.getElementById("name-change-modal");
|
||||
if (name_modal) {
|
||||
name_modal.classList.remove("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function execute_form_submission(target_form) {
|
||||
const active_tab_element = document.querySelector(".active-tab");
|
||||
let active_target = "control-panel";
|
||||
if (active_tab_element) {
|
||||
active_target = active_tab_element.getAttribute("data-target");
|
||||
}
|
||||
|
||||
fetch(target_form.action, {
|
||||
method: target_form.method,
|
||||
body: new FormData(target_form)
|
||||
})
|
||||
.then(function(network_response) { return network_response.text(); })
|
||||
.then(function(markup_text) {
|
||||
replace_main_content(markup_text);
|
||||
const new_tab_button = document.querySelector(".tab-button[data-target='" + active_target + "']");
|
||||
if (new_tab_button) {
|
||||
new_tab_button.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function replace_main_content(markup_text) {
|
||||
const document_parser = new DOMParser();
|
||||
const parsed_document = document_parser.parseFromString(markup_text, "text/html");
|
||||
const current_container = document.querySelector(".application-content");
|
||||
const new_container = parsed_document.querySelector(".application-content");
|
||||
if (current_container && new_container) {
|
||||
current_container.innerHTML = new_container.innerHTML;
|
||||
initialize_application_behavior();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
if ("serviceWorker" in navigator) {
|
||||
navigator.serviceWorker.register("/service_worker.js");
|
||||
}
|
||||
|
||||
if (typeof io !== "undefined") {
|
||||
websocket_connection = io();
|
||||
|
||||
websocket_connection.on("game_state_changed", function() {
|
||||
if (document.querySelector(".game-section") || document.querySelector(".administrator-section")) {
|
||||
fetch(window.location.href)
|
||||
.then(function(network_response) { return network_response.text(); })
|
||||
.then(function(markup_text) {
|
||||
replace_main_content(markup_text);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
websocket_connection.on("admin_state_changed", function() {
|
||||
if (document.querySelector(".administrator-section")) {
|
||||
fetch(window.location.href)
|
||||
.then(function(network_response) { return network_response.text(); })
|
||||
.then(function(markup_text) {
|
||||
replace_main_content(markup_text);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
websocket_connection.on("elimination_verification_requested", function() {
|
||||
const modal_element = document.getElementById("verification-modal");
|
||||
if (modal_element) {
|
||||
modal_element.classList.add("active-modal");
|
||||
} else {
|
||||
fetch(window.location.href)
|
||||
.then(function(network_response) { return network_response.text(); })
|
||||
.then(function(markup_text) {
|
||||
replace_main_content(markup_text);
|
||||
const new_modal_element = document.getElementById("verification-modal");
|
||||
if (new_modal_element) {
|
||||
new_modal_element.classList.add("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
websocket_connection.on("elimination_rejected", function() {
|
||||
const waiting_modal = document.getElementById("waiting-modal");
|
||||
if (waiting_modal) {
|
||||
waiting_modal.classList.remove("active-modal");
|
||||
}
|
||||
const rejection_modal = document.getElementById("rejection-modal");
|
||||
if (rejection_modal) {
|
||||
rejection_modal.classList.add("active-modal");
|
||||
}
|
||||
});
|
||||
}
|
||||
initialize_application_behavior();
|
||||
});
|
||||
@@ -1,2 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" viewBox="465.8766784667969 137.75999450683594 353.4313049316406 384.6400146484375"><path d="M811.26 275.62 819.31 380.82 714.1 388.88 712.67 370.11 685.88 388.45 696.13 522.4 612.86 522.4 603.1 394.79 564.72 376.36 561.05 382.31C552.25 394.18 538.55 402.31 522.66 403.53 493.61 405.75 468.26 384 466.03 354.95 463.81 325.9 485.56 300.55 514.61 298.32 536.4 296.65 556.11 308.47 565.54 326.74L567.55 331.82 708.91 321 706.05 283.67ZM659.98 137.76 690.31 188.35 668.03 242.97 658.84 243.67 663.52 304.85 612.47 308.76 607.79 247.58 598.6 248.28 568.27 197.69 590.54 143.07Z" fill="oklch(85% 0.15 110)"/></svg>
|
||||
|
Before Width: | Height: | Size: 747 B |
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"name": "SCOicide Squad",
|
||||
"short_name": "SCOicide",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#f0f2f5",
|
||||
"theme_color": "#1a1e29",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/logo.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
const cache_identifier = "scoicide-squad-cache-version-1";
|
||||
|
||||
self.addEventListener("install", function(installation_event) {
|
||||
installation_event.waitUntil(
|
||||
caches.open(cache_identifier).then(function(cache_object) {
|
||||
return cache_object.addAll([
|
||||
"/",
|
||||
"/static/stylesheet.css",
|
||||
"/static/behavior.js",
|
||||
"/static/logo.svg",
|
||||
"/static/manifest.json"
|
||||
]);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener("fetch", function(network_fetch_event) {
|
||||
network_fetch_event.respondWith(
|
||||
caches.match(network_fetch_event.request).then(function(cached_response) {
|
||||
return cached_response || fetch(network_fetch_event.request);
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -1,443 +0,0 @@
|
||||
:root {
|
||||
--lightness-primary: 0.35;
|
||||
--chroma-primary: 0.15;
|
||||
--hue-primary: 15;
|
||||
|
||||
--lightness-background: 0.9;
|
||||
--chroma-background: 0.01;
|
||||
--hue-background: var(--hue-primary);
|
||||
|
||||
--lightness-surface: 1;
|
||||
--chroma-surface: 0;
|
||||
--hue-surface: 0;
|
||||
|
||||
--lightness-text: 0.15;
|
||||
--chroma-text: 0.05;
|
||||
--hue-text: 250;
|
||||
|
||||
--lightness-success: 0.60;
|
||||
--chroma-success: 0.18;
|
||||
--hue-success: 140;
|
||||
|
||||
--lightness-danger: 0.50;
|
||||
--chroma-danger: 0.22;
|
||||
--hue-danger: 25;
|
||||
|
||||
--lightness-warning: 0.75;
|
||||
--chroma-warning: 0.18;
|
||||
--hue-warning: 70;
|
||||
|
||||
--dimension-multiplier: 1;
|
||||
--spacing-small: calc(0.5rem * var(--dimension-multiplier));
|
||||
--spacing-medium: calc(1rem * var(--dimension-multiplier));
|
||||
--spacing-large: calc(1.5rem * var(--dimension-multiplier));
|
||||
|
||||
--border-radius-small: calc(0.5rem * var(--dimension-multiplier));
|
||||
--border-radius-large: calc(1.25rem * var(--dimension-multiplier));
|
||||
--border-radius-pill: calc(999rem * var(--dimension-multiplier));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--lightness-background: 0.2;
|
||||
--chroma-background: 0.02;
|
||||
|
||||
--lightness-surface: 0.18;
|
||||
--chroma-surface: 0.02;
|
||||
|
||||
--lightness-text: 0.90;
|
||||
--chroma-text: 0.02;
|
||||
|
||||
--lightness-primary: 0.65;
|
||||
--chroma-primary: 0.20;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
transition-duration: 0s !important;
|
||||
animation-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
|
||||
color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-size: calc(1rem * var(--dimension-multiplier));
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.application-header {
|
||||
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
color: oklch(1 0 0);
|
||||
padding: var(--spacing-medium) var(--spacing-large);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.brand-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: calc(2rem * var(--dimension-multiplier));
|
||||
height: calc(2rem * var(--dimension-multiplier));
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.application-title {
|
||||
margin: 0;
|
||||
font-size: calc(1.25rem * var(--dimension-multiplier));
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.application-content {
|
||||
flex: 1;
|
||||
padding: var(--spacing-large);
|
||||
width: 100%;
|
||||
max-width: calc(48rem * var(--dimension-multiplier));
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
|
||||
padding: var(--spacing-large);
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
|
||||
margin-bottom: var(--spacing-large);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-small);
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
font-size: calc(0.875rem * var(--dimension-multiplier));
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.input-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.inline-form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flexible_form_container {
|
||||
display: flex;
|
||||
gap: calc(0.5rem * var(--dimension-multiplier));
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(0.25rem * var(--dimension-multiplier));
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-weight: bold;
|
||||
font-size: calc(0.875rem * var(--dimension-multiplier));
|
||||
}
|
||||
|
||||
.text-input {
|
||||
padding: var(--spacing-medium);
|
||||
border: 2px solid oklch(0.5 0 0 / 0.2);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
outline: none;
|
||||
border-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
}
|
||||
|
||||
.small-input {
|
||||
width: calc(12rem * var(--dimension-multiplier));
|
||||
padding: var(--spacing-small);
|
||||
}
|
||||
|
||||
.time-input {
|
||||
width: calc(13rem * var(--dimension-multiplier));
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: var(--spacing-medium) var(--spacing-large);
|
||||
border: none;
|
||||
border-radius: var(--border-radius-pill);
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-small);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: oklch(1 0 0);
|
||||
}
|
||||
|
||||
.action-button:hover, .action-button:focus {
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: calc(0.5rem * var(--dimension-multiplier));
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
box-shadow: 0 4px 12px oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary) / 0.3);
|
||||
}
|
||||
|
||||
.success-button {
|
||||
background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
background-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
|
||||
}
|
||||
|
||||
.warning-button {
|
||||
background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
|
||||
color: oklch(0.2 0 0);
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background-color: transparent;
|
||||
color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
|
||||
border: 2px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.2);
|
||||
}
|
||||
|
||||
.large-button {
|
||||
padding: var(--spacing-large) calc(2.5rem * var(--dimension-multiplier));
|
||||
font-size: calc(1.125rem * var(--dimension-multiplier));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.small-button {
|
||||
padding: calc(0.25rem * var(--dimension-multiplier)) calc(0.75rem * var(--dimension-multiplier));
|
||||
font-size: calc(0.875rem * var(--dimension-multiplier));
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
|
||||
border-radius: var(--border-radius-pill);
|
||||
padding: calc(0.375rem * var(--dimension-multiplier));
|
||||
gap: calc(0.25rem * var(--dimension-multiplier));
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
margin-bottom: var(--spacing-large);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
border-radius: var(--border-radius-pill);
|
||||
padding: calc(0.625rem * var(--dimension-multiplier)) var(--spacing-medium);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc(0.5rem * var(--dimension-multiplier));
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
color: oklch(1 0 0);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(0.375rem * var(--dimension-multiplier));
|
||||
padding: calc(0.25rem * var(--dimension-multiplier)) calc(0.875rem * var(--dimension-multiplier));
|
||||
border-radius: var(--border-radius-pill);
|
||||
font-size: calc(0.875rem * var(--dimension-multiplier));
|
||||
font-weight: bold;
|
||||
color: oklch(1 0 0);
|
||||
margin-left: var(--spacing-small);
|
||||
}
|
||||
|
||||
.warning-pill {
|
||||
background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
|
||||
color: oklch(0.2 0 0);
|
||||
}
|
||||
|
||||
.success-pill {
|
||||
background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
|
||||
}
|
||||
|
||||
.danger-pill {
|
||||
background-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
border-left: 6px solid oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
}
|
||||
|
||||
.danger-card {
|
||||
border-left-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
|
||||
}
|
||||
|
||||
.success-card {
|
||||
border-left-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
border-left-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
|
||||
}
|
||||
|
||||
.target-name {
|
||||
font-size: calc(2.5rem * var(--dimension-multiplier));
|
||||
text-align: center;
|
||||
margin: var(--spacing-large) 0;
|
||||
color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th, .data-table td {
|
||||
padding: var(--spacing-medium);
|
||||
border-bottom: 1px solid oklch(0.5 0 0 / 0.1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
font-size: calc(0.75rem * var(--dimension-multiplier));
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.highlighted-row {
|
||||
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary) / 0.1);
|
||||
}
|
||||
|
||||
.highlighted-row td {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.unregistered-row {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.markdown-container h1, .markdown-container h2, .markdown-container h3 {
|
||||
color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
|
||||
}
|
||||
|
||||
.markdown-container ul {
|
||||
padding-left: var(--spacing-large);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.active-modal {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
|
||||
padding: var(--spacing-large);
|
||||
border-radius: var(--border-radius-large);
|
||||
max-width: calc(32rem * var(--dimension-multiplier));
|
||||
width: 90%;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-small);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-medium);
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-large);
|
||||
}
|
||||
|
||||
.qr-code-container {
|
||||
background-color: oklch(1 0 0);
|
||||
padding: var(--spacing-medium);
|
||||
border-radius: var(--border-radius-large);
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-medium);
|
||||
box-shadow: inset 0 0 0 2px oklch(0.5 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.qr-code-container svg {
|
||||
display: block;
|
||||
width: calc(14rem * var(--dimension-multiplier));
|
||||
height: calc(14rem * var(--dimension-multiplier));
|
||||
}
|
||||
|
||||
.monospace-identifier {
|
||||
font-family: monospace;
|
||||
}
|
||||
Reference in new issue
Block a user