keii.dev
1// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
2// See the LICENCE file in the repository root for full licence text.
3
4@import "~normalize.css/normalize.css";
5@import "~highlight.js/styles/obsidian.css";
6
7@font-default: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
8
9body,
10html {
11 font-family: @font-default;
12 font-size: 14px;
13}
14
15.content h1,
16.content h2,
17.content h3,
18.content h4,
19.content h5,
20.content h6 {
21 font-family: @font-default;
22}
23
24.content h1,
25.content h2,
26.content h3,
27.content h4,
28.content h5,
29.content h6 {
30 font-weight: 700;
31}
32
33.content code,
34.content pre {
35 font-family:
36 Consolas,
37 Menlo,
38 Monaco,
39 Lucida Console,
40 Liberation Mono,
41 DejaVu Sans Mono,
42 Bitstream Vera Sans Mono,
43 Courier New,
44 monospace,
45 serif;
46 font-size: 14px;
47 line-height: 1.5;
48}
49
50.content code {
51 word-break: break-all;
52 word-break: break-word;
53}
54
55.content aside.notice:before,
56.content aside.success:before,
57.content aside.warning:before,
58.tocify-wrapper > .search:before {
59 font-family: @font-default;
60 speak: none;
61 font-style: normal;
62 font-variant: normal;
63 text-transform: none;
64 line-height: 1;
65}
66
67.content aside.warning:before {
68 content: "✋";
69}
70
71.content aside.notice:before {
72 content: "ℹ";
73}
74
75.content aside.success:before {
76 content: "✅";
77}
78
79.tocify-wrapper > .search:before {
80 content: "🔎";
81}
82
83.highlight .c,
84.highlight .c1,
85.highlight .cm,
86.highlight .cs {
87 color: #909090;
88}
89
90.highlight,
91.highlight .w {
92 background-color: #292929;
93}
94
95.hljs {
96 display: block;
97 overflow-x: auto;
98 padding: 0.5em;
99 background: #23241f;
100}
101
102.hljs,
103.hljs-subst,
104.hljs-tag {
105 color: #f8f8f2;
106}
107
108.hljs-emphasis,
109.hljs-strong {
110 color: #a8a8a2;
111}
112
113.hljs-bullet,
114.hljs-link,
115.hljs-literal,
116.hljs-number,
117.hljs-quote,
118.hljs-regexp {
119 color: #ae81ff;
120}
121
122.hljs-code,
123.hljs-section,
124.hljs-selector-class,
125.hljs-title {
126 color: #a6e22e;
127}
128
129.hljs-strong {
130 font-weight: 700;
131}
132
133.hljs-emphasis {
134 font-style: italic;
135}
136
137.hljs-attr,
138.hljs-keyword,
139.hljs-name,
140.hljs-selector-tag {
141 color: #f92672;
142}
143
144.hljs-attribute,
145.hljs-symbol {
146 color: #66d9ef;
147}
148
149.hljs-class .hljs-title,
150.hljs-params {
151 color: #f8f8f2;
152}
153
154.hljs-addition,
155.hljs-built_in,
156.hljs-builtin-name,
157.hljs-selector-attr,
158.hljs-selector-id,
159.hljs-selector-pseudo,
160.hljs-string,
161.hljs-template-variable,
162.hljs-type,
163.hljs-variable {
164 color: #e6db74;
165}
166
167.hljs-comment,
168.hljs-deletion,
169.hljs-meta {
170 color: #75715e;
171}
172
173body,
174html {
175 color: #333;
176 padding: 0;
177 margin: 0;
178 -webkit-font-smoothing: antialiased;
179 -moz-osx-font-smoothing: grayscale;
180 background-color: whitesmoke;
181 height: 100%;
182 -webkit-text-size-adjust: none;
183}
184
185#toc > ul > li > a > span {
186 float: right;
187 background-color: #2484ff;
188 border-radius: 40px;
189 width: 20px;
190}
191
192.tocify-wrapper {
193 transition: left 0.3s ease-in-out;
194 overflow-y: auto;
195 overflow-x: hidden;
196 position: fixed;
197 z-index: 30;
198 top: 0;
199 left: 0;
200 bottom: 0;
201 width: 230px;
202 background-color: #393939;
203 font-size: 13px;
204 font-weight: 700;
205}
206
207.tocify-wrapper .lang-selector {
208 display: none;
209}
210
211.tocify-wrapper .lang-selector a {
212 padding-top: 0.5em;
213 padding-bottom: 0.5em;
214}
215
216.tocify-wrapper > img {
217 display: block;
218}
219
220.tocify-wrapper > .search {
221 position: relative;
222}
223
224.tocify-wrapper > .search input {
225 background: #393939;
226 border-width: 0 0 1px;
227 border-color: #666;
228 padding: 6px 0 6px 20px;
229 box-sizing: border-box;
230 margin: 10px 15px;
231 width: 200px;
232 outline: none;
233 color: #fff;
234 border-radius: 0;
235}
236
237.tocify-wrapper > .search:before {
238 position: absolute;
239 top: 17px;
240 left: 15px;
241 color: #fff;
242}
243
244.tocify-wrapper img + .tocify {
245 margin-top: 20px;
246}
247
248.tocify-wrapper .search-results {
249 margin-top: 0;
250 box-sizing: border-box;
251 height: 0;
252 overflow-y: auto;
253 overflow-x: hidden;
254 transition-property: height, margin;
255 transition-duration: 0.18s;
256 transition-timing-function: ease-in-out;
257 background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 8px),
258 linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 8px),
259 linear-gradient(180deg, #000, transparent 1.5px),
260 linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626;
261}
262
263.tocify-wrapper .search-results.visible {
264 height: 30%;
265 margin-bottom: 1em;
266}
267
268.tocify-wrapper .search-results li {
269 margin: 1em 15px;
270 line-height: 1;
271}
272
273.tocify-wrapper a {
274 color: #fff;
275 text-decoration: none;
276}
277
278.tocify-wrapper .search-results a:hover {
279 text-decoration: underline;
280}
281
282.tocify-wrapper .toc-footer li,
283.tocify-wrapper .tocify-item > a {
284 padding: 0 15px;
285 display: block;
286 overflow-x: hidden;
287 white-space: nowrap;
288 text-overflow: ellipsis;
289}
290.tocify-wrapper .tocify-item.level-3 > a {
291 padding: 0 25px;
292}
293
294.tocify-wrapper li,
295.tocify-wrapper ul {
296 list-style: none;
297 margin: 0;
298 padding: 0;
299 line-height: 28px;
300}
301
302.tocify-wrapper li {
303 color: #fff;
304 transition-property: background;
305 transition-timing-function: linear;
306 transition-duration: 0.23s;
307}
308
309.tocify-wrapper .tocify-focus {
310 box-shadow: 0 1px 0 #000;
311 background-color: #2467af;
312 color: #fff;
313 font-weight: bold;
314}
315
316.tocify-wrapper .tocify-subheader {
317 display: none;
318 background-color: #262626;
319 font-weight: 500;
320 background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 8px),
321 linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 8px),
322 linear-gradient(180deg, #000, transparent 1.5px),
323 linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626;
324}
325
326.tocify-wrapper .jets-searching .tocify-subheader,
327.tocify-wrapper .tocify-subheader.visible {
328 display: block;
329}
330
331.tocify-wrapper .tocify-subheader .tocify-item > a {
332 padding-left: 25px;
333 font-size: 12px;
334}
335
336.tocify-wrapper .tocify-subheader .tocify-item.level-3 > a {
337 padding-left: 35px;
338}
339
340.tocify-wrapper .tocify-subheader > li:last-child {
341 box-shadow: none;
342}
343
344.tocify-wrapper .toc-footer {
345 padding: 1em 0;
346 margin-top: 1em;
347 border-top: 1px dashed #666;
348}
349
350.tocify-wrapper .toc-footer a,
351.tocify-wrapper .toc-footer li {
352 color: #fff;
353 text-decoration: none;
354}
355
356.tocify-wrapper .toc-footer a:hover {
357 text-decoration: underline;
358}
359
360.tocify-wrapper .toc-footer li {
361 font-size: 0.8em;
362 line-height: 1.7;
363 text-decoration: none;
364}
365
366#nav-button {
367 padding: 0 1.5em 5em 0;
368 display: none;
369 position: fixed;
370 top: 0;
371 left: 0;
372 z-index: 100;
373 color: #000;
374 text-decoration: none;
375 font-weight: 700;
376 opacity: 0.7;
377 line-height: 16px;
378 transition: left 0.3s ease-in-out;
379}
380
381#nav-button span {
382 display: block;
383 padding: 6px;
384 background-color: rgba(234, 242, 246, 0.7);
385 -webkit-transform-origin: 0 0;
386 transform-origin: 0 0;
387 -webkit-transform: rotate(-90deg) translate(-100%);
388 transform: rotate(-90deg) translate(-100%);
389 border-radius: 0 0 0 5px;
390}
391
392#nav-button img {
393 height: 16px;
394 vertical-align: bottom;
395}
396
397#nav-button:hover {
398 opacity: 1;
399}
400
401#nav-button.open {
402 left: 230px;
403}
404
405.page-wrapper {
406 margin-left: 230px;
407 position: relative;
408 z-index: 10;
409 background-color: #eaf2f6;
410 min-height: 100%;
411 padding-bottom: 1px;
412}
413
414.page-wrapper .dark-box {
415 width: 50%;
416 background-color: #393939;
417 position: absolute;
418 right: 0;
419 top: 0;
420 bottom: 0;
421}
422
423.page-wrapper .lang-selector {
424 position: fixed;
425 z-index: 50;
426 border-bottom: 5px solid #393939;
427}
428
429.lang-selector {
430 background-color: #222;
431 width: 100%;
432 font-weight: 700;
433}
434
435.lang-selector button {
436 display: block;
437 float: left;
438 color: #fff;
439 text-decoration: none;
440 padding: 0 10px;
441 line-height: 30px;
442 outline: 0;
443 background: transparent;
444 border: none;
445 --bg: transparent;
446 --bg-hover: #111;
447 --bg-active: #393939;
448 background: var(--bg);
449}
450
451.lang-selector button:active,
452.lang-selector button:hover,
453.lang-selector button:focus {
454 --bg: var(--bg-hover);
455}
456
457.lang-selector:after {
458 content: "";
459 clear: both;
460 display: block;
461}
462
463.content {
464 position: relative;
465 z-index: 30;
466}
467
468.content:after {
469 content: "";
470 display: block;
471 clear: both;
472}
473
474.content > aside,
475.content > details,
476.content > dl,
477.content > h1,
478.content > h2,
479.content > h3,
480.content > h4,
481.content > h5,
482.content > h6,
483.content > ol,
484.content > p,
485.content > table,
486.content > ul,
487.content > form > aside,
488.content > form > details,
489.content > form > h1,
490.content > form > h2,
491.content > form > h3,
492.content > form > h4,
493.content > form > h5,
494.content > form > h6,
495.content > form > p,
496.content > form > table,
497.content > form > ul,
498.content > form > div {
499 margin-right: 50%;
500 padding: 0 28px;
501 box-sizing: border-box;
502 display: block;
503 text-shadow: 0 1px 0 #fff;
504}
505
506.content > ol,
507.content > ul {
508 padding-left: 43px;
509}
510
511.content > div,
512.content > h1,
513.content > h2 {
514 clear: both;
515}
516
517.content h1 {
518 font-size: 30px;
519 padding-top: 0.5em;
520 padding-bottom: 0.5em;
521 border-bottom: 1px solid #ccc;
522 margin-bottom: 21px;
523 margin-top: 2em;
524 border-top: 1px solid #ddd;
525 background-image: linear-gradient(180deg, #fff, #f9f9f9);
526}
527
528.content div:first-child + h1,
529.content h1:first-child {
530 border-top-width: 0;
531 margin-top: 0;
532}
533
534.content h2 {
535 font-size: 20px;
536 margin-top: 4em;
537 margin-bottom: 0;
538 border-top: 1px solid #ccc;
539 padding-top: 1.2em;
540 padding-bottom: 1.2em;
541 background-image: linear-gradient(
542 180deg,
543 hsla(0, 0%, 100%, 0.4),
544 hsla(0, 0%, 100%, 0)
545 );
546}
547
548.content h1 + div + h2,
549.content h1 + h2 {
550 margin-top: -21px;
551 border-top: none;
552}
553
554.content h3,
555.content h4,
556.content h5,
557.content h6 {
558 font-size: 15px;
559 margin-top: 2.5em;
560 margin-bottom: 0.8em;
561}
562
563.content h4,
564.content h5,
565.content h6 {
566 font-size: 10px;
567}
568
569.content hr {
570 margin: 2em 0;
571 border-top: 2px solid #393939;
572 border-bottom: 2px solid #eaf2f6;
573}
574
575.content table {
576 margin-bottom: 1em;
577 overflow: auto;
578 border-collapse: collapse;
579}
580
581.content table td,
582.content table th {
583 text-align: left;
584 vertical-align: top;
585 line-height: 1.6;
586}
587
588.content table th {
589 padding: 5px 10px;
590 border-bottom: 1px solid #ccc;
591 vertical-align: bottom;
592}
593
594.content table td {
595 padding: 10px;
596}
597
598.content table tr:last-child {
599 border-bottom: 1px solid #ccc;
600}
601
602.content table tr:nth-child(odd) > td {
603 background-color: #ebf3f6;
604}
605
606.content table tr:nth-child(even) > td {
607 background-color: #ebf2f6;
608}
609
610.content dt {
611 font-weight: 700;
612}
613
614.content dd {
615 margin-left: 15px;
616}
617
618.content dd,
619.content dt,
620.content li,
621.content p {
622 line-height: 1.6;
623 margin-top: 0;
624}
625
626.content img {
627 max-width: 100%;
628}
629
630.content code {
631 padding: 3px;
632 border-radius: 3px;
633 background-color: rgba(0, 0, 0, 0.05);
634}
635
636.content pre > code {
637 background-color: transparent;
638 padding: 0;
639}
640
641.content aside {
642 padding-top: 1em;
643 padding-bottom: 1em;
644 margin-top: 1.5em;
645 margin-bottom: 1.5em;
646 background: #292929;
647 line-height: 1.6;
648 color: #c8c8c8;
649 text-shadow: none;
650}
651
652.content aside.info {
653 background: #8fbcd4;
654 text-shadow: 0 1px 0 #a0c6da;
655 color: initial;
656}
657
658.content aside.warning {
659 background-color: #c97a7e;
660 text-shadow: 0 1px 0 #d18e91;
661 color: initial;
662}
663
664.content aside.success {
665 background-color: #6ac174;
666 text-shadow: 0 1px 0 #80ca89;
667 color: initial;
668}
669
670.content aside:before {
671 vertical-align: middle;
672 padding-right: 0.5em;
673 font-size: 14px;
674}
675
676.content .search-highlight {
677 padding: 2px;
678 margin: -2px;
679 border-radius: 4px;
680 border: 1px solid #f7e633;
681 text-shadow: 1px 1px 0 #666;
682 background: linear-gradient(to top left, #f7e633, #f1d32f);
683}
684
685.content blockquote,
686.content pre {
687 background-color: #292929;
688 color: #fff;
689 padding: 1.5em 28px;
690 margin: 0;
691 width: 50%;
692 float: right;
693 clear: right;
694 box-sizing: border-box;
695 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
696}
697
698.content .annotation {
699 background-color: #292929;
700 color: #fff;
701 padding: 0 28px;
702 margin: 0;
703 width: 50%;
704 float: right;
705 clear: right;
706 box-sizing: border-box;
707 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
708}
709
710.content .annotation pre {
711 padding: 0 0;
712 width: 100%;
713 float: none;
714}
715
716.content blockquote > p,
717.content pre > p {
718 margin: 0;
719}
720
721.content blockquote a,
722.content pre a {
723 color: #fff;
724 text-decoration: none;
725 border-bottom: 1px dashed #ccc;
726}
727
728.content blockquote > p {
729 background-color: #1c1c1c;
730 border-radius: 5px;
731 padding: 13px;
732 color: #ccc;
733 border-top: 1px solid #000;
734 border-bottom: 1px solid #404040;
735}
736
737@media (max-width: 930px) {
738 .tocify-wrapper {
739 left: -230px;
740 }
741 .tocify-wrapper.open {
742 left: 0;
743 }
744 .page-wrapper {
745 margin-left: 0;
746 }
747 #nav-button {
748 display: block;
749 }
750 .tocify-wrapper .tocify-item > a {
751 padding-top: 0.3em;
752 padding-bottom: 0.3em;
753 }
754}
755
756@media (max-width: 700px) {
757 .dark-box {
758 display: none;
759 }
760 .tocify-wrapper .lang-selector {
761 display: block;
762 }
763 .page-wrapper .lang-selector {
764 display: none;
765 }
766 .content aside,
767 .content dl,
768 .content h1,
769 .content h2,
770 .content h3,
771 .content h4,
772 .content h5,
773 .content h6,
774 .content ol,
775 .content p,
776 .content table,
777 .content ul {
778 margin-right: 0;
779 }
780 .content > aside,
781 .content > details,
782 .content > dl,
783 .content > h1,
784 .content > h2,
785 .content > h3,
786 .content > h4,
787 .content > h5,
788 .content > h6,
789 .content > ol,
790 .content > p,
791 .content > table,
792 .content > ul,
793 .content > form > aside,
794 .content > form > details,
795 .content > form > h1,
796 .content > form > h2,
797 .content > form > h3,
798 .content > form > h4,
799 .content > form > h5,
800 .content > form > h6,
801 .content > form > p,
802 .content > form > table,
803 .content > form > ul,
804 .content > form > div {
805 margin-right: 0;
806 }
807 .content blockquote,
808 .content pre {
809 float: none;
810 width: auto;
811 }
812 .content .annotation {
813 float: none;
814 width: auto;
815 }
816}
817
818.badge {
819 padding: 1px 9px 2px;
820 white-space: nowrap;
821 -webkit-border-radius: 9px;
822 -moz-border-radius: 9px;
823 border-radius: 9px;
824 color: #ffffff;
825 text-shadow: none !important;
826 font-weight: bold;
827}
828
829.badge.badge-darkred {
830 background-color: darkred;
831}
832
833.badge.badge-red {
834 background-color: red;
835}
836
837.badge.badge-blue {
838 background-color: blue;
839}
840
841.badge.badge-darkblue {
842 background-color: darkblue;
843}
844
845.badge.badge-green {
846 background-color: green;
847}
848
849.badge.badge-darkgreen {
850 background-color: darkgreen;
851}
852
853.badge.badge-purple {
854 background-color: purple;
855}
856
857.badge.badge-black {
858 background-color: black;
859}
860
861.badge.badge-grey {
862 background-color: grey;
863}
864
865.fancy-heading-panel {
866 background-color: lightgrey;
867 border-radius: 5px;
868 padding-left: 5px !important;
869 padding-top: 5px !important;
870 padding-bottom: 5px !important;
871 margin-left: 25px;
872 margin-right: 10px;
873 width: 47%;
874}
875
876@media screen and (max-width: 700px) {
877 .fancy-heading-panel {
878 width: 95%;
879 }
880}
881
882button {
883 border: none;
884}
885
886* {
887 /* Foreground, Background */
888 scrollbar-color: #3c4c67 transparent;
889}
890*::-webkit-scrollbar {
891 /* Background */
892 width: 10px;
893 height: 10px;
894 background: transparent;
895}
896
897*::-webkit-scrollbar-thumb {
898 /* Foreground */
899 background: #626161;
900}
901
902details {
903 position: relative;
904}
905
906details::before {
907 position: absolute;
908 content: "";
909 height: 100%;
910 width: 4px;
911 margin-left: -8px;
912 border-radius: 8px;
913 background: lightgrey;
914}
915
916/* override pastel's override */
917details > summary {
918 display: list-item;
919}
920
921.badge.badge-scope {
922 font-size: 80%;
923 text-decoration: none;
924 background: #87ad3a;
925}
926.badge.badge-scope-lazer {
927 background: #ba6436;
928}
929.badge.badge-scope-oauth {
930 background: #3a87ad;
931}
932.badge.badge-user {
933 background: #ad2a66;
934}
935.content table tr:nth-child(2n + 1) > td {
936 background: rgba(0, 0, 0, 0.02);
937}
938.content table td {
939 padding-top: 5px;
940 padding-bottom: 5px;
941}
942.logo {
943 background-image: url("~@images/layout/osu-logo-white.svg");
944 background-position: center;
945 background-size: contain;
946 background-repeat: no-repeat;
947 width: 100%;
948 max-width: 70%;
949 padding-bottom: $max-width;
950 margin: auto;
951 display: block;
952 margin-top: 10px;
953}
954.menu-burger {
955 --width: 2px;
956 --space: 2px;
957 display: inline-block;
958 width: var(--width);
959 height: 1em;
960 background-color: currentcolor;
961 position: relative;
962 margin: 0 calc(var(--width) + var(--space)) -2px;
963 border-radius: 10000px;
964
965 &::after,
966 &::before {
967 content: "";
968 width: inherit;
969 height: inherit;
970 background-color: inherit;
971 border-radius: inherit;
972 position: absolute;
973 }
974
975 &::after {
976 left: 100%;
977 margin-left: var(--space);
978 }
979
980 &::before {
981 right: 100%;
982 margin-right: var(--space);
983 }
984}