suwako / LittleBeast

master
ブランチ master
LittleBeast / public / static / style.css
2.5 KB、151行 生 Blame 履歴
1html, body {
2 height: 100%;
3 margin: 0;
4 background-color: #232023;
5 color: #fcfcfc;
6}
7
8a {
9 color: #ea79d8;
10}
11
12header, main, footer {
13 border: 1px solid #c016c6;
14 margin: 20px;
15 padding: 8px;
16}
17
18.logo, nav {
19 text-align: center;
20}
21
22.logo {
23 font-size: 32px;
24 font-weight: bold;
25}
26
27.menu-item {
28 padding: 0 4px;
29 transition: font-size 0.3s ease-in-out;
30}
31
32.menu-item:hover {
33 font-size: 140%;
34}
35
36.nodeco {
37 text-decoration: none;
38}
39
40.menu-item.active {
41 border: 1px solid #ea79d8;
42 border-radius: 10px;
43 background-color: #550f75;
44 color: #ea79d8;
45 transition: background-color 0.2s ease-in-out, font-size 0.3s ease-in-out;
46}
47
48.menu-item.active:hover {
49 background-color: #b421f8;
50}
51
52.container {
53 max-width: 1280px;
54 margin: auto;
55 padding-bottom: 10px;
56}
57
58.errormes {
59 background: #ee4030;
60 color: #fcfcfc;
61 border: 4px inset #b61729;
62 border-radius: 2px;
63 padding: 2px;
64}
65
66h1.paragraph, p.paragraph {
67 text-align: left;
68}
69
70footer {
71 text-align: center;
72}
73
74header, main, footer, .sns:hover {
75 border-radius: 2px;
76}
77
78/* 入力欄とボタン（ブラウザの白い既定を使わない。:where()なので、個別の指定が優先される） */
79html {
80 color-scheme: dark;
81 accent-color: #c016c6;
82}
83
84:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="image"]), textarea, select, button) {
85 background-color: #2b012a;
86 color: #fcfcfc;
87 border: 1px solid #ea79d8;
88 border-radius: 2px;
89 padding: 2px 6px;
90}
91
92::file-selector-button {
93 background-color: #2b012a;
94 color: #fcfcfc;
95 border: 1px solid #ea79d8;
96 border-radius: 2px;
97 padding: 2px 6px;
98 cursor: pointer;
99}
100
101:where(button, input[type="submit"], input[type="button"], input[type="reset"]) {
102 cursor: pointer;
103}
104
105:where(button, input[type="submit"], input[type="button"], input[type="reset"]):hover, ::file-selector-button:hover {
106 background-color: #550f75;
107}
108
109:where(input, textarea, select, button):focus-visible {
110 outline: 2px solid #ea79d8;
111 outline-offset: 1px;
112}
113
114:where(input, textarea, select, button):disabled {
115 opacity: 0.6;
116 cursor: default;
117}
118
119::placeholder {
120 color: #b0a0b0;
121 opacity: 1;
122}
123
124@media screen and (max-width: 768px) {
125 header, main, footer {
126 margin: 10px;
127 padding: 5px;
128 }
129
130 .logo {
131 font-size: 28px;
132 }
133
134 nav {
135 display: flex;
136 flex-wrap: wrap;
137 justify-content: center;
138 gap: 5px;
139 }
140}
141
142@media screen and (max-width: 480px) {
143 header, main, footer {
144 margin: 5px;
145 padding: 5px;
146 }
147
148 .logo {
149 font-size: 24px;
150 }
151}