config.css

/*
* Copyright (c) Sebastian Kucharczyk <kuchen@kekse.biz>
* https://kekse.biz/ https://github.com/kekse1/v4/
*/

:root
{
	--copyright: url('COPYRIGHT.txt');
	--license: url('LICENSE.txt');
	--favicon: url('favicon.png');
	--index: 'main';
	--home: 'home';
}

:root
{
	--abort-method: 'stop';/*try out! also possible: 'cancel', 'stop', 'finish', ...*/
	--method: add;
	--font-size: 14px;
	--font-size-mobile: 12px;
	--animate: auto;/* global disable here; .. also possible in the elements itself. */
	--easing: linear;/*ease-in-out;*//* linear; then set --speed = ~1.5; w/ ease-in-out better ~1.0; ... */
	--scale: none;/* a boolean or a number of minimum scaled duration */
	--speed: 1.42;
	--global: 1.8;
	--duration: 1000;
	--duration-show: 1080;
	--duration-hide: 800;
	--duration-blink: 600;
	--duration-toggle: 1100;
	--delay: 0;
	--delay-each: 60;
	--delay-each-hide: 40;
	--delay-start: 0;
	--force-animation: none;
	--resize-timeout: 160;
	--dead-timeout: 600000;
	--center-x: none;
	--center-y: none;
	--duration-center: 480;
	--position: arrange; /* arrange|move */
	--duration-pulse: 600;
	--pulse-colorization: complement;/*[contrast,complement]*/
	--toggle: none;
	--toggle-axes: xy;
}

:root
{
	--console-log: '';
	--console-info: 'color: rgb(50, 90, 20);';
	--console-warn: 'color: rgb(110, 70, 20); font-weight: bold;';
	--console-error: 'color: rgb(130, 30, 30); font-weight: bold;';
	--console-debug: 'color: rgb(30, 90, 150);';
}

button
{
	--toggle: 'half';/* [ `half`, `full` ]; */
	--duration-toggle: 900;
}

a-dialog-button, .a-dialog-button
{
	--toggle: none;
}

#BUTTON
{
	--duration-toggle: 2400;
}

#MAIN
{
	--top-space: 56px;
	--top-space-text: 4;
	--bottom-space: 384px;
	--bottom-space-text: 16;
}

#TOC
{
	--auto-scroll: auto;
	--min-headings: 3;
}

:root
{
	--sidebars: none;
}

:root
{
	--wallpaper-speed: 1.25;
	/*--wallpaper-background: rgba(220, 230, 240, 0.5) 0%, rgba(180, 190, 200, 0.5) 25%, rgba(140, 150, 160, 0.5) 50%, rgba(100, 110, 120, 0.5) 75%, rgba(60, 70, 80, 0.5) 100%;*/
	--wallpaper-background: rgba(255, 190, 0, 0.8) 0%, rgba(170, 190, 210, 0.8) 20%, rgba(140, 160, 180, 0.8) 50%, rgba(110, 130, 150, 0.8) 75%, rgba(80, 100, 120, 0.8) 100%;
	--vibration-speed: 3;
	--vibration-interval: 0.369;
	--vibration-dot: '.';
	--vibration-opacity: 0.1;
}

#MAIN
{
	--wallpaper: auto;
	--wallpaper-speed: 1;
	--wallpaper-background: rgba(200, 220, 240, 0.64) 0%, rgba(170, 190, 210, 0.64) 25%, rgba(140, 160, 180, 0.64) 50%, rgba(110, 130, 150, 0.64) 75%, rgba(80, 100, 120, 0.64) 100%;
}

#MENU
{
	--wallpaper-background: rgba(200, 220, 240, 0.8) 0%, rgba(170, 190, 210, 0.8) 20%, rgba(140, 160, 180, 0.8) 50%, rgba(110, 130, 150, 0.8) 75%, rgba(255, 190, 0, 0.8) 100%;
}

a-help, .a-help
{
	--wallpaper-background: rgba(255, 190, 0, 0.8) 0%, rgba(170, 190, 210, 0.8) 20%, rgba(140, 160, 180, 0.8) 50%, rgba(110, 130, 150, 0.8) 75%, rgba(80, 100, 120, 0.8) 100%;
}

#MENU
{
	--wallpaper: auto;
	--wallpaper-speed: 1.2;
}

:root
{
	--github-sort: updated desc;
	--github-index: 'README.md';
	--github: url('https://github.com/');
	--github-blob: url('https://github.com/${user}/${repo}/blob/git/${path}');
	--github-raw: url('https://raw.githubusercontent.com/%{user}/%{repo}/master/%{path}');
	--github-repo: url('https://github.com/%{user}/%{repo}');
	--github-api-repo: url('https://api.github.com/users/%{user}/repos');
	--github-api-markdown: url('https://api.github.com/markdown');
	--github-hostname-api: 'api.github.com';
	--github-hostname-raw: 'raw.githubusercontent.com';
}

:root
{
	--unit-base: 1024;
}

