spirzen/it-knowledge-base: Огромная энциклопедия по информационным технологиям. Компьютерная, цифровая, сетевая грамотность, языки, данные, структуры, интеграции, архитектура, микросервисы, контейнеризация, оркестрация и всё такое.

src/components/WebViewBridgePlay.module.css

246 строк4 KB

Spirzen

Components pack 2

23 май 2026, 03:42

23 май 2026, 03:42b7f65e4

.root {
  max-width: min(960px, 100%);
  margin: 0 auto;
}

.engine {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.78rem;
  color: var(--ifm-color-content-secondary);
}

.layout {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 1.4fr) minmax(180px, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.processCol,
.sideCol {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.processStack {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.process {
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--ifm-color-emphasis-300);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.process_main {
  background: #e8eaf6;
}
.process_render {
  background: #e3f2fd;
}
.process_gpu {
  background: #f3e5f5;
}
.process_network {
  background: #e0f2f1;
}
.process_bridge {
  background: #fff8e1;
}

[data-theme='dark'] .process_main {
  background: #283593;
}
[data-theme='dark'] .process_render {
  background: #1565c0;
}
[data-theme='dark'] .process_gpu {
  background: #6a1b9a;
}
[data-theme='dark'] .process_network {
  background: #00695c;
}
[data-theme='dark'] .process_bridge {
  background: #f57f17;
  color: #1a1a1a;
}

.processActive {
  box-shadow: 0 0 0 2px var(--ifm-color-primary);
  transform: scale(1.03);
}

.secureToggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  cursor: pointer;
  margin-top: 0.25rem;
}

.navVerdict {
  margin: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 6px;
}

.navOk {
  background: color-mix(in srgb, #2e7d32 18%, transparent);
  color: #1b5e20;
}

.navBlock {
  background: color-mix(in srgb, #c62828 15%, transparent);
  color: #b71c1c;
}

[data-theme='dark'] .navOk {
  color: #a5d6a7;
}
[data-theme='dark'] .navBlock {
  color: #ef9a9a;
}

.nativeShell {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ifm-color-emphasis-400);
  box-shadow: 0 6px 18px color-mix(in srgb, #000 12%, transparent);
}

.nativeTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  background: linear-gradient(180deg, #5c6bc0, #3949ab);
  color: #fff;
}

.nativeBadge {
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: color-mix(in srgb, #fff 22%, transparent);
}

.webviewChrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.45rem;
  background: var(--ifm-background-surface-color);
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
  font-size: 0.68rem;
  font-family: var(--ifm-font-family-monospace);
}

.webviewDot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.webviewUrl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ifm-color-content-secondary);
}

.webviewFrame {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  background: #fff;
}

.apiSnippet {
  margin: 0;
  padding: 0.5rem 0.55rem;
  font-size: 0.62rem;
  line-height: 1.45;
  border-radius: 6px;
  background: var(--ifm-background-surface-color);
  border: 1px solid var(--ifm-color-emphasis-300);
  white-space: pre-wrap;
  word-break: break-word;
}

.apiDir {
  color: var(--ifm-color-primary);
  font-weight: 700;
}

.log {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 11rem;
  overflow-y: auto;
  font-size: 0.65rem;
}

.logRow {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--ifm-color-emphasis-200);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.logRow time {
  color: var(--ifm-color-content-secondary);
  font-family: var(--ifm-font-family-monospace);
}

.logRow code {
  font-size: 0.6rem;
  word-break: break-all;
  opacity: 0.9;
}

.log_jsNative strong {
  color: #1565c0;
}
.log_nativeJs strong {
  color: #2e7d32;
}
.log_navOk strong {
  color: #00838f;
}
.log_navBlock strong {
  color: #c62828;
}

.logEmpty {
  font-style: italic;
  color: var(--ifm-color-content-secondary);
  padding: 0.35rem 0;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .webviewFrame {
    height: 200px;
  }
}