canonrs-server 0.1.0

CanonRS server-side rendering support
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

/* ============================================
   COPY BUTTON — Enterprise Level
   State via data-rs-state — zero pseudo-class state selectors
   ============================================ */

[data-rs-copy-button] {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--copy-button-bg);
  color: var(--copy-button-fg);
  border: 1px solid var(--copy-button-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition:
    background var(--copy-button-transition-duration) var(--copy-button-transition-ease),
    color var(--copy-button-transition-duration) var(--copy-button-transition-ease),
    border-color var(--copy-button-transition-duration) var(--copy-button-transition-ease),
    opacity var(--copy-button-transition-duration) var(--copy-button-transition-ease);
}

[data-rs-copy-button][data-rs-state~="hover"]:not([data-rs-state~="copied"]):not([data-rs-state~="error"]):not([data-rs-state~="copying"]) {
  background: var(--copy-button-bg-hover);
  border-color: var(--copy-button-border-hover);
}

/* ── CONTENT VISIBILITY ─────────────────────────────────────── */
[data-rs-copy-content],
[data-rs-copied-content],
[data-rs-error-content] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

[data-rs-copy-button]:not([data-rs-state~="copied"]):not([data-rs-state~="error"]) [data-rs-copied-content],
[data-rs-copy-button]:not([data-rs-state~="copied"]):not([data-rs-state~="error"]) [data-rs-error-content] {
  display: none;
}

/* ── STATE: copying ─────────────────────────────────────────── */
[data-rs-copy-button][data-rs-state~="copying"] {
  cursor: wait;
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ── STATE: copied ──────────────────────────────────────────── */
[data-rs-copy-button][data-rs-state~="copied"] [data-rs-copy-content],
[data-rs-copy-button][data-rs-state~="copied"] [data-rs-error-content] {
  display: none;
}

[data-rs-copy-button][data-rs-state~="copied"] [data-rs-copied-content] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

[data-rs-copy-button][data-rs-state~="copied"] {
  background: var(--copy-button-copied-bg);
  color: var(--copy-button-copied-fg);
  border-color: var(--copy-button-copied-bg);
}

/* ── STATE: error ───────────────────────────────────────────── */
[data-rs-copy-button][data-rs-state~="error"] [data-rs-copy-content],
[data-rs-copy-button][data-rs-state~="error"] [data-rs-copied-content] {
  display: none;
}

[data-rs-copy-button][data-rs-state~="error"] [data-rs-error-content] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

[data-rs-copy-button][data-rs-state~="error"] {
  width: auto;
  align-self: flex-start;
  background: var(--copy-button-error-bg);
  color: var(--copy-button-error-fg);
  border-color: var(--copy-button-error-border);
}

/* ── ICONS ──────────────────────────────────────────────────── */
[data-rs-copy-icon],
[data-rs-copied-icon],
[data-rs-error-icon] {
  width: var(--copy-button-icon-size);
  height: var(--copy-button-icon-size);
  color: var(--copy-button-icon-color);
  flex-shrink: 0;
}

[data-rs-copy-button][data-rs-state~="copied"] [data-rs-copied-icon] {
  color: var(--copy-button-icon-color-copied);
}