go-svc-configure/web/src/styles.scss

/* Material Theme */
@use '@angular/material' as mat;

/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Material Prebuilt Theme */
@import '@angular/material/prebuilt-themes/indigo-pink.css';

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

/* Material 基础样式 */
.mat-mdc-card {
  display: flex;
  flex-direction: column;
}

/* 确保表格可见 */
.mat-mdc-table {
  width: 100%;
}

/* Prism.js 语法高亮主题 */
.prism-code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 1rem 0;
  padding: 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  background-color: #f3f4f6; /* 浅灰色背景 */
  color: #374151; /* 深灰色文字 */
}

.prism-code .token.comment,
.prism-code .token.prolog,
.prism-code .token.doctype,
.prism-code .token.cdata {
  color: #6b7280; /* 灰色 */
}

.prism-code .token.punctuation {
  color: #9ca3af; /* 中等灰色，在浅色背景下可见 */
}

.prism-code .token.property,
.prism-code .token.tag,
.prism-code .token.boolean,
.prism-code .token.number,
.prism-code .token.constant,
.prism-code .token.symbol,
.prism-code .token.deleted {
  color: #f87171; /* 红色 */
}

.prism-code .token.selector,
.prism-code .token.attr-name,
.prism-code .token.string,
.prism-code .token.char,
.prism-code .token.builtin,
.prism-code .token.inserted {
  color: #34d399; /* 绿色 */
}

.prism-code .token.operator,
.prism-code .token.entity,
.prism-code .token.url,
.prism-code .language-css .token.string,
.prism-code .style .token.string {
  color: #fbbf24; /* 黄色 */
  background: transparent;
}

.prism-code .token.atrule,
.prism-code .token.attr-value,
.prism-code .token.keyword {
  color: #60a5fa; /* 蓝色 */
}

.prism-code .token.function,
.prism-code .token.class-name {
  color: #a78bfa; /* 紫色 */
}

.prism-code .token.regex,
.prism-code .token.important,
.prism-code .token.variable {
  color: #f472b6; /* 粉色 */
}

.prism-code .token.important,
.prism-code .token.bold {
  font-weight: bold;
}

.prism-code .token.italic {
  font-style: italic;
}

.prism-code .token.entity {
  cursor: help;
}

/* 行内代码样式 */
code:not(.prism-code code) {
  background-color: #f3f4f6;
  color: #dc2626;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
}