aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_miniature.scss133
-rw-r--r--client/src/sass/include/_mixins.scss28
2 files changed, 133 insertions, 28 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
new file mode 100644
index 000000000..36d4e84d3
--- /dev/null
+++ b/client/src/sass/include/_miniature.scss
@@ -0,0 +1,133 @@
1@import '_variables';
2@import '_mixins';
3
4@mixin miniature-name {
5 @include ellipsis-multiline(
6 $font-size: 1rem,
7 $line-height: 1,
8 $lines-to-show: 2
9 );
10 transition: color 0.2s;
11 font-size: 16px;
12 font-weight: $font-semibold;
13 color: var(--mainForegroundColor);
14 margin-top: 5px;
15 margin-bottom: 5px;
16
17 &:hover {
18 text-decoration: none;
19 }
20
21 &.blur-filter {
22 filter: blur(3px);
23 padding-left: 4px;
24 }
25}
26
27$play-overlay-transition: 0.2s ease;
28$play-overlay-height: 26px;
29$play-overlay-width: 18px;
30
31@mixin miniature-thumbnail {
32 @include disable-outline;
33
34 display: inline-block;
35 position: relative;
36 border-radius: 3px;
37 overflow: hidden;
38 width: $video-thumbnail-width;
39 height: $video-thumbnail-height;
40 background-color: #ececec;
41 transition: filter $play-overlay-transition;
42
43 .play-overlay {
44 position: absolute;
45 right: 0;
46 bottom: 0;
47
48 width: $video-thumbnail-width;
49 height: $video-thumbnail-height;
50 opacity: 0;
51 background-color: rgba(0, 0, 0, 0.7);
52
53 &, .icon {
54 transition: all $play-overlay-transition;
55 }
56
57 .icon {
58 width: 0;
59 height: 0;
60
61 position: absolute;
62 left: 50%;
63 top: 50%;
64 transform: translate(-50%, -50%) scale(0.5);
65
66 border-top: ($play-overlay-height / 2) solid transparent;
67 border-bottom: ($play-overlay-height / 2) solid transparent;
68
69 border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
70 }
71 }
72
73 &:hover {
74 text-decoration: none !important;
75
76 .play-overlay {
77 opacity: 1;
78
79 .icon {
80 transform: translate(-50%, -50%) scale(1);
81 }
82 }
83 }
84
85 &.focus-visible {
86 box-shadow: 0 0 0 2px var(--mainColor);
87 }
88
89 img {
90 width: $video-thumbnail-width;
91 height: $video-thumbnail-height;
92
93 &.blur-filter {
94 filter: blur(5px);
95 transform : scale(1.03);
96 }
97 }
98}
99
100@mixin static-thumbnail-overlay {
101 display: inline-block;
102 background-color: rgba(0, 0, 0, 0.7);
103 color: #fff;
104}
105
106@mixin video-miniature-small-screen {
107 text-align: center;
108
109 /deep/ .video-miniature {
110 padding-right: 0;
111 height: auto;
112 width: 100%;
113 margin-bottom: 20px;
114
115 .video-miniature-information {
116 width: 100% !important;
117
118 span {
119 width: 100%;
120 }
121 }
122
123 .video-thumbnail {
124 width: 100%;
125 height: auto;
126
127 img {
128 width: 100%;
129 height: auto;
130 }
131 }
132 }
133}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index c2e200a14..59b2f42a5 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -516,31 +516,3 @@
516 } 516 }
517} 517}
518 518
519@mixin video-miniature-small-screen {
520 text-align: center;
521
522 /deep/ .video-miniature {
523 padding-right: 0;
524 height: auto;
525 width: 100%;
526 margin-bottom: 20px;
527
528 .video-miniature-information {
529 width: 100% !important;
530
531 span {
532 width: 100%;
533 }
534 }
535
536 .video-thumbnail {
537 width: 100%;
538 height: auto;
539
540 img {
541 width: 100%;
542 height: auto;
543 }
544 }
545 }
546}