]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/menu/notification.component.scss
Translated using Weblate (Russian)
[github/Chocobozzz/PeerTube.git] / client / src / app / menu / notification.component.scss
CommitLineData
8cbc40b2
C
1@use '_variables' as *;
2@use '_mixins' as *;
2f1548fd 3
968aaed2 4.content {
02dd4f3c 5 scrollbar-color: auto;
968aaed2 6}
51a83970
K
7
8.notification-inbox-popover {
9 padding: 10px;
10}
11
12.notification-inbox-link a {
13 padding: 13px 10px;
14}
15
16.notification-inbox-popover,
17.notification-inbox-link a {
18 @include apply-svg-color(#808080);
51a83970
K
19
20 transition: all .1s ease-in-out;
21 border-radius: 25px;
22 cursor: pointer;
23
931d3430
C
24 ::ng-deep svg {
25 transition: color .1s ease-in-out;
26 }
27
28 &:hover,
29 &:active {
51a83970 30 @include apply-svg-color(#fff);
931d3430
C
31
32 background-color: rgba(255, 255, 255, 0.15);
51a83970
K
33 }
34}
35
36.notification-inbox-popover.shown,
37.notification-inbox-link a.active {
38 @include apply-svg-color(#fff);
39
40 background-color: rgba(255, 255, 255, 0.28);
41 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
42}
43
44.notification-inbox-popover.hidden {
45 display: none;
46}
47
03652b31 48::ng-deep {
2f1548fd 49 .popover-notifications.popover {
fdebd9a3 50 max-width: none;
51a83970 51 top: -6px !important;
10475dea 52 left: 7px !important;
2f1548fd 53
51a83970
K
54 .arrow {
55 display: none;
56 }
57
2f1548fd
C
58 .popover-body {
59 padding: 0;
60 font-size: 14px;
61 font-family: $main-fonts;
fdebd9a3 62 width: 400px;
931d3430 63 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
2f1548fd 64
b28e4e5e
C
65 .loader {
66 display: flex;
67 align-items: center;
68 justify-content: center;
69
70 padding: 5px 0;
71 }
72
73 .content {
74 max-height: 150px;
75 transition: max-height 0.15s ease-out;
10475dea
RK
76 display: flex;
77 height: 500px;
78 flex-direction: column;
b28e4e5e
C
79
80 &.loaded {
81 max-height: 500px;
82 }
10475dea 83
931d3430 84 > my-user-notifications:nth-child(2) {
10475dea 85 overflow-y: auto;
c06af501 86 flex-grow: 1;
10475dea 87 }
b28e4e5e
C
88 }
89
2f1548fd
C
90 .notifications-header {
91 display: flex;
92 justify-content: space-between;
93
51a83970 94 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2f1548fd 95 align-items: center;
51a83970
K
96 padding: 0 12px;
97 font-size: 14px;
98 font-weight: bold;
99 color: rgba(0, 0, 0, 0.5);
100 text-transform: uppercase;
101 min-height: 40px;
2f1548fd
C
102
103 a {
104 @include disable-default-a-behaviour;
10475dea 105 }
51a83970 106
10475dea
RK
107 button {
108 @include peertube-button;
51a83970 109
10475dea
RK
110 padding: 0;
111 background: transparent;
112 }
2f1548fd 113
931d3430
C
114 a,
115 button {
2f1548fd
C
116 color: rgba(20, 20, 20, 0.5);
117
10475dea 118 &:hover:not(:disabled) {
2f1548fd
C
119 color: rgba(20, 20, 20, 0.8);
120 }
121 }
122 }
123
124 .all-notifications {
125 display: flex;
126 align-items: center;
127 justify-content: center;
128 font-weight: $font-semibold;
18c97728 129 color: $fg-color;
457bb213 130 padding: 7px 0;
10475dea
RK
131 margin-top: auto;
132 text-decoration: none;
2f1548fd
C
133 }
134 }
135 }
136}
137
931d3430
C
138.notification-inbox-popover,
139.notification-inbox-link {
2f1548fd
C
140 cursor: pointer;
141 position: relative;
142
2f1548fd 143 .unread-notifications {
27bc9586 144 @include margin-left(20px);
2f1548fd
C
145 }
146
2f1548fd
C
147 .unread-notifications {
148 position: absolute;
51a83970
K
149 top: 6px;
150 left: 0;
151
152 @media screen and (max-width: $mobile-view) {
153 top: -4px;
154 left: -2px;
155 }
2f1548fd
C
156
157 display: flex;
158 align-items: center;
159 justify-content: center;
160
e66883b3
RK
161 background-color: pvar(--mainColor);
162 color: #fff;
2f1548fd
C
163 font-size: 10px;
164 font-weight: $font-semibold;
165
166 border-radius: 15px;
167 width: 15px;
168 height: 15px;
169 }
170}