diff options
Diffstat (limited to 'app/Resources/static/themes/baggy/css/guide.scss')
-rw-r--r-- | app/Resources/static/themes/baggy/css/guide.scss | 263 |
1 files changed, 263 insertions, 0 deletions
diff --git a/app/Resources/static/themes/baggy/css/guide.scss b/app/Resources/static/themes/baggy/css/guide.scss new file mode 100644 index 00000000..afb47c4a --- /dev/null +++ b/app/Resources/static/themes/baggy/css/guide.scss | |||
@@ -0,0 +1,263 @@ | |||
1 | |||
2 | ::selection { | ||
3 | color: #fff; | ||
4 | background-color: #000; | ||
5 | } | ||
6 | |||
7 | .desktopHide { | ||
8 | display: none; | ||
9 | } | ||
10 | |||
11 | .logo { | ||
12 | position: fixed; | ||
13 | z-index: 20; | ||
14 | top: 0.4em; | ||
15 | left: 0.6em; | ||
16 | } | ||
17 | |||
18 | h2, | ||
19 | h3, | ||
20 | h4 { | ||
21 | font-family: "PT Sans", sans-serif; | ||
22 | text-transform: uppercase; | ||
23 | } | ||
24 | |||
25 | p, | ||
26 | li, | ||
27 | label { | ||
28 | color: #666; | ||
29 | } | ||
30 | |||
31 | a { | ||
32 | color: #000; | ||
33 | font-weight: bold; | ||
34 | |||
35 | &.nostyle { | ||
36 | text-decoration: none; | ||
37 | } | ||
38 | |||
39 | &:hover, | ||
40 | &:focus { | ||
41 | text-decoration: none; | ||
42 | } | ||
43 | } | ||
44 | |||
45 | form fieldset { | ||
46 | border: 0; | ||
47 | padding: 0; | ||
48 | margin: 0; | ||
49 | } | ||
50 | |||
51 | form input[type="text"], | ||
52 | form input[type="number"], | ||
53 | select, | ||
54 | form input[type="password"], | ||
55 | form input[type="url"], | ||
56 | form input[type="email"] { | ||
57 | border: 1px solid #999; | ||
58 | padding: 0.5em 1em; | ||
59 | min-width: 12em; | ||
60 | color: #666; | ||
61 | } | ||
62 | |||
63 | @media screen and (-webkit-min-device-pixel-ratio: 0) { | ||
64 | select { | ||
65 | -webkit-appearance: none; | ||
66 | border-radius: 0; | ||
67 | background: #fff url("../../_global/img/bg-select.png") no-repeat right center; | ||
68 | } | ||
69 | } | ||
70 | |||
71 | .inline { | ||
72 | .row { | ||
73 | display: inline-block; | ||
74 | margin-right: 0.5em; | ||
75 | } | ||
76 | |||
77 | label { | ||
78 | min-width: 6em; | ||
79 | } | ||
80 | } | ||
81 | |||
82 | fieldset label { | ||
83 | display: inline-block; | ||
84 | min-width: 12.5em; | ||
85 | color: #666; | ||
86 | } | ||
87 | |||
88 | label { | ||
89 | margin-right: 0.5em; | ||
90 | } | ||
91 | |||
92 | form .row { | ||
93 | margin-bottom: 0.5em; | ||
94 | } | ||
95 | |||
96 | form button, | ||
97 | input[type="submit"] { | ||
98 | cursor: pointer; | ||
99 | background-color: #000; | ||
100 | color: #fff; | ||
101 | padding: 0.5em 1em; | ||
102 | display: inline-block; | ||
103 | border: 1px solid #000; | ||
104 | } | ||
105 | |||
106 | form button:hover, | ||
107 | form button:focus, | ||
108 | input[type="submit"]:hover, | ||
109 | input[type="submit"]:focus { | ||
110 | background-color: #fff; | ||
111 | color: #000; | ||
112 | -webkit-transition: all 0.5s ease; | ||
113 | -moz-transition: all 0.5s ease; | ||
114 | -ms-transition: all 0.5s ease; | ||
115 | -o-transition: all 0.5s ease; | ||
116 | transition: all 0.5s ease; | ||
117 | } | ||
118 | |||
119 | #bookmarklet { | ||
120 | cursor: move; | ||
121 | } | ||
122 | |||
123 | h2::after { | ||
124 | content: ""; | ||
125 | height: 4px; | ||
126 | width: 20%; | ||
127 | background-color: #000; | ||
128 | display: block; | ||
129 | } | ||
130 | |||
131 | .links { | ||
132 | padding: 0; | ||
133 | margin: 0; | ||
134 | |||
135 | li { | ||
136 | list-style: none; | ||
137 | margin: 0; | ||
138 | padding: 0; | ||
139 | } | ||
140 | } | ||
141 | |||
142 | #links { | ||
143 | position: fixed; | ||
144 | top: 0; | ||
145 | width: 10em; | ||
146 | left: 0; | ||
147 | text-align: right; | ||
148 | background-color: #333; | ||
149 | padding-top: 9.5em; | ||
150 | height: 100%; | ||
151 | box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6); | ||
152 | z-index: 15; | ||
153 | |||
154 | > li > a { | ||
155 | display: block; | ||
156 | padding: 0.5em 2em 0.5em 1em; | ||
157 | color: #fff; | ||
158 | position: relative; | ||
159 | text-transform: uppercase; | ||
160 | text-decoration: none; | ||
161 | font-weight: normal; | ||
162 | font-family: "PT Sans", sans-serif; | ||
163 | transition: all 0.5s ease; | ||
164 | |||
165 | &:hover, | ||
166 | &:focus { | ||
167 | background-color: #999; | ||
168 | color: #000; | ||
169 | } | ||
170 | } | ||
171 | |||
172 | .current::after { | ||
173 | content: ""; | ||
174 | width: 0; | ||
175 | height: 0; | ||
176 | position: absolute; | ||
177 | border: 10px solid transparent; | ||
178 | border-right-color: #eee; | ||
179 | right: 0; | ||
180 | top: 50%; | ||
181 | margin-top: -10px; | ||
182 | } | ||
183 | |||
184 | li:last-child { | ||
185 | position: fixed; | ||
186 | bottom: 1em; | ||
187 | width: 10em; | ||
188 | |||
189 | a::before { | ||
190 | font-size: 1.2em; | ||
191 | position: relative; | ||
192 | top: 2px; | ||
193 | } | ||
194 | } | ||
195 | } | ||
196 | |||
197 | #main { | ||
198 | margin-left: 12em; | ||
199 | position: relative; | ||
200 | z-index: 10; | ||
201 | padding-right: 5%; | ||
202 | padding-bottom: 1em; | ||
203 | } | ||
204 | |||
205 | #sort { | ||
206 | padding: 0; | ||
207 | list-style-type: none; | ||
208 | opacity: 0.5; | ||
209 | display: inline-block; | ||
210 | |||
211 | li { | ||
212 | display: inline; | ||
213 | font-size: 0.9em; | ||
214 | |||
215 | & + li { | ||
216 | margin-left: 10px; | ||
217 | } | ||
218 | } | ||
219 | |||
220 | a { | ||
221 | padding: 2px 2px 0; | ||
222 | vertical-align: middle; | ||
223 | } | ||
224 | |||
225 | img { | ||
226 | vertical-align: baseline; | ||
227 | |||
228 | :hover { | ||
229 | cursor: pointer; | ||
230 | } | ||
231 | } | ||
232 | } | ||
233 | |||
234 | #display-mode { | ||
235 | float: right; | ||
236 | margin-top: 10px; | ||
237 | margin-bottom: 10px; | ||
238 | opacity: 0.5; | ||
239 | } | ||
240 | |||
241 | #listmode { | ||
242 | width: 16px; | ||
243 | display: inline-block; | ||
244 | text-decoration: none; | ||
245 | |||
246 | &.tablemode { | ||
247 | background: url("../../_global/img/table.png") no-repeat bottom; | ||
248 | } | ||
249 | |||
250 | .listmode { | ||
251 | background: url("../../_global/img/list.png") no-repeat bottom; | ||
252 | } | ||
253 | } | ||
254 | |||
255 | #warning_message { | ||
256 | position: fixed; | ||
257 | background-color: #ff6347; | ||
258 | z-index: 1000; | ||
259 | bottom: 0; | ||
260 | left: 0; | ||
261 | width: 100%; | ||
262 | color: #000; | ||
263 | } | ||