Mercurial > nebulaweb3

comparison default/assets/scss/layout/_right-sidebar.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2
3 /* Right Sidebar
4 ========================*/
5 .scrollbar-enabled {
6 position: relative;
7 padding-right: 15px;
8
9 .left-scroll & {
10 padding-right: 0;
11 padding-left: 15px;
12 }
13 }
14
15 .sidebar-dark .site-sidebar,
16 .right-sidebar-dark .right-sidebar {
17 .ps-scrollbar-y-rail,
18 .ps-scrollbar-x {
19 background: transparent !important;
20 }
21
22 .ps-scrollbar-y {
23 background: rgb(220,220,220) !important;
24 right: 0 !important;
25 width: rem(5) !important;
26 }
27 }
28
29 .right-sidebar {
30 @include position(fixed, $nav-height 0 null null);
31 width: $right-sidebar-width;
32 background: #fff;
33 height: calc(100vh - #{$nav-height});
34 border-left: 1px solid $theme-border-color;
35 transform: translateX(100%);
36 padding: em(15);
37 z-index: 9;
38
39 .right-sidebar-expand & {
40 transform: translateY(0);
41 }
42
43 @include tablet {
44 .right-sidebar {
45 width: 100%;
46 height: auto;
47 }
48 }
49
50 body.rtl & {
51 left: 0;
52 right: auto;
53 transform: translateX(-100%);
54 border-left: 0;
55 border-right: 1px solid $theme-border-color;
56 }
57 body.rtl.right-sidebar-expand & {
58 transform: translateX(0);
59 }
60 }
61
62 .sidebar-chat-info {
63 color: $nav-link-color;
64 font-size: em(13);
65 }
66
67
68 /* Sidebar Chat
69 ========================*/
70 .sidebar-chat {
71 z-index: 9999999;
72
73 .list-group-item {
74 background: none;
75 border: 0;
76 border-top: 1px solid $theme-border-color;
77 @include padding(em(10) 0 em(10) 0);
78 overflow: hidden;
79 color: $body-color;
80 display: flex;
81 align-items: center;
82
83 &:hover,
84 &.chat-active,
85 &.active,
86 &.active:focus,
87 &.active:hover {
88 background: $nav-link-hover-color;
89 color: $body-color;
90 z-index: auto;
91 }
92
93 figure {
94 margin-bottom: 0;
95 }
96
97 > span {
98 line-height: 1em;
99 display: flex;
100 justify-content: flex-end;
101 flex-direction: column;
102 }
103
104 .name {
105 font-size: em(13);
106 font-family: $headings-font-family;
107 color: $headings-color;
108 font-weight: 500;
109 top: em(9,13);
110 margin-bottom: em(5,13);
111 margin-top: em(4,13);
112 }
113
114 .username {
115 opacity: 0.7;
116 font-size: em(12);
117 top: em(-1,12);
118 //margin-bottom: em(5,12);
119 }
120 }
121
122 .list-group-item:first-child {
123 border-radius: 0;
124 }
125
126 [class*="user-"]:after {
127 @include position(absolute, calc(50% + 15px) null null 0);
128 transform: translateY(-50%);
129 }
130 }
131
132 .sidebar-chat-subtitle {
133 text-transform: uppercase;
134 margin-top: em(40);
135 color: #bbb;
136 font-weight: 700;
137 letter-spacing: em(1);
138 }
139
140
141 /* Chat Panel
142 ========================*/
143 .chat-panel {
144 @include position(fixed, calc(100vh) calc( #{$right-sidebar-width} + 15px) null null);
145 width: em(340);
146 transform: translateY(-100%) translateX(#{$right-sidebar-width});
147 z-index: 9999;
148
149 .right-sidebar-expand & {
150 transform: translateY(-100%) translateX(0);
151 }
152
153 .minimize {
154 border: 0;
155 background: none;
156 @include size(auto);
157 padding: 0;
158 margin: 0;
159 margin-right: em(5);
160 line-height: 1em;
161 position: relative;
162 top: em(-1);
163 float: right;
164 color: #000;
165 opacity: 0.2;
166
167 &:hover {
168 opacity: 0.5;
169 }
170 }
171
172 .user-name {
173 color: $headings-color;
174 }
175
176 .close {
177 opacity: 0.2;
178 &:hover {
179 opacity: 0.5;
180 }
181 }
182
183 .card{
184 border-radius: 10px;
185 border: none;
186 box-shadow: 0 4px 8px 3px rgba(0,0,0,.1);
187 margin-bottom: em(20);
188 }
189
190 .card-header {
191 background: none;
192 padding: em(15) em(20);
193 font-size: em(16);
194 border-bottom: 1px solid #f1f1f1;
195 button { cursor: pointer; }
196 }
197
198 .card-body {
199 padding: em(15);
200 }
201
202 .card-footer {
203 background: none;
204 padding: em(15) em(20);
205 border-top: 1px solid #f1f1f1;
206
207 a {
208 i {
209 color: #bbb;
210 position: relative;
211 top: 4px;
212 }
213 }
214
215 textarea {
216 @include placeholder {
217 color: #bbb;
218 }
219 }
220 }
221
222 .messages {
223 position: relative;
224 max-height: em(300);
225 overflow-y: scroll;
226 @include margin(em(-15) em(-15) null em(-15));
227 @include padding(em(15) em(15) null em(15));
228 }
229
230 body.rtl & {
231 right: auto;
232 left: calc(#{$right-sidebar-width} + 15px;
233 }
234 }
235
236
237 /* Dark Right Sidebar
238 ========================*/
239 .right-sidebar-dark {
240 .right-sidebar {
241 background: $color-scheme-dark;
242 border-color: rgba(255,255,255, 0.2);
243 .list-group-item {
244 &:hover,
245 &.chat-active,
246 &.active,
247 &.active:focus,
248 &.active:hover {
249 background: $color-scheme-dark-hover;
250
251 .name {
252 color: #fff;
253 }
254 }
255
256 span {
257 color: #afb2ba;
258 }
259 }
260 }
261
262 .right-sidebar h3, .sidebar-chat-subtitle {
263 color: #fff;
264 }
265
266 .sidebar-chat-info {
267 color: #afb2ba;
268 }
269
270
271 .chat-panel {
272 // .panel-body {
273 // background: $color-scheme-dark;
274 // }
275
276 .minimize,
277 button.close {
278 color: #fff;
279 opacity: .4;
280
281 &:hover {
282 opacity: 1;
283 }
284 }
285
286 // .panel {
287 // .panel-heading {
288 // border-color: rgba(255,255,255,0.2);
289 // }
290 // }
291
292 .message p {
293 background: $color-scheme;
294 color: #fff;
295 }
296
297
298 .chat-extra-buttons {
299 a {
300 transition: all 0.3s ease;
301 color: #fff;
302 &:hover {
303 opacity: 0.6;
304 border: 0;
305 }
306 }
307 }
308
309 textarea {
310 border-color: rgba(255,255,255,0.2);
311 color: #fff;
312 background: transparent;
313
314 @include placeholder {
315 color: #fff;
316 opacity: .7;
317 }
318 }
319 }
320
321 }