mirror of
https://github.com/pezkuwichain/pezkuwi-apps.git
synced 2026-04-22 04:17:58 +00:00
pezkuwichain
67d71e128d
- Add ui-settings resolution for v3.16.9 - Add CSS variables for dark/light themes in GlobalStyle - Set default data-theme attribute on html element - Simplify theme creation in Root.tsx - Disable webpack error overlay for cleaner dev experience
139 lines
4.5 KiB
HTML
139 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="theme-color" content="#000000">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
|
|
<script type="text/javascript" src="env-config.js"></script>
|
|
<style>
|
|
:root {
|
|
--font-mono: 0.889em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
|
|
--font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
|
|
/*
|
|
From https://www.modularscale.com/?1&rem&1.125 and https://type-scale.com/ -
|
|
1.125 (8:9) factor: 1.424rem, 1.266rem, 1.125rem, 1rem, 0.889rem, 0.79rem
|
|
*/
|
|
--font-percent-small: 88.9%;
|
|
--font-percent-tiny: 79.0%;
|
|
--font-size-base: 1rem;
|
|
--font-size-h1: 1.424rem;
|
|
--font-size-h2: 1.266rem;
|
|
--font-size-h3: 1.125rem;
|
|
--font-size-small: 0.889rem;
|
|
--font-size-tiny: 0.79rem;
|
|
|
|
--font-weight-bold: 600; /* semi */
|
|
--font-weight-light: 200;
|
|
--font-weight-normal: 400;
|
|
|
|
--opacity-light: 0.6;
|
|
|
|
--width-full: 1750px;
|
|
--width-half: 875px;
|
|
--width-shortaddr: 6.5em;
|
|
--width-shorthash: 9em;
|
|
|
|
--font-weight-header: var(--font-weight-normal);
|
|
--font-size-label: var(--font-size-small);
|
|
--font-weight-label: var(--font-weight-bold);
|
|
--text-transform-label: lowercase;
|
|
|
|
--bg-menu-hover: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-identicon-circle: #282829;
|
|
--bg-input: #38393f;
|
|
--bg-input-error: #48393f;
|
|
--bg-inverse: rgba(78, 78, 78, 0.66);
|
|
--bg-menu: #26272c;
|
|
--bg-page: #26272c;
|
|
--bg-table: #3b3d3f;
|
|
--bg-tabs: #38393f;
|
|
--bg-toggle: #58595f;
|
|
--bg-sidebar: #1a1b20;
|
|
--bg-static-extra: rgba(200, 200, 200, 0.1);
|
|
--border-identicon: transparent;
|
|
--border-input: rgba(234, 236, 238, .15);
|
|
--border-table: #343536;
|
|
--border-tabs: #343536;
|
|
--color-bounty-info: #8E8E8E;
|
|
--color-checkbox: rgba(78, 78, 78, 0.66);
|
|
--color-error: rgba(255, 83, 83, 0.8);
|
|
/* --color-header: rgba(244, 242, 240, 0.8); */
|
|
/* --color-label: rgba(244, 242, 240, 0.45); */
|
|
/* --color-summary: rgba(244, 242, 240, 0.75); */
|
|
/* --color-table-foot: rgba(254, 240, 240, 0.66); */
|
|
/* --color-table-head: rgba(254, 240, 240, 0.8); */
|
|
--color-text: rgba(244, 242, 240, 0.8);
|
|
--opacity-gray: 0.1;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-identicon-circle: #eee;
|
|
--bg-input: #ffffff;
|
|
--bg-input-error: #fff6f6;
|
|
--bg-inverse: rgba(244, 242, 240, 0.91);
|
|
--bg-menu: #ffffff;
|
|
--bg-page: #f5f3f1;
|
|
--bg-table: #ffffff;
|
|
--bg-tabs: #ffffff;
|
|
--bg-toggle: #e4e5e6;
|
|
--bg-sidebar: #fafafa;
|
|
--bg-static-extra: rgba(200, 200, 200, 0.1);
|
|
--border-identicon: #ddd;
|
|
--border-input: rgba(34, 36, 38, .15);
|
|
--border-table: #efedeb;
|
|
--border-tabs: #f1efed;
|
|
--color-bounty-info: #4D4D4D;
|
|
--color-checkbox: rgba(34, 36, 38, 0.15);
|
|
--color-error: rgba(139, 0, 0);
|
|
/* --color-header: rgba(78, 78, 78, 0.8); */
|
|
/* --color-label: rgba(78, 78, 78, 0.66); */
|
|
/* --color-summary: rgba(78, 78, 78, 0.66); */
|
|
/* --color-table-foot: rgba(78, 78, 78, 0.66); */
|
|
/* --color-table-head: rgba(78, 78, 78, 0.8); */
|
|
--color-text: rgba(78, 78, 78, 0.8); /* 1 */
|
|
--opacity-gray: 0.75;
|
|
}
|
|
|
|
.--absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
.--digits {
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.--relative {
|
|
position: relative;
|
|
}
|
|
|
|
.--tmp {
|
|
background: grey;
|
|
filter: blur(2px);
|
|
opacity: 0.15;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
<div id="root"></div>
|
|
<div id="tooltips"></div>
|
|
<script>
|
|
if (window.self !== window.top) {
|
|
window.top.location.href = window.location.href;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|