diff options
Diffstat (limited to 'app/Resources/static/themes/baggy/css')
14 files changed, 1333 insertions, 30 deletions
diff --git a/app/Resources/static/themes/baggy/css/article.scss b/app/Resources/static/themes/baggy/css/article.scss new file mode 100644 index 00000000..9094ad55 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/article.scss | |||
@@ -0,0 +1,165 @@ | |||
1 | |||
2 | #article { | ||
3 | width: 70%; | ||
4 | margin-bottom: 3em; | ||
5 | text-align: justify; | ||
6 | |||
7 | .tags { | ||
8 | margin-bottom: 1em; | ||
9 | } | ||
10 | |||
11 | i { | ||
12 | font-style: normal; | ||
13 | } | ||
14 | |||
15 | h1 { | ||
16 | text-align: left; | ||
17 | } | ||
18 | |||
19 | h2::after { | ||
20 | content: none; | ||
21 | } | ||
22 | |||
23 | h2, | ||
24 | h3, | ||
25 | h4 { | ||
26 | text-transform: none; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | blockquote { | ||
31 | border: 1px solid #999; | ||
32 | background-color: #fff; | ||
33 | padding: 1em; | ||
34 | margin: 0; | ||
35 | } | ||
36 | |||
37 | .topPosF { | ||
38 | position: fixed; | ||
39 | right: 20%; | ||
40 | bottom: 2em; | ||
41 | font-size: 1.5em; | ||
42 | } | ||
43 | |||
44 | #article_toolbar { | ||
45 | margin-bottom: 1em; | ||
46 | |||
47 | li { | ||
48 | display: inline-block; | ||
49 | margin: 3px auto; | ||
50 | } | ||
51 | |||
52 | a { | ||
53 | background-color: #000; | ||
54 | padding: 0.3em 0.5em 0.2em; | ||
55 | color: #fff; | ||
56 | text-decoration: none; | ||
57 | |||
58 | &:hover, | ||
59 | &:focus { | ||
60 | background-color: #999; | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | |||
65 | #nav-btn-add-tag { | ||
66 | cursor: pointer; | ||
67 | } | ||
68 | |||
69 | .shaarli::before { | ||
70 | content: "*"; | ||
71 | } | ||
72 | |||
73 | .return { | ||
74 | text-decoration: none; | ||
75 | margin-top: 1em; | ||
76 | display: block; | ||
77 | } | ||
78 | |||
79 | .return::before { | ||
80 | margin-right: 0.5em; | ||
81 | } | ||
82 | |||
83 | .notags { | ||
84 | font-style: italic; | ||
85 | color: #999; | ||
86 | } | ||
87 | |||
88 | .icon-rss { | ||
89 | background-color: #000; | ||
90 | color: #fff; | ||
91 | padding: 0.2em 0.5em; | ||
92 | |||
93 | &::before { | ||
94 | position: relative; | ||
95 | top: 2px; | ||
96 | } | ||
97 | } | ||
98 | |||
99 | .list-tags { | ||
100 | li { | ||
101 | margin-bottom: 0.5em; | ||
102 | } | ||
103 | |||
104 | .icon-rss:hover, | ||
105 | .icon-rss:focus { | ||
106 | background-color: #fff; | ||
107 | color: #000; | ||
108 | text-decoration: none; | ||
109 | } | ||
110 | |||
111 | a { | ||
112 | text-decoration: none; | ||
113 | |||
114 | &:hover, | ||
115 | &:focus { | ||
116 | text-decoration: underline; | ||
117 | } | ||
118 | } | ||
119 | } | ||
120 | |||
121 | pre code { | ||
122 | font-family: "Courier New", Courier, monospace; | ||
123 | } | ||
124 | |||
125 | #filters { | ||
126 | position: fixed; | ||
127 | width: 20%; | ||
128 | height: 100%; | ||
129 | top: 0; | ||
130 | right: 0; | ||
131 | background-color: #fff; | ||
132 | padding: 30px 30px 15px 15px; | ||
133 | border-left: 1px #333 solid; | ||
134 | z-index: 12; | ||
135 | min-width: 300px; | ||
136 | |||
137 | form .filter-group { | ||
138 | margin: 5px; | ||
139 | } | ||
140 | } | ||
141 | |||
142 | #download-form { | ||
143 | position: fixed; | ||
144 | width: 10%; | ||
145 | height: 100%; | ||
146 | top: 0; | ||
147 | right: 0; | ||
148 | background-color: #fff; | ||
149 | padding: 30px 30px 15px 15px; | ||
150 | border-left: 1px #333 solid; | ||
151 | z-index: 12; | ||
152 | min-width: 200px; | ||
153 | |||
154 | li { | ||
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: 400; | ||
162 | font-family: PT Sans, sans-serif; | ||
163 | transition: all 0.5s ease; | ||
164 | } | ||
165 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/font.css b/app/Resources/static/themes/baggy/css/font.css deleted file mode 100755 index 47edcb83..00000000 --- a/app/Resources/static/themes/baggy/css/font.css +++ /dev/null | |||
@@ -1,6 +0,0 @@ | |||
1 | @font-face { | ||
2 | font-family: "PT Sans"; | ||
3 | font-style: normal; | ||
4 | font-weight: 700; | ||
5 | src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/ptsansbold.woff") format("woff"); | ||
6 | } | ||
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 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/index.scss b/app/Resources/static/themes/baggy/css/index.scss new file mode 100644 index 00000000..e7a11963 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/index.scss | |||
@@ -0,0 +1,13 @@ | |||
1 | /* Style */ | ||
2 | @import 'guide'; | ||
3 | @import 'layout'; | ||
4 | @import 'article'; | ||
5 | @import 'pictos'; | ||
6 | @import 'login'; | ||
7 | @import 'save'; | ||
8 | @import 'messages'; | ||
9 | |||
10 | /* Tools */ | ||
11 | @import 'media_queries'; | ||
12 | @import 'print'; | ||
13 | @import 'ratatouille'; | ||
diff --git a/app/Resources/static/themes/baggy/css/layout.scss b/app/Resources/static/themes/baggy/css/layout.scss new file mode 100644 index 00000000..cb14e62d --- /dev/null +++ b/app/Resources/static/themes/baggy/css/layout.scss | |||
@@ -0,0 +1,300 @@ | |||
1 | #content { | ||
2 | margin-top: 2em; | ||
3 | min-height: 30em; | ||
4 | } | ||
5 | |||
6 | footer { | ||
7 | text-align: right; | ||
8 | position: relative; | ||
9 | bottom: 0; | ||
10 | right: 5em; | ||
11 | color: #999; | ||
12 | font-size: 0.8em; | ||
13 | font-style: italic; | ||
14 | z-index: 20; | ||
15 | |||
16 | a { | ||
17 | color: #999; | ||
18 | font-weight: normal; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | .list-entries { | ||
23 | letter-spacing: -5px; | ||
24 | } | ||
25 | |||
26 | .listmode.entry { | ||
27 | width: 100%; | ||
28 | height: inherit; | ||
29 | } | ||
30 | |||
31 | .card-entry-tags { | ||
32 | max-height: 2em; | ||
33 | overflow-y: hidden; | ||
34 | padding: 0; | ||
35 | margin: 0; | ||
36 | } | ||
37 | |||
38 | .card-entry-tags li, | ||
39 | .card-entry-tags span { | ||
40 | display: inline-block; | ||
41 | margin: 0 5px; | ||
42 | padding: 5px 12px; | ||
43 | background-color: rgba(0, 0, 0, 0.6); | ||
44 | border-radius: 3px; | ||
45 | max-height: 2em; | ||
46 | overflow: hidden; | ||
47 | text-overflow: ellipsis; | ||
48 | } | ||
49 | |||
50 | .card-entry-tags a, | ||
51 | .card-entry-labels a { | ||
52 | text-decoration: none; | ||
53 | font-weight: normal; | ||
54 | color: #fff; | ||
55 | } | ||
56 | |||
57 | .nav-panel-add-tag { | ||
58 | margin-top: 10px; | ||
59 | } | ||
60 | |||
61 | .list-entries + .results { | ||
62 | margin-bottom: 2em; | ||
63 | } | ||
64 | |||
65 | .reading-time, | ||
66 | .created-at { | ||
67 | color: #999; | ||
68 | font-style: italic; | ||
69 | font-weight: normal; | ||
70 | font-size: 0.9em; | ||
71 | } | ||
72 | |||
73 | .estimatedTime small { | ||
74 | position: relative; | ||
75 | top: -1px; | ||
76 | } | ||
77 | |||
78 | .entry { | ||
79 | background-color: #fff; | ||
80 | letter-spacing: normal; | ||
81 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | ||
82 | display: inline-block; | ||
83 | width: 32%; | ||
84 | margin-bottom: 1.5em; | ||
85 | vertical-align: top; | ||
86 | margin-right: 1%; | ||
87 | position: relative; | ||
88 | overflow: hidden; | ||
89 | padding: 1.5em 0 3em; | ||
90 | height: 440px; | ||
91 | |||
92 | img.preview { | ||
93 | width: 100%; | ||
94 | object-fit: cover; | ||
95 | height: 100%; | ||
96 | } | ||
97 | |||
98 | &::before { | ||
99 | content: ""; | ||
100 | width: 0; | ||
101 | height: 0; | ||
102 | border: 10px solid transparent; | ||
103 | border-bottom-color: #000; | ||
104 | position: absolute; | ||
105 | bottom: 0.7em; | ||
106 | z-index: 10; | ||
107 | right: 1.5em; | ||
108 | transition: all 0.5s ease; | ||
109 | } | ||
110 | |||
111 | &::after { | ||
112 | content: ""; | ||
113 | position: absolute; | ||
114 | height: 7px; | ||
115 | width: 100%; | ||
116 | bottom: 0; | ||
117 | left: 0; | ||
118 | background-color: #000; | ||
119 | transition: all 0.5s ease; | ||
120 | } | ||
121 | |||
122 | &:hover { | ||
123 | box-shadow: 0 3px 10px rgba(0, 0, 0, 1); | ||
124 | |||
125 | &::after { | ||
126 | height: 40px; | ||
127 | } | ||
128 | |||
129 | &::before { | ||
130 | bottom: 2.3em; | ||
131 | } | ||
132 | |||
133 | h2 a { | ||
134 | color: #666; | ||
135 | } | ||
136 | |||
137 | .tools { | ||
138 | bottom: 0; | ||
139 | } | ||
140 | } | ||
141 | |||
142 | h2 { | ||
143 | text-transform: none; | ||
144 | margin-bottom: 0; | ||
145 | line-height: 1.2; | ||
146 | margin-left: 5px; | ||
147 | } | ||
148 | |||
149 | &::after { | ||
150 | content: none; | ||
151 | } | ||
152 | |||
153 | a { | ||
154 | display: block; | ||
155 | text-decoration: none; | ||
156 | color: #000; | ||
157 | word-wrap: break-word; | ||
158 | transition: all 0.5s ease; | ||
159 | } | ||
160 | |||
161 | p { | ||
162 | color: #666; | ||
163 | font-size: 0.9em; | ||
164 | line-height: 1.7; | ||
165 | margin: 5px 5px auto; | ||
166 | } | ||
167 | |||
168 | h2 a::first-letter { | ||
169 | text-transform: uppercase; | ||
170 | } | ||
171 | |||
172 | .tools { | ||
173 | position: absolute; | ||
174 | bottom: -40px; | ||
175 | left: 0; | ||
176 | background: #000; | ||
177 | width: 100%; | ||
178 | z-index: 10; | ||
179 | padding-right: 0.5em; | ||
180 | text-align: right; | ||
181 | transition: all 0.5s ease; | ||
182 | |||
183 | a { | ||
184 | color: #666; | ||
185 | text-decoration: none; | ||
186 | display: block; | ||
187 | padding: 0.4em; | ||
188 | |||
189 | &:hover { | ||
190 | color: #fff; | ||
191 | } | ||
192 | } | ||
193 | |||
194 | li { | ||
195 | display: inline-block; | ||
196 | margin-top: 10px; | ||
197 | } | ||
198 | |||
199 | li:first-child { | ||
200 | float: left; | ||
201 | font-size: 0.9em; | ||
202 | max-width: calc(100% - 40px * 4); | ||
203 | text-overflow: ellipsis; | ||
204 | overflow: hidden; | ||
205 | white-space: nowrap; | ||
206 | max-height: 2em; | ||
207 | margin-left: 10px; | ||
208 | } | ||
209 | } | ||
210 | |||
211 | .card-entry-labels { | ||
212 | position: absolute; | ||
213 | top: 100px; | ||
214 | left: -1em; | ||
215 | z-index: 90; | ||
216 | max-width: 50%; | ||
217 | padding-left: 0; | ||
218 | |||
219 | li { | ||
220 | margin: 10px 10px 10px auto; | ||
221 | padding: 5px 12px 5px 25px; | ||
222 | background-color: rgba(0, 0, 0, 0.6); | ||
223 | border-radius: 0 3px 3px 0; | ||
224 | color: #fff; | ||
225 | cursor: default; | ||
226 | max-height: 2em; | ||
227 | overflow: hidden; | ||
228 | text-overflow: ellipsis; | ||
229 | white-space: nowrap; | ||
230 | |||
231 | a { | ||
232 | color: #fff; | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | } | ||
237 | |||
238 | .entry:nth-child(3n+1) { | ||
239 | margin-left: 0; | ||
240 | } | ||
241 | |||
242 | .results { | ||
243 | letter-spacing: -5px; | ||
244 | padding: 0 0 0.5em; | ||
245 | |||
246 | > * { | ||
247 | display: inline-block; | ||
248 | vertical-align: top; | ||
249 | letter-spacing: normal; | ||
250 | width: 50%; | ||
251 | text-align: right; | ||
252 | } | ||
253 | } | ||
254 | |||
255 | div.pagination ul { | ||
256 | text-align: right; | ||
257 | } | ||
258 | |||
259 | .nb-results { | ||
260 | text-align: left; | ||
261 | font-style: italic; | ||
262 | color: #999; | ||
263 | display: inline-flex; | ||
264 | } | ||
265 | |||
266 | div.pagination ul { | ||
267 | a { | ||
268 | color: #999; | ||
269 | text-decoration: none; | ||
270 | |||
271 | &:hover, | ||
272 | &:focus { | ||
273 | text-decoration: underline; | ||
274 | } | ||
275 | } | ||
276 | |||
277 | > * { | ||
278 | display: inline-block; | ||
279 | margin-left: 0.5em; | ||
280 | } | ||
281 | |||
282 | .prev.disabled, | ||
283 | .next.disabled { | ||
284 | display: none; | ||
285 | } | ||
286 | |||
287 | .current { | ||
288 | height: 25px; | ||
289 | padding: 4px 8px; | ||
290 | border: 1px solid #d5d5d5; | ||
291 | text-decoration: none; | ||
292 | font-weight: bold; | ||
293 | color: #000; | ||
294 | background-color: #ccc; | ||
295 | } | ||
296 | } | ||
297 | |||
298 | .hide { | ||
299 | display: none; | ||
300 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/login.scss b/app/Resources/static/themes/baggy/css/login.scss new file mode 100644 index 00000000..312df670 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/login.scss | |||
@@ -0,0 +1,26 @@ | |||
1 | .login { | ||
2 | background-color: #333; | ||
3 | |||
4 | #main { | ||
5 | padding: 0; | ||
6 | margin: 0; | ||
7 | } | ||
8 | |||
9 | form { | ||
10 | background-color: #fff; | ||
11 | padding: 1.5em; | ||
12 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); | ||
13 | width: 20em; | ||
14 | position: absolute; | ||
15 | top: 8em; | ||
16 | left: 50%; | ||
17 | margin-left: -10em; | ||
18 | } | ||
19 | |||
20 | .logo { | ||
21 | position: absolute; | ||
22 | top: 2em; | ||
23 | left: 50%; | ||
24 | margin-left: -55px; | ||
25 | } | ||
26 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css index e16846ea..f82c6bee 100755 --- a/app/Resources/static/themes/baggy/css/main.css +++ b/app/Resources/static/themes/baggy/css/main.css | |||
@@ -912,6 +912,14 @@ a.add-to-wallabag-link-after::after { | |||
912 | content: "\e953"; | 912 | content: "\e953"; |
913 | } | 913 | } |
914 | 914 | ||
915 | .icon-pencil2::before { | ||
916 | content: "\e906"; | ||
917 | } | ||
918 | |||
919 | .icon-users::before { | ||
920 | content: "\e972"; | ||
921 | } | ||
922 | |||
915 | .icon-time::before { | 923 | .icon-time::before { |
916 | content: "\e952"; | 924 | content: "\e952"; |
917 | } | 925 | } |
@@ -947,6 +955,11 @@ a.add-to-wallabag-link-after::after { | |||
947 | background-image: url("../../_global/img/icons/shaarli.png"); | 955 | background-image: url("../../_global/img/icons/shaarli.png"); |
948 | } | 956 | } |
949 | 957 | ||
958 | /* scuttle */ | ||
959 | .icon-image--scuttle { | ||
960 | background-image: url("../../_global/img/icons/scuttle.png"); | ||
961 | } | ||
962 | |||
950 | /* ========================================================================== | 963 | /* ========================================================================== |
951 | Icon selected | 964 | Icon selected |
952 | ========================================================================== */ | 965 | ========================================================================== */ |
@@ -1063,6 +1076,10 @@ blockquote { | |||
1063 | content: "*"; | 1076 | content: "*"; |
1064 | } | 1077 | } |
1065 | 1078 | ||
1079 | .scuttle::before { | ||
1080 | content: "*"; | ||
1081 | } | ||
1082 | |||
1066 | .return { | 1083 | .return { |
1067 | text-decoration: none; | 1084 | text-decoration: none; |
1068 | margin-top: 1em; | 1085 | margin-top: 1em; |
diff --git a/app/Resources/static/themes/baggy/css/media_queries.scss b/app/Resources/static/themes/baggy/css/media_queries.scss new file mode 100755 index 00000000..c33db0b3 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/media_queries.scss | |||
@@ -0,0 +1,172 @@ | |||
1 | |||
2 | @media screen and (max-width: 1050px) { | ||
3 | .entry { | ||
4 | width: 49%; | ||
5 | } | ||
6 | |||
7 | .entry:nth-child(3n+1) { | ||
8 | margin-left: 1.5%; | ||
9 | } | ||
10 | |||
11 | .entry:nth-child(2n+1) { | ||
12 | margin-left: 0; | ||
13 | } | ||
14 | } | ||
15 | |||
16 | @media screen and (max-width: 900px) { | ||
17 | #article { | ||
18 | width: 80%; | ||
19 | } | ||
20 | |||
21 | .topPosF { | ||
22 | right: 2.5em; | ||
23 | } | ||
24 | } | ||
25 | |||
26 | @media screen and (max-width: 700px) { | ||
27 | .entry { | ||
28 | width: 100%; | ||
29 | margin-left: 0; | ||
30 | } | ||
31 | |||
32 | #display-mode { | ||
33 | display: none; | ||
34 | } | ||
35 | } | ||
36 | |||
37 | @media screen and (max-height: 770px) { | ||
38 | .menu.users, | ||
39 | .menu.internal, | ||
40 | .menu.developer { | ||
41 | display: none; | ||
42 | } | ||
43 | } | ||
44 | |||
45 | @media screen and (max-width: 500px) { | ||
46 | .entry { | ||
47 | width: 100%; | ||
48 | margin-left: 0; | ||
49 | } | ||
50 | |||
51 | body > header { | ||
52 | background-color: #333; | ||
53 | position: fixed; | ||
54 | top: 0; | ||
55 | width: 100%; | ||
56 | height: 3em; | ||
57 | z-index: 11; | ||
58 | } | ||
59 | |||
60 | #links li:last-child { | ||
61 | position: static; | ||
62 | width: auto; | ||
63 | } | ||
64 | |||
65 | #links li:last-child a::before { | ||
66 | content: none; | ||
67 | } | ||
68 | |||
69 | .logo { | ||
70 | width: 1.25em; | ||
71 | height: 1.25em; | ||
72 | left: 0; | ||
73 | top: 0; | ||
74 | } | ||
75 | |||
76 | .login > header { | ||
77 | position: static; | ||
78 | } | ||
79 | |||
80 | .login form { | ||
81 | width: 100%; | ||
82 | position: static; | ||
83 | margin-left: 0; | ||
84 | } | ||
85 | |||
86 | .login .logo { | ||
87 | height: auto; | ||
88 | top: 0.5em; | ||
89 | width: 75px; | ||
90 | margin-left: -37.5px; | ||
91 | } | ||
92 | |||
93 | .desktopHide { | ||
94 | display: block; | ||
95 | position: fixed; | ||
96 | z-index: 20; | ||
97 | top: 0; | ||
98 | right: 0; | ||
99 | border: 0; | ||
100 | width: 2.5em; | ||
101 | height: 2.5em; | ||
102 | cursor: pointer; | ||
103 | background-color: #999; | ||
104 | font-size: 1.2em; | ||
105 | } | ||
106 | |||
107 | .desktopHide:hover, | ||
108 | .desktopHide:focus { | ||
109 | background-color: #fff; | ||
110 | } | ||
111 | |||
112 | #links { | ||
113 | display: none; | ||
114 | width: 100%; | ||
115 | height: auto; | ||
116 | padding-top: 3em; | ||
117 | } | ||
118 | |||
119 | #links.menu--open { | ||
120 | display: block; | ||
121 | } | ||
122 | |||
123 | footer { | ||
124 | position: static; | ||
125 | margin-right: 3em; | ||
126 | } | ||
127 | |||
128 | #main { | ||
129 | margin-left: 1.5em; | ||
130 | padding-right: 1.5em; | ||
131 | position: static; | ||
132 | margin-top: 3em; | ||
133 | } | ||
134 | |||
135 | .card-entry-labels { | ||
136 | display: none; | ||
137 | } | ||
138 | |||
139 | #article_toolbar .topPosF { | ||
140 | display: none; | ||
141 | } | ||
142 | |||
143 | #article { | ||
144 | width: 100%; | ||
145 | } | ||
146 | |||
147 | #article h1 { | ||
148 | font-size: 1.5em; | ||
149 | } | ||
150 | |||
151 | #article_toolbar a { | ||
152 | padding: 0.3em 0.4em 0.2em; | ||
153 | } | ||
154 | |||
155 | #display-mode { | ||
156 | display: none; | ||
157 | } | ||
158 | |||
159 | .popup-form, | ||
160 | #bagit-form, | ||
161 | #search-form { | ||
162 | left: 0; | ||
163 | width: 100%; | ||
164 | border-left: none; | ||
165 | } | ||
166 | |||
167 | .popup-form form, | ||
168 | #bagit-form form, | ||
169 | #search-form form { | ||
170 | width: 100%; | ||
171 | } | ||
172 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/messages.css b/app/Resources/static/themes/baggy/css/messages.css deleted file mode 100755 index bfaf1448..00000000 --- a/app/Resources/static/themes/baggy/css/messages.css +++ /dev/null | |||
@@ -1,19 +0,0 @@ | |||
1 | .messages.error.install { | ||
2 | border: 1px solid #c42608; | ||
3 | color: #c00 !important; | ||
4 | background: #fff0ef; | ||
5 | text-align: left; | ||
6 | } | ||
7 | |||
8 | .messages.notice.install { | ||
9 | border: 1px solid #ebcd41; | ||
10 | color: #000; | ||
11 | background: #fffcd3; | ||
12 | text-align: left; | ||
13 | } | ||
14 | |||
15 | .messages.success.install { | ||
16 | border: 1px solid #6dc70c; | ||
17 | background: #e0fbcc !important; | ||
18 | text-align: left; | ||
19 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/messages.scss b/app/Resources/static/themes/baggy/css/messages.scss new file mode 100755 index 00000000..a388419e --- /dev/null +++ b/app/Resources/static/themes/baggy/css/messages.scss | |||
@@ -0,0 +1,50 @@ | |||
1 | /* ========================================================================== | ||
2 | Messages | ||
3 | ========================================================================== */ | ||
4 | |||
5 | .messages { | ||
6 | text-align: left; | ||
7 | width: 60%; | ||
8 | margin: auto 17%; | ||
9 | |||
10 | > * { | ||
11 | display: inline-block; | ||
12 | } | ||
13 | |||
14 | .install { | ||
15 | text-align: left; | ||
16 | |||
17 | &.error { | ||
18 | border: 1px solid #c42608; | ||
19 | color: #c00 !important; | ||
20 | background: #fff0ef; | ||
21 | } | ||
22 | |||
23 | &.notice { | ||
24 | border: 1px solid #ebcd41; | ||
25 | color: #000; | ||
26 | background: #fffcd3; | ||
27 | } | ||
28 | |||
29 | &.success { | ||
30 | border: 1px solid #6dc70c; | ||
31 | background: #e0fbcc !important; | ||
32 | } | ||
33 | } | ||
34 | } | ||
35 | |||
36 | .warning { | ||
37 | font-weight: bold; | ||
38 | display: block; | ||
39 | width: 100%; | ||
40 | } | ||
41 | |||
42 | .more-info { | ||
43 | font-size: 0.85em; | ||
44 | line-height: 1.5; | ||
45 | color: #aaa; | ||
46 | |||
47 | a { | ||
48 | color: #aaa; | ||
49 | } | ||
50 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/pictos.scss b/app/Resources/static/themes/baggy/css/pictos.scss new file mode 100644 index 00000000..2ff01937 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/pictos.scss | |||
@@ -0,0 +1,210 @@ | |||
1 | /* ========================================================================== | ||
2 | Pictos | ||
3 | ========================================================================== */ | ||
4 | |||
5 | @font-face { | ||
6 | font-family: icomoon; | ||
7 | src: url('~icomoon-free-npm/Font/IcoMoon-Free.ttf'); | ||
8 | font-weight: normal; | ||
9 | font-style: normal; | ||
10 | } | ||
11 | |||
12 | .material-icons { | ||
13 | font-family: 'Material Icons'; | ||
14 | font-weight: normal; | ||
15 | font-style: normal; | ||
16 | font-size: 1em; /* Preferred icon size */ | ||
17 | width: 1em; | ||
18 | height: 1em; | ||
19 | display: inline-block; | ||
20 | line-height: 1; | ||
21 | text-transform: none; | ||
22 | letter-spacing: normal; | ||
23 | word-wrap: normal; | ||
24 | white-space: nowrap; | ||
25 | direction: ltr; | ||
26 | |||
27 | /* Support for all WebKit browsers. */ | ||
28 | -webkit-font-smoothing: antialiased; | ||
29 | |||
30 | /* Support for Safari and Chrome. */ | ||
31 | text-rendering: optimizeLegibility; | ||
32 | |||
33 | /* Support for Firefox. */ | ||
34 | -moz-osx-font-smoothing: grayscale; | ||
35 | |||
36 | /* Support for IE. */ | ||
37 | font-feature-settings: 'liga'; | ||
38 | |||
39 | .md-18 { font-size: 18px; } | ||
40 | .md-24 { font-size: 24px; } | ||
41 | .md-36 { font-size: 36px; } | ||
42 | .md-48 { font-size: 48px; } | ||
43 | |||
44 | .vertical-align-middle { | ||
45 | vertical-align: middle !important; | ||
46 | } | ||
47 | } | ||
48 | |||
49 | .icon span, | ||
50 | .icon-image span { | ||
51 | position: absolute; | ||
52 | top: -9999px; | ||
53 | } | ||
54 | |||
55 | [class^="icon-"]::before, | ||
56 | [class*=" icon-"]::before { | ||
57 | font-family: icomoon; | ||
58 | speak: none; | ||
59 | font-style: normal; | ||
60 | font-weight: normal; | ||
61 | font-variant: normal; | ||
62 | text-transform: none; | ||
63 | line-height: 1; | ||
64 | |||
65 | /* Enable Ligatures ================ */ | ||
66 | letter-spacing: 0; | ||
67 | -webkit-font-feature-settings: "liga"; | ||
68 | -moz-font-feature-settings: "liga=1"; | ||
69 | -moz-font-feature-settings: "liga"; | ||
70 | -ms-font-feature-settings: "liga" 1; | ||
71 | -o-font-feature-settings: "liga"; | ||
72 | font-feature-settings: "liga"; | ||
73 | |||
74 | /* Better Font Rendering =========== */ | ||
75 | -webkit-font-smoothing: antialiased; | ||
76 | -moz-osx-font-smoothing: grayscale; | ||
77 | } | ||
78 | |||
79 | .icon-flattr::before { | ||
80 | content: "\ead4"; | ||
81 | } | ||
82 | |||
83 | .icon-mail::before { | ||
84 | content: "\ea86"; | ||
85 | } | ||
86 | |||
87 | .icon-up-open::before { | ||
88 | content: "\e80b"; | ||
89 | } | ||
90 | |||
91 | .icon-star::before { | ||
92 | content: "\e9d9"; | ||
93 | } | ||
94 | |||
95 | .icon-check::before { | ||
96 | content: "\ea10"; | ||
97 | } | ||
98 | |||
99 | .icon-link::before { | ||
100 | content: "\e9cb"; | ||
101 | } | ||
102 | |||
103 | .icon-reply::before { | ||
104 | content: "\e806"; | ||
105 | } | ||
106 | |||
107 | .icon-menu::before { | ||
108 | content: "\e9bd"; | ||
109 | } | ||
110 | |||
111 | .icon-clock::before { | ||
112 | content: "\e803"; | ||
113 | } | ||
114 | |||
115 | .icon-twitter::before { | ||
116 | content: "\ea96"; | ||
117 | } | ||
118 | |||
119 | .icon-down-open::before { | ||
120 | content: "\e809"; | ||
121 | } | ||
122 | |||
123 | .icon-trash::before { | ||
124 | content: "\e9ac"; | ||
125 | } | ||
126 | |||
127 | .icon-delete::before { | ||
128 | content: "\ea0d"; | ||
129 | } | ||
130 | |||
131 | .icon-power::before { | ||
132 | content: "\ea14"; | ||
133 | } | ||
134 | |||
135 | .icon-arrow-up-thick::before { | ||
136 | content: "\ea3a"; | ||
137 | } | ||
138 | |||
139 | .icon-rss::before { | ||
140 | content: "\e808"; | ||
141 | } | ||
142 | |||
143 | .icon-print::before { | ||
144 | content: "\e954"; | ||
145 | } | ||
146 | |||
147 | .icon-reload::before { | ||
148 | content: "\ea2e"; | ||
149 | } | ||
150 | |||
151 | .icon-price-tags::before { | ||
152 | content: "\e936"; | ||
153 | } | ||
154 | |||
155 | .icon-eye::before { | ||
156 | content: "\e9ce"; | ||
157 | } | ||
158 | |||
159 | .icon-no-eye::before { | ||
160 | content: "\e9d1"; | ||
161 | } | ||
162 | |||
163 | .icon-calendar::before { | ||
164 | content: "\e953"; | ||
165 | } | ||
166 | |||
167 | .icon-time::before { | ||
168 | content: "\e952"; | ||
169 | } | ||
170 | |||
171 | /* .icon-image class, for image-based icons | ||
172 | ========================================================================== */ | ||
173 | |||
174 | .icon-image { | ||
175 | background: no-repeat center/80%; | ||
176 | padding-right: 1em !important; | ||
177 | padding-left: 1em !important; | ||
178 | } | ||
179 | |||
180 | /* Carrot (http://carrot.org) */ | ||
181 | .icon-image--carrot { | ||
182 | background-image: url("../../_global/img/icons/carrot-icon--white.png"); | ||
183 | } | ||
184 | |||
185 | /* Diaspora */ | ||
186 | .icon-image--diaspora { | ||
187 | background-image: url("../../_global/img/icons/Diaspora-asterisk.svg"); | ||
188 | } | ||
189 | |||
190 | /* Unmark.it */ | ||
191 | .icon-image--unmark { | ||
192 | background-image: url("../../_global/img/icons/unmark-icon--black.png"); | ||
193 | } | ||
194 | |||
195 | /* shaarli */ | ||
196 | .icon-image--shaarli { | ||
197 | background-image: url("../../_global/img/icons/shaarli.png"); | ||
198 | } | ||
199 | |||
200 | /* ========================================================================== | ||
201 | Icon selected | ||
202 | ========================================================================== */ | ||
203 | |||
204 | .icon-star.fav::before { | ||
205 | color: #fff; | ||
206 | } | ||
207 | |||
208 | .icon-check.archive::before { | ||
209 | color: #fff; | ||
210 | } | ||
diff --git a/app/Resources/static/themes/baggy/css/print.css b/app/Resources/static/themes/baggy/css/print.scss index f7f6a8ad..a63f62e9 100755 --- a/app/Resources/static/themes/baggy/css/print.css +++ b/app/Resources/static/themes/baggy/css/print.scss | |||
@@ -17,7 +17,7 @@ | |||
17 | /* ### Content ### */ | 17 | /* ### Content ### */ |
18 | 18 | ||
19 | /* Hide useless blocks */ | 19 | /* Hide useless blocks */ |
20 | body > header, | 20 | body > .logo, |
21 | #article_toolbar, | 21 | #article_toolbar, |
22 | #links, | 22 | #links, |
23 | #sort, | 23 | #sort, |
@@ -53,11 +53,8 @@ | |||
53 | 53 | ||
54 | #main { | 54 | #main { |
55 | width: 100%; | 55 | width: 100%; |
56 | padding: 0; | ||
57 | margin: 0; | 56 | margin: 0; |
58 | margin-left: 0; | 57 | padding: 0; |
59 | padding-right: 0; | ||
60 | padding-bottom: 0; | ||
61 | } | 58 | } |
62 | 59 | ||
63 | #article { | 60 | #article { |
diff --git a/app/Resources/static/themes/baggy/css/ratatouille.css b/app/Resources/static/themes/baggy/css/ratatouille.scss index a6167f34..a6167f34 100644 --- a/app/Resources/static/themes/baggy/css/ratatouille.css +++ b/app/Resources/static/themes/baggy/css/ratatouille.scss | |||
diff --git a/app/Resources/static/themes/baggy/css/save.scss b/app/Resources/static/themes/baggy/css/save.scss new file mode 100644 index 00000000..ade77b40 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/save.scss | |||
@@ -0,0 +1,115 @@ | |||
1 | /* ========================================================================== | ||
2 | "save a link" related styles | ||
3 | ========================================================================== */ | ||
4 | |||
5 | .popup-form { | ||
6 | background: rgba(0, 0, 0, 0.5); | ||
7 | position: absolute; | ||
8 | top: 0; | ||
9 | left: 10em; | ||
10 | z-index: 20; | ||
11 | height: 100%; | ||
12 | width: 100%; | ||
13 | margin: 0; | ||
14 | margin-top: -30% !important; | ||
15 | padding: 2em; | ||
16 | display: none; | ||
17 | border-left: 1px #eee solid; | ||
18 | |||
19 | form { | ||
20 | background-color: #fff; | ||
21 | position: absolute; | ||
22 | top: 0; | ||
23 | left: 0; | ||
24 | z-index: 20; | ||
25 | border: 10px solid #000; | ||
26 | width: 400px; | ||
27 | height: 200px; | ||
28 | padding: 2em; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | #bagit-form-form .addurl { | ||
33 | margin-left: 0; | ||
34 | } | ||
35 | |||
36 | .closeMessage, | ||
37 | .close-button { | ||
38 | background-color: #000; | ||
39 | color: #fff; | ||
40 | font-size: 1.2em; | ||
41 | line-height: 1.6; | ||
42 | width: 1.6em; | ||
43 | height: 1.6em; | ||
44 | text-align: center; | ||
45 | text-decoration: none; | ||
46 | |||
47 | &:hover, | ||
48 | &:focus { | ||
49 | background-color: #999; | ||
50 | color: #000; | ||
51 | } | ||
52 | } | ||
53 | |||
54 | .close-button--popup { | ||
55 | display: inline-block; | ||
56 | position: absolute; | ||
57 | top: 0; | ||
58 | right: 0; | ||
59 | font-size: 1.4em; | ||
60 | } | ||
61 | |||
62 | .active-current { | ||
63 | background-color: #999; | ||
64 | |||
65 | &::after { | ||
66 | content: ""; | ||
67 | width: 0; | ||
68 | height: 0; | ||
69 | position: absolute; | ||
70 | border: 10px solid transparent; | ||
71 | border-right-color: #eee; | ||
72 | right: 0; | ||
73 | top: 50%; | ||
74 | margin-top: -10px; | ||
75 | } | ||
76 | } | ||
77 | |||
78 | .opacity03 { | ||
79 | opacity: 0.3; | ||
80 | } | ||
81 | |||
82 | .add-to-wallabag-link-after { | ||
83 | background-color: #000; | ||
84 | color: #fff; | ||
85 | padding: 0 3px 2px; | ||
86 | } | ||
87 | |||
88 | a.add-to-wallabag-link-after { | ||
89 | visibility: hidden; | ||
90 | position: absolute; | ||
91 | opacity: 0; | ||
92 | transition-duration: 2s; | ||
93 | transition-timing-function: ease-out; | ||
94 | } | ||
95 | |||
96 | #article article a:hover + a.add-to-wallabag-link-after, | ||
97 | a.add-to-wallabag-link-after:hover { | ||
98 | opacity: 1; | ||
99 | visibility: visible; | ||
100 | transition-duration: 0.3s; | ||
101 | transition-timing-function: ease-in; | ||
102 | } | ||
103 | |||
104 | a.add-to-wallabag-link-after::after { | ||
105 | content: "w"; | ||
106 | } | ||
107 | |||
108 | #add-link-result { | ||
109 | font-weight: bold; | ||
110 | font-size: 0.9em; | ||
111 | } | ||
112 | |||
113 | .btn-clickable { | ||
114 | cursor: pointer; | ||
115 | } | ||