diff options
author | Chocobozzz <me@florianbigard.com> | 2018-06-15 16:52:15 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-06-15 18:20:56 +0200 |
commit | bbe0f0645ca958d33a3f409b15166609733b663f (patch) | |
tree | edcd5d702c73cda74a2177c4bdc08c616334337d /client/src/sass | |
parent | 2baea0c77cc765f7cbca9c9a2f4272268892a35c (diff) | |
download | PeerTube-bbe0f0645ca958d33a3f409b15166609733b663f.tar.gz PeerTube-bbe0f0645ca958d33a3f409b15166609733b663f.tar.zst PeerTube-bbe0f0645ca958d33a3f409b15166609733b663f.zip |
Add ability to schedule video publication
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/application.scss | 126 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 6 | ||||
-rw-r--r-- | client/src/sass/primeng-custom.scss | 174 |
3 files changed, 184 insertions, 122 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 4006c9128..dae0c52c2 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss | |||
@@ -6,14 +6,14 @@ $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; | |||
6 | 6 | ||
7 | @import '_fonts'; | 7 | @import '_fonts'; |
8 | 8 | ||
9 | @import '~primeng/resources/themes/bootstrap/theme.css'; | ||
10 | @import '~primeng/resources/primeng.css'; | ||
11 | @import '~video.js/dist/video-js.css'; | 9 | @import '~video.js/dist/video-js.css'; |
12 | 10 | ||
13 | $assets-path: '../assets/'; | 11 | $assets-path: '../assets/'; |
14 | @import './player/player'; | 12 | @import './player/player'; |
15 | @import './loading-bar'; | 13 | @import './loading-bar'; |
16 | 14 | ||
15 | @import './primeng-custom'; | ||
16 | |||
17 | [hidden] { | 17 | [hidden] { |
18 | display: none !important; | 18 | display: none !important; |
19 | } | 19 | } |
@@ -142,126 +142,6 @@ label { | |||
142 | to { transform: scale(1) rotate(360deg);} | 142 | to { transform: scale(1) rotate(360deg);} |
143 | } | 143 | } |
144 | 144 | ||
145 | // ngprime data table customizations | ||
146 | p-table { | ||
147 | font-size: 15px !important; | ||
148 | |||
149 | td { | ||
150 | border: 1px solid #E5E5E5 !important; | ||
151 | padding-left: 15px !important; | ||
152 | overflow: hidden !important; | ||
153 | text-overflow: ellipsis !important; | ||
154 | white-space: nowrap !important; | ||
155 | } | ||
156 | |||
157 | tr { | ||
158 | background-color: #fff !important; | ||
159 | height: 46px; | ||
160 | } | ||
161 | |||
162 | .ui-table-tbody { | ||
163 | tr { | ||
164 | &:hover { | ||
165 | background-color: #f0f0f0 !important; | ||
166 | } | ||
167 | |||
168 | &:not(:hover) { | ||
169 | .action-cell * { | ||
170 | display: none !important; | ||
171 | } | ||
172 | } | ||
173 | |||
174 | &:first-child td { | ||
175 | border-top: none !important; | ||
176 | } | ||
177 | |||
178 | &:last-child td { | ||
179 | border-bottom: none !important; | ||
180 | } | ||
181 | } | ||
182 | |||
183 | .expander { | ||
184 | cursor: pointer; | ||
185 | position: relative; | ||
186 | top: 1px; | ||
187 | } | ||
188 | } | ||
189 | |||
190 | th { | ||
191 | border: none !important; | ||
192 | border-bottom: 1px solid #f0f0f0 !important; | ||
193 | text-align: left !important; | ||
194 | padding: 5px 0 5px 15px !important; | ||
195 | font-weight: $font-semibold !important; | ||
196 | color: #000 !important; | ||
197 | |||
198 | &.ui-sortable-column:hover { | ||
199 | background-color: #f0f0f0 !important; | ||
200 | border: 1px solid #f0f0f0 !important; | ||
201 | border-width: 0 1px !important; | ||
202 | |||
203 | &:first-child { | ||
204 | border-width: 0 1px 0 0 !important; | ||
205 | } | ||
206 | } | ||
207 | |||
208 | &.ui-state-highlight { | ||
209 | background-color: #fff !important; | ||
210 | |||
211 | .fa { | ||
212 | @extend .glyphicon; | ||
213 | font-size: 11px; | ||
214 | |||
215 | &.fa-sort-asc { | ||
216 | @extend .glyphicon-triangle-top; | ||
217 | } | ||
218 | |||
219 | &.fa-sort-desc { | ||
220 | @extend .glyphicon-triangle-bottom; | ||
221 | } | ||
222 | } | ||
223 | } | ||
224 | } | ||
225 | |||
226 | .action-cell { | ||
227 | width: 250px !important; | ||
228 | padding: 0 !important; | ||
229 | text-align: center; | ||
230 | |||
231 | my-edit-button + my-delete-button { | ||
232 | margin-left: 5px; | ||
233 | } | ||
234 | } | ||
235 | |||
236 | p-paginator { | ||
237 | .ui-paginator-bottom { | ||
238 | position: relative; | ||
239 | border: none !important; | ||
240 | border: 1px solid #f0f0f0 !important; | ||
241 | height: 40px; | ||
242 | display: flex; | ||
243 | justify-content: center; | ||
244 | align-items: center; | ||
245 | |||
246 | a { | ||
247 | color: #000 !important; | ||
248 | font-weight: $font-semibold !important; | ||
249 | margin-right: 20px !important; | ||
250 | outline: 0 !important; | ||
251 | border-radius: 3px !important; | ||
252 | padding: 5px 2px !important; | ||
253 | |||
254 | &.ui-state-active { | ||
255 | &, &:hover, &:active, &:focus { | ||
256 | color: #fff !important; | ||
257 | background-color: $orange-color !important; | ||
258 | } | ||
259 | } | ||
260 | } | ||
261 | } | ||
262 | } | ||
263 | } | ||
264 | |||
265 | // Bootstrap customizations | 145 | // Bootstrap customizations |
266 | .dropdown-menu { | 146 | .dropdown-menu { |
267 | border-radius: 3px; | 147 | border-radius: 3px; |
@@ -352,6 +232,8 @@ tabset:not(.bootstrap) { | |||
352 | } | 232 | } |
353 | 233 | ||
354 | tabset.bootstrap { | 234 | tabset.bootstrap { |
235 | margin-left: 0; | ||
236 | |||
355 | .nav-item .nav-link { | 237 | .nav-item .nav-link { |
356 | &, & a { | 238 | &, & a { |
357 | color: #000; | 239 | color: #000; |
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 748c98afa..3904751c2 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -281,6 +281,12 @@ | |||
281 | cursor: pointer; | 281 | cursor: pointer; |
282 | display: inline; | 282 | display: inline; |
283 | } | 283 | } |
284 | |||
285 | &[disabled] + label, | ||
286 | &[disabled] + label + label{ | ||
287 | opacity: 0.5; | ||
288 | cursor: default; | ||
289 | } | ||
284 | } | 290 | } |
285 | 291 | ||
286 | 292 | ||
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss new file mode 100644 index 000000000..b28b20e0f --- /dev/null +++ b/client/src/sass/primeng-custom.scss | |||
@@ -0,0 +1,174 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | @import '~primeng/resources/primeng.css'; | ||
5 | @import '~primeng/resources/themes/bootstrap/theme.css'; | ||
6 | |||
7 | @mixin glyphicon-light { | ||
8 | font-family: 'Glyphicons Halflings'; | ||
9 | text-decoration: none !important; | ||
10 | color: #000 !important; | ||
11 | } | ||
12 | |||
13 | // data table customizations | ||
14 | p-table { | ||
15 | font-size: 15px !important; | ||
16 | |||
17 | td { | ||
18 | border: 1px solid #E5E5E5 !important; | ||
19 | padding-left: 15px !important; | ||
20 | overflow: hidden !important; | ||
21 | text-overflow: ellipsis !important; | ||
22 | white-space: nowrap !important; | ||
23 | } | ||
24 | |||
25 | tr { | ||
26 | background-color: #fff !important; | ||
27 | height: 46px; | ||
28 | } | ||
29 | |||
30 | .ui-table-tbody { | ||
31 | tr { | ||
32 | &:hover { | ||
33 | background-color: #f0f0f0 !important; | ||
34 | } | ||
35 | |||
36 | &:not(:hover) { | ||
37 | .action-cell * { | ||
38 | display: none !important; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | &:first-child td { | ||
43 | border-top: none !important; | ||
44 | } | ||
45 | |||
46 | &:last-child td { | ||
47 | border-bottom: none !important; | ||
48 | } | ||
49 | } | ||
50 | |||
51 | .expander { | ||
52 | cursor: pointer; | ||
53 | position: relative; | ||
54 | top: 1px; | ||
55 | } | ||
56 | } | ||
57 | |||
58 | th { | ||
59 | border: none !important; | ||
60 | border-bottom: 1px solid #f0f0f0 !important; | ||
61 | text-align: left !important; | ||
62 | padding: 5px 0 5px 15px !important; | ||
63 | font-weight: $font-semibold !important; | ||
64 | color: #000 !important; | ||
65 | |||
66 | &.ui-sortable-column:hover { | ||
67 | background-color: #f0f0f0 !important; | ||
68 | border: 1px solid #f0f0f0 !important; | ||
69 | border-width: 0 1px !important; | ||
70 | |||
71 | &:first-child { | ||
72 | border-width: 0 1px 0 0 !important; | ||
73 | } | ||
74 | } | ||
75 | |||
76 | &.ui-state-highlight { | ||
77 | background-color: #fff !important; | ||
78 | |||
79 | .pi { | ||
80 | @extend .glyphicon; | ||
81 | |||
82 | color: #000; | ||
83 | font-size: 11px; | ||
84 | |||
85 | &.pi-sort-up { | ||
86 | @extend .glyphicon-triangle-top; | ||
87 | } | ||
88 | |||
89 | &.pi-sort-down { | ||
90 | @extend .glyphicon-triangle-bottom; | ||
91 | } | ||
92 | } | ||
93 | } | ||
94 | } | ||
95 | |||
96 | .action-cell { | ||
97 | width: 250px !important; | ||
98 | padding: 0 !important; | ||
99 | text-align: center; | ||
100 | |||
101 | my-edit-button + my-delete-button { | ||
102 | margin-left: 5px; | ||
103 | } | ||
104 | } | ||
105 | |||
106 | p-paginator { | ||
107 | .ui-paginator-bottom { | ||
108 | position: relative; | ||
109 | border: 1px solid #f0f0f0 !important; | ||
110 | height: 40px; | ||
111 | display: flex; | ||
112 | justify-content: center; | ||
113 | align-items: center; | ||
114 | |||
115 | .ui-paginator-pages { | ||
116 | height: auto !important; | ||
117 | |||
118 | a { | ||
119 | color: #000 !important; | ||
120 | font-weight: $font-semibold !important; | ||
121 | margin-right: 20px !important; | ||
122 | outline: 0 !important; | ||
123 | border-radius: 3px !important; | ||
124 | padding: 5px 2px !important; | ||
125 | height: auto !important; | ||
126 | |||
127 | &.ui-state-active { | ||
128 | &, &:hover, &:active, &:focus { | ||
129 | color: #fff !important; | ||
130 | background-color: $orange-color !important; | ||
131 | } | ||
132 | } | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | } | ||
137 | } | ||
138 | |||
139 | // PrimeNG calendar tweaks | ||
140 | p-calendar .ui-datepicker { | ||
141 | a { | ||
142 | @include disable-default-a-behaviour; | ||
143 | } | ||
144 | |||
145 | .ui-datepicker-header { | ||
146 | |||
147 | .ui-datepicker-year { | ||
148 | margin-left: 5px; | ||
149 | } | ||
150 | |||
151 | .ui-datepicker-next { | ||
152 | @extend .glyphicon-chevron-right; | ||
153 | @include glyphicon-light; | ||
154 | } | ||
155 | |||
156 | .ui-datepicker-prev { | ||
157 | @extend .glyphicon-chevron-left; | ||
158 | @include glyphicon-light; | ||
159 | } | ||
160 | } | ||
161 | |||
162 | .ui-timepicker { | ||
163 | |||
164 | .pi.pi-chevron-up { | ||
165 | @extend .glyphicon-chevron-up; | ||
166 | @include glyphicon-light; | ||
167 | } | ||
168 | |||
169 | .pi.pi-chevron-down { | ||
170 | @extend .glyphicon-chevron-down; | ||
171 | @include glyphicon-light; | ||
172 | } | ||
173 | } | ||
174 | } \ No newline at end of file | ||