diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-06-09 09:33:28 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-09 09:33:28 +0200 |
commit | e66883b37ae0796256b3aba550670a2d76cfc98a (patch) | |
tree | 3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/app/videos/+video-edit | |
parent | 6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff) | |
download | PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip |
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list
* normalize timestamp display on miniatures
* use grid for abstract-video-list
- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen
* move sceenratio function in a mixin
* display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/app/videos/+video-edit')
3 files changed, 8 insertions, 8 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 0702ebf22..69b907288 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss | |||
@@ -17,7 +17,7 @@ label { | |||
17 | } | 17 | } |
18 | 18 | ||
19 | .title-page a { | 19 | .title-page a { |
20 | color: var(--mainForegroundColor); | 20 | color: pvar(--mainForegroundColor); |
21 | 21 | ||
22 | &:hover { | 22 | &:hover { |
23 | text-decoration: none; | 23 | text-decoration: none; |
@@ -122,7 +122,7 @@ my-peertube-checkbox { | |||
122 | display: inline-block; | 122 | display: inline-block; |
123 | margin-right: 25px; | 123 | margin-right: 25px; |
124 | 124 | ||
125 | color: var(--greyForegroundColor); | 125 | color: pvar(--greyForegroundColor); |
126 | font-size: 15px; | 126 | font-size: 15px; |
127 | } | 127 | } |
128 | 128 | ||
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss index 3b46475b4..1fef74994 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss | |||
@@ -3,7 +3,7 @@ | |||
3 | 3 | ||
4 | .first-step-block { | 4 | .first-step-block { |
5 | .torrent-or-magnet { | 5 | .torrent-or-magnet { |
6 | @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor)); | 6 | @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor)); |
7 | 7 | ||
8 | &[data-content] { | 8 | &[data-content] { |
9 | margin: 1.5rem 0; | 9 | margin: 1.5rem 0; |
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss index 1316e09e4..0ad57d897 100644 --- a/client/src/app/videos/+video-edit/video-add.component.scss +++ b/client/src/app/videos/+video-edit/video-add.component.scss | |||
@@ -33,10 +33,10 @@ $nav-link-height: 40px; | |||
33 | &.active { | 33 | &.active { |
34 | border: $border-width $border-type $border-color; | 34 | border: $border-width $border-type $border-color; |
35 | border-bottom: none; | 35 | border-bottom: none; |
36 | background-color: var(--submenuColor) !important; | 36 | background-color: pvar(--submenuColor) !important; |
37 | 37 | ||
38 | span { | 38 | span { |
39 | border-bottom: 2px solid var(--mainColor); | 39 | border-bottom: 2px solid pvar(--mainColor); |
40 | font-weight: $font-bold; | 40 | font-weight: $font-bold; |
41 | } | 41 | } |
42 | } | 42 | } |
@@ -47,7 +47,7 @@ $nav-link-height: 40px; | |||
47 | border: $border-width $border-type $border-color; | 47 | border: $border-width $border-type $border-color; |
48 | border-top: transparent; | 48 | border-top: transparent; |
49 | 49 | ||
50 | background-color: var(--submenuColor); | 50 | background-color: pvar(--submenuColor); |
51 | border-bottom-left-radius: 3px; | 51 | border-bottom-left-radius: 3px; |
52 | border-bottom-right-radius: 3px; | 52 | border-bottom-right-radius: 3px; |
53 | width: 100%; | 53 | width: 100%; |
@@ -58,7 +58,7 @@ $nav-link-height: 40px; | |||
58 | align-items: center; | 58 | align-items: center; |
59 | 59 | ||
60 | &.dragover { | 60 | &.dragover { |
61 | border: 3px dashed var(--mainColor); | 61 | border: 3px dashed pvar(--mainColor); |
62 | } | 62 | } |
63 | } | 63 | } |
64 | 64 | ||
@@ -72,7 +72,7 @@ $nav-link-height: 40px; | |||
72 | /* Hide active tab style to not have a moving tab effect */ | 72 | /* Hide active tab style to not have a moving tab effect */ |
73 | a.nav-link.active { | 73 | a.nav-link.active { |
74 | border: none; | 74 | border: none; |
75 | background-color: var(--mainBackgroundColor) !important; | 75 | background-color: pvar(--mainBackgroundColor) !important; |
76 | } | 76 | } |
77 | } | 77 | } |
78 | } | 78 | } |