MeBeBruno/SCOicideSquad
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More smoothness and persistence

Browse Source
This commit is contained in:
MeBeBruno committed 2026-10-04 22:47:53 +02:00
1 parent f924016478
commit aeb9173825
10 files changed
+2113 -1776
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/behavior.js
+384 -299
View File
@@ -1,330 +1,415 @@
let websocket_connection;
let pending_administrator_form = null;
let stopwatch_interval_identifier = null;
const application_state = {
websocket_connection: null,
pending_administrator_form: null,
stopwatch_interval_identifier: null
};
function initialize_lucide_icons() {
if (typeof lucide !== "undefined") {
lucide.createIcons();
}
/* --- Deterministische Funktionen ("ehrliche" Funktionen) --- */
function calculate_time_difference(start_time_milliseconds, current_time_milliseconds) {
return current_time_milliseconds - start_time_milliseconds;
}
function update_game_stopwatch() {
const stopwatch_element = document.getElementById("game-stopwatch");
if (!stopwatch_element) {
return;
}
function format_stopwatch_string(difference_in_milliseconds) {
if (difference_in_milliseconds < 0) {
return '00:00 Minuten';
}
const start_time_string = stopwatch_element.getAttribute("data-start-time");
if (!start_time_string) {
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;
const start_date = new Date(start_time_string);
if (isNaN(start_date.getTime())) {
return;
}
let output_string = '';
const current_date = new Date();
const difference_in_milliseconds = current_date.getTime() - start_date.getTime();
if (days_passed === 1) {
output_string += '1 Tag und ';
} else if (days_passed > 1) {
output_string += days_passed + ' Tage und ';
}
if (difference_in_milliseconds < 0) {
stopwatch_element.textContent = "00:00 Minuten";
return;
}
const padded_minutes = String(minutes_passed).padStart(2, '0');
const padded_seconds = String(seconds_passed).padStart(2, '0');
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;
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';
}
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;
return 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");
}
});
});
function synchronize_element_nodes(current_node, updated_node) {
if (current_node.nodeType !== updated_node.nodeType) {
current_node.replaceWith(updated_node.cloneNode(true));
return;
}
if (current_node.nodeType === Node.TEXT_NODE) {
if (current_node.nodeValue !== updated_node.nodeValue) {
current_node.nodeValue = updated_node.nodeValue;
}
return;
}
if (current_node.nodeType !== Node.ELEMENT_NODE) {
return;
}
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);
});
});
if (current_node.tagName !== updated_node.tagName) {
current_node.replaceWith(updated_node.cloneNode(true));
return;
}
if (current_node.namespaceURI !== updated_node.namespaceURI) {
current_node.replaceWith(updated_node.cloneNode(true));
return;
}
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 is_active_input = document.activeElement === current_node;
const is_input_element = ['INPUT', 'TEXTAREA', 'SELECT'].includes(current_node.tagName);
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");
}
}
});
}
if (is_input_element && !is_active_input) {
if (current_node.value !== updated_node.value) {
current_node.value = updated_node.value;
}
}
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 current_attributes = current_node.attributes;
const updated_attributes = updated_node.attributes;
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");
}
});
}
for (let index = 0; index < updated_attributes.length; index++) {
const attribute = updated_attributes[index];
if (current_node.getAttribute(attribute.name) !== attribute.value) {
if (!(is_input_element && is_active_input && attribute.name === 'value')) {
current_node.setAttribute(attribute.name, attribute.value);
}
}
}
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");
}
});
}
for (let index = current_attributes.length - 1; index >= 0; index--) {
const attribute = current_attributes[index];
if (!updated_node.hasAttribute(attribute.name)) {
current_node.removeAttribute(attribute.name);
}
}
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 current_children = Array.from(current_node.childNodes);
const updated_children = Array.from(updated_node.childNodes);
const max_length = Math.max(current_children.length, updated_children.length);
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");
}
});
}
for (let index = 0; index < max_length; index++) {
const current_child = current_children[index];
const updated_child = updated_children[index];
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");
}
});
}
if (!current_child && updated_child) {
current_node.appendChild(updated_child.cloneNode(true));
} else if (current_child && !updated_child) {
current_node.removeChild(current_child);
} else if (current_child && updated_child) {
synchronize_element_nodes(current_child, updated_child);
}
}
}
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();
}
});
/* --- Architektur & State-Management ("unehrliche" Funktionen) --- */
function trigger_dom_update(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) {
return;
}
const current_active_tab = document.querySelector('.active-tab');
const active_tab_target = current_active_tab ? current_active_tab.getAttribute('data-target') : null;
const active_modals = [];
document.querySelectorAll('.active-modal').forEach(function(modal) {
active_modals.push(modal.id);
});
synchronize_element_nodes(current_container, new_container);
if (active_tab_target) {
document.querySelectorAll('.tab-button').forEach(function(button) { button.classList.remove('active-tab'); });
document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active-content'); });
const restored_tab = document.querySelector('.tab-button[data-target="' + active_tab_target + '"]');
const restored_content = document.getElementById(active_tab_target);
if (restored_tab && restored_content) {
restored_tab.classList.add('active-tab');
restored_content.classList.add('active-content');
}
}
active_modals.forEach(function(modal_identifier) {
const restored_modal = document.getElementById(modal_identifier);
if (restored_modal) {
restored_modal.classList.add('active-modal');
}
});
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
}
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();
}
function fetch_and_synchronize_dom() {
fetch(window.location.href)
.then(function(network_response) {
if (!network_response.ok) {
throw new Error('Network response failure');
}
return network_response.text();
})
.then(function(markup_text) {
trigger_dom_update(markup_text);
})
.catch(function(error_object) {
console.error('DOM Synchronization failed:', error_object);
});
}
document.addEventListener("DOMContentLoaded", function() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service_worker.js");
}
function execute_asynchronous_form_submission(target_form) {
fetch(target_form.action, {
method: target_form.method,
body: new FormData(target_form)
})
.then(function(network_response) {
if (!network_response.ok) {
throw new Error('Form submission failure');
}
return network_response.text();
})
.then(function(markup_text) {
trigger_dom_update(markup_text);
})
.catch(function(error_object) {
console.error('Form execution failed:', error_object);
});
}
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);
});
}
});
function update_game_stopwatch_ui() {
const stopwatch_element = document.getElementById('game-stopwatch');
if (!stopwatch_element) {
return;
}
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);
});
}
});
const start_time_string = stopwatch_element.getAttribute('data-start-time');
if (!start_time_string) {
return;
}
websocket_connection.on("elimination_verification_requested", function() {
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");
}
});
});
const start_date = new Date(start_time_string);
if (isNaN(start_date.getTime())) {
return;
}
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();
const current_date = new Date();
const difference = calculate_time_difference(start_date.getTime(), current_date.getTime());
stopwatch_element.textContent = format_stopwatch_string(difference);
}
function modify_modal_state(modal_identifier, is_active) {
const modal = document.getElementById(modal_identifier);
if (modal) {
if (is_active) {
modal.classList.add('active-modal');
} else {
modal.classList.remove('active-modal');
}
}
}
function write_text_to_clipboard(text_payload) {
if (!navigator.clipboard) {
console.error('Clipboard API unvailable.');
return;
}
navigator.clipboard.writeText(text_payload).catch(function(error_object) {
console.error('Clipboard action failed:', error_object);
});
}
/* --- Globale Event-Delegation --- */
function handle_global_clicks(mouse_event) {
const target_element = mouse_event.target;
const tab_button = target_element.closest('.tab-button');
if (tab_button) {
const target_identifier = tab_button.getAttribute('data-target');
const parent_container = tab_button.closest('.application-content');
parent_container.querySelectorAll('.tab-button').forEach(function(button) {
button.classList.remove('active-tab');
});
parent_container.querySelectorAll('.tab-content').forEach(function(content) {
content.classList.remove('active-content');
});
tab_button.classList.add('active-tab');
const target_panel = document.getElementById(target_identifier);
if (target_panel) {
target_panel.classList.add('active-content');
}
return;
}
const action_mapping = {
'trigger-elimination': function() { modify_modal_state('elimination-confirm-modal', true); },
'cancel-elimination': function() { modify_modal_state('elimination-confirm-modal', false); },
'proceed-elimination': function() {
if (application_state.websocket_connection) {
application_state.websocket_connection.emit('request_elimination');
}
modify_modal_state('elimination-confirm-modal', false);
},
'trigger-revoke-elimination': function() {
if (application_state.websocket_connection) {
application_state.websocket_connection.emit('revoke_elimination_request');
}
},
'confirm-elimination': function() {
if (application_state.websocket_connection) {
application_state.websocket_connection.emit('confirm_elimination');
}
modify_modal_state('verification-modal', false);
},
'reject-elimination': function() {
if (application_state.websocket_connection) {
application_state.websocket_connection.emit('reject_elimination');
}
modify_modal_state('verification-modal', false);
},
'acknowledge-rejection': function() { modify_modal_state('rejection-modal', false); },
'trigger-name-change-modal': function() { modify_modal_state('name-change-modal', true); },
'cancel-name-change-modal': function() { modify_modal_state('name-change-modal', false); },
'trigger-help-modal': function() { modify_modal_state('help-modal', true); },
'close-help-modal': function() { modify_modal_state('help-modal', false); },
'copy-identifier-button': function(button_element) {
const identifier = button_element.getAttribute('data-identifier');
write_text_to_clipboard(identifier);
const icon = button_element.querySelector('i, svg');
if (icon) {
icon.setAttribute('data-lucide', 'check');
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
}
},
'confirm-admin-action': function() {
if (application_state.pending_administrator_form) {
const time_input = document.getElementById('modal_execution_time');
if (time_input && time_input.value) {
let hidden_input = application_state.pending_administrator_form.querySelector('input[name="execution_time"]');
if (!hidden_input) {
hidden_input = document.createElement('input');
hidden_input.type = 'hidden';
hidden_input.name = 'execution_time';
application_state.pending_administrator_form.appendChild(hidden_input);
}
hidden_input.value = time_input.value;
} else {
const hidden_input = application_state.pending_administrator_form.querySelector('input[name="execution_time"]');
if (hidden_input) {
hidden_input.remove();
}
}
execute_asynchronous_form_submission(application_state.pending_administrator_form);
application_state.pending_administrator_form = null;
modify_modal_state('admin-confirmation-modal', false);
}
},
'cancel-admin-action': function() {
application_state.pending_administrator_form = null;
modify_modal_state('admin-confirmation-modal', false);
}
};
for (const [identifier, action_function] of Object.entries(action_mapping)) {
const button = target_element.closest('#' + identifier);
if (button) {
action_function(button);
return;
}
}
}
function handle_global_submits(submit_event) {
const target_form = submit_event.target;
if (target_form.classList.contains('asynchronous-form')) {
submit_event.preventDefault();
execute_asynchronous_form_submission(target_form);
} else if (target_form.classList.contains('admin-asynchronous-form')) {
submit_event.preventDefault();
application_state.pending_administrator_form = target_form;
const time_input = document.getElementById('modal_execution_time');
if (time_input) {
time_input.value = '';
}
modify_modal_state('admin-confirmation-modal', true);
}
}
/* --- Initialisierung --- */
document.addEventListener('DOMContentLoaded', function() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service_worker.js').catch(function(error_object) {
console.error('Service Worker Registration failed:', error_object);
});
}
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
if (application_state.stopwatch_interval_identifier) {
clearInterval(application_state.stopwatch_interval_identifier);
}
application_state.stopwatch_interval_identifier = setInterval(update_game_stopwatch_ui, 1000);
update_game_stopwatch_ui();
document.addEventListener('click', handle_global_clicks);
document.addEventListener('submit', handle_global_submits);
if (typeof io !== 'undefined') {
application_state.websocket_connection = io();
application_state.websocket_connection.on('game_state_changed', function() {
if (document.querySelector('.game-section') || document.querySelector('.administrator-section')) {
fetch_and_synchronize_dom();
}
});
application_state.websocket_connection.on('admin_state_changed', function() {
if (document.querySelector('.administrator-section')) {
fetch_and_synchronize_dom();
}
});
application_state.websocket_connection.on('elimination_verification_requested', function() {
fetch_and_synchronize_dom();
setTimeout(function() {
modify_modal_state('verification-modal', true);
}, 50);
});
application_state.websocket_connection.on('elimination_rejected', function() {
modify_modal_state('rejection-modal', true);
});
application_state.websocket_connection.on('elimination_revoked', function() {
modify_modal_state('verification-modal', false);
fetch_and_synchronize_dom();
});
}
});
static/logo.svg
+9 -2
View File
@@ -1,2 +1,9 @@
<?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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="465 137 354 385" width="354" height="385">
<style>
path {
fill: hsl(60 60% 60%);
fill: oklch(85% 0.15 110);
}
</style>
<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"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 747 B

