diff options
author | augier <christophe@c-henry.fr> | 2015-12-05 12:14:55 +0100 |
---|---|---|
committer | augier <christophe@c-henry.fr> | 2015-12-05 12:14:55 +0100 |
commit | 0ac5edd99c009b1a82c8483bf45f15b9086276cb (patch) | |
tree | 2b9cd09b2f6e961f3d4594eba97d8d92345a591e | |
parent | dcc700d2c86f1e1c9d740860acc1277830ce955f (diff) | |
download | PeerTube-0ac5edd99c009b1a82c8483bf45f15b9086276cb.tar.gz PeerTube-0ac5edd99c009b1a82c8483bf45f15b9086276cb.tar.zst PeerTube-0ac5edd99c009b1a82c8483bf45f15b9086276cb.zip |
Styling structure
-rw-r--r-- | Gruntfile.js | 2 | ||||
-rw-r--r-- | public/javascripts/index.js | 2 | ||||
-rw-r--r-- | public/stylesheets/application.scss | 6 | ||||
-rw-r--r-- | public/stylesheets/base.scss | 20 | ||||
-rw-r--r-- | public/stylesheets/bootstrap-variables.scss | 875 | ||||
-rw-r--r-- | public/stylesheets/index.scss | 40 | ||||
-rw-r--r-- | views/header.jade | 10 | ||||
-rw-r--r-- | views/index.jade | 9 | ||||
-rw-r--r-- | views/layout.jade | 3 |
9 files changed, 915 insertions, 52 deletions
diff --git a/Gruntfile.js b/Gruntfile.js index 51ac10161..a8fcbb609 100644 --- a/Gruntfile.js +++ b/Gruntfile.js | |||
@@ -5,7 +5,7 @@ module.exports = function (grunt) { | |||
5 | dist: 'dist', | 5 | dist: 'dist', |
6 | jade: 'views/**/**/*.jade', | 6 | jade: 'views/**/**/*.jade', |
7 | css: 'public/stylesheets/*.css', | 7 | css: 'public/stylesheets/*.css', |
8 | scss: 'public/stylesheets/*.scss', | 8 | scss: 'public/stylesheets/application.scss', |
9 | vendor: 'public/stylesheets/vendor', | 9 | vendor: 'public/stylesheets/vendor', |
10 | js: 'public/javascripts/*.js', | 10 | js: 'public/javascripts/*.js', |
11 | src: 'src/*.js', | 11 | src: 'src/*.js', |
diff --git a/public/javascripts/index.js b/public/javascripts/index.js index c67e22c7b..daab2991e 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js | |||
@@ -31,7 +31,7 @@ | |||
31 | makeFriends() | 31 | makeFriends() |
32 | }) | 32 | }) |
33 | 33 | ||
34 | $('#search_video').on('keyup', function (e) { | 34 | $('#search-video').on('keyup', function (e) { |
35 | var search = $(this).val() | 35 | var search = $(this).val() |
36 | 36 | ||
37 | if (search === '') return | 37 | if (search === '') return |
diff --git a/public/stylesheets/application.scss b/public/stylesheets/application.scss new file mode 100644 index 000000000..bf9ec90ab --- /dev/null +++ b/public/stylesheets/application.scss | |||
@@ -0,0 +1,6 @@ | |||
1 | $icon-font-path: "/stylesheets/vendor/fonts/bootstrap/"; | ||
2 | |||
3 | @import "bootstrap-variables"; | ||
4 | @import "_bootstrap"; | ||
5 | @import "base"; | ||
6 | @import "index"; \ No newline at end of file | ||
diff --git a/public/stylesheets/base.scss b/public/stylesheets/base.scss new file mode 100644 index 000000000..37bdade1e --- /dev/null +++ b/public/stylesheets/base.scss | |||
@@ -0,0 +1,20 @@ | |||
1 | body { | ||
2 | padding: 20px; | ||
3 | } | ||
4 | |||
5 | footer { | ||
6 | border-top: 1px solid rgba(0, 0, 0, 0.2); | ||
7 | padding-top: 10px; | ||
8 | text-align: center; | ||
9 | font-size: small; | ||
10 | } | ||
11 | |||
12 | .search-group { | ||
13 | .search-btn { | ||
14 | position: relative; | ||
15 | left: -40px; | ||
16 | top: 0; | ||
17 | |||
18 | &:hover { text-decoration: none; } | ||
19 | } | ||
20 | } \ No newline at end of file | ||
diff --git a/public/stylesheets/bootstrap-variables.scss b/public/stylesheets/bootstrap-variables.scss new file mode 100644 index 000000000..5a49649f9 --- /dev/null +++ b/public/stylesheets/bootstrap-variables.scss | |||
@@ -0,0 +1,875 @@ | |||
1 | // Override Bootstrap variables here (defaults from bootstrap-sass v3.3.6): | ||
2 | |||
3 | // | ||
4 | // Variables | ||
5 | // -------------------------------------------------- | ||
6 | |||
7 | |||
8 | //== Colors | ||
9 | // | ||
10 | //## Gray and brand colors for use across Bootstrap. | ||
11 | |||
12 | // $gray-base: #000 | ||
13 | // $gray-darker: lighten($gray-base, 13.5%) // #222 | ||
14 | // $gray-dark: lighten($gray-base, 20%) // #333 | ||
15 | // $gray: lighten($gray-base, 33.5%) // #555 | ||
16 | // $gray-light: lighten($gray-base, 46.7%) // #777 | ||
17 | // $gray-lighter: lighten($gray-base, 93.5%) // #eee | ||
18 | |||
19 | // $brand-primary: darken(#428bca, 6.5%) // #337ab7 | ||
20 | // $brand-success: #5cb85c | ||
21 | // $brand-info: #5bc0de | ||
22 | // $brand-warning: #f0ad4e | ||
23 | // $brand-danger: #d9534f | ||
24 | |||
25 | |||
26 | //== Scaffolding | ||
27 | // | ||
28 | //## Settings for some of the most global styles. | ||
29 | |||
30 | //** Background color for `<body>`. | ||
31 | // $body-bg: #fff | ||
32 | //** Global text color on `<body>`. | ||
33 | // $text-color: $gray-dark | ||
34 | |||
35 | //** Global textual link color. | ||
36 | // $link-color: $brand-primary | ||
37 | //** Link hover color set via `darken()` function. | ||
38 | // $link-hover-color: darken($link-color, 15%) | ||
39 | //** Link hover decoration. | ||
40 | // $link-hover-decoration: underline | ||
41 | |||
42 | |||
43 | //== Typography | ||
44 | // | ||
45 | //## Font, line-height, and color for body text, headings, and more. | ||
46 | |||
47 | // $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif | ||
48 | // $font-family-serif: Georgia, "Times New Roman", Times, serif | ||
49 | //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. | ||
50 | // $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace | ||
51 | // $font-family-base: $font-family-sans-serif | ||
52 | |||
53 | // $font-size-base: 14px | ||
54 | // $font-size-large: ceil(($font-size-base * 1.25)) // ~18px | ||
55 | // $font-size-small: ceil(($font-size-base * 0.85)) // ~12px | ||
56 | |||
57 | // $font-size-h1: floor(($font-size-base * 2.6)) // ~36px | ||
58 | // $font-size-h2: floor(($font-size-base * 2.15)) // ~30px | ||
59 | // $font-size-h3: ceil(($font-size-base * 1.7)) // ~24px | ||
60 | // $font-size-h4: ceil(($font-size-base * 1.25)) // ~18px | ||
61 | // $font-size-h5: $font-size-base | ||
62 | // $font-size-h6: ceil(($font-size-base * 0.85)) // ~12px | ||
63 | |||
64 | //** Unit-less `line-height` for use in components like buttons. | ||
65 | // $line-height-base: 1.428571429 // 20/14 | ||
66 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. | ||
67 | // $line-height-computed: floor(($font-size-base * $line-height-base)) // ~20px | ||
68 | |||
69 | //** By default, this inherits from the `<body>`. | ||
70 | // $headings-font-family: inherit | ||
71 | // $headings-font-weight: 500 | ||
72 | // $headings-line-height: 1.1 | ||
73 | // $headings-color: inherit | ||
74 | |||
75 | |||
76 | //== Iconography | ||
77 | // | ||
78 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. | ||
79 | |||
80 | //** Load fonts from this directory. | ||
81 | |||
82 | // [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path. | ||
83 | // [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths. | ||
84 | // $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") | ||
85 | |||
86 | //** File name for all font files. | ||
87 | // $icon-font-name: "glyphicons-halflings-regular" | ||
88 | //** Element ID within SVG icon file. | ||
89 | // $icon-font-svg-id: "glyphicons_halflingsregular" | ||
90 | |||
91 | |||
92 | //== Components | ||
93 | // | ||
94 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). | ||
95 | |||
96 | // $padding-base-vertical: 6px | ||
97 | // $padding-base-horizontal: 12px | ||
98 | |||
99 | // $padding-large-vertical: 10px | ||
100 | // $padding-large-horizontal: 16px | ||
101 | |||
102 | // $padding-small-vertical: 5px | ||
103 | // $padding-small-horizontal: 10px | ||
104 | |||
105 | // $padding-xs-vertical: 1px | ||
106 | // $padding-xs-horizontal: 5px | ||
107 | |||
108 | // $line-height-large: 1.3333333 // extra decimals for Win 8.1 Chrome | ||
109 | // $line-height-small: 1.5 | ||
110 | |||
111 | $border-radius-base: 0; | ||
112 | $border-radius-large: 0; | ||
113 | $border-radius-small: 0; | ||
114 | |||
115 | //** Global color for active items (e.g., navs or dropdowns). | ||
116 | // $component-active-color: #fff | ||
117 | //** Global background color for active items (e.g., navs or dropdowns). | ||
118 | // $component-active-bg: $brand-primary | ||
119 | |||
120 | //** Width of the `border` for generating carets that indicator dropdowns. | ||
121 | // $caret-width-base: 4px | ||
122 | //** Carets increase slightly in size for larger components. | ||
123 | // $caret-width-large: 5px | ||
124 | |||
125 | |||
126 | //== Tables | ||
127 | // | ||
128 | //## Customizes the `.table` component with basic values, each used across all table variations. | ||
129 | |||
130 | //** Padding for `<th>`s and `<td>`s. | ||
131 | // $table-cell-padding: 8px | ||
132 | //** Padding for cells in `.table-condensed`. | ||
133 | // $table-condensed-cell-padding: 5px | ||
134 | |||
135 | //** Default background color used for all tables. | ||
136 | // $table-bg: transparent | ||
137 | //** Background color used for `.table-striped`. | ||
138 | // $table-bg-accent: #f9f9f9 | ||
139 | //** Background color used for `.table-hover`. | ||
140 | // $table-bg-hover: #f5f5f5 | ||
141 | // $table-bg-active: $table-bg-hover | ||
142 | |||
143 | //** Border color for table and cell borders. | ||
144 | // $table-border-color: #ddd | ||
145 | |||
146 | |||
147 | //== Buttons | ||
148 | // | ||
149 | //## For each of Bootstrap's buttons, define text, background and border color. | ||
150 | |||
151 | // $btn-font-weight: normal | ||
152 | |||
153 | // $btn-default-color: #333 | ||
154 | // $btn-default-bg: #fff | ||
155 | // $btn-default-border: #ccc | ||
156 | |||
157 | // $btn-primary-color: #fff | ||
158 | // $btn-primary-bg: $brand-primary | ||
159 | // $btn-primary-border: darken($btn-primary-bg, 5%) | ||
160 | |||
161 | // $btn-success-color: #fff | ||
162 | // $btn-success-bg: $brand-success | ||
163 | // $btn-success-border: darken($btn-success-bg, 5%) | ||
164 | |||
165 | // $btn-info-color: #fff | ||
166 | // $btn-info-bg: $brand-info | ||
167 | // $btn-info-border: darken($btn-info-bg, 5%) | ||
168 | |||
169 | // $btn-warning-color: #fff | ||
170 | // $btn-warning-bg: $brand-warning | ||
171 | // $btn-warning-border: darken($btn-warning-bg, 5%) | ||
172 | |||
173 | // $btn-danger-color: #fff | ||
174 | // $btn-danger-bg: $brand-danger | ||
175 | // $btn-danger-border: darken($btn-danger-bg, 5%) | ||
176 | |||
177 | // $btn-link-disabled-color: $gray-light | ||
178 | |||
179 | // Allows for customizing button radius independently from global border radius | ||
180 | // $btn-border-radius-base: $border-radius-base | ||
181 | // $btn-border-radius-large: $border-radius-large | ||
182 | // $btn-border-radius-small: $border-radius-small | ||
183 | |||
184 | |||
185 | //== Forms | ||
186 | // | ||
187 | //## | ||
188 | |||
189 | //** `<input>` background color | ||
190 | // $input-bg: #fff | ||
191 | //** `<input disabled>` background color | ||
192 | // $input-bg-disabled: $gray-lighter | ||
193 | |||
194 | //** Text color for `<input>`s | ||
195 | // $input-color: $gray | ||
196 | //** `<input>` border color | ||
197 | // $input-border: #ccc | ||
198 | |||
199 | // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 | ||
200 | //** Default `.form-control` border radius | ||
201 | // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS. | ||
202 | // $input-border-radius: $border-radius-base | ||
203 | //** Large `.form-control` border radius | ||
204 | // $input-border-radius-large: $border-radius-large | ||
205 | //** Small `.form-control` border radius | ||
206 | // $input-border-radius-small: $border-radius-small | ||
207 | |||
208 | //** Border color for inputs on focus | ||
209 | // $input-border-focus: #66afe9 | ||
210 | |||
211 | //** Placeholder text color | ||
212 | // $input-color-placeholder: #999 | ||
213 | |||
214 | //** Default `.form-control` height | ||
215 | // $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) | ||
216 | //** Large `.form-control` height | ||
217 | // $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) | ||
218 | //** Small `.form-control` height | ||
219 | // $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) | ||
220 | |||
221 | //** `.form-group` margin | ||
222 | // $form-group-margin-bottom: 15px | ||
223 | |||
224 | // $legend-color: $gray-dark | ||
225 | // $legend-border-color: #e5e5e5 | ||
226 | |||
227 | //** Background color for textual input addons | ||
228 | // $input-group-addon-bg: $gray-lighter | ||
229 | //** Border color for textual input addons | ||
230 | // $input-group-addon-border-color: $input-border | ||
231 | |||
232 | //** Disabled cursor for form controls and buttons. | ||
233 | // $cursor-disabled: not-allowed | ||
234 | |||
235 | |||
236 | //== Dropdowns | ||
237 | // | ||
238 | //## Dropdown menu container and contents. | ||
239 | |||
240 | //** Background for the dropdown menu. | ||
241 | // $dropdown-bg: #fff | ||
242 | //** Dropdown menu `border-color`. | ||
243 | // $dropdown-border: rgba(0,0,0,.15) | ||
244 | //** Dropdown menu `border-color` **for IE8**. | ||
245 | // $dropdown-fallback-border: #ccc | ||
246 | //** Divider color for between dropdown items. | ||
247 | // $dropdown-divider-bg: #e5e5e5 | ||
248 | |||
249 | //** Dropdown link text color. | ||
250 | // $dropdown-link-color: $gray-dark | ||
251 | //** Hover color for dropdown links. | ||
252 | // $dropdown-link-hover-color: darken($gray-dark, 5%) | ||
253 | //** Hover background for dropdown links. | ||
254 | // $dropdown-link-hover-bg: #f5f5f5 | ||
255 | |||
256 | //** Active dropdown menu item text color. | ||
257 | // $dropdown-link-active-color: $component-active-color | ||
258 | //** Active dropdown menu item background color. | ||
259 | // $dropdown-link-active-bg: $component-active-bg | ||
260 | |||
261 | //** Disabled dropdown menu item background color. | ||
262 | // $dropdown-link-disabled-color: $gray-light | ||
263 | |||
264 | //** Text color for headers within dropdown menus. | ||
265 | // $dropdown-header-color: $gray-light | ||
266 | |||
267 | //** Deprecated `$dropdown-caret-color` as of v3.1.0 | ||
268 | // $dropdown-caret-color: #000 | ||
269 | |||
270 | |||
271 | //-- Z-index master list | ||
272 | // | ||
273 | // Warning: Avoid customizing these values. They're used for a bird's eye view | ||
274 | // of components dependent on the z-axis and are designed to all work together. | ||
275 | // | ||
276 | // Note: These variables are not generated into the Customizer. | ||
277 | |||
278 | // $zindex-navbar: 1000 | ||
279 | // $zindex-dropdown: 1000 | ||
280 | // $zindex-popover: 1060 | ||
281 | // $zindex-tooltip: 1070 | ||
282 | // $zindex-navbar-fixed: 1030 | ||
283 | // $zindex-modal-background: 1040 | ||
284 | // $zindex-modal: 1050 | ||
285 | |||
286 | |||
287 | //== Media queries breakpoints | ||
288 | // | ||
289 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes. | ||
290 | |||
291 | // Extra small screen / phone | ||
292 | //** Deprecated `$screen-xs` as of v3.0.1 | ||
293 | // $screen-xs: 480px | ||
294 | //** Deprecated `$screen-xs-min` as of v3.2.0 | ||
295 | // $screen-xs-min: $screen-xs | ||
296 | //** Deprecated `$screen-phone` as of v3.0.1 | ||
297 | // $screen-phone: $screen-xs-min | ||
298 | |||
299 | // Small screen / tablet | ||
300 | //** Deprecated `$screen-sm` as of v3.0.1 | ||
301 | // $screen-sm: 768px | ||
302 | // $screen-sm-min: $screen-sm | ||
303 | //** Deprecated `$screen-tablet` as of v3.0.1 | ||
304 | // $screen-tablet: $screen-sm-min | ||
305 | |||
306 | // Medium screen / desktop | ||
307 | //** Deprecated `$screen-md` as of v3.0.1 | ||
308 | // $screen-md: 992px | ||
309 | // $screen-md-min: $screen-md | ||
310 | //** Deprecated `$screen-desktop` as of v3.0.1 | ||
311 | // $screen-desktop: $screen-md-min | ||
312 | |||
313 | // Large screen / wide desktop | ||
314 | //** Deprecated `$screen-lg` as of v3.0.1 | ||
315 | // $screen-lg: 1200px | ||
316 | // $screen-lg-min: $screen-lg | ||
317 | //** Deprecated `$screen-lg-desktop` as of v3.0.1 | ||
318 | // $screen-lg-desktop: $screen-lg-min | ||
319 | |||
320 | // So media queries don't overlap when required, provide a maximum | ||
321 | // $screen-xs-max: ($screen-sm-min - 1) | ||
322 | // $screen-sm-max: ($screen-md-min - 1) | ||
323 | // $screen-md-max: ($screen-lg-min - 1) | ||
324 | |||
325 | |||
326 | //== Grid system | ||
327 | // | ||
328 | //## Define your custom responsive grid. | ||
329 | |||
330 | //** Number of columns in the grid. | ||
331 | // $grid-columns: 12 | ||
332 | //** Padding between columns. Gets divided in half for the left and right. | ||
333 | // $grid-gutter-width: 30px | ||
334 | // Navbar collapse | ||
335 | //** Point at which the navbar becomes uncollapsed. | ||
336 | // $grid-float-breakpoint: $screen-sm-min | ||
337 | //** Point at which the navbar begins collapsing. | ||
338 | // $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) | ||
339 | |||
340 | |||
341 | //== Container sizes | ||
342 | // | ||
343 | //## Define the maximum width of `.container` for different screen sizes. | ||
344 | |||
345 | // Small screen / tablet | ||
346 | // $container-tablet: (720px + $grid-gutter-width) | ||
347 | //** For `$screen-sm-min` and up. | ||
348 | // $container-sm: $container-tablet | ||
349 | |||
350 | // Medium screen / desktop | ||
351 | // $container-desktop: (940px + $grid-gutter-width) | ||
352 | //** For `$screen-md-min` and up. | ||
353 | // $container-md: $container-desktop | ||
354 | |||
355 | // Large screen / wide desktop | ||
356 | // $container-large-desktop: (1140px + $grid-gutter-width) | ||
357 | //** For `$screen-lg-min` and up. | ||
358 | // $container-lg: $container-large-desktop | ||
359 | |||
360 | |||
361 | //== Navbar | ||
362 | // | ||
363 | //## | ||
364 | |||
365 | // Basics of a navbar | ||
366 | // $navbar-height: 50px | ||
367 | // $navbar-margin-bottom: $line-height-computed | ||
368 | // $navbar-border-radius: $border-radius-base | ||
369 | // $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) | ||
370 | // $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) | ||
371 | // $navbar-collapse-max-height: 340px | ||
372 | |||
373 | // $navbar-default-color: #777 | ||
374 | // $navbar-default-bg: #f8f8f8 | ||
375 | // $navbar-default-border: darken($navbar-default-bg, 6.5%) | ||
376 | |||
377 | // Navbar links | ||
378 | // $navbar-default-link-color: #777 | ||
379 | // $navbar-default-link-hover-color: #333 | ||
380 | // $navbar-default-link-hover-bg: transparent | ||
381 | // $navbar-default-link-active-color: #555 | ||
382 | // $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) | ||
383 | // $navbar-default-link-disabled-color: #ccc | ||
384 | // $navbar-default-link-disabled-bg: transparent | ||
385 | |||
386 | // Navbar brand label | ||
387 | // $navbar-default-brand-color: $navbar-default-link-color | ||
388 | // $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) | ||
389 | // $navbar-default-brand-hover-bg: transparent | ||
390 | |||
391 | // Navbar toggle | ||
392 | // $navbar-default-toggle-hover-bg: #ddd | ||
393 | // $navbar-default-toggle-icon-bar-bg: #888 | ||
394 | // $navbar-default-toggle-border-color: #ddd | ||
395 | |||
396 | |||
397 | //=== Inverted navbar | ||
398 | // Reset inverted navbar basics | ||
399 | // $navbar-inverse-color: lighten($gray-light, 15%) | ||
400 | // $navbar-inverse-bg: #222 | ||
401 | // $navbar-inverse-border: darken($navbar-inverse-bg, 10%) | ||
402 | |||
403 | // Inverted navbar links | ||
404 | // $navbar-inverse-link-color: lighten($gray-light, 15%) | ||
405 | // $navbar-inverse-link-hover-color: #fff | ||
406 | // $navbar-inverse-link-hover-bg: transparent | ||
407 | // $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color | ||
408 | // $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) | ||
409 | // $navbar-inverse-link-disabled-color: #444 | ||
410 | // $navbar-inverse-link-disabled-bg: transparent | ||
411 | |||
412 | // Inverted navbar brand label | ||
413 | // $navbar-inverse-brand-color: $navbar-inverse-link-color | ||
414 | // $navbar-inverse-brand-hover-color: #fff | ||
415 | // $navbar-inverse-brand-hover-bg: transparent | ||
416 | |||
417 | // Inverted navbar toggle | ||
418 | // $navbar-inverse-toggle-hover-bg: #333 | ||
419 | // $navbar-inverse-toggle-icon-bar-bg: #fff | ||
420 | // $navbar-inverse-toggle-border-color: #333 | ||
421 | |||
422 | |||
423 | //== Navs | ||
424 | // | ||
425 | //## | ||
426 | |||
427 | //=== Shared nav styles | ||
428 | // $nav-link-padding: 10px 15px | ||
429 | // $nav-link-hover-bg: $gray-lighter | ||
430 | |||
431 | // $nav-disabled-link-color: $gray-light | ||
432 | // $nav-disabled-link-hover-color: $gray-light | ||
433 | |||
434 | //== Tabs | ||
435 | // $nav-tabs-border-color: #ddd | ||
436 | |||
437 | // $nav-tabs-link-hover-border-color: $gray-lighter | ||
438 | |||
439 | // $nav-tabs-active-link-hover-bg: $body-bg | ||
440 | // $nav-tabs-active-link-hover-color: $gray | ||
441 | // $nav-tabs-active-link-hover-border-color: #ddd | ||
442 | |||
443 | // $nav-tabs-justified-link-border-color: #ddd | ||
444 | // $nav-tabs-justified-active-link-border-color: $body-bg | ||
445 | |||
446 | //== Pills | ||
447 | // $nav-pills-border-radius: $border-radius-base | ||
448 | // $nav-pills-active-link-hover-bg: $component-active-bg | ||
449 | // $nav-pills-active-link-hover-color: $component-active-color | ||
450 | |||
451 | |||
452 | //== Pagination | ||
453 | // | ||
454 | //## | ||
455 | |||
456 | // $pagination-color: $link-color | ||
457 | // $pagination-bg: #fff | ||
458 | // $pagination-border: #ddd | ||
459 | |||
460 | // $pagination-hover-color: $link-hover-color | ||
461 | // $pagination-hover-bg: $gray-lighter | ||
462 | // $pagination-hover-border: #ddd | ||
463 | |||
464 | // $pagination-active-color: #fff | ||
465 | // $pagination-active-bg: $brand-primary | ||
466 | // $pagination-active-border: $brand-primary | ||
467 | |||
468 | // $pagination-disabled-color: $gray-light | ||
469 | // $pagination-disabled-bg: #fff | ||
470 | // $pagination-disabled-border: #ddd | ||
471 | |||
472 | |||
473 | //== Pager | ||
474 | // | ||
475 | //## | ||
476 | |||
477 | // $pager-bg: $pagination-bg | ||
478 | // $pager-border: $pagination-border | ||
479 | // $pager-border-radius: 15px | ||
480 | |||
481 | // $pager-hover-bg: $pagination-hover-bg | ||
482 | |||
483 | // $pager-active-bg: $pagination-active-bg | ||
484 | // $pager-active-color: $pagination-active-color | ||
485 | |||
486 | // $pager-disabled-color: $pagination-disabled-color | ||
487 | |||
488 | |||
489 | //== Jumbotron | ||
490 | // | ||
491 | //## | ||
492 | |||
493 | // $jumbotron-padding: 30px | ||
494 | // $jumbotron-color: inherit | ||
495 | // $jumbotron-bg: $gray-lighter | ||
496 | // $jumbotron-heading-color: inherit | ||
497 | // $jumbotron-font-size: ceil(($font-size-base * 1.5)) | ||
498 | // $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) | ||
499 | |||
500 | |||
501 | //== Form states and alerts | ||
502 | // | ||
503 | //## Define colors for form feedback states and, by default, alerts. | ||
504 | |||
505 | // $state-success-text: #3c763d | ||
506 | // $state-success-bg: #dff0d8 | ||
507 | // $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) | ||
508 | |||
509 | // $state-info-text: #31708f | ||
510 | // $state-info-bg: #d9edf7 | ||
511 | // $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) | ||
512 | |||
513 | // $state-warning-text: #8a6d3b | ||
514 | // $state-warning-bg: #fcf8e3 | ||
515 | // $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) | ||
516 | |||
517 | // $state-danger-text: #a94442 | ||
518 | // $state-danger-bg: #f2dede | ||
519 | // $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) | ||
520 | |||
521 | |||
522 | //== Tooltips | ||
523 | // | ||
524 | //## | ||
525 | |||
526 | //** Tooltip max width | ||
527 | // $tooltip-max-width: 200px | ||
528 | //** Tooltip text color | ||
529 | // $tooltip-color: #fff | ||
530 | //** Tooltip background color | ||
531 | // $tooltip-bg: #000 | ||
532 | // $tooltip-opacity: .9 | ||
533 | |||
534 | //** Tooltip arrow width | ||
535 | // $tooltip-arrow-width: 5px | ||
536 | //** Tooltip arrow color | ||
537 | // $tooltip-arrow-color: $tooltip-bg | ||
538 | |||
539 | |||
540 | //== Popovers | ||
541 | // | ||
542 | //## | ||
543 | |||
544 | //** Popover body background color | ||
545 | // $popover-bg: #fff | ||
546 | //** Popover maximum width | ||
547 | // $popover-max-width: 276px | ||
548 | //** Popover border color | ||
549 | // $popover-border-color: rgba(0,0,0,.2) | ||
550 | //** Popover fallback border color | ||
551 | // $popover-fallback-border-color: #ccc | ||
552 | |||
553 | //** Popover title background color | ||
554 | // $popover-title-bg: darken($popover-bg, 3%) | ||
555 | |||
556 | //** Popover arrow width | ||
557 | // $popover-arrow-width: 10px | ||
558 | //** Popover arrow color | ||
559 | // $popover-arrow-color: $popover-bg | ||
560 | |||
561 | //** Popover outer arrow width | ||
562 | // $popover-arrow-outer-width: ($popover-arrow-width + 1) | ||
563 | //** Popover outer arrow color | ||
564 | // $popover-arrow-outer-color: fade_in($popover-border-color, 0.05) | ||
565 | //** Popover outer arrow fallback color | ||
566 | // $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) | ||
567 | |||
568 | |||
569 | //== Labels | ||
570 | // | ||
571 | //## | ||
572 | |||
573 | //** Default label background color | ||
574 | // $label-default-bg: $gray-light | ||
575 | //** Primary label background color | ||
576 | // $label-primary-bg: $brand-primary | ||
577 | //** Success label background color | ||
578 | // $label-success-bg: $brand-success | ||
579 | //** Info label background color | ||
580 | // $label-info-bg: $brand-info | ||
581 | //** Warning label background color | ||
582 | // $label-warning-bg: $brand-warning | ||
583 | //** Danger label background color | ||
584 | // $label-danger-bg: $brand-danger | ||
585 | |||
586 | //** Default label text color | ||
587 | // $label-color: #fff | ||
588 | //** Default text color of a linked label | ||
589 | // $label-link-hover-color: #fff | ||
590 | |||
591 | |||
592 | //== Modals | ||
593 | // | ||
594 | //## | ||
595 | |||
596 | //** Padding applied to the modal body | ||
597 | // $modal-inner-padding: 15px | ||
598 | |||
599 | //** Padding applied to the modal title | ||
600 | // $modal-title-padding: 15px | ||
601 | //** Modal title line-height | ||
602 | // $modal-title-line-height: $line-height-base | ||
603 | |||
604 | //** Background color of modal content area | ||
605 | // $modal-content-bg: #fff | ||
606 | //** Modal content border color | ||
607 | // $modal-content-border-color: rgba(0,0,0,.2) | ||
608 | //** Modal content border color **for IE8** | ||
609 | // $modal-content-fallback-border-color: #999 | ||
610 | |||
611 | //** Modal backdrop background color | ||
612 | // $modal-backdrop-bg: #000 | ||
613 | //** Modal backdrop opacity | ||
614 | // $modal-backdrop-opacity: .5 | ||
615 | //** Modal header border color | ||
616 | // $modal-header-border-color: #e5e5e5 | ||
617 | //** Modal footer border color | ||
618 | // $modal-footer-border-color: $modal-header-border-color | ||
619 | |||
620 | // $modal-lg: 900px | ||
621 | // $modal-md: 600px | ||
622 | // $modal-sm: 300px | ||
623 | |||
624 | |||
625 | //== Alerts | ||
626 | // | ||
627 | //## Define alert colors, border radius, and padding. | ||
628 | |||
629 | // $alert-padding: 15px | ||
630 | // $alert-border-radius: $border-radius-base | ||
631 | // $alert-link-font-weight: bold | ||
632 | |||
633 | // $alert-success-bg: $state-success-bg | ||
634 | // $alert-success-text: $state-success-text | ||
635 | // $alert-success-border: $state-success-border | ||
636 | |||
637 | // $alert-info-bg: $state-info-bg | ||
638 | // $alert-info-text: $state-info-text | ||
639 | // $alert-info-border: $state-info-border | ||
640 | |||
641 | // $alert-warning-bg: $state-warning-bg | ||
642 | // $alert-warning-text: $state-warning-text | ||
643 | // $alert-warning-border: $state-warning-border | ||
644 | |||
645 | // $alert-danger-bg: $state-danger-bg | ||
646 | // $alert-danger-text: $state-danger-text | ||
647 | // $alert-danger-border: $state-danger-border | ||
648 | |||
649 | |||
650 | //== Progress bars | ||
651 | // | ||
652 | //## | ||
653 | |||
654 | //** Background color of the whole progress component | ||
655 | // $progress-bg: #f5f5f5 | ||
656 | //** Progress bar text color | ||
657 | // $progress-bar-color: #fff | ||
658 | //** Variable for setting rounded corners on progress bar. | ||
659 | // $progress-border-radius: $border-radius-base | ||
660 | |||
661 | //** Default progress bar color | ||
662 | // $progress-bar-bg: $brand-primary | ||
663 | //** Success progress bar color | ||
664 | // $progress-bar-success-bg: $brand-success | ||
665 | //** Warning progress bar color | ||
666 | // $progress-bar-warning-bg: $brand-warning | ||
667 | //** Danger progress bar color | ||
668 | // $progress-bar-danger-bg: $brand-danger | ||
669 | //** Info progress bar color | ||
670 | // $progress-bar-info-bg: $brand-info | ||
671 | |||
672 | |||
673 | //== List group | ||
674 | // | ||
675 | //## | ||
676 | |||
677 | //** Background color on `.list-group-item` | ||
678 | // $list-group-bg: #fff | ||
679 | //** `.list-group-item` border color | ||
680 | // $list-group-border: #ddd | ||
681 | //** List group border radius | ||
682 | // $list-group-border-radius: $border-radius-base | ||
683 | |||
684 | //** Background color of single list items on hover | ||
685 | // $list-group-hover-bg: #f5f5f5 | ||
686 | //** Text color of active list items | ||
687 | // $list-group-active-color: $component-active-color | ||
688 | //** Background color of active list items | ||
689 | // $list-group-active-bg: $component-active-bg | ||
690 | //** Border color of active list elements | ||
691 | // $list-group-active-border: $list-group-active-bg | ||
692 | //** Text color for content within active list items | ||
693 | // $list-group-active-text-color: lighten($list-group-active-bg, 40%) | ||
694 | |||
695 | //** Text color of disabled list items | ||
696 | // $list-group-disabled-color: $gray-light | ||
697 | //** Background color of disabled list items | ||
698 | // $list-group-disabled-bg: $gray-lighter | ||
699 | //** Text color for content within disabled list items | ||
700 | // $list-group-disabled-text-color: $list-group-disabled-color | ||
701 | |||
702 | // $list-group-link-color: #555 | ||
703 | // $list-group-link-hover-color: $list-group-link-color | ||
704 | // $list-group-link-heading-color: #333 | ||
705 | |||
706 | |||
707 | //== Panels | ||
708 | // | ||
709 | //## | ||
710 | |||
711 | // $panel-bg: #fff | ||
712 | // $panel-body-padding: 15px | ||
713 | // $panel-heading-padding: 10px 15px | ||
714 | // $panel-footer-padding: $panel-heading-padding | ||
715 | // $panel-border-radius: $border-radius-base | ||
716 | |||
717 | //** Border color for elements within panels | ||
718 | // $panel-inner-border: #ddd | ||
719 | // $panel-footer-bg: #f5f5f5 | ||
720 | |||
721 | // $panel-default-text: $gray-dark | ||
722 | // $panel-default-border: #ddd | ||
723 | // $panel-default-heading-bg: #f5f5f5 | ||
724 | |||
725 | // $panel-primary-text: #fff | ||
726 | // $panel-primary-border: $brand-primary | ||
727 | // $panel-primary-heading-bg: $brand-primary | ||
728 | |||
729 | // $panel-success-text: $state-success-text | ||
730 | // $panel-success-border: $state-success-border | ||
731 | // $panel-success-heading-bg: $state-success-bg | ||
732 | |||
733 | // $panel-info-text: $state-info-text | ||
734 | // $panel-info-border: $state-info-border | ||
735 | // $panel-info-heading-bg: $state-info-bg | ||
736 | |||
737 | // $panel-warning-text: $state-warning-text | ||
738 | // $panel-warning-border: $state-warning-border | ||
739 | // $panel-warning-heading-bg: $state-warning-bg | ||
740 | |||
741 | // $panel-danger-text: $state-danger-text | ||
742 | // $panel-danger-border: $state-danger-border | ||
743 | // $panel-danger-heading-bg: $state-danger-bg | ||
744 | |||
745 | |||
746 | //== Thumbnails | ||
747 | // | ||
748 | //## | ||
749 | |||
750 | //** Padding around the thumbnail image | ||
751 | // $thumbnail-padding: 4px | ||
752 | //** Thumbnail background color | ||
753 | // $thumbnail-bg: $body-bg | ||
754 | //** Thumbnail border color | ||
755 | // $thumbnail-border: #ddd | ||
756 | //** Thumbnail border radius | ||
757 | // $thumbnail-border-radius: $border-radius-base | ||
758 | |||
759 | //** Custom text color for thumbnail captions | ||
760 | // $thumbnail-caption-color: $text-color | ||
761 | //** Padding around the thumbnail caption | ||
762 | // $thumbnail-caption-padding: 9px | ||
763 | |||
764 | |||
765 | //== Wells | ||
766 | // | ||
767 | //## | ||
768 | |||
769 | // $well-bg: #f5f5f5 | ||
770 | // $well-border: darken($well-bg, 7%) | ||
771 | |||
772 | |||
773 | //== Badges | ||
774 | // | ||
775 | //## | ||
776 | |||
777 | // $badge-color: #fff | ||
778 | //** Linked badge text color on hover | ||
779 | // $badge-link-hover-color: #fff | ||
780 | // $badge-bg: $gray-light | ||
781 | |||
782 | //** Badge text color in active nav link | ||
783 | // $badge-active-color: $link-color | ||
784 | //** Badge background color in active nav link | ||
785 | // $badge-active-bg: #fff | ||
786 | |||
787 | // $badge-font-weight: bold | ||
788 | // $badge-line-height: 1 | ||
789 | // $badge-border-radius: 10px | ||
790 | |||
791 | |||
792 | //== Breadcrumbs | ||
793 | // | ||
794 | //## | ||
795 | |||
796 | // $breadcrumb-padding-vertical: 8px | ||
797 | // $breadcrumb-padding-horizontal: 15px | ||
798 | //** Breadcrumb background color | ||
799 | // $breadcrumb-bg: #f5f5f5 | ||
800 | //** Breadcrumb text color | ||
801 | // $breadcrumb-color: #ccc | ||
802 | //** Text color of current page in the breadcrumb | ||
803 | // $breadcrumb-active-color: $gray-light | ||
804 | //** Textual separator for between breadcrumb elements | ||
805 | // $breadcrumb-separator: "/" | ||
806 | |||
807 | |||
808 | //== Carousel | ||
809 | // | ||
810 | //## | ||
811 | |||
812 | // $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) | ||
813 | |||
814 | // $carousel-control-color: #fff | ||
815 | // $carousel-control-width: 15% | ||
816 | // $carousel-control-opacity: .5 | ||
817 | // $carousel-control-font-size: 20px | ||
818 | |||
819 | // $carousel-indicator-active-bg: #fff | ||
820 | // $carousel-indicator-border-color: #fff | ||
821 | |||
822 | // $carousel-caption-color: #fff | ||
823 | |||
824 | |||
825 | //== Close | ||
826 | // | ||
827 | //## | ||
828 | |||
829 | // $close-font-weight: bold | ||
830 | // $close-color: #000 | ||
831 | // $close-text-shadow: 0 1px 0 #fff | ||
832 | |||
833 | |||
834 | //== Code | ||
835 | // | ||
836 | //## | ||
837 | |||
838 | // $code-color: #c7254e | ||
839 | // $code-bg: #f9f2f4 | ||
840 | |||
841 | // $kbd-color: #fff | ||
842 | // $kbd-bg: #333 | ||
843 | |||
844 | // $pre-bg: #f5f5f5 | ||
845 | // $pre-color: $gray-dark | ||
846 | // $pre-border-color: #ccc | ||
847 | // $pre-scrollable-max-height: 340px | ||
848 | |||
849 | |||
850 | //== Type | ||
851 | // | ||
852 | //## | ||
853 | |||
854 | //** Horizontal offset for forms and lists. | ||
855 | // $component-offset-horizontal: 180px | ||
856 | //** Text muted color | ||
857 | // $text-muted: $gray-light | ||
858 | //** Abbreviations and acronyms border color | ||
859 | // $abbr-border-color: $gray-light | ||
860 | //** Headings small color | ||
861 | // $headings-small-color: $gray-light | ||
862 | //** Blockquote small color | ||
863 | // $blockquote-small-color: $gray-light | ||
864 | //** Blockquote font size | ||
865 | // $blockquote-font-size: ($font-size-base * 1.25) | ||
866 | //** Blockquote border color | ||
867 | // $blockquote-border-color: $gray-lighter | ||
868 | //** Page header border color | ||
869 | // $page-header-border-color: $gray-lighter | ||
870 | //** Width of horizontal description list titles | ||
871 | // $dl-horizontal-offset: $component-offset-horizontal | ||
872 | //** Point at which .dl-horizontal becomes horizontal | ||
873 | // $dl-horizontal-breakpoint: $grid-float-breakpoint | ||
874 | //** Horizontal line color. | ||
875 | // $hr-border: $gray-lighter | ||
diff --git a/public/stylesheets/index.scss b/public/stylesheets/index.scss index 16f2ae88f..d13dcfa90 100644 --- a/public/stylesheets/index.scss +++ b/public/stylesheets/index.scss | |||
@@ -1,30 +1,14 @@ | |||
1 | $icon-font-path: "/stylesheets/vendor/fonts/bootstrap/"; | ||
2 | |||
3 | @import "_bootstrap"; | ||
4 | |||
5 | body { | ||
6 | padding: 20px; | ||
7 | } | ||
8 | |||
9 | .span_action { | 1 | .span_action { |
10 | margin: 5px; | 2 | margin: 5px; |
11 | cursor: pointer; | 3 | cursor: pointer; |
12 | } | 4 | } |
13 | 5 | ||
14 | |||
15 | |||
16 | header div { | 6 | header div { |
17 | height: 50px; | 7 | height: 50px; |
18 | line-height: 25px; | 8 | line-height: 25px; |
19 | margin-bottom: 50px; | 9 | margin-bottom: 50px; |
20 | } | 10 | } |
21 | 11 | ||
22 | #search_video { | ||
23 | margin: 0 30px 0 30px; | ||
24 | } | ||
25 | |||
26 | |||
27 | |||
28 | menu { | 12 | menu { |
29 | margin-right: 20px; | 13 | margin-right: 20px; |
30 | border-right: 1px solid rgba(0, 0, 0, 0.2); | 14 | border-right: 1px solid rgba(0, 0, 0, 0.2); |
@@ -44,8 +28,6 @@ menu .glyphicon { | |||
44 | margin: 5px; | 28 | margin: 5px; |
45 | } | 29 | } |
46 | 30 | ||
47 | |||
48 | |||
49 | #ajax_load { | 31 | #ajax_load { |
50 | min-height: 500px; | 32 | min-height: 500px; |
51 | } | 33 | } |
@@ -80,17 +62,6 @@ menu .glyphicon { | |||
80 | margin-left: 7px; | 62 | margin-left: 7px; |
81 | } | 63 | } |
82 | 64 | ||
83 | |||
84 | |||
85 | form { | ||
86 | padding: 1px; | ||
87 | margin-top: 10px; | ||
88 | } | ||
89 | |||
90 | form div { | ||
91 | margin-bottom: 15px !important; | ||
92 | } | ||
93 | |||
94 | .btn-file { | 65 | .btn-file { |
95 | position: relative; | 66 | position: relative; |
96 | overflow: hidden; | 67 | overflow: hidden; |
@@ -114,13 +85,4 @@ form div { | |||
114 | .name_file { | 85 | .name_file { |
115 | display: inline-block; | 86 | display: inline-block; |
116 | margin-left: 10px; | 87 | margin-left: 10px; |
117 | } | 88 | } \ No newline at end of file |
118 | |||
119 | |||
120 | footer { | ||
121 | border-top: 1px solid rgba(0, 0, 0, 0.2); | ||
122 | padding-top: 10px; | ||
123 | padding-top: 10px; | ||
124 | text-align: center; | ||
125 | font-size: small; | ||
126 | } | ||
diff --git a/views/header.jade b/views/header.jade index d8a39898e..6b84333f9 100644 --- a/views/header.jade +++ b/views/header.jade | |||
@@ -1 +1,9 @@ | |||
1 | \ No newline at end of file | 1 | .navbar.navbar-default |
2 | .container-fluid | ||
3 | .navbar-header | ||
4 | a.navbar-brand(href='/') PeerTube | ||
5 | .navbar-header | ||
6 | form.navbar-form(role='search') | ||
7 | .form-group.search-group | ||
8 | input.form-control#search-video(type='text' name='search_video' placeholder='Search a video...') | ||
9 | a.search-btn.btn.btn-link.glyphicon.glyphicon-search(type='submit') \ No newline at end of file | ||
diff --git a/views/index.jade b/views/index.jade index 21cedb324..a49758fc0 100644 --- a/views/index.jade +++ b/views/index.jade | |||
@@ -1,16 +1,7 @@ | |||
1 | extends layout | 1 | extends layout |
2 | 2 | ||
3 | block content | 3 | block content |
4 | |||
5 | div(class='container') | 4 | div(class='container') |
6 | |||
7 | header(class='row') | ||
8 | div(class='col-md-2') | ||
9 | h4 PeerTube | ||
10 | |||
11 | div(class='col-md-8') | ||
12 | input(type='text' id='search_video' name='search_video' class='form-control' placeholder='Search a video...') | ||
13 | |||
14 | div(class='row') | 5 | div(class='row') |
15 | include panel | 6 | include panel |
16 | 7 | ||
diff --git a/views/layout.jade b/views/layout.jade index 236a36c3c..43c28cd4f 100644 --- a/views/layout.jade +++ b/views/layout.jade | |||
@@ -2,7 +2,7 @@ doctype html | |||
2 | html | 2 | html |
3 | head | 3 | head |
4 | link(rel='icon' type='image/png' href='/images/favicon.png') | 4 | link(rel='icon' type='image/png' href='/images/favicon.png') |
5 | 5 | meta(name='viewport' content='width=device-width, initial-scale=1') | |
6 | title= title | 6 | title= title |
7 | 7 | ||
8 | // build:css /stylesheets/global.min.css | 8 | // build:css /stylesheets/global.min.css |
@@ -11,4 +11,5 @@ html | |||
11 | // endbuild | 11 | // endbuild |
12 | 12 | ||
13 | body | 13 | body |
14 | include header | ||
14 | block content | 15 | block content |