li.OSD
{
	--speed: 1;
	--refresh: 800;/*important, maybe..!*/
	--clear: none;
	--scale: none;
	--timeout: 1900;
	--timeout-speed: 1.5;
	--duration: 900;
	--duration-blink: 340;
	--font-size: 2.5rem;
	--font-size-mobile: 1.75rem;
	--text: none;
	--space: 12px;
	--space-top-add: 32px;
}

div#OSDInfo
{
	--duration: 800;
}

li.OSD
{
	--duration: 800;
}

:root
{
	--lottie-player: url('https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js');
}

#MENU
{
	--data-json: url('json/menu.json');
}

.menuItem
{
	--scale: none;
}

#MAIN
{
	--threshold: 420px;
	--threshold-toc: 1.4;
	--max-file-size: 1048576;
}

#MENU, #TOC, #MAIN
{
	--method: set;
	--speed: 0.7;
	--duration-each: 400;
	--easing: linear;
	--delay-each: 36;
	--delay-start: 600;
}

#MAIN
{
	--duration-blink: 900;
	--duration-each: 300;
}

#MENU, #TOC
{
	--duration-blink: 1200;
}

#MAIN
{
	--duration-data: 1400;
}

#MENU
{
	--delay-init: 1011;
}

#TOC
{
	--delay-each: 100;
	--delay-each-hide: 30;
}

#STATE
{
	--duration: 1200;
	--delay-each: 800;
}

#countState
{
	--url: url('php/count.php');
	--refresh: 30000;
	--duration: 520;
	--duration-blink: 800;
	--scale: none;
}

#updateState
{
	--url: url('status/update.now');
	--refresh: 60000;
	--duration: 520;
	--duration-blink: 800;
}

#versionUpdateState
{
	--url: url('status/version.now');
	--refresh: 120000;
	--duration: 520;
	--duration-blink: 800;
}

#INFO
{
	--duration: 900;
	--easing: linear;
}

#TOC
{
	--resize-timeout: 40;
	--scroll-timeout: 40;
}

:root
{
	--url-everything: none;
	--url-container: auto;
	--url-brackets: none;

	--url-style-protocol: 'font-size: 0.9em;';
	--url-style-protocol-sep: 'font-size: 0.93em;';
	--url-style-hostname: 'font-size: 1.14em; font-weight: bold;';
	--url-style-port: 'font-size: 0.99em;';
	--url-style-pathname: 'font-size: 1.14em;';
	--url-style-pathname-base: 'text-decoration: underline;';
	--url-style-search: 'font-size: 1.12em;';
	--url-style-hash: 'font-size: 1.08em;';
	--url-style-param: 'font-size: 1.16em;';
}

div#loadProgressCarrier
{
	--resize-timeout: 90;
}

a-progress, .a-progress
{
	--animation: sigmoid;/* [ linear, sigmoid ]; */
	--relay-method: stop;
	--size: 256px;
	/*--width: 384px;
	--height: 32px;*/
	--round: 1;
	--block: none;
	--sub-blocks: 6px;
	--sub-block-space: 9px;
	--marquee: none;
	--center-x: auto;
	--center-y: auto;
	--day-percent: none;
	--help: auto;
	--draw-time: auto;
	--draw-text: auto;
	--draw-ticks: auto;
	--resize-timeout: 90;
	--duration: 360;
	--duration-resize: 1400;
	--fill-style: rgba(100, 120, 140, 0.5);
	--fill-style-percent: rgba(90, 110, 130, 0.5);
	--stroke-style-percent: rgb(240, 190, 10);
	--fill-style-block: rgba(160, 170, 20, 0.6);
	--fill-style-percent-block: rgba(100, 140, 20, 0.7);
	--stroke-style-percent-block: rgba(20, 120, 170, 0.25);
	--line-width-block: 0.4;
	--line-width-percent: 1.7;
	--line-width-percent-arc: 0.5;
	--text-fill: rgb(230, 240, 250);
	--text-stroke: rgb(60, 70, 80);
	--text-line-width: 1.4;
	--arc-space: 8px;
	--hour-color: rgb(210, 120, 30);
	/*--hour-line: 5.4;*/
	--hour-line: 9;
	--hour-length: 0.45;
	--minute-color: rgb(50, 120, 200);
	/*--minute-line: 3.4;*/
	--minute-line: 5;
	--minute-length: 0.75;
	--second-color: rgb(110, 190, 40);
	/*--second-line: 2.4;*/
	--second-line: 3;
	--second-length: 1.00;
	--percent-color: rgb(240, 200, 20);
	--tick-outer-radius: 0.015;/* can also be 'px', etc.. */
	--tick-outer-position: 0.96;/* can also be 'px', etc.. */
	--tick-outer-color: rgba(240, 240, 240, 0.8);
	--tick-inner-radius: 0.02;
	--tick-inner-position: 0.85;
	--tick-inner-color: rgba(96, 96, 96, 0.8);
	--resize-linear: none;
	--block-space: 4px;
	--block-background-color: rgba(210, 230, 250, 0.6);
	--draw-zero: none;
	--draw-text-zero: none;
	--help-value-pad: auto;
	--vertical: none;
	--min: 0;
	--max: 100;
	--percent: 0;
}

