OSDN Git Service

52b72fb80de5ac6c43f399be25517671f8fdb2b7
[hengband/web.git] / src / hengband.css
1 \r
2 a:link          { color: #E09990;}\r
3 a:visited       { color: #C09990;}\r
4 a:active        { color: #F0DDDD;}\r
5 a:hover         { color: #F0DDDD;}\r
6 \r
7 body {\r
8         min-height: 100vh;\r
9 \r
10         color: #D0D0D0;\r
11         background-color: #300900;\r
12         display: flex;\r
13         flex-direction: column;\r
14         justify-content: space-between;\r
15         align-content: center;\r
16         align-items: center;\r
17 \r
18         padding: 0px;\r
19         border: 0px;\r
20         margin: 0px;\r
21         font-family:"メイリオ","Meiryo",Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif;\r
22         font-size: 1.0rem;\r
23         line-height: 1.2rem;\r
24 }\r
25 \r
26 #wrapper{\r
27         background-color: #000000;\r
28         min-width: 400px;\r
29         max-width: 800px;\r
30         text-align: left;\r
31         position: relative;\r
32         padding: 0px 0px 0px 0px;\r
33         border: 0px;\r
34         margin: 0 auto;\r
35 }\r
36 \r
37 /* ヘッダ/フッタ ////////////////////////////////////////////////// */\r
38 \r
39 header{\r
40         width: 100%;\r
41         background-color : #000000;\r
42         display: flex;\r
43         flex-direction: column;\r
44 }\r
45 \r
46 footer\r
47 {\r
48         width: 100%;\r
49         background-color: #000000;\r
50         padding: 10px 10px;\r
51 \r
52         display: flex;\r
53         flex-direction: row;\r
54         justify-content: space-around;\r
55 }\r
56 \r
57 footer > section\r
58 {\r
59         font-size: 70%;\r
60         line-height: 100%;\r
61 }\r
62 \r
63 \r
64 /* タイトル系統 ////////////////////////////////////////////////// */\r
65 \r
66 section#title\r
67 {\r
68         width: 80vw;\r
69         margin-right : auto;\r
70         margin-left  : auto;\r
71 \r
72         display: flex;\r
73         justify-content: space-between;\r
74         align-content: center;\r
75         align-items: flex-end;\r
76 }\r
77 \r
78 img#hengTitle\r
79 {\r
80         width: 25vw;\r
81         height: auto;\r
82 }\r
83 \r
84 img.tama4\r
85 {\r
86         width: 8vw;\r
87 }\r
88 \r
89 img.tama3\r
90 {\r
91         width: 5vw;\r
92 }\r
93 \r
94 img.tama2\r
95 {\r
96         width: 2vw;\r
97 }\r
98 \r
99 img.tama1\r
100 {\r
101         width: 1vw;\r
102 }\r
103 \r
104 \r
105 \r
106 /* メインメニュー系統 ////////////////////////////////////////////////// */\r
107 \r
108 section#mainMenu\r
109 {\r
110         width: 100vw;\r
111         margin-right : auto;\r
112         margin-left  : auto;\r
113         background-color: #000000;\r
114 \r
115         justify-content: center;\r
116         align-content: center;\r
117         display: flex;\r
118 }\r
119 \r
120 section#mainMenu > a {\r
121         position: relative;\r
122         display: inline-block;\r
123         padding: 0.25em 0.5em;\r
124         text-decoration: none;\r
125         background: #302010;\r
126         color: #FFFFFF;\r
127         border-radius: 0.3vw;\r
128         box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);\r
129         font-weight: bold;\r
130         border: solid 2px #d27d00;/*線色*/\r
131 }\r
132 \r
133 section#mainMenu > span {\r
134         position: relative;\r
135         display: inline-block;\r
136         padding: 0.25em 0.5em;\r
137         text-decoration: none;\r
138         color: #908080;\r
139         background: #442200;\r
140         border-radius: 0.3vw;\r
141         box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);\r
142         font-weight: bold;\r
143         border: solid 2px #d27d00;/*線色*/\r
144 }\r
145 \r
146 section#mainMenu > a:hover\r
147 {\r
148         background: #A06535;\r
149         box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);\r
150 }\r
151 \r
152 \r
153 /* 本文系統 ////////////////////////////////////////////////// */\r
154 \r
155 div#main\r
156 {\r
157         font-size: 0.85rem;\r
158         line-height: 1.25rem;\r
159         width: 70%;\r
160 \r
161         display: flex;\r
162         flex-direction: column;\r
163 }\r
164 \r
165 .paragraph > p\r
166 {\r
167         margin: 1rem 0.5rem;\r
168         padding: 0.2rem 0.2rem;\r
169 }\r
170 \r
171 li > p\r
172 {\r
173         margin: 0rem;;\r
174         padding: 0.2rem 0.2rem;\r
175 }\r
176 \r
177 .ulist\r
178 {\r
179         margin: 0.1rem 0.1rem;\r
180         padding: 0.1rem 0.1rem;\r
181 }\r
182 \r
183 .content\r
184 {\r
185         padding: 0.5rem;\r
186         margin: 1rem;\r
187         display: flex;\r
188         flex-direction: row;\r
189         justify-content: center;\r
190         justify-items: center;\r
191         align-content: space-around;\r
192         align-items: center;\r
193 }\r
194 \r
195 .update{\r
196         text-align: center;\r
197         padding: 6px;\r
198         margin:  30px 5px;\r
199 }\r
200 \r
201 \r
202 ul{\r
203         padding: 0px;\r
204         border: 0px;\r
205         margin: 0px 1.0rem;\r
206         padding: 0px;\r
207 }\r
208 \r
209 li{\r
210         margin: 0px 1.0rem;\r
211         padding: 0px;\r
212 }\r
213 \r
214 .image {\r
215         text-align: center;\r
216         padding: 10px;\r
217 }\r
218 \r
219 H2{\r
220         padding: 10px 10px 6px 10px;\r
221         border: 3px #554433 solid;\r
222         background-color: #000000;\r
223 }\r
224 \r
225 H3{\r
226         padding: 5px 5px;\r
227         margin:  0px 5px;\r
228         border: 1px #554433 solid;\r
229         background-color: #000000;\r
230 }\r
231 \r
232 H4{\r
233         padding: 5px 5px;\r
234         margin:  2px 2px;\r
235         background-color: #000000;\r
236 }\r
237 \r
238 .strong\r
239 {\r
240         font-weight: bold;\r
241 }\r
242 \r
243 .line-through\r
244 {\r
245         text-decoration: line-through;\r
246 }\r
247 \r
248 \r
249 /* common footer */\r
250 \r
251 .footer_banner\r
252 {\r
253         float: right;\r
254 }\r
255 \r
256 \r
257 .topimage\r
258 {\r
259         border: 3px #554433 solid;\r
260         text-align: center;\r
261 }\r
262 \r
263 pre {\r
264         width: 100%;\r
265         white-space: pre-wrap;\r
266         word-wrap: break-word;\r
267         background-color: #000000;\r
268         padding: 1rem;\r
269         margin: 0.2rem;\r
270         font-family: MS 明朝, monospace;\r
271 }\r
272 \r
273 \r