diff options
author | Chocobozzz <me@florianbigard.com> | 2021-06-29 17:57:59 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-06-29 18:01:02 +0200 |
commit | 06a555797929d4867264b096c8420cdedd50f496 (patch) | |
tree | e68b0038d3f3f8ccae43b3bd22509200888a699a /client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss | |
parent | 6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6 (diff) | |
download | PeerTube-06a555797929d4867264b096c8420cdedd50f496.tar.gz PeerTube-06a555797929d4867264b096c8420cdedd50f496.tar.zst PeerTube-06a555797929d4867264b096c8420cdedd50f496.zip |
Move watch action buttons in a dedicated component
Diffstat (limited to 'client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss new file mode 100644 index 000000000..967d515e6 --- /dev/null +++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss | |||
@@ -0,0 +1,99 @@ | |||
1 | @use '_variables' as *; | ||
2 | @use '_mixins' as *; | ||
3 | |||
4 | .video-actions { | ||
5 | height: 40px; // Align with the title | ||
6 | display: flex; | ||
7 | align-items: center; | ||
8 | |||
9 | .action-button:not(:first-child), | ||
10 | .action-dropdown, | ||
11 | my-video-actions-dropdown { | ||
12 | @include margin-left(5px); | ||
13 | } | ||
14 | |||
15 | ::ng-deep.action-button { | ||
16 | @include peertube-button; | ||
17 | @include button-with-icon(21px, 0, -1px); | ||
18 | |||
19 | font-size: 100%; | ||
20 | font-weight: $font-semibold; | ||
21 | display: inline-block; | ||
22 | padding: 0 10px; | ||
23 | white-space: nowrap; | ||
24 | background-color: transparent !important; | ||
25 | color: pvar(--actionButtonColor); | ||
26 | text-transform: uppercase; | ||
27 | |||
28 | &::after { | ||
29 | display: none; | ||
30 | } | ||
31 | |||
32 | &:hover { | ||
33 | opacity: 0.9; | ||
34 | } | ||
35 | |||
36 | &.action-button-support { | ||
37 | color: pvar(--supportButtonColor); | ||
38 | |||
39 | my-global-icon { | ||
40 | @include apply-svg-color(pvar(--supportButtonColor)); | ||
41 | } | ||
42 | } | ||
43 | |||
44 | &.action-button-support { | ||
45 | my-global-icon { | ||
46 | ::ng-deep path:first-child { | ||
47 | fill: pvar(--supportButtonHeartColor) !important; | ||
48 | } | ||
49 | } | ||
50 | } | ||
51 | |||
52 | &.action-button-save { | ||
53 | my-global-icon { | ||
54 | top: 0 !important; | ||
55 | right: -1px; | ||
56 | } | ||
57 | } | ||
58 | |||
59 | .icon-text { | ||
60 | @include margin-left(3px); | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | |||
65 | .likes-dislikes-bar-outer-container { | ||
66 | position: relative; | ||
67 | } | ||
68 | |||
69 | .likes-dislikes-bar-inner-container { | ||
70 | position: absolute; | ||
71 | height: 20px; | ||
72 | } | ||
73 | |||
74 | .likes-dislikes-bar { | ||
75 | $likes-bar-height: 2px; | ||
76 | |||
77 | height: $likes-bar-height; | ||
78 | margin-top: -$likes-bar-height; | ||
79 | |||
80 | width: 120px; | ||
81 | background-color: #ccc; | ||
82 | position: relative; | ||
83 | top: 10px; | ||
84 | |||
85 | .likes-bar { | ||
86 | height: 100%; | ||
87 | background-color: #909090; | ||
88 | |||
89 | &.liked { | ||
90 | background-color: pvar(--activatedActionButtonColor); | ||
91 | } | ||
92 | } | ||
93 | } | ||
94 | |||
95 | @media screen and (max-width: 450px) { | ||
96 | .action-button .icon-text { | ||
97 | display: none !important; | ||
98 | } | ||
99 | } | ||