src/assets/base.css - master - ndt/hosting-manager-web

src/assets/base.css
235 строк5 KB
Stan Ovchinnikov
Панель управления проектами Nginx-хостинга. GPT-5.5
30 май 2026, 16:41
30 май 2026, 16:411d110a6
/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #333333;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

:root,
[data-theme='light'] {
  color-scheme: light;

  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --color-accent: #646cff;
  --color-info: #0969da;
  --color-success: #1a7f37;
  --color-warning: #9a6700;
  --color-error: #b00020;

  --color-accent-soft: rgba(100, 108, 255, 0.14);
  --color-info-soft: rgba(9, 105, 218, 0.12);
  --color-success-soft: rgba(26, 127, 55, 0.12);
  --color-warning-soft: rgba(154, 103, 0, 0.14);
  --color-error-soft: rgba(176, 0, 32, 0.10);
}

:root.dark,
[data-theme='dark'] {
  color-scheme: dark;

  --color-background: var(--vt-c-black);
  --color-background-soft: var(--vt-c-black-soft);
  --color-background-mute: var(--vt-c-black-mute);

  --color-border: var(--vt-c-divider-dark-2);
  --color-border-hover: var(--vt-c-divider-dark-1);

  --color-heading: var(--vt-c-text-dark-1);
  --color-text: var(--vt-c-text-dark-2);

  --color-accent: #a8b1ff;
  --color-info: #79c0ff;
  --color-success: #7ee787;
  --color-warning: #d29922;
  --color-error: #ff8a8a;

  --color-accent-soft: rgba(168, 177, 255, 0.18);
  --color-info-soft: rgba(121, 192, 255, 0.16);
  --color-success-soft: rgba(126, 231, 135, 0.14);
  --color-warning-soft: rgba(210, 153, 34, 0.16);
  --color-error-soft: rgba(255, 138, 138, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background-color: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: GrayText;
  cursor: not-allowed;
  opacity: 1;
}

input:disabled::placeholder,
textarea:disabled::placeholder {
  color: GrayText;
  opacity: 1;
}

.is-accent {
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  --state-color: var(--color-accent);
  --state-color-soft: var(--color-accent-soft);
}

.is-info {
  background-color: var(--color-info-soft);
  border: 1px solid var(--color-info);
  --state-color: var(--color-info);
  --state-color-soft: var(--color-info-soft);
}

.is-success {
  background-color: var(--color-success-soft);
  border: 1px solid var(--color-success);
  --state-color: var(--color-success);
  --state-color-soft: var(--color-success-soft);
}

.is-warning {
  background-color: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  --state-color: var(--color-warning);
  --state-color-soft: var(--color-warning-soft);
}

.is-error {
  background-color: var(--color-error-soft);
  border: 1px solid var(--color-error);
  --state-color: var(--color-error);
  --state-color-soft: var(--color-error-soft);
}

.is-accent,
.is-info,
.is-success,
.is-warning,
.is-error {
  transition:
    background-color 0.5s,
    border-color 0.5s;
}

.text-accent {
  color: var(--color-accent);
}

.text-info {
  color: var(--color-info);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.panel-state {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  margin: 2px;
  border-radius: 6px;
  border: 1px solid var(--state-color, var(--color-border));
}

.panel-state-content {
  flex: 1 1 auto;
  min-width: 0;
}

.panel-state-close {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  border: 0;
  color: var(--state-color, var(--color-text));
  background-color: var(--state-color-soft, transparent);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  opacity: 0.65;
}

.panel-state-close:hover,
.panel-state-close:focus-visible {
  opacity: 1;
}

.panel-state-close:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.message {
  padding: 6px 8px;
  margin: 2px;
  border: 1px solid var(--state-color, var(--color-border));
  border-left-width: 12px;
}