#CLOCK, .clock, #SCROLL, .scroll
{
	--center-x: none;
	--center-y: none;
	--duration: 1200;
	--duration-resize: 1200;
	--scale-factor: 0.92;
	--speed: 0.75;
	--size: 144px;
	--size-mobile: 96px;
	--block: none;
}

#CLOCK, .clock
{
	--round: 3;
	--draw-time: auto;
	--day-percent: auto;
	--draw-text: none;
	--size: 144px;
	--size-mobile: 96px;
}

#SCROLL, .scroll
{
	--stroke-style-percent: rgba(150, 100, 10, 0.9);
	--round: 0;
	--fill-style: rgba(160, 180, 30, 0.4);
	--fill-style-percent: rgba(110, 120, 30, 0.4);
	--text-fill: rgb(110, 120, 30);
	--day-percent: none;
	--draw-time: none;
	--draw-text: auto;
	--size: 96px;
	--size-mobile: 80px;
	--text-fill: rgb(230, 240, 120);
	--text-stroke: rgba(30, 50, 70, 0.75);
	--text-line-width: 1;
}

.loadProgressStart, .loadProgress
{
	--stroke-style-percent: rgb(160, 210, 40);
	--second-color: rgb(210, 170, 40);
	--second-line: 3.4;
	--line-width-percent: 2.75;
	--fill-style: rgba(50, 110, 150, 0.5);
	--fill-style-percent: rgba(50, 110, 150, 0.75);
	--duration: 440;
	--method: set;
	--draw-time: auto;
	--draw-text: auto;
	--block: none;
	--draw-zero: auto;
	--draw-text-zero: auto;
}

.loadProgressStart
{
	--center-x: none;
	--center-y: none;
	--size: 50%;
}

.loadProgress
{
	--size: 0;
	--block: none;
	--center-x: auto;
	--center-y: auto;
	--height: 50;
}

.loadProgress, .loadProgressInfo
{
	--block: auto;
	--space-between: 8px;
	--duration: 1800;
	--duration-show: 800;
	--duration-hide: 600;
}

.loadProgressPage
{
	--block: none;
}

.loadProgressFetching
{
}

.loadProgressInfo
{
	--center-x: auto;
	--center-y: none;
}

#summaryProgress
{
	--block: none;
	--space-between: 16px;
	--draw-zero: auto;
	--draw-text-zero: auto;
	--round: 1;
	--draw-text: auto;
	--draw-time: auto;
	--size: 240px;
	--duration-show: 2600;
	--duration-hide: 1600;
	--center-x: none;
	--center-y: none;
}

div.loadProgressSummary
{
	--duration-show: 1900;
	--duration-hide: 1300;
}

span.loadProgressPercent
{
	--round: 1;
}

:root
{
	--date: best;/*default|text|..*/

	--date-now: '%h:%m:%s.%S';
	--date-time: '%h:%m:%s';
	--date-date: '%Y-%M-%D';
	--date-default: '%Y-%M-%D (%h:%m:%s)';
	--date-best: '%Y-%M-%D (%h:%m:%s.%S)';
	--date-console: '%Y-%M-%D %h:%m:%s.%S';
	--date-full: '%W, %Y-%M-%D (%h:%m:%s)';
	--date-text: '%w, %D. %n %Y (%h:%m:%s)';
	--date-text-full: '%W, %D. %N %Y (%h:%m:%s.%S)';
	--date-year: '%d, %w';
	--date-year-full: '%d, %W';
	--date-ms: '%X';
	--date-unix: '%x';
	--date-gmt: '%G';
	--date-utc: '%U';
}

a-dialog, .a-dialog
{
	--duration: 500;
	--center-x: auto;
	--center-y: auto;
	--timeout: 0;
	--wallpaper: auto;
	--movable: auto;
}

a-dialog, .a-dialog
{
	--duration: 900;
	--delay-each: 280;
}

.a-dialog-button, .a-dialog-button-area, .a-dialog-countdown, .a-dialog-input
{
	--center-x: none;
	--center-y: none;
}

.a-dialog-button-area
{
	--duration: 400;
	--space: 28px;
}

.a-dialog-button, .a-dialog-countdown, .a-dialog-input
{
	--duration: 900;
	--delay-each: 280;
}

a-help, .a-help
{
	--speed: 1;
	--scale: 720;
	--duration-show: 1300;
	--duration-hide: 1100;
	--duration-move: 480;
	--position: arrange; /* arrange/move */
	--duration-style: 600;/*TODO yet!!!*/
	--easing: linear;
	--wallpaper: auto;
	--wallpaper-speed: 1.6;
}

a-github-box, .a-github-box
{
	--duration-show: 1100;
	--duration-hide: 700;
	--duration-blink: 600;
	--duration-measure: 360;
	--space: 20px;
	--delay-each: 140;
}

a-box, .a-box, .box
{
	--center-x: none;
	--center-y: none;
	--position: move;
	--wallpaper: auto;
	--position: arrange; /* arrange/move */
}

#news
{
	--max-age: 2419200000; /* in milliseconds; here: one month (1000*60*60*24*7*4); */
}

a-gallery, .a-gallery
{
}

a-index, .a-index
{
}