xref: /wasmtime-44.0.1/docs/css/langtabs.css (revision dbbae440) 
1.langtabs {
2  margin: 0.5em 0 1.5em 0;
3  font-family: var(--fonts);
4}
5
6.langtabs-header {
7  display: flex;
8  overflow-x: auto;
9  gap: 0.25rem;
10  border-bottom: 1px solid var(--icons);
11  padding-bottom: 1px;
12  margin-bottom: -1px;
13  position: relative;
14  z-index: 2;
15}
16
17.langtabs-header {
18  -webkit-overflow-scrolling: touch;
19  scrollbar-width: none; /* Firefox */
20}
21
22.langtabs-header::-webkit-scrollbar {
23  display: none; /* Chrome, Safari, Edge */
24}
25
26.langtabs-tab {
27  padding: 0.6rem 1.1rem;
28  background: none;
29  border: 1px solid transparent;
30  border-bottom: none;
31  border-top-left-radius: 4px;
32  border-top-right-radius: 4px;
33  cursor: pointer;
34  white-space: nowrap;
35  display: flex;
36  align-items: center;
37  gap: 0.7rem;
38  color: var(--text);
39  font-size: 1.2rem;
40  font-weight: 400;
41  transition: all 0.15s ease;
42  position: relative;
43  top: 1px;
44}
45
46.langtabs-tab:hover {
47  color: var(--links);
48  background-color: rgba(0, 0, 0, 0.03);
49}
50
51.langtabs-tab.active {
52  color: var(--links); /* Use theme link color */
53  border-color: var(--icons);
54  border-bottom: 1px solid var(--bg);
55  background-color: var(--bg);
56  font-weight: 500;
57}
58
59.langtabs-icon {
60  width: 1.4em;
61  height: 1.4em;
62  font-size: 1.4em;
63  display: inline-flex;
64  align-items: center;
65  justify-content: center;
66}
67
68/* inactive tabs use text color, active tabs use theme link color */
69.langtabs-tab .langtabs-icon {
70  color: inherit;
71  opacity: 0.8;
72}
73
74.langtabs-tab.active .langtabs-icon {
75  color: var(--links); /* Use theme link color */
76  opacity: 1;
77}
78
79.langtabs-content {
80  position: relative;
81  border: 1px solid var(--icons);
82  border-radius: 3px;
83  border-top-left-radius: 0;
84  overflow: hidden;
85}
86
87.langtabs-code {
88  display: none;
89}
90
91.langtabs-code.active {
92  display: block;
93}
94
95/* CodeBlock styling to match mdBook */
96.langtabs-code pre {
97  margin: 0;
98  padding: 0;
99  background-color: var(--bg);
100}
101
102.langtabs-code pre code {
103  display: block;
104  padding: 1rem;
105  overflow-x: auto;
106  font-family: var(--mono-font);
107  font-size: 0.85em;
108  line-height: 1.5;
109}
110
111@media print {
112  .langtabs-tab:not(.active) {
113    display: none;
114  }
115
116  .langtabs-content {
117    border: 1px solid #ddd;
118  }
119
120  .langtabs-code.active {
121    display: block !important;
122  }
123}
124
125@media (max-width: 640px) {
126  .langtabs-tab {
127    padding: 0.5rem 0.8rem;
128    font-size: 1.1rem;
129  }
130
131  .langtabs-icon {
132    font-size: 1.3em;
133    width: 1.3em;
134    height: 1.3em;
135  }
136}