mirror of
https://github.com/itdoginfo/podkop.git
synced 2025-12-06 03:26:51 +03:00
refactor: reorganize styles
This commit is contained in:
divocat
@@ -14,7 +14,7 @@ export function renderLoaderCircleIcon24() {
|
||||
'stroke-width': '2',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
class: 'lucide lucide-loader-circle lucide-rotate',
|
||||
class: 'lucide lucide-loader-circle rotate',
|
||||
},
|
||||
[
|
||||
svgEl('path', {
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { render } from './render';
|
||||
import { initController } from './initController';
|
||||
import { styles } from './styles';
|
||||
|
||||
export const DashboardTab = {
|
||||
render,
|
||||
initController,
|
||||
styles,
|
||||
};
|
||||
|
||||
120
fe-app-podkop/src/podkop/tabs/dashboard/styles.ts
Normal file
120
fe-app-podkop/src/podkop/tabs/dashboard/styles.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
// language=CSS
|
||||
export const styles = `
|
||||
#cbi-podkop-dashboard-_mount_node > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#cbi-podkop-dashboard > h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page {
|
||||
width: 100%;
|
||||
--dashboard-grid-columns: 4;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.pdk_dashboard-page {
|
||||
--dashboard-grid-columns: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--dashboard-grid-columns), 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__title {}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row {}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row--success .pdk_dashboard-page__widgets-section__item__row__value {
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row--error .pdk_dashboard-page__widgets-section__item__row__value {
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row__key {}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row__value {}
|
||||
|
||||
.pdk_dashboard-page__outbound-section {
|
||||
margin-top: 10px;
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-section__title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-section__title-section__title {
|
||||
color: var(--text-color-high);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid {
|
||||
margin-top: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--dashboard-grid-columns), 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
transition: border 0.2s ease;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item--selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item--selectable:hover {
|
||||
border-color: var(--primary-color-high, dodgerblue);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item--active {
|
||||
border-color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__type {}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--empty {
|
||||
color: var(--primary-color-low, lightgray);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--green {
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--yellow {
|
||||
color: var(--warn-color-medium, orange);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--red {
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
`;
|
||||
@@ -1,7 +1,9 @@
|
||||
import { render } from './renderDiagnostic';
|
||||
import { initController } from './initController';
|
||||
import { styles } from './styles';
|
||||
|
||||
export const DiagnosticTab = {
|
||||
render,
|
||||
initController,
|
||||
styles,
|
||||
};
|
||||
|
||||
142
fe-app-podkop/src/podkop/tabs/diagnostic/styles.ts
Normal file
142
fe-app-podkop/src/podkop/tabs/diagnostic/styles.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
// language=CSS
|
||||
export const styles = `
|
||||
|
||||
#cbi-podkop-diagnostic-_mount_node > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#cbi-podkop-diagnostic > h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__actions {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__system-info {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__system-info__title {
|
||||
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__system-info__row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-column-gap: 5px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__left-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__run_check_wrapper {}
|
||||
|
||||
.pdk_diagnostic-page__run_check_wrapper button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__checks {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
grid-column-gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--loading {
|
||||
border: 2px var(--primary-color-high, dodgerblue) solid;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--warning {
|
||||
border: 2px var(--warn-color-medium, orange) solid;
|
||||
color: var(--warn-color-medium, orange);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--error {
|
||||
border: 2px var(--error-color-medium, red) solid;
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--success {
|
||||
border: 2px var(--success-color-medium, green) solid;
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--skipped {}
|
||||
|
||||
.pdk_diagnostic_alert__icon {}
|
||||
|
||||
.pdk_diagnostic_alert__content {}
|
||||
|
||||
.pdk_diagnostic_alert__title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__description {}
|
||||
|
||||
.pdk_diagnostic_alert__summary {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item {
|
||||
display: grid;
|
||||
grid-template-columns: 16px auto 1fr;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item--error {
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item--warning {
|
||||
color: var(--warn-color-medium, orange);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item--success {
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item__icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
`;
|
||||
@@ -1,174 +1,43 @@
|
||||
// language=CSS
|
||||
import { DashboardTab, DiagnosticTab } from './podkop';
|
||||
|
||||
export const GlobalStyles = `
|
||||
.cbi-value {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
${DashboardTab.styles}
|
||||
${DiagnosticTab.styles}
|
||||
|
||||
#diagnostics-status .table > div {
|
||||
background: var(--background-color-primary);
|
||||
border: 1px solid var(--border-color-medium);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#diagnostics-status .table > div pre,
|
||||
#diagnostics-status .table > div div[style*="monospace"] {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
#diagnostics-status .alert-message {
|
||||
background: var(--background-color-primary);
|
||||
border-color: var(--border-color-medium);
|
||||
}
|
||||
|
||||
#cbi-podkop:has(.cbi-tab-disabled[data-tab="basic"]) #cbi-podkop-extra {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cbi-podkop-dashboard-_mount_node > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#cbi-podkop-dashboard > h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide extra H3 for settings tab */
|
||||
#cbi-podkop-settings > h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide extra H3 for sections tab */
|
||||
#cbi-podkop-section > h3:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cbi-podkop-diagnostic > h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cbi-section-remove {
|
||||
/* Vertical align for remove section action button */
|
||||
#cbi-podkop-section > .cbi-section-remove {
|
||||
margin-bottom: -32px;
|
||||
}
|
||||
|
||||
.cbi-value {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
/* Dashboard styles */
|
||||
|
||||
.pdk_dashboard-page {
|
||||
width: 100%;
|
||||
--dashboard-grid-columns: 4;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.pdk_dashboard-page {
|
||||
--dashboard-grid-columns: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--dashboard-grid-columns), 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__title {}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row {}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row--success .pdk_dashboard-page__widgets-section__item__row__value {
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row--error .pdk_dashboard-page__widgets-section__item__row__value {
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row__key {}
|
||||
|
||||
.pdk_dashboard-page__widgets-section__item__row__value {}
|
||||
|
||||
.pdk_dashboard-page__outbound-section {
|
||||
margin-top: 10px;
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-section__title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-section__title-section__title {
|
||||
color: var(--text-color-high);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid {
|
||||
margin-top: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--dashboard-grid-columns), 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
transition: border 0.2s ease;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item--selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item--selectable:hover {
|
||||
border-color: var(--primary-color-high, dodgerblue);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item--active {
|
||||
border-color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__type {}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--empty {
|
||||
color: var(--primary-color-low, lightgray);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--green {
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--yellow {
|
||||
color: var(--warn-color-medium, orange);
|
||||
}
|
||||
|
||||
.pdk_dashboard-page__outbound-grid__item__latency--red {
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
/* Centered class helper */
|
||||
.centered {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Rotate class helper */
|
||||
.rotate {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Skeleton styles*/
|
||||
.skeleton {
|
||||
background-color: var(--background-color-low, #e0e0e0);
|
||||
@@ -198,150 +67,4 @@ export const GlobalStyles = `
|
||||
left: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Lucide spinner animate */
|
||||
.lucide-rotate {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#cbi-podkop-diagnostic-_mount_node > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__actions {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__system-info {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__system-info__title {
|
||||
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__right-bar__system-info__row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-column-gap: 5px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__left-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__run_check_wrapper {}
|
||||
|
||||
.pdk_diagnostic-page__run_check_wrapper button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pdk_diagnostic-page__checks {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert {
|
||||
border: 2px var(--background-color-low, lightgray) solid;
|
||||
border-radius: 4px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
grid-column-gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--loading {
|
||||
border: 2px var(--primary-color-high, dodgerblue) solid;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--warning {
|
||||
border: 2px var(--warn-color-medium, orange) solid;
|
||||
color: var(--warn-color-medium, orange);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--error {
|
||||
border: 2px var(--error-color-medium, red) solid;
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--success {
|
||||
border: 2px var(--success-color-medium, green) solid;
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert--skipped {}
|
||||
|
||||
.pdk_diagnostic_alert__icon {}
|
||||
|
||||
.pdk_diagnostic_alert__content {}
|
||||
|
||||
.pdk_diagnostic_alert__title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__description {}
|
||||
|
||||
.pdk_diagnostic_alert__summary {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item {
|
||||
display: grid;
|
||||
grid-template-columns: 16px auto 1fr;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item--error {
|
||||
color: var(--error-color-medium, red);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item--warning {
|
||||
color: var(--warn-color-medium, orange);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item--success {
|
||||
color: var(--success-color-medium, green);
|
||||
}
|
||||
|
||||
.pdk_diagnostic_alert__summary__item__icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ValidationResult } from './types';
|
||||
import { parseQueryString } from '../helpers';
|
||||
import { parseQueryString } from '../helpers/parseQueryString';
|
||||
|
||||
export function validateVlessUrl(url: string): ValidationResult {
|
||||
try {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user