|
0
|
1 /*
|
|
|
2 * ----------------------------------------------------------------------------
|
|
|
3 * "THE BEER-WARE LICENSE" (Revision 42.1+yakumolabs):
|
|
|
4 * <eternal-servant@yakumo.dev> wrote this file. As long as you retain this notice you
|
|
|
5 * can do whatever you want with this stuff. If we meet some day, and you think
|
|
|
6 * this stuff is worth it, you can buy me a Yukari Yakumo fumo (or related merch) in return Izuru Yakumo
|
|
|
7 * ----------------------------------------------------------------------------
|
|
|
8 */
|
|
|
9
|
|
|
10 /*
|
|
|
11 * This is a hand-written layout which aims to replicate the user interface of
|
|
|
12 * GoldSrc-based game menus as much as possible.
|
|
|
13 * It contains a lot of hacks just to make stuff work.
|
|
|
14 * Mobile support is a non-goal (it works, but wallpaper doesn't fit for obvious reasons)
|
|
|
15 */
|
|
|
16
|
|
|
17 @import "/css/font.css";
|
|
|
18
|
|
2
|
19 /* Human mode */
|
|
|
20 @media (prefers-color-scheme: light) {
|
|
|
21 :root {
|
|
0
|
22 --bg: #ffffff;
|
|
|
23 --fg: #000000;
|
|
|
24 --link: #000000;
|
|
|
25 --link-hover: #800080;
|
|
|
26 --link-visited: #ff0000;
|
|
|
27 --border: #9d9d9d;
|
|
2
|
28 }
|
|
|
29 body {
|
|
|
30 background-image: url('/img/reimu.jpg');
|
|
|
31 background-position: 40% 10%;
|
|
|
32 }
|
|
0
|
33 }
|
|
|
34
|
|
2
|
35 /* Youkai mode */
|
|
|
36 @media (prefers-color-scheme: dark) {
|
|
|
37 :root {
|
|
|
38 --bg: #000000;
|
|
|
39 --fg: #ffffff;
|
|
|
40 --link: #ffffff;
|
|
|
41 --link-hover: #ffd700;
|
|
|
42 --link-visited: #ffa500;
|
|
|
43 --border: #494949;
|
|
|
44 }
|
|
|
45 body {
|
|
|
46 background-image: url('/img/yukari.jpg');
|
|
|
47 background-position: 35% 35%;
|
|
|
48 }
|
|
|
49 }
|
|
|
50
|
|
0
|
51 body {
|
|
|
52 background-repeat: no-repeat;
|
|
|
53 background-color: var(--bg);
|
|
2
|
54 font-family: 'Ume UI Gothic';
|
|
0
|
55 font-weight: bold;
|
|
|
56 }
|
|
|
57 div.content {
|
|
|
58 color: var(--fg);
|
|
|
59 }
|
|
|
60 .menu {
|
|
|
61 position: absolute;
|
|
|
62 text-align: justified;
|
|
|
63 float: left;
|
|
|
64 bottom: 2px;
|
|
|
65 left: 5px;
|
|
|
66 right: 30px;
|
|
|
67 top: 420px;
|
|
|
68 }
|
|
|
69 .menu a {
|
|
|
70 color: var(--link);
|
|
|
71 }
|
|
|
72 .menu a:hover {
|
|
|
73 color: var(--link-hover);
|
|
|
74 }
|
|
|
75 .menu a:visited {
|
|
|
76 color: var(--link-visited);
|
|
|
77 }
|
|
|
78 .powered_by {
|
|
|
79 float: right;
|
|
|
80 }
|
|
|
81
|
|
2
|
82 @media screen and (max-width: 600px) {
|
|
|
83 body {
|
|
|
84 background: var(--bg);
|
|
|
85 font-family: 'Roboto', sans-serif;
|
|
0
|
86 }
|
|
2
|
87 .menu {
|
|
|
88 font-size: 20px;
|
|
|
89 }
|
|
|
90 .powered_by {
|
|
|
91 display: none;
|
|
0
|
92 }
|
|
|
93 }
|
