diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-19 10:20:08 +0200 |
---|---|---|
committer | Rigel Kent <par@rigelk.eu> | 2020-05-01 16:41:02 +0200 |
commit | aeb1bed9835b3b092832160245080d4023c14d91 (patch) | |
tree | 366cdf113afe748ca59f1bc40ce589cac781cc3c /client/src/app/+admin/moderation/moderation.component.scss | |
parent | 5fd4ca0051c7e7f3f8c47bcbde5cab0c56532e64 (diff) | |
download | PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.tar.gz PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.tar.zst PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.zip |
Factorize video display in table for moderation components, apply it to blacklisted videos as well
Diffstat (limited to 'client/src/app/+admin/moderation/moderation.component.scss')
-rw-r--r-- | client/src/app/+admin/moderation/moderation.component.scss | 70 |
1 files changed, 69 insertions, 1 deletions
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index ef6a39b5d..a4ee65423 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss | |||
@@ -27,7 +27,7 @@ | |||
27 | } | 27 | } |
28 | } | 28 | } |
29 | 29 | ||
30 | .video-abuse-states { | 30 | .video-table-states { |
31 | & > :not(:first-child) { | 31 | & > :not(:first-child) { |
32 | margin-left: .4rem; | 32 | margin-left: .4rem; |
33 | } | 33 | } |
@@ -68,3 +68,71 @@ my-action-dropdown.show { | |||
68 | display: block !important; | 68 | display: block !important; |
69 | } | 69 | } |
70 | } | 70 | } |
71 | |||
72 | |||
73 | .video-table-video-link { | ||
74 | @include disable-outline; | ||
75 | position: relative; | ||
76 | top: 3px; | ||
77 | } | ||
78 | |||
79 | .video-table-video { | ||
80 | display: inline-flex; | ||
81 | |||
82 | .video-table-video-image { | ||
83 | @include miniature-thumbnail; | ||
84 | |||
85 | $image-height: 45px; | ||
86 | |||
87 | height: $image-height; | ||
88 | width: #{(16/9) * $image-height}; | ||
89 | margin-right: 0.5rem; | ||
90 | border-radius: 2px; | ||
91 | border: none; | ||
92 | background: transparent; | ||
93 | display: inline-flex; | ||
94 | justify-content: center; | ||
95 | align-items: center; | ||
96 | position: relative; | ||
97 | |||
98 | img { | ||
99 | height: 100%; | ||
100 | width: 100%; | ||
101 | border-radius: 2px; | ||
102 | } | ||
103 | |||
104 | span { | ||
105 | color: var(--inputPlaceholderColor); | ||
106 | } | ||
107 | |||
108 | .video-table-video-image-label { | ||
109 | @include static-thumbnail-overlay; | ||
110 | position: absolute; | ||
111 | border-radius: 3px; | ||
112 | font-size: 10px; | ||
113 | padding: 0 3px; | ||
114 | line-height: 1.3; | ||
115 | bottom: 2px; | ||
116 | right: 2px; | ||
117 | } | ||
118 | } | ||
119 | |||
120 | .video-table-video-text { | ||
121 | display: inline-flex; | ||
122 | flex-direction: column; | ||
123 | justify-content: center; | ||
124 | font-size: 90%; | ||
125 | color: var(--mainForegroundColor); | ||
126 | line-height: 1rem; | ||
127 | |||
128 | div .glyphicon { | ||
129 | font-size: 80%; | ||
130 | color: gray; | ||
131 | margin-left: 0.1rem; | ||
132 | } | ||
133 | |||
134 | div + div { | ||
135 | font-size: 80%; | ||
136 | } | ||
137 | } | ||
138 | } | ||