circle-devdocs/style.css at main · porter-circle/circle-devdocs · GitHub

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
103
104
105
106
107
108
109
table thead {
  text-align: left;
  background-color: #f5f5f8;
}

.dark table thead {
  text-align: left;
  background-color: #141414;
}

table thead th,
table td {
  padding: 8px !important;
}

/* Accordion with circle-info icon styling */
.accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"]) {
  background-color: #e1f2ff !important;
  border-color: #c9e1f5 !important;
}

.accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"]) summary {
  transition: background-color 0.3s ease !important;
}

.accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"]) summary:hover {
  background-color: #c9e1f5 !important;
}

.dark .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"]) {
  background-color: #1a2332 !important;
  border-color: #2d3748 !important;
}

.dark .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"]) summary {
  transition: background-color 0.3s ease !important;
}

.dark .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"]) summary:hover {
  background-color: #2d3748 !important;
}

/* Ensure text is white in dark mode for circle-info accordions */
.dark
  .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"])
  [data-component-part="accordion-title"] {
  color: #ffffff !important;
}

.dark
  .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"])
  [data-component-part="accordion-content"] {
  color: #e5e7eb !important;
}

/* Links in dark mode circle-info accordions */
.dark
  .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"])
  [data-component-part="accordion-content"]
  a {
  color: #60a5fa !important;
}

.dark
  .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"])
  [data-component-part="accordion-content"]
  a:hover {
  color: #93c5fd !important;
}

/* Inline code in dark mode circle-info accordions */
.dark
  .accordion:has([data-component-part="accordion-icon"] svg[style*="circle-info.svg"])
  [data-component-part="accordion-content"]
  code {
  color: #fbbf24 !important;
  background-color: #374151 !important;
}

/* TryItOut Component code block styling */
.TryItOutComponent pre,
.TryItOutComponent code {
  background-color: transparent !important;
}

.TryItOutComponent .code-container {
  background-color: white !important;
}

.dark .TryItOutComponent .code-container {
  background-color: #1f1f1f !important;
}

.home_code_container .code-block {
  margin: 0 !important;
  height: 100%;
}

.home_code_container .code-block .code-block-background {
  height: 100% !important;
}

.home_mint_cards a.card svg {
  background-color: #6b6580 !important;
}

.home_mint_cards a.card:hover svg {
  background: linear-gradient(135deg, #5fbfff 0%, #b090f5 100%) !important;
}