aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/application.scss
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 11:06:32 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 11:06:32 +0100
commitfada8d75550dc7365f7e18ee1569b9406251d660 (patch)
treedb9dc01c18693824f83fce5020f4c1f3ae7c0865 /client/src/sass/application.scss
parent492fd28167f770d79a430fc57451b5a9e075d8e7 (diff)
parentc2830fa8f84f61462098bf36add824f89436dfa9 (diff)
downloadPeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.gz
PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.zst
PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.zip
Merge branch 'feature/design' into develop
Diffstat (limited to 'client/src/sass/application.scss')
-rw-r--r--client/src/sass/application.scss298
1 files changed, 269 insertions, 29 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 47e1b6df0..9d347d566 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,3 +1,5 @@
1$FontPathSourceSansPro: "../fonts/source-sans-pro";
2@import '~source-sans-pro/source-sans-pro';
1@import '~primeng/resources/themes/bootstrap/theme.css'; 3@import '~primeng/resources/themes/bootstrap/theme.css';
2@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
3@import '~video.js/dist/video-js.css'; 5@import '~video.js/dist/video-js.css';
@@ -7,17 +9,30 @@
7 display: none !important; 9 display: none !important;
8} 10}
9 11
12body {
13 font-family: 'Source Sans Pro';
14 font-weight: $font-regular;
15 color: #000;
16}
17
10input.readonly { 18input.readonly {
11 /* Force blank on readonly inputs */ 19 /* Force blank on readonly inputs */
12 background-color: #fff !important; 20 background-color: #fff !important;
13} 21}
14 22
15.form-control, .btn { 23label {
16 border-radius: 0; 24 font-weight: $font-bold;
25 font-size: 15px;
17} 26}
18 27
19.dropdown-menu { 28.form-error {
20 border-radius: 0; 29 display: block;
30 color: $red-error;
31 margin-top: 5px;
32}
33
34.input-error {
35 border-color: $red-error !important;
21} 36}
22 37
23.glyphicon-black { 38.glyphicon-black {
@@ -25,44 +40,73 @@ input.readonly {
25} 40}
26 41
27.main-col { 42.main-col {
28 .content-padding { 43 margin-left: $menu-width;
29 padding: 15px 30px;
30 44
31 @media screen and (max-width: 800px) { 45 .margin-content {
32 padding: 15px 10px; 46 margin-left: $not-expanded-horizontal-margins;
33 } 47 margin-right: $not-expanded-horizontal-margins;
48 }
34 49
35 @media screen and (min-width: 1400px) { 50 .sub-menu {
36 padding: 15px 40px; 51 background-color: #F7F7F7;
37 } 52 width: 100%;
53 height: 81px;
54 margin-bottom: 30px;
55 display: flex;
56 align-items: center;
57 padding-left: $not-expanded-horizontal-margins;
58 }
38 59
39 @media screen and (min-width: 1600px) { 60 // Override some properties if the main content is expanded (no menu on the left)
40 padding: 15px 50px; 61 &.expanded {
62 margin-left: 0;
63
64 .margin-content {
65 margin-left: $expanded-horizontal-margins;
66 margin-right: $expanded-horizontal-margins;
41 } 67 }
42 68
43 @media screen and (min-width: 1800px) { 69 .sub-menu {
44 padding: 15px 60px; 70 padding-left: $expanded-horizontal-margins;
45 } 71 }
46 } 72 }
47} 73}
48 74
49// On small screen, menu is absolute and displayed over the page 75.title-page {
50@media screen and (max-width: 500px) { 76 color: #000;
51 .title-menu-left { 77 font-size: 16px;
52 width: 120px; 78 display: inline-block;
53 position: absolute !important; 79 margin-right: 55px;
54 z-index: 10000; 80 font-weight: $font-semibold;
81 @include disable-default-a-behaviour;
82
83 &.active, &.title-page-single {
84 border-bottom: 2px solid $orange-color;
85 font-weight: $font-bold;
86 margin-top: 30px;
87 margin-bottom: 25px;
55 } 88 }
56 89
57 .main-col { 90 &:hover, &:active, &:focus {
58 width: 100% !important; 91 color: #000;
59 } 92 }
93}
94
95.admin-sub-header {
96 display: flex;
97 align-items: center;
98 margin-bottom: 30px;
60 99
61 .fake-menu { 100 .admin-sub-title {
62 display: none; 101 flex-grow: 1;
63 } 102 }
64} 103}
65 104
105.admin-sub-title {
106 font-size: 20px;
107 font-weight: bold;
108}
109
66// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 110// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
67.glyphicon-refresh-animate { 111.glyphicon-refresh-animate {
68 -animation: spin .7s infinite linear; 112 -animation: spin .7s infinite linear;
@@ -86,13 +130,209 @@ input.readonly {
86 to { -moz-transform: rotate(360deg);} 130 to { -moz-transform: rotate(360deg);}
87} 131}
88 132
89/* ngprime data table customizations */ 133// ngprime data table customizations
90p-datatable { 134p-datatable {
135 font-size: 15px !important;
136
137 .ui-datatable-scrollable-header {
138 background-color: #fff !important;
139 }
140
141 .ui-widget-content {
142 border: none !important;
143 }
144
145 .ui-datatable-virtual-table {
146 border-top: none !important;
147 }
148
149 td {
150 border: 1px solid #E5E5E5 !important;
151 padding-left: 15px !important;
152 }
153
154 tr {
155 background-color: #fff !important;
156 height: 46px;
157
158 &:hover {
159 background-color: #f0f0f0 !important;
160 }
161
162 &:not(:hover) {
163 .action-cell * {
164 display: none !important;
165 }
166 }
167
168 &:first-child td {
169 border-top: none !important;
170 }
171
172 &:last-child td {
173 border-bottom: none !important;
174 }
175 }
176
177 th {
178 border: none !important;
179 border-bottom: 1px solid #f0f0f0 !important;
180 text-align: left !important;
181 padding: 5px 0 5px 15px !important;
182 font-weight: $font-semibold !important;
183 color: #000 !important;
184
185 &.ui-sortable-column:hover:not(.ui-state-active) {
186 background-color: #f0f0f0 !important;
187 border: 1px solid #f0f0f0 !important;
188 border-width: 0 1px !important;
189 }
190
191 &.ui-state-active {
192 color: #fff !important;
193 background-color: $orange-color !important;
194 border: 1px solid $orange-color !important;
195 border-width: 0 1px !important;
196 }
197 }
198
91 .action-cell { 199 .action-cell {
200 width: 250px !important;
201 padding: 0 !important;
92 text-align: center; 202 text-align: center;
203 }
204
205 p-paginator {
206 .ui-paginator-bottom {
207 position: relative;
208 border: none !important;
209 border: 1px solid #f0f0f0 !important;
210 height: 40px;
211 display: flex;
212 justify-content: center;
213 align-items: center;
214
215 a {
216 color: #000 !important;
217 font-weight: $font-semibold !important;
218 margin-right: 20px !important;
219 outline: 0 !important;
220 border-radius: 3px !important;
221 padding: 5px 2px !important;
222
223 &.ui-state-active {
224 &, &:hover, &:active, &:focus {
225 color: #fff !important;
226 background-color: $orange-color !important;
227 }
228 }
229 }
230 }
231 }
232}
233
234// Bootstrap customizations
235.dropdown-menu {
236 border-radius: 3px;
237 box-shadow: 0 3px 6px;
238 font-size: 15px;
239
240 .dropdown-item {
241 padding: 3px 15px;
242 }
243
244 a {
245 color: #000 !important;
246 }
247}
248
249.modal {
250 .modal-header {
251 border-bottom: none;
252
253 .title-page-single {
254 margin: 0;
255 }
256 }
257}
258
259.nav {
260 font-size: 16px !important;
261 border: none !important;
262
263 .nav-item .nav-link {
264 margin-right: 30px;
265 padding: 0;
266 border-radius: 3px;
267 border: none !important;
268
269 .tab-link {
270 display: flex !important;
271 align-items: center;
272 height: 30px !important;
273 padding: 0 15px;
274 }
275
276 &, & a {
277 color: #000 !important;
278 @include disable-default-a-behaviour;
279 }
280
281 &.active, &:hover {
282 background-color: #F0F0F0;
283 }
284
285 &.active {
286 font-weight: $font-semibold !important;
287 }
288 }
289}
290
291.orange-button {
292 @include peertube-button;
293 @include orange-button;
294}
295
296.orange-button-link {
297 @include peertube-button-link;
298 @include orange-button;
299}
300
301.grey-button {
302 @include peertube-button;
303 @include grey-button;
304}
305
306.grey-button-link {
307 @include peertube-button-link;
308 @include grey-button;
309}
310
311// On small screen, menu is absolute
312@media screen and (max-width: 800px) {
313 .title-menu-left {
314 width: 150px !important;
315 position: absolute !important;
316 z-index: 10000;
317 }
318
319 .main-col {
320 margin-left: 0;
321
322 &, &.expanded {
323 .margin-content {
324 margin-left: 10px;
325 margin-right: 10px;
326 }
327
328 .sub-menu {
329 padding-left: 10px;
330 margin-bottom: 10px;
331 }
93 332
94 .glyphicon { 333 input[type=text], input[type=password] {
95 cursor: pointer; 334 width: 100% !important;
335 }
96 } 336 }
97 } 337 }
98} 338}