92
92
font-style : normal;
93
93
}
94
94
h1 , h2 , h3 , h4 , legend , .btn , button {
95
- font-family : "Titillium Web" , "Open Sans" , "OpenSans" , "Helvetica Neue" , Helvetica , Arial , sans-serif ;
95
+ font-family : var ( --font-family-title ) ;
96
96
}
97
97
.fa {
98
98
font-family : inherit
@@ -108,13 +108,20 @@ h1, h2, h3, h4, legend, .btn, button {
108
108
109
109
/* Page layout */
110
110
111
+ : root {
112
+ --text-color : rgba (0 , 0 , 0 , 0.87 );
113
+ --font-family-title : "Titillium Web" , "Open Sans" , "OpenSans" , "Helvetica Neue" , Helvetica, Arial, sans-serif;
114
+ --font-family-text : "Muli" , "Open Sans" , "OpenSans" , "Helvetica Neue" , Helvetica, Arial, sans-serif;
115
+ --font-family-code : Consolas, "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco, "Courier New" , Courier, monospace;
116
+ }
117
+
111
118
html {
112
119
height : 100% ;
113
120
}
114
121
body {
115
- font-family : "Muli" , "Open Sans" , "OpenSans" , "Helvetica Neue" , Helvetica , Arial , sans-serif ;
122
+ font-family : var ( --font-family-text ) ;
116
123
font-weight : normal;
117
- color : rgba ( 0 , 0 , 0 , 0.87 );
124
+ color : var ( --text-color );
118
125
height : 100vh ;
119
126
display : flex;
120
127
flex-direction : column;
@@ -271,9 +278,14 @@ footer a.fa {
271
278
.nav-content {
272
279
margin : 3.5em 6em ;
273
280
height : 100% ;
274
- max-width : 800px ;
275
281
line-height : 1.5 ;
276
282
}
283
+ .nav-content section > * {
284
+ max-width : 800px ;
285
+ }
286
+ .nav-content section > section {
287
+ max-width : 100% ;
288
+ }
277
289
278
290
/* Generic styles */
279
291
@@ -310,7 +322,6 @@ mark {
310
322
}
311
323
312
324
pre , code , tt , code , kbd , samp {
313
- font-family : monospace, serif;
314
325
font-size : 1em
315
326
}
316
327
@@ -559,14 +570,14 @@ input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:fo
559
570
border-color : # E74C3C
560
571
}
561
572
562
- code , tt , code {
573
+ code , tt {
563
574
white-space : nowrap;
564
575
max-width : 100% ;
565
576
background : # fff ;
566
577
border : solid 1px # e1e4e5 ;
567
578
font-size : 75% ;
568
579
padding : 0 5px ;
569
- font-family : Consolas , "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco , "Courier New" , Courier , monospace ;
580
+ font-family : var ( --font-family-code ) ;
570
581
color : # E74C3C ;
571
582
overflow-x : auto
572
583
}
@@ -637,7 +648,7 @@ div[class^='highlight'] pre {
637
648
white-space : pre;
638
649
margin : 0 ;
639
650
padding : 12px 12px ;
640
- font-family : Consolas , "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco , "Courier New" , Courier , monospace ;
651
+ font-family : var ( --font-family-code ) ;
641
652
font-size : 12px ;
642
653
line-height : 1.5 ;
643
654
display : block;
@@ -1077,6 +1088,102 @@ dl.method > dt, dl.class > dt, dl.attribute > dt {
1077
1088
width : 100% ;
1078
1089
}
1079
1090
1091
+ /* API documentation styles */
1092
+ redoc # redoc {
1093
+ display : block;
1094
+ max-width : calc (100% + 6em );
1095
+ margin-left : -2.5em ;
1096
+
1097
+ .menu-content ,
1098
+ .api-info ,
1099
+ .api-content + div ,
1100
+ .api-content > div : first-child ,
1101
+ h5 span + div { display : none }
1102
+
1103
+ div , button {
1104
+ font-family : var (--font-family-text );
1105
+ font-size : 16px ;
1106
+ }
1107
+ h2 , h3 , h4 , h5 {
1108
+ font-family : var (--font-family-title );
1109
+ color : var (--text-color );
1110
+ }
1111
+ h2 {
1112
+ font-size : 28px ;
1113
+ text-transform : capitalize;
1114
+ }
1115
+ h3 {
1116
+ font-size : 24px ;
1117
+ }
1118
+
1119
+ .api-content {
1120
+ width : 100% ;
1121
+ }
1122
+ .api-content > div [data-section-id ] > div [data-section-id ] > : nth-child (1 ) {
1123
+ width : calc (50% );
1124
+ }
1125
+ .api-content > div [data-section-id ] > div [data-section-id ] > : nth-child (2 ) {
1126
+ width : calc (50% );
1127
+ background : none;
1128
+ h3 {
1129
+ color : var (--text-color );
1130
+ }
1131
+ }
1132
+ .property-name , button .property-name {
1133
+ font-size : 16px ;
1134
+ font-family : var (--font-family-code );
1135
+ & + div {
1136
+ padding-left : 2px ;
1137
+ font-size : 13px ;
1138
+ font-family : var (--font-family-code );
1139
+ }
1140
+ }
1141
+ [role = tabpanel ] {
1142
+ & > div : first-child > div : first-child {
1143
+ display : none;
1144
+ & + div {
1145
+ margin-top : 0 ;
1146
+ }
1147
+ }
1148
+ }
1149
+ table {
1150
+ tr {
1151
+ background-color : transparent;
1152
+ }
1153
+ td , th {
1154
+ border-top : none;
1155
+ border-right : none;
1156
+ border-bottom : none;
1157
+ }
1158
+ tr > td : first-of-type {
1159
+ padding-top : calc (1em - 4px );
1160
+ }
1161
+ tr > td : not (: first-of-type ) {
1162
+ border-left : none;
1163
+ }
1164
+ ul {
1165
+ padding-left : 0 ;
1166
+ }
1167
+ li code , p > code {
1168
+ /* enum lists */
1169
+ color : var (--text-color );
1170
+ }
1171
+ }
1172
+ .dEQDjv {
1173
+ /* probably going to break any time now, but for now: fix the unbearably misaligned typesetting of faux code elements, e.g. "Item Enum: " fields */
1174
+ padding : 5px 5px 0px 5px ;
1175
+ }
1176
+ .react-tabs__tab-panel code {
1177
+ background : none;
1178
+ border : none;
1179
+ color : white;
1180
+ }
1181
+ code , code span , code div {
1182
+ font-size : 13px ;
1183
+ font-family : var (--font-family-code );
1184
+ }
1185
+ }
1186
+
1080
1187
@media screen and (max-width : 768px ) {
1081
1188
.tablet-hide {
1082
1189
display : none !important
0 commit comments