After

Width:  |  Height:  |  Size: 718 B

static/stylesheet.css
+368 -259
View File
@@ -1,443 +1,552 @@
:root {
--lightness-primary: 0.35;
--chroma-primary: 0.15;
--hue-primary: 15;
--fallback-primary: hsl(15, 80%, 45%);
--fallback-background: hsl(15, 20%, 95%);
--fallback-surface: hsl(0, 0%, 100%);
--fallback-text: hsl(250, 20%, 15%);
--fallback-static-white: hsl(0, 0%, 100%);
--fallback-static-black: hsl(250, 20%, 15%);
--fallback-text-inverted: hsl(0, 0%, 100%);
--fallback-success: hsl(140, 50%, 45%);
--fallback-danger: hsl(25, 80%, 50%);
--fallback-warning: hsl(50, 90%, 65%);
--fallback-border: hsla(250, 20%, 15%, 0.2);
--fallback-border-light: hsla(250, 20%, 15%, 0.1);
--fallback-primary-transparent: hsla(15, 80%, 45%, 0.1);
--fallback-shadow-primary: hsla(15, 80%, 45%, 0.3);
--fallback-overlay: rgba(0, 0, 0, 0.6);
--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));
--lightness-primary: 0.35;
--chroma-primary: 0.15;
--hue-primary: 15;
--lightness-background: 0.95;
--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-static-white: 1;
--chroma-static-white: 0;
--hue-static-white: 0;
--lightness-static-black: 0.15;
--chroma-static-black: 0.05;
--hue-static-black: 250;
--lightness-text-inverted: 1;
--chroma-text-inverted: 0;
--hue-text-inverted: 0;
--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.85;
--chroma-warning: 0.15;
--hue-warning: 80;
--dimension-multiplier: 1;
--spacing-scale-base: 0.25rem;
--spacing-small: calc(var(--spacing-scale-base) * 2 * var(--dimension-multiplier));
--spacing-medium: calc(var(--spacing-scale-base) * 4 * var(--dimension-multiplier));
--spacing-large: calc(var(--spacing-scale-base) * 6 * 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-primary: 0.65;
--chroma-primary: 0.20;
:root {
--fallback-primary: hsl(15, 80%, 60%);
--fallback-background: hsl(250, 15%, 15%);
--fallback-surface: hsl(250, 15%, 20%);
--fallback-text: hsl(250, 20%, 90%);
--fallback-text-inverted: hsl(0, 0%, 0%);
--fallback-border: hsla(250, 20%, 90%, 0.2);
--fallback-border-light: hsla(250, 20%, 90%, 0.1);
--fallback-primary-transparent: hsla(15, 80%, 60%, 0.1);
--fallback-shadow-primary: hsla(15, 80%, 60%, 0.3);
--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;
--lightness-background: 0.15;
--chroma-background: 0.02;
--lightness-surface: 0.20;
--chroma-surface: 0.02;
--lightness-text: 0.90;
--chroma-text: 0.02;
--lightness-text-inverted: 0;
--chroma-text-inverted: 0;
--hue-text-inverted: 0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0s !important;
animation-duration: 0s !important;
}
* {
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;
background-color: var(--fallback-background);
background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
color: var(--fallback-text);
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;
transition: background-color 0.3s ease, color 0.3s ease;
}
.brand-link {
text-decoration: none;
color: inherit;
display: block;
transition: opacity 0.2s ease;
}
.brand-link:hover {
opacity: 0.8;
}
.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;
background-color: var(--fallback-primary);
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
color: var(--fallback-text-inverted);
color: oklch(var(--lightness-text-inverted) var(--chroma-text-inverted) var(--hue-text-inverted));
padding: var(--spacing-medium) var(--spacing-large);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px var(--fallback-border-light);
box-shadow: 0 4px 12px oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.brand-container {
display: flex;
align-items: center;
gap: var(--spacing-small);
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;
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;
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;
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);
background-color: var(--fallback-surface);
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 var(--fallback-border-light), 0 8px 10px -6px var(--fallback-border-light);
box-shadow: 0 10px 25px -5px oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.05), 0 8px 10px -6px oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.01);
margin-bottom: var(--spacing-large);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.section-title {
margin-top: 0;
margin-bottom: var(--spacing-medium);
display: flex;
align-items: center;
gap: var(--spacing-small);
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;
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);
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.inline-form {
display: inline-block;
display: inline-block;
}
.flexible_form_container {
display: flex;
gap: calc(0.5rem * var(--dimension-multiplier));
align-items: center;
flex-wrap: wrap;
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));
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));
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;
padding: var(--spacing-medium);
border: 2px solid var(--fallback-border);
border: 2px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.2);
border-radius: var(--border-radius-small);
background-color: var(--fallback-background);
background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
color: inherit;
font-size: inherit;
transition: border-color 0.2s ease, background-color 0.3s ease;
}
.text-input:focus {
outline: none;
border-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
outline: none;
border-color: var(--fallback-primary);
border-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}
.small-input {
width: calc(12rem * var(--dimension-multiplier));
padding: var(--spacing-small);
width: calc(12rem * var(--dimension-multiplier));
padding: var(--spacing-small);
}
.time-input {
width: calc(13rem * var(--dimension-multiplier));
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);
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: var(--fallback-text-inverted);
color: oklch(var(--lightness-text-inverted) var(--chroma-text-inverted) var(--hue-text-inverted));
}
.action-button:hover, .action-button:focus {
filter: brightness(1.1);
transform: translateY(-1px);
filter: brightness(1.1);
transform: translateY(-1px);
}
.icon-button {
padding: calc(0.5rem * var(--dimension-multiplier));
border-radius: var(--border-radius-small);
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);
background-color: var(--fallback-primary);
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
box-shadow: 0 4px 12px var(--fallback-shadow-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));
background-color: var(--fallback-success);
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));
background-color: var(--fallback-danger);
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);
background-color: var(--fallback-warning);
background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
color: var(--fallback-static-black);
color: oklch(var(--lightness-static-black) var(--chroma-static-black) var(--hue-static-black));
}
.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);
background-color: transparent;
color: var(--fallback-text);
color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
border: 2px solid var(--fallback-border);
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%;
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));
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;
display: flex;
background-color: var(--fallback-surface);
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 var(--fallback-border-light);
box-shadow: 0 4px 12px oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 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);
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);
background-color: var(--fallback-primary);
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
color: var(--fallback-text-inverted);
color: oklch(var(--lightness-text-inverted) var(--chroma-text-inverted) var(--hue-text-inverted));
box-shadow: 0 2px 8px var(--fallback-border-light);
box-shadow: 0 2px 8px oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.15);
}
.tab-content {
display: none;
display: none;
}
.active-content {
display: block;
display: block;
animation: fade-in 0.3s ease-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(calc(0.25rem * var(--dimension-multiplier))); }
to { opacity: 1; transform: translateY(0); }
}
.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);
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: var(--fallback-static-white);
color: oklch(var(--lightness-static-white) var(--chroma-static-white) var(--hue-static-white));
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);
background-color: var(--fallback-warning);
background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
color: var(--fallback-static-black);
color: oklch(var(--lightness-static-black) var(--chroma-static-black) var(--hue-static-black));
}
.success-pill {
background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
background-color: var(--fallback-success);
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));
background-color: var(--fallback-danger);
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));
border-left: calc(0.375rem * var(--dimension-multiplier)) solid var(--fallback-primary);
border-left: calc(0.375rem * var(--dimension-multiplier)) 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));
border-left-color: var(--fallback-danger);
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));
border-left-color: var(--fallback-success);
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));
border-left-color: var(--fallback-warning);
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;
font-size: calc(2.5rem * var(--dimension-multiplier));
text-align: center;
margin: var(--spacing-large) 0;
color: var(--fallback-primary);
color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
font-weight: 800;
}
.data-table {
width: 100%;
border-collapse: collapse;
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;
padding: var(--spacing-medium);
border-bottom: 1px solid var(--fallback-border-light);
border-bottom: 1px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 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;
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);
background-color: var(--fallback-primary-transparent);
background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary) / 0.1);
}
.highlighted-row td {
font-weight: bold;
font-weight: bold;
}
.unregistered-row {
opacity: 0.6;
opacity: 0.6;
}
.markdown-container h1, .markdown-container h2, .markdown-container h3 {
color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
color: var(--fallback-primary);
color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}
.markdown-container ul {
padding-left: var(--spacing-large);
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;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--fallback-overlay);
background-color: oklch(0 0 0 / 0.6);
backdrop-filter: blur(4px);
justify-content: center;
align-items: center;
z-index: 1000;
}
.active-modal {
display: flex;
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);
background-color: var(--fallback-surface);
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 var(--fallback-border);
box-shadow: 0 20px 40px oklch(0 0 0 / 0.2);
}
.modal-title {
margin-top: 0;
display: flex;
align-items: center;
gap: var(--spacing-small);
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);
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);
background-color: var(--fallback-static-white);
background-color: oklch(var(--lightness-static-white) var(--chroma-static-white) var(--hue-static-white));
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 var(--fallback-border-light);
box-shadow: inset 0 0 0 2px oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.1);
}
.qr-code-container svg {
display: block;
width: calc(14rem * var(--dimension-multiplier));
height: calc(14rem * var(--dimension-multiplier));
display: block;
width: calc(14rem * var(--dimension-multiplier));
height: calc(14rem * var(--dimension-multiplier));
}
.qr-code-container svg path {
fill: var(--fallback-static-black);
fill: oklch(var(--lightness-static-black) var(--chroma-static-black) var(--hue-static-black));
}
.monospace-identifier {
font-family: monospace;
font-family: monospace;
}