Archived
Polish KarlDNS production UI and docs
This commit is contained in:
StasonJatham committed
1 parent
ca92dc211a
commit
5beee0e5c6
61 files changed
+1566
-523
No files matched your search
+179
-119
@@ -1,6 +1,6 @@
|
||||
from __future__ import annotations
|
||||
|
||||
APP_CSS = """
|
||||
BASE_CSS = """
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bs-primary: #000000;
|
||||
@@ -70,6 +70,10 @@ body {
|
||||
font: 400 16px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--rp-ink);
|
||||
}
|
||||
|
||||
.justify-items-center {
|
||||
justify-items: center;
|
||||
}
|
||||
@@ -158,7 +162,29 @@ body {
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
min-width: 58px;
|
||||
align-items: center;
|
||||
aspect-ratio: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.theme-icon-sun {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .theme-icon-moon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .theme-icon-sun {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-band {
|
||||
@@ -367,9 +393,9 @@ input:focus,
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
padding-inline: 14px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
padding-inline: 16px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
@@ -424,9 +450,13 @@ select:focus-visible {
|
||||
.btn-outline-danger {
|
||||
--bs-btn-color: var(--rp-danger);
|
||||
--bs-btn-border-color: var(--rp-line);
|
||||
--bs-btn-bg: var(--rp-field);
|
||||
--bs-btn-hover-color: #ffffff;
|
||||
--bs-btn-hover-bg: var(--rp-danger);
|
||||
--bs-btn-hover-border-color: var(--rp-danger);
|
||||
--bs-btn-active-color: #ffffff;
|
||||
--bs-btn-active-bg: var(--rp-danger);
|
||||
--bs-btn-active-border-color: var(--rp-danger);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
@@ -461,6 +491,10 @@ select:focus-visible {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.alert code {
|
||||
color: var(--rp-ink);
|
||||
}
|
||||
|
||||
.copy-field {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
@@ -538,53 +572,6 @@ select:focus-visible {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.admin-table-scroll {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
background: var(--rp-surface);
|
||||
border-color: var(--rp-line) !important;
|
||||
border-radius: 16px !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.admin-table-scroll thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--rp-surface-alt);
|
||||
}
|
||||
|
||||
.table-page-size {
|
||||
width: auto;
|
||||
min-width: 76px;
|
||||
}
|
||||
|
||||
.admin-table-shell .form-control {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.status-table-shell {
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--rp-line);
|
||||
border-radius: 16px;
|
||||
background: var(--rp-surface);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
--bs-pagination-color: var(--rp-muted);
|
||||
--bs-pagination-bg: var(--rp-surface);
|
||||
--bs-pagination-border-color: var(--rp-line);
|
||||
--bs-pagination-hover-color: var(--rp-ink);
|
||||
--bs-pagination-hover-bg: var(--rp-field);
|
||||
--bs-pagination-hover-border-color: var(--rp-line);
|
||||
--bs-pagination-active-color: #ffffff;
|
||||
--bs-pagination-active-bg: #000000;
|
||||
--bs-pagination-active-border-color: #000000;
|
||||
--bs-pagination-disabled-color: var(--rp-mute);
|
||||
--bs-pagination-disabled-bg: var(--rp-surface);
|
||||
--bs-pagination-disabled-border-color: var(--rp-line);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 32px 0;
|
||||
background: var(--rp-canvas);
|
||||
@@ -594,64 +581,6 @@ select:focus-visible {
|
||||
color: var(--rp-ink) !important;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--rp-ink);
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-color: var(--rp-ink);
|
||||
--bs-table-border-color: var(--rp-soft-line);
|
||||
--bs-table-hover-bg: var(--rp-field);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid var(--rp-soft-line);
|
||||
padding: 14px 10px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
max-width: 38rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-table {
|
||||
min-width: min(100%, 420px);
|
||||
}
|
||||
|
||||
.status-table th,
|
||||
.status-table td {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
tr:last-child th,
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--rp-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: var(--rp-surface-alt);
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--rp-muted);
|
||||
text-align: center;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.section,
|
||||
.hero-band {
|
||||
@@ -750,6 +679,146 @@ th {
|
||||
border-radius: 0 0 14px 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
""".strip()
|
||||
|
||||
|
||||
ADMIN_CSS = """
|
||||
.metric-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--rp-line);
|
||||
border-radius: 16px;
|
||||
background: var(--rp-surface);
|
||||
}
|
||||
|
||||
.metric-card span {
|
||||
color: var(--rp-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
color: var(--rp-ink);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-table-scroll {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
background: var(--rp-surface);
|
||||
border-color: var(--rp-line) !important;
|
||||
border-radius: 16px !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.admin-table-scroll thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--rp-surface-alt);
|
||||
}
|
||||
|
||||
.table-page-size {
|
||||
width: auto;
|
||||
min-width: 76px;
|
||||
}
|
||||
|
||||
.admin-table-shell .form-control {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.status-table-shell {
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--rp-line);
|
||||
border-radius: 16px;
|
||||
background: var(--rp-surface);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
--bs-pagination-color: var(--rp-muted);
|
||||
--bs-pagination-bg: var(--rp-surface);
|
||||
--bs-pagination-border-color: var(--rp-line);
|
||||
--bs-pagination-hover-color: var(--rp-ink);
|
||||
--bs-pagination-hover-bg: var(--rp-field);
|
||||
--bs-pagination-hover-border-color: var(--rp-line);
|
||||
--bs-pagination-active-color: #ffffff;
|
||||
--bs-pagination-active-bg: #000000;
|
||||
--bs-pagination-active-border-color: #000000;
|
||||
--bs-pagination-disabled-color: var(--rp-mute);
|
||||
--bs-pagination-disabled-bg: var(--rp-surface);
|
||||
--bs-pagination-disabled-border-color: var(--rp-line);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--rp-ink);
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-color: var(--rp-ink);
|
||||
--bs-table-border-color: var(--rp-soft-line);
|
||||
--bs-table-hover-bg: var(--rp-field);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid var(--rp-soft-line);
|
||||
padding: 14px 10px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
max-width: 38rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-table {
|
||||
min-width: min(100%, 420px);
|
||||
}
|
||||
|
||||
.status-table th,
|
||||
.status-table td {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
tr:last-child th,
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--rp-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: var(--rp-surface-alt);
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--rp-muted);
|
||||
text-align: center;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.admin-table-shell .form-control {
|
||||
max-width: none;
|
||||
}
|
||||
@@ -767,14 +836,5 @@ th {
|
||||
td {
|
||||
padding: 12px 9px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
""".strip()
|
||||
Reference in new issue
Block a user