mws.frontend.vue/src/style.css

@import 'tailwindcss';

@custom-variant dark (&:where(.app-dark, .app-dark *));

@layer base {
  body {
    font-family: var(--font-family, Inter, 'Segoe UI', Roboto, Arial, sans-serif);
    background: #f5f7fa;
    color: #1e293b;
  }

  .app-dark body {
    background: #0f172a;
    color: #e2e8f0;
  }

  #app {
    height: 100vh;
  }

  a {
    color: #3b82f6;
    text-decoration: none;
  }

  .ck-editor__editable {
    min-height: 400px;
  }

  .ck-content ol,
  .ck-content ul {
    padding-inline-start: 40px;
  }

  .ck-content li {
    margin-bottom: 2px;
  }

  .app-dark .ck.ck-editor {
    --ck-color-base-background: #0f172a;
    --ck-color-base-border: #334155;
    --ck-color-base-text: #e2e8f0;
    --ck-color-text: #e2e8f0;
    --ck-color-focus-border: #3b82f6;
    --ck-color-toolbar-background: #1e293b;
    --ck-color-toolbar-border: #334155;
    --ck-color-dropdown-panel-background: #1e293b;
    --ck-color-panel-background: #1e293b;
    --ck-color-panel-border: #334155;
    --ck-color-button-default-hover-background: #334155;
    --ck-color-button-default-active-background: #334155;
    --ck-color-button-on-background: #334155;
    --ck-color-input-background: #0f172a;
    --ck-color-input-border: #334155;
    --ck-color-input-text: #e2e8f0;
    --ck-color-tooltip-background: #334155;
    --ck-color-tooltip-text: #e2e8f0;
    --ck-color-table-border: #475569;
    --ck-color-link-default: #60a5fa;
  }
}

@layer components {
  .field {
    @apply mb-4;
  }

  .field > label {
    @apply mb-1.5 block text-sm font-medium;
  }
}