├── 395px-Logo_apple_pnh.png
├── CONTRIBUTING.md
├── README.md
├── index.html
├── script.js
└── style.css
/395px-Logo_apple_pnh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RedEdge967/MacOS-CSS/e28fdd0b9b2d7b19e7ace8374d4a7755b55ddeb4/395px-Logo_apple_pnh.png
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributiors who wants to make this website better can make contribution,which will be **greatly appreciated**.
4 |
5 | 1. Fork the Project
6 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
7 | 3. Commit your Changes (`git commit -m 'Added some AmazingFeature'`)
8 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
9 | 5. Open a Pull Request
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Macos Big sur web
2 | > #### 🛑 macos-css is the next version of my other [macOS-web.](https://github.com/RedEdge967/macOS-web) It was the old version of macOS web recreation.
3 | ---
4 | ## What is macos-in-css
5 | - macos-css is my next version of [macOS-web.](https://github.com/RedEdge967/macOS-web)
6 | - Made in HTML5, CSS3 and Javascript
7 | ---
8 | ## Features
9 | - Time (Seconds also can be viewed)
10 | - Finder UI
11 | - Day and Night wallpapers (after 6pm, it turns in to night wallpaper)
12 | - Calender
13 | - Notification banner
14 | - Settings UI
15 | - Terminal
16 | - Apple Menu UI
17 | - A Messenger app UI
18 | - Right click (Only Refresh is available)
19 | - Lock screen
20 | - Log out/in user
21 | - App Search
22 | ---
23 | ## Preview of MacOS Big sur web
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | ---
34 | > #### 🛑 Password = 123
35 | ---
36 | ## [Live view (https://macos-css.vercel.app)](https://macos-css.vercel.app)
37 | ---
38 | ### Browser Support
39 |  |  |  |  | 
40 | --- | --- | --- | --- | --- |
41 | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
42 | ---
43 | ## Can I [Contribute?](https://github.com/RedEdge967/MacOS-CSS/blob/master/CONTRIBUTING.md)
44 | - Sure, open an issue, point out errors, and what not. Wanna fix something yourselves, you're welcome to open a pull request and I appreciate it.
45 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | macOS in CSS
6 |
31 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
81 |
82 |
83 |
84 |
85 |
Finder
86 |
File
87 |
Edit
88 |
View
89 |
Go
90 |
Window
91 |
Help
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
106 |
107 |
108 |
About this mac
109 |
110 |
System Preferences...
111 |
App Store...
112 |
113 |
Sleep
114 |
Restart...
115 |
Shut Down...
116 |
117 |
Log out
118 |
121 |
About Finder
122 |
123 |
Preferences...
124 |
125 |
Empty trash...
126 |
127 |
144 |
145 |
Hide Finder
146 |
Hide others
147 |
Show all
148 |
151 |
New Finder Window
152 |
New Folder
153 |
New Folder with Selection
154 |
New Smart Folder
155 |
New Tab
156 |
Open
157 |
163 |
Print
164 |
Close Window
165 |
166 |
Get Info
167 |
Rename
168 |
169 |
Compress
170 |
171 |
Duplicate
172 |
Make Alias
173 |
Quick Look
174 |
Show In Enclosing Folder
175 |
Add to Dock
176 |
177 |
Move to Trash
178 |
Eject
179 |
180 |
Find
181 |
182 |
Tags...
183 |
186 |
Undo
187 |
Redo
188 |
189 |
Cut
190 |
Copy
191 |
Paste
192 |
Select All
193 |
194 |
Show Clipboard
195 |
196 |
Start Dictation
197 |
Emojis & Symbols
198 |
201 |
as Icons
202 |
as List
203 |
as Columns
204 |
as Cover Flow
205 |
206 |
Clean Up
207 |
211 |
221 |
222 |
Show Task Bar
223 |
Show Path Bar
224 |
Hide Status Bar
225 |
Hide Sidebar
226 |
Show Preview
227 |
228 |
Hide Toolbar
229 |
Customize Toolbar...
230 |
231 |
Show View Options
232 |
Enter Full Screen
233 |
237 |
Back
238 |
Forward
239 |
Select Startup Disk on Desktop
240 |
241 |
All My Files
242 |
Documents
243 |
Desktop
244 |
Downloads
245 |
Home
246 |
Computer
247 |
AirDrop
248 |
Network
249 |
iCloud Drive
250 |
Applications
251 |
Utilities
252 |
253 |
260 |
261 |
Go to Folder...
262 |
Connect to Server...
263 |
266 |
Minimize
267 |
Zoom
268 |
Move window to left screen side
269 |
Move window to right screen side
270 |
Go to window
271 |
272 |
Show previous Tab
273 |
Show next Tab
274 |
Move Tab to a New Window
275 |
Merge All Windows
276 |
277 |
Move everything to front
278 |
281 |
Search
282 |
Get macOS Help
283 |
288 |
on
289 |
Turn Bluetooth Off
290 |
291 |
Devices
292 |
300 |
308 |
315 |
316 |
Open Bluetooth Preferences...
317 |
321 |
Battery level:
322 |
Power source:
323 |
324 |
Apps Using Significant Energy
325 |
326 |
327 |
328 |
Show percentage
329 |
Open Battery Preferences...
330 |
334 |
335 |
Open Calendar...
336 |
337 |
Show date
338 |
Show seconds
339 |
340 |
Open Date & Time Preferences...
341 |
421 |
422 |
424 |
425 |
430 |
431 |
432 |
436 |
437 |
438 |
439 |
457 |
458 |
Hey Kathleen, how are you going?
459 | 😊 Great, thank you! I'm taking
460 | some pictures of Mr. Bites right now 😍 How is Mr.
461 | Bites? Mr. Bites misses you! OMG He's so cute! 😍
464 |
465 |
466 |
475 |
476 |
477 |
478 |
480 |
481 |
System Preferences
482 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
531 |
532 |
533 |
535 |
536 |
📁Documents
537 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
580 |
581 |
583 |
584 |
589 |
590 |
591 |
595 |
596 |
597 |
598 |
Sample text
599 |
600 |
601 |
602 |
604 | Youtube
605 |
607 | Netflix
608 |
610 | Drive
611 |
613 | Github
614 |
615 |
616 |
617 |
618 |
619 |
621 |
622 |
Terminal
623 |
628 |
629 |
630 |
631 |
632 |
633 |
635 |
636 |
637 |
638 |
639 |
642 |
643 |
644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | // CONTINUUM UI
2 |
3 | $(function() {
4 | sWindowUI();
5 | AppFilesUpdateCurrentItem();
6 | // createWindow(data,content,width,height,tmp,bD)
7 | $(".enableTestPanel").mousedown(function() {
8 | $(".sPanelTest").toggleClass("disabled");
9 | });
10 | $(".testCreateW").click(function() {
11 | createWindow(
12 | "testImage",
13 | "Hi this is a test (also in dev, sorry 😔)",
14 | 200,
15 | 80,
16 | true,
17 | true
18 | );
19 | });
20 | $(".testCreateWi").click(function() {
21 | createWindow(
22 | "test",
23 | "
",
24 | 200,
25 | 80,
26 | true,
27 | true
28 | );
29 | });
30 | $(".messages").animate({ scrollTop: $(".messages").prop("scrollHeight") }, 0);
31 |
32 | // Window size
33 |
34 | var zIndex = 1,
35 | fullHeight = $(window).height(),
36 | fullWidth = $(window).width();
37 |
38 | $(window).resize(function() {
39 | fullWidth = $(window).width();
40 | fullHeight = $(window).height();
41 |
42 | $(".window").draggable({
43 | containment: [
44 | -1 * $(".desktop").width(),
45 | 22,
46 | $(".desktop").width(),
47 | $(".desktop").height()
48 | ]
49 | });
50 | });
51 |
52 | // === Settings ===
53 | var sAnimateAppsIconOnOpen = $(".sAnimateAppsIconOnOpen").is(":checked");
54 | if (sAnimateAppsIconOnOpen) {
55 | $(".taskbar").addClass("animateOnOpen");
56 | } else {
57 | $(".taskbar").removeClass("animateOnOpen");
58 | }
59 | $(".canCheck").click(function() {
60 | // Make checking bidirectional between canCheck and checkable
61 |
62 | if (
63 | $(this)
64 | .find("input")
65 | .is(":checked")
66 | ) {
67 | $(
68 | ".checkable[data-trigger='" +
69 | $(this)
70 | .find("input")
71 | .attr("class") +
72 | "']"
73 | ).attr("data-checked", "true");
74 | $(
75 | "[" +
76 | $(this)
77 | .find("input")
78 | .attr("class") +
79 | "]"
80 | ).attr($(this)
81 | .find("input")
82 | .attr("class"), "true");
83 | } else {
84 | $(
85 | ".checkable[data-trigger='" +
86 | $(this)
87 | .find("input")
88 | .attr("class") +
89 | "']"
90 | ).attr("data-checked", "false");
91 | $(
92 | "[" +
93 | $(this)
94 | .find("input")
95 | .attr("class") +
96 | "]"
97 | ).attr($(this)
98 | .find("input")
99 | .attr("class"), "false");
100 | }
101 |
102 | // Animations
103 |
104 | var sAnimateAppsIconOnOpen = $(".sAnimateAppsIconOnOpen").is(":checked");
105 | if (sAnimateAppsIconOnOpen) {
106 | $(".taskbar").addClass("animateOnOpen");
107 | } else {
108 | $(".taskbar").removeClass("animateOnOpen");
109 | }
110 | });
111 | $(".canCheck .status").click(function() {
112 | $(this).toggleClass("checked");
113 | if ($(this).hasClass("sEnergySaver")) {
114 | if ($(this).hasClass("sEnergySaver") & $(this).hasClass("checked")) {
115 | $(".powerIcon")
116 | .parent()
117 | .addClass("eco");
118 | } else {
119 | $(".powerIcon")
120 | .parent()
121 | .removeClass("eco");
122 | }
123 | }
124 | });
125 |
126 | // === Taskbar ===
127 |
128 | function appMenuToggle() {
129 | sActionbarBlur();
130 | $(".appMenu").toggleClass("open");
131 | if (!$(".appMenu").hasClass("open")) {
132 | setTimeout(function() {
133 | $(".appMenuSearch").val("");
134 | $(".app").removeClass("noMatch");
135 | $(".sep").removeClass("noMatch");
136 | }, 100);
137 | } else {
138 | $(".appMenuSearch").focus();
139 | $(".sPanel").removeClass("active");
140 | }
141 | }
142 | function appMenuClose() {
143 | $(".appMenu").removeClass("open");
144 | setTimeout(function() {
145 | $(".appMenuSearch").val("");
146 | $(".app").removeClass("noMatch");
147 | $(".sep").removeClass("noMatch");
148 | //$('.appMenuAppList').scrollTo(0,0);
149 | }, 100);
150 | }
151 |
152 | $("[data-trigger]").click(function() {
153 | var dataTrigger = $(this).data("trigger");
154 | switch (dataTrigger) {
155 | case "sAppsMenu":
156 | // Opens App Menu
157 | appMenuToggle();
158 | break;
159 | case "sPowerShowPercentage":
160 | break;
161 | default:
162 | // do nothing
163 | break;
164 | }
165 | });
166 | $(".closeAppsMenu").mousedown(function() {
167 | appMenuClose();
168 | });
169 | $(document).keydown(function(e) {
170 | if (e.keyCode === 27 && !$(".lockScreen").hasClass("locked")) {
171 | // 27 == ESC
172 | appMenuToggle();
173 | }
174 | });
175 | function sActionbarTriggered() {
176 | return $(".actionbar .leftActions .item").hasClass("active");
177 | }
178 | function sActionbarItemTrigger(item) {
179 | var trigger = item.attr("data-trigger"),
180 | sActionbarActiveL = 0,
181 | sActionbarActiveW = 0,
182 | sPanelW = 0,
183 | sDisplayW = 0;
184 | if (item.hasClass("active")) {
185 | item.removeClass("active");
186 | $("." + trigger).removeClass("active");
187 | } else {
188 | $(
189 | ".actionbar .rightActions .item, .actionbar .leftActions .item"
190 | ).removeClass("active");
191 | $(".sPanel").removeClass("active");
192 | item.addClass("active");
193 | $("." + trigger).addClass("active");
194 | if ($("." + trigger).find(".input").length !== 0) {
195 | $(".sPanel.active .input input")
196 | .val("")
197 | .focus();
198 | } else {
199 | $(".sPanel .input input").blur();
200 | }
201 | }
202 | sActionbarActiveL = item.offset().left; //Math.floor(item.offset().left)
203 | sActionbarActiveW = item.innerWidth(); //Math.floor(item.innerWidth())
204 | sPanelW = $(".sPanel.active").innerWidth(); //Math.floor($(".sPanel.active").innerWidth())
205 | sDisplayW = $(".desktop").width(); //Math.floor($(".desktop").width())
206 |
207 | $(".sPanel.sActionbarPanel").css({ left: 0 });
208 | if (sActionbarActiveL + sPanelW + 40 < sDisplayW) {
209 | $(".sPanel.sActionbarPanel").css({ left: sActionbarActiveL });
210 | } else {
211 | $(".sPanel.sActionbarPanel").css({
212 | left: sActionbarActiveL + sActionbarActiveW - sPanelW
213 | });
214 | }
215 | sActionbarActiveL = 0;
216 | sActionbarActiveW = 0;
217 | sPanelW = 0;
218 | sDisplayW = 0;
219 | }
220 |
221 | $(".actionbar .rightActions .item, .actionbar .leftActions .item").mousedown(
222 | function() {
223 | sActionbarItemTrigger($(this));
224 | }
225 | );
226 |
227 | $(".actionbar .leftActions .item").mouseover(function(e) {
228 | if (
229 | sActionbarTriggered() &&
230 | !$(".actionbar .leftActions .item.active").is($(e.target))
231 | ) {
232 | sActionbarItemTrigger($(this));
233 | }
234 | });
235 | function sActionbarBlur() {
236 | $(
237 | ".sPanel, .actionbar .rightActions .item, .actionbar .leftActions .item"
238 | ).removeClass("active");
239 | }
240 | $(".sPanel .clickable, .sPanel .sPanelAux .clickable").click(function() {
241 | sActionbarBlur();
242 | });
243 | $(".sPanel .menu").mouseenter(function() {
244 | $(".sPanelAux")
245 | .html(
246 | $(this)
247 | .children(".submenu")
248 | .children()
249 | .clone()
250 | )
251 | .css({
252 | top: $(this).offset().top - 10,
253 | left: $(this).offset().left + $(this).innerWidth() + 22
254 | })
255 | .addClass("active");
256 | });
257 |
258 | $(".sPanel .menu").mouseleave(function() {
259 | if (!$(".sPanelAux").is(":hover")) {
260 | $(".sPanelAux")
261 | .removeClass("active")
262 | .html();
263 | }
264 | });
265 |
266 | $(".sPanel .checkable").click(function() {
267 | $("input." + $(this).data("trigger")).click();
268 | });
269 |
270 | $("[data-search]").on("keyup", function() {
271 | var searchVal = $(this).val();
272 | var filterItems = $("[data-filter-item], .sep");
273 |
274 | if (searchVal != "") {
275 | filterItems.addClass("noMatch");
276 | $(
277 | '[data-filter-item][data-filters*="' + searchVal.toLowerCase() + '"]'
278 | ).removeClass("noMatch");
279 | } else {
280 | filterItems.removeClass("noMatch");
281 | }
282 | });
283 |
284 | $(".desktop").mousedown(function(e) {
285 | appMenuClose();
286 | sActionbarBlur();
287 | if ($(".desktop").has(e.target).length === 0) {
288 | $(".window").removeClass("window--active");
289 | }
290 | });
291 |
292 | // User logout
293 | function LockScreenCheckPass() {
294 | let password = $(".systemLockInput").val();
295 | $(".lockScreenLogIn").addClass("wait");
296 | $(".systemLockInput").blur();
297 | if (password === "123") {
298 | setTimeout(function() {
299 | $(".lockScreen").removeClass("locked");
300 | $(".lockScreenLogIn").removeClass("wait");
301 | }, 200);
302 | } else {
303 | setTimeout(function() {
304 | $(".lockScreenLogIn")
305 | .addClass("wrong")
306 | .removeClass("wait");
307 | $(".systemLockInput").focus();
308 | }, 2000);
309 | }
310 | }
311 | $('[data-trigger="sActionLogout"]').click(function() {
312 | $(".systemLockInput").val("");
313 | $(".lockScreenLogIn").removeClass("wait");
314 | $(".login").addClass("empty");
315 | setTimeout(function() {
316 | appMenuClose();
317 | $(".systemLockInput").focus();
318 | }, 200);
319 | $(".lockScreen").addClass("locked");
320 | });
321 | $(".login").click(function() {
322 | $(".lockScreenLogIn").removeClass("wrong");
323 | LockScreenCheckPass();
324 | });
325 | $(".systemLockInput").keyup(function(e) {
326 | if (e.keyCode === 13 || e.which == 13) {
327 | LockScreenCheckPass();
328 | } else {
329 | $(".lockScreenLogIn").removeClass("wrong");
330 | if (!($(".systemLockInput").val() == "")) {
331 | $(".login").removeClass("empty");
332 | } else {
333 | $(".login").addClass("empty");
334 | }
335 | }
336 | });
337 |
338 | // User inactivity procedure
339 | var idleTime = 0;
340 | var idleInterval = setInterval(timerIncrement, 60000);
341 | $('[data-tigger="sActionSleep"]').click(function() {
342 | sSleep();
343 | });
344 | function sSleep() {
345 | $("body").addClass("sleep");
346 | }
347 | function sWakeUp() {
348 | $("body").removeClass("sleep");
349 | }
350 | $(this).mousemove(function(e) {
351 | idleTime = 0;
352 | sWakeUp();
353 | });
354 | $(this).keypress(function(e) {
355 | idleTime = 0;
356 | sWakeUp();
357 | });
358 | function timerIncrement() {
359 | idleTime = idleTime + 1;
360 | if (idleTime > 59) {
361 | $(".logout").click();
362 | }
363 | if (idleTime > 60) {
364 | sSleep();
365 | }
366 | if (idleTime > 0 && $(".lockScreen").hasClass("locked")) {
367 | sSleep();
368 | }
369 | }
370 |
371 | // === Notifications system ===
372 |
373 | function sNotificationDiscard(n) {
374 | n.addClass("close");
375 | setTimeout(function() {
376 | n.remove();
377 | sNotificationFlag();
378 | }, 300);
379 | }
380 | function sNotificationFlag() {
381 | if (!$(".sPanelNotifications .item").length) {
382 | $(".sActionbarNotifications").removeClass("hasNotifications");
383 | $('[sSwitchId="notifications"]').addClass("empty");
384 | } else {
385 | $('[sSwitchId="notifications"]').removeClass("empty");
386 | $(".sActionbarNotifications").addClass("hasNotifications");
387 | }
388 | }
389 | $(".sPanelNotifications .item").draggable({
390 | axis: "x",
391 | scroll: false,
392 | containment: [fullWidth - 350, 0, fullWidth, 0],
393 | start: function() {
394 | $(this).css({ transition: "none" });
395 | },
396 | drag: function() {
397 | let opacity = (360 - $(this).position().left) / 360;
398 | $(this).css({ opacity: opacity });
399 | },
400 | stop: function() {
401 | let left = $(this).position().left;
402 | if (left > 80) {
403 | sNotificationDiscard($(this));
404 | } else {
405 | $(this).css({
406 | left: 0,
407 | transition: "all .15s cubic-bezier(.63,.92,.68,.98)",
408 | opacity: 1
409 | });
410 | }
411 | }
412 | });
413 |
414 | $("[sSwitch] .option").click(function() {
415 | var sSwitchShow = $(this).attr("sSwitchShow");
416 | $(this)
417 | .parent()
418 | .parent()
419 | .parent()
420 | .children("[sSwitchId]")
421 | .attr("sSwitchVisibility", "disabled");
422 | $(this)
423 | .parent()
424 | .children(".option")
425 | .removeClass("active");
426 | $(this)
427 | .parent()
428 | .parent()
429 | .parent()
430 | .children("[sSwitchId='" + sSwitchShow + "']")
431 | .attr("sSwitchVisibility", "enabled");
432 | $(this).addClass("active");
433 | });
434 |
435 | // Notification widget
436 |
437 | $("#nWtime").mousedown(function(e) {
438 | let w = e.pageX - $("#nWtime").offset().left;
439 | $("#nWtimeH").css({ width: w });
440 | });
441 | $("#nWtimeH").resizable({
442 | handles: "e",
443 | minWidth: 7
444 | });
445 |
446 | // === Right Click ===
447 | /*$(document).bind("contextmenu",function(event){
448 | event.preventDefault();
449 | });*/
450 | $(document).bind("contextmenu", function(event) {
451 | event.preventDefault();
452 | let target = $(event.target);
453 | let cm = $(".context"); // Context menu
454 | function show() {
455 | $(".context")
456 | .fadeIn(50)
457 | .css({ top: event.pageY - 5, left: event.pageX + 2 });
458 | }
459 | if (!target.closest(".window").hasClass("nocm")) {
460 | show();
461 | }
462 |
463 | //$(".context .background").css({top: y, left: x });
464 | let cmSep = '
',
465 | cmFilesys =
466 | 'Copy
Cut
Share
Delete
',
467 | cmFilesysGetInfo = 'Get Info
',
468 | cmFilesysInfo =
469 | '
Type:' +
474 | target.attr("data-type") +
475 | '
Name:' +
476 | target.attr("data-name") +
477 | '
Created on:' +
478 | target.attr("data-date") +
479 | '
Disk usage:' +
480 | target.attr("data-bytes") +
481 | ' bytes
Close
',
482 | cmFilesysDeletePrompt =
483 | '
Are you sure that you want to delete "' +
488 | target.attr("data-name") +
489 | '"?
Delete
',
490 | cmMessageCard =
491 | 'Call
Videochat
Mute
Block
',
492 | cmNotificationItem =
493 | 'Configure app banners
Mute app
Discard
',
494 | cmNotificationWidget =
495 | 'Configure widget
Close app
',
496 | cmNotDefined = 'Refresh
';
497 | if (target.hasClass("folder") || target.hasClass("file")) {
498 | AppFilesDeselect();
499 | target.addClass("selected");
500 | cm.html(cmFilesysGetInfo + cmSep + cmFilesys);
501 | } else if (
502 | target.hasClass("folder selected") ||
503 | target.hasClass("file selected")
504 | ) {
505 | cm.html(cmFilesysGetInfo + cmSep + cmFilesys);
506 | } else if (target.hasClass("card")) {
507 | cm.html(cmMessageCard);
508 | show();
509 | } else {
510 | /*else if (target.hasClass("notificationItem")) {
511 | cm.html(cmNotificationItem);
512 | }
513 | else if (target.hasClass("notificationWidget")) {
514 | cm.html(cmNotificationWidget);
515 | }*/
516 | cm.html(cmNotDefined);
517 | }
518 | cm.mousedown(function(event) {
519 | let target = $(event.target);
520 | if (target.hasClass("item")) {
521 | if (target.hasClass("sFilesysGetInfo")) {
522 | cm.html(cmFilesysInfo);
523 | }
524 | if (target.hasClass("sFilesysDelete")) {
525 | cm.html(cmFilesysDeletePrompt);
526 | }
527 | if (target.hasClass("sFilesysDeleteYes")) {
528 | let ObjectSelected = "";
529 | ObjectSelected = $(".filesys").find(".file.selected, .folder.selected");
530 | //ObjectSelected.addClass("itworks");
531 | ObjectSelected.remove();
532 | }
533 | }
534 | });
535 | // Setting position when knowing context dimensions
536 | let y = Math.floor($(".context").position().top * -1);
537 | let x = Math.floor($(".context").position().left * -1);
538 | let h = Math.floor($(".context").height());
539 | let w = Math.floor($(".context").width());
540 | let dH = Math.floor($(".desktop").height());
541 | let dW = Math.floor($(".desktop").width());
542 | if (y * -1 + h + 50 > dH) {
543 | h = h + 10;
544 | cm.css({ top: event.pageY - h + 6 });
545 | }
546 | if (x * -1 + w + 50 > dW) {
547 | cm.css({ left: event.pageX - w });
548 | }
549 | });
550 |
551 | $(document).mousedown(function() {
552 | isHovered = $(".context").is(":hover");
553 | if (isHovered == true) {
554 | $(".context .item").mousedown(function() {
555 | $(".context").fadeOut(50);
556 | });
557 | } else {
558 | $(".context").fadeOut(50);
559 | }
560 | });
561 |
562 | // === Window & Taskbar actions ===
563 |
564 | // Set taskbar app item to open on each app
565 | /*$(function() {
566 | $('.window:visible').each(function() {
567 | var appName = $(this).data('window');
568 |
569 | $('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--open');
570 | });
571 | });*/
572 |
573 | //activates the first window that shows on screen
574 | /*$(function() {
575 | var initialActive = $('.window').first();
576 | var appName = $(initialActive).data('window');
577 |
578 | $(initialActive).addClass('window--active').css({'z-index' : zIndex++});
579 | $('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--active');
580 | });*/
581 |
582 | // Function that creates a new window with the parameters:
583 | // data -> Name on the window
584 | // content -> The actual content that you want to show up on the window
585 | // width -> Sets the window's width
586 | // height -> Sets the window's height
587 | // tmp -> "True" creates a temporal window, not static (When you click 'close' it is destroyed) / "False" creates a static window [r -> internally used to add 'tmp' class to the window]
588 | // bD -> "True" makes the window background blur what's behind (cool right?)
589 |
590 | function createWindow(data, content, width, height, tmp, bD) {
591 | let c = content,
592 | b,
593 | d = data,
594 | r = "";
595 | if (tmp) {
596 | r = "tmp";
597 | b = '" + input.val() + "
"
939 | );
940 | input.val("");
941 | setTimeout(function() {
942 | $(".messages").animate(
943 | { scrollTop: $(".messages").prop("scrollHeight") },
944 | 250
945 | );
946 | }, 100);
947 | }
948 | });
949 | $(".audio .cancel").mousedown(function() {
950 | $(".audio")
951 | .removeClass("recorded")
952 | .removeClass("recording");
953 | $(".audioMargin").removeClass("recording");
954 | // Discard audio
955 | });
956 | $(".audio .trigger").mousedown(function() {
957 | let aD, aDs, aDm;
958 | if ($(".audio").hasClass("recorded")) {
959 | $(".audio").removeClass("recorded");
960 | $(".audioMargin").toggleClass("recording");
961 | // Send audio
962 | $(".messages").append(
963 | ""
966 | );
967 | setTimeout(function() {
968 | $(".messages").animate(
969 | { scrollTop: $(".messages").prop("scrollHeight") },
970 | 250
971 | );
972 | }, 100);
973 | } else {
974 | if ($(".audio").hasClass("recording")) {
975 | $(".audio").addClass("recorded");
976 | $(".audio").removeClass("recording");
977 | // Audio is recorded, waiting for accept
978 | } else {
979 | $(".audio")
980 | .addClass("recording")
981 | .addClass("minLen");
982 | $(".audioMargin").toggleClass("recording");
983 | // Audio is being recorded
984 | aD = 0;
985 | function printaD() {
986 | if (aD == 0) {
987 | $(".audio .audioDuration").html("00:00");
988 | } else {
989 | $(".audio .audioDuration").html(aDm + ":" + aDs);
990 | }
991 | setTimeout(function() {
992 | aD++;
993 | aDm = Math.floor(aD / 60);
994 | aDs = aD % 60;
995 | if (aDm < 10) {
996 | aDm = "0" + aDm;
997 | }
998 | if (aDs < 10) {
999 | aDs = "0" + aDs;
1000 | }
1001 | //$(".audio .audioDuration").html(aDm+":"+aDs);
1002 | if ($(".audio").hasClass("recording")) {
1003 | printaD();
1004 | }
1005 | if (aD >= 1) {
1006 | $(".audio").removeClass("minLen");
1007 | }
1008 | }, 1000);
1009 | }
1010 | printaD();
1011 | }
1012 | }
1013 | });
1014 |
1015 | // --------------------
1016 | // SAFARI
1017 | // --------------------
1018 |
1019 | $(".tabs").mousedown(function(e) {
1020 | var target = $(e.target).closest("li");
1021 | if (target.hasClass("sAppSafariNewTab")) {
1022 | // Creates new tab and sets focus
1023 | target
1024 | .parent()
1025 | .children()
1026 | .removeClass("active");
1027 | target.before(
1028 | "" + AppExplorerData[c][i].n + " ";
1249 | //}
1250 | //AppFilesContainer.html(content);
1251 |
1252 | function AppFilesLoad(c) {
1253 | let content = "",
1254 | fileType,
1255 | fileContent;
1256 | if (AppExplorerData[c].length < 1) {
1257 | content += '
';
1258 | } else {
1259 | for (i = 0; i < AppExplorerData[c].length; i++) {
1260 | if (AppExplorerData[c][i].t == "a") {
1261 | fileType = AppExplorerData[c][i]["c"][0].t;
1262 | if (fileType == "img") {
1263 | fileContent =
1264 | 'style="background-image:url(' + AppExplorerData[c][i].c[0].out + ');"';
1265 | } else {
1266 | fileContent = "";
1267 | }
1268 | content +=
1269 | '";
1280 | } else {
1281 | content +=
1282 | '';
1289 | }
1290 | //content += AppExplorerData[c][i].n;
1291 | //
1292 | }
1293 | }
1294 | AppFilesContainer.html(content);
1295 | AppFilesContainer.click();
1296 | }
1297 |
1298 | // File window actions
1299 | AppFilesWindowVisualization.click(function() {
1300 | if (!$(this).hasClass("selected")) {
1301 | AppFilesWindowVisualization.removeClass("selected");
1302 | $(this).addClass("selected");
1303 | let format = $(this).data("format");
1304 | $(".filesys").attr("data-visualization", format);
1305 | }
1306 | });
1307 |
1308 | // Select/Deselect file/folder
1309 | function AppFilesDeselect() {
1310 | var AppFilesObject = "";
1311 | AppFilesObject = $(
1312 | ".window--files .window__main.filesys .folder, .window--files .window__main.filesys .file"
1313 | );
1314 | AppFilesObject.removeClass("selected");
1315 | }
1316 | function AppFilesSelect(object) {
1317 | // #anchor.OSDrivenBehavior (Ctrl on Windows || Cmd on MacOS)
1318 | if (
1319 | (OSDrivenBehavior === "MacOS" &&
1320 | (KeyDrivenBehavior === 91 || KeyDrivenBehavior === 93)) ||
1321 | (OSDrivenBehavior === "Windows" && KeyDrivenBehavior === 17)
1322 | ) {
1323 | object.addClass("selected");
1324 | } else {
1325 | AppFilesDeselect();
1326 | object.addClass("selected");
1327 | }
1328 | }
1329 | function AppFilesSelectObject(op, object) {
1330 | if (op == "next") {
1331 | object.next().addClass("objectSeeked");
1332 | }
1333 | if (op == "prev") {
1334 | object.prev().addClass("objectSeeked");
1335 | }
1336 | if (op == "first") {
1337 | AppFilesObject.first().addClass("objectSeeked");
1338 | }
1339 | if (op == "last") {
1340 | AppFilesObject.last().addClass("objectSeeked");
1341 | }
1342 | let objectSeeked = $(
1343 | ".filesys .file.objectSeeked, .filesys .folder.objectSeeked"
1344 | );
1345 | if (objectSeeked.length > 0) {
1346 | AppFilesDeselect();
1347 | }
1348 | AppFilesSelect(objectSeeked);
1349 | objectSeeked.removeClass("objectSeeked");
1350 | }
1351 | AppFilesContainer.click(function(event) {
1352 | AppFilesObject = "";
1353 | AppFilesObject = $(
1354 | ".window--files .window__main.filesys .folder, .window--files .window__main.filesys .file"
1355 | );
1356 | let target = $(event.target);
1357 | if (target.is(AppFilesObject)) {
1358 | AppFilesSelect(target);
1359 | } else {
1360 | AppFilesDeselect();
1361 | }
1362 | });
1363 | // Arrow navigagion & Space QuickView
1364 | $(document).keydown(function(e) {
1365 | let object, objectContent, finderFocus;
1366 | object = $(".filesys").find(".file.selected, .folder.selected");
1367 | objectContent = $(".filesys").find(".file.selected .content");
1368 | finderFocus = $(".window--finder").hasClass("window--active");
1369 | if (e.keyCode === 39 && finderFocus) {
1370 | // 39 == RIGHT ARROW
1371 | if (object.next().length > 0) {
1372 | AppFilesSelectObject("next", object);
1373 | } else {
1374 | // ONLY IF SELECTION LOOP IS ENABLED
1375 | AppFilesSelectObject("first");
1376 | }
1377 | } else if (e.keyCode === 37 && finderFocus) {
1378 | // 37 == LEFT ARROW
1379 | if (object.prev().length > 0) {
1380 | AppFilesSelectObject("prev", object);
1381 | } else {
1382 | // ONLY IF SELECTION LOOP IS ENABLED
1383 | AppFilesSelectObject("last");
1384 | }
1385 | }
1386 | });
1387 |
1388 | /* CONSOLE */
1389 |
1390 | // Define system level
1391 |
1392 | var syslvl = 0,
1393 | syslvlNames = ["Root", "Admin", "User", "Guest"];
1394 |
1395 | // Focus
1396 | $(".console-prompt-box").click(function() {
1397 | $(".console-input").focus();
1398 | });
1399 |
1400 | // Output to Console
1401 | function output(print) {
1402 | var cmd = $(".console-input").val();
1403 | if (cmd == "") {
1404 | cmd = "null
";
1405 | }
1406 | $("#outputs").append("" + cmd + " ");
1407 |
1408 | $.each(print, function(index, value) {
1409 | cmd = " >";
1410 | if (value == "") {
1411 | value = " ";
1412 | cmd = " ";
1413 | }
1414 | $("#outputs").append("" + value + " ");
1415 | });
1416 |
1417 | $(".console-input").val("");
1418 | $(".console-input").focus();
1419 | }
1420 |
1421 | function sysIn(e) {
1422 | return e ? ($(".console-input").val().split(" ").shift()) : ($(".console-input").val().split(" ").slice(1,$(".console-input").val().split(" ").length));
1423 | }
1424 |
1425 | // Break Value
1426 | var newLine = "System Level Undefined
"]);
1468 | } else {
1469 | syslvl = a;
1470 | output([syslvl + " - " + syslvlNames[syslvl]]);
1471 | }
1472 | } else {
1473 | output([syslvl + " - " + syslvlNames[syslvl]]);
1474 | }
1475 | },
1476 |
1477 | clear: function() {
1478 | output([""]);
1479 | $("#outputs").html("");
1480 | },
1481 |
1482 | hello: function() {
1483 | output(["Hello there!"]);
1484 | },
1485 |
1486 | hist: function(a) {
1487 | if (a == "-clear") {
1488 | prevCmd = [];
1489 | output(["History successfully cleared"]);
1490 | } else {
1491 | output([prevCmd]);
1492 | }
1493 | },
1494 |
1495 | help: function(a) {
1496 | if (a == "") {
1497 | var print = ["Type 'help name' to find out more about the function 'name'.","Type 'help' to see this list."];
1498 | print = $.merge(print, Object.values(helpInfo));
1499 | output(print);
1500 | } else {
1501 | if (Object.keys(cmds).indexOf(sysIn().shift()) !== -1) {
1502 | output(["'"+sysIn().shift()+"' is a command"]);
1503 | } else {
1504 | output(["'"+sysIn().shift()+"' is not a command
"]);
1505 | }
1506 | }
1507 | }
1508 | };
1509 |
1510 | var prevCmd = [], prevCmdPointer = -1;
1511 |
1512 | // Get User Command
1513 | $(".console-input").keydown(function(event) {
1514 |
1515 | function prevCmdAdd() {
1516 | prevCmd.unshift($(".console-input").val());
1517 | }
1518 |
1519 | if (
1520 | (event.key === "Enter" || event.code == "Enter") &&
1521 | !(
1522 | $(this)
1523 | .val()
1524 | .replace(/ /g, "").length == 0
1525 | )
1526 | ) {
1527 | var str = $(this).val();
1528 | var data = str.split(" ");
1529 | data.shift();
1530 | data = data.join(" ");
1531 | var cmd = str.split(" ")[0];
1532 |
1533 | // Adds actual command to previous command list
1534 | prevCmdAdd();
1535 |
1536 | if (typeof cmds[cmd] == "function") {
1537 | if (cmds[cmd].length > 0) {
1538 | cmds[cmd](data);
1539 | } else {
1540 | cmds[cmd]();
1541 | }
1542 | } else {
1543 | output(["Command not found: '" + cmd + "'
","Type 'help' for list of commands"]);
1544 | }
1545 |
1546 | prevCmdPointer = -1;
1547 | //$(this).val("");
1548 |
1549 | }
1550 | else if (event.key === "ArrowUp" || event.code == "ArrowUp" || event.keyCode === 38) {
1551 | event.preventDefault();
1552 | if (prevCmdPointer < prevCmd.length) {
1553 | prevCmdPointer++;
1554 | $(".console-input").val(prevCmd[prevCmdPointer]);
1555 | }
1556 | }
1557 | else if (event.key === "ArrowDown" || event.code == "ArrowDown" || event.keyCode === 40) {
1558 | event.preventDefault();
1559 | if (prevCmdPointer >= 0) {
1560 | prevCmdPointer--;
1561 | $(".console-input").val(prevCmd[prevCmdPointer]);
1562 | }
1563 | }
1564 | });
1565 |
1566 | /* CLOCK & DATE*/
1567 |
1568 | var clockVar = {};
1569 | renderTime();
1570 | function renderTime() {
1571 | currentTime = new Date();
1572 | clockVar.y = currentTime.getFullYear();
1573 | clockVar.mth = currentTime.getMonth();
1574 | clockVar.dt = currentTime.getDate();
1575 | clockVar.d = currentTime.getDay();
1576 | clockVar.h = currentTime.getHours();
1577 | clockVar.m = currentTime.getMinutes();
1578 | clockVar.s = currentTime.getSeconds();
1579 | setTimeout("renderTime()", 100); //1000
1580 | if (clockVar.h < 10) {
1581 | clockVar.h = "0" + clockVar.h;
1582 | }
1583 | if (clockVar.m < 10) {
1584 | clockVar.m = "0" + clockVar.m;
1585 | }
1586 | if (clockVar.s < 10) {
1587 | clockVar.s = "0" + clockVar.s;
1588 | }
1589 | var months = [
1590 | "January",
1591 | "February",
1592 | "March",
1593 | "April",
1594 | "May",
1595 | "June",
1596 | "July",
1597 | "August",
1598 | "September",
1599 | "October",
1600 | "November",
1601 | "December"
1602 | ];
1603 | var monthsMin = [
1604 | "jan",
1605 | "feb",
1606 | "mar",
1607 | "apr",
1608 | "may",
1609 | "jun",
1610 | "jul",
1611 | "aug",
1612 | "sep",
1613 | "oct",
1614 | "nov",
1615 | "dec"
1616 | ];
1617 | var days = [
1618 | "Sunday",
1619 | "Monday",
1620 | "Tuesday",
1621 | "Wednesday",
1622 | "Thursday",
1623 | "Friday",
1624 | "Saturday"
1625 | ];
1626 | var daysMin = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
1627 |
1628 | //let sTimeShowDate = $('.sTimeShowDate').hasClass('checked'), sTimeShowSeconds = $('.sTimeShowSeconds').hasClass('checked');
1629 | let sTimeShowDate = $(".sTimeShowDate").is(":checked"),
1630 | sTimeShowSeconds = $(".sTimeShowSeconds").is(":checked"),
1631 | sDynamicWallpaper = $(".sDynamicWallpaper").is(":checked");
1632 |
1633 | var time = clockVar.h + ":" + clockVar.m;
1634 | if (sTimeShowDate) {
1635 | time =
1636 | daysMin[clockVar.d] +
1637 | " " +
1638 | clockVar.dt +
1639 | " " +
1640 | monthsMin[clockVar.mth] +
1641 | " " +
1642 | time;
1643 | }
1644 | if (sTimeShowSeconds) {
1645 | time = time + ":" + clockVar.s;
1646 | }
1647 | if (sDynamicWallpaper) {
1648 | if (clockVar.h < 7 || clockVar.h > 18) {
1649 | $("body").addClass("night");
1650 | } else {
1651 | $("body").removeClass("night");
1652 | }
1653 | }
1654 | if (!sDynamicWallpaper) {
1655 | $("body").addClass("night");
1656 | }
1657 | //$('.fullTime').html(clockVar.h + ":" + clockVar.m + ":" + clockVar.s);
1658 | //$('.date').html(daysMin[clockVar.d] + " " + clockVar.dt + ", " + months[clockVar.mth] + " of " + clockVar.y);
1659 | //$('.time').html(clockVar.h + ":" + clockVar.m);
1660 |
1661 | // Ordinal numbers function
1662 | function nth(n) {
1663 | return ["st", "nd", "rd"][((((n + 90) % 100) - 10) % 10) - 1] || "th";
1664 | }
1665 | // Clocks
1666 | $(".time").html(time);
1667 | $(".sActionbarTime").html(time);
1668 | $(".currentTime").html(clockVar.h + ":" + clockVar.m + ":" + clockVar.s);
1669 | $(".day").html(daysMin[clockVar.d]);
1670 | $(".dayNumber").html(clockVar.dt);
1671 | $(".month").html(months[clockVar.mth]);
1672 | $(".year").html(clockVar.y);
1673 | $(".sPanelNotifications .date .today").html(
1674 | days[clockVar.d] +
1675 | "," +
1680 | nth(clockVar.dt) +
1681 | "
"
1682 | );
1683 | $('[data-sGet="fullDate"]').html(
1684 | days[clockVar.d] +
1685 | ", " +
1686 | months[clockVar.mth] +
1687 | " " +
1688 | clockVar.dt +
1689 | ", " +
1690 | clockVar.y
1691 | );
1692 | }
1693 | $(document).ready(function() {
1694 | $(".calendar").datepicker({
1695 | inline: true,
1696 | firstDay: 1,
1697 | showOtherMonths: true,
1698 | dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
1699 | });
1700 |
1701 | /*function changeBackground(year, month, obj){
1702 | var months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
1703 |
1704 | months.forEach(function(value){
1705 | $('.calendar_img').removeClass(value);
1706 | });
1707 |
1708 | $('.calendar_img').addClass(months[month - 1]);
1709 | }*/
1710 |
1711 | /* var month = $('.ui-datepicker-month').text().toLowerCase();
1712 | $('.calendar_img').addClass(month);*/
1713 | });
1714 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /* BACKGROUND */
3 | .cmN {
4 | box-shadow: inset 0 0 0 2px red;
5 | }
6 |
7 | /*
8 | ::-webkit-scrollbar {
9 | min-width: 8px;
10 | width: 8px;
11 | max-width: 8px;
12 | min-height: 8px;
13 | height: 8px;
14 | max-height: 8px;
15 | background: none;
16 | }
17 | ::-webkit-scrollbar-thumb {
18 | background: rgba(255,255,255,.15);
19 | cursor: default;
20 | backface-visibility: hidden;
21 | border-radius: 20px;
22 | }
23 | ::-webkit-scrollbar-button {
24 | display: none;
25 | height: 0px;
26 | }
27 | */
28 | html {
29 | padding: 0;
30 | margin: 0;
31 | background: #000;
32 | }
33 |
34 | body {
35 | position: fixed;
36 | top: 0;
37 | left: 0;
38 | width: 100vw;
39 | height: 100vh;
40 | background: #000;
41 | padding: 0;
42 | margin: 0;
43 | overflow: hidden;
44 | font-family: "Roboto", "Ionicons", sans-serif !important;
45 | font-weight: 400;
46 | user-select: none;
47 | font-size: 16px;
48 | transition: filter 0.25s ease-in-out;
49 | }
50 | body.night [sysDesktopBackground] {
51 | background-image: url("https://github.com/aboredvaro/codepen_resources/blob/main/macOS/img/bg/abstract/macOS-Big-Sur-Vector-Wave-Dark-Wallpaper.jpg?raw=true");
52 | }
53 | body.night [sysDesktopBackgroundBlur] {
54 | background-image: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/bg/abstract/macOS-Big-Sur-Vector-Wave-Dark-Wallpaper-blur.jpg");
55 | }
56 | body.sleep {
57 | filter: brightness(0);
58 | pointer-events: none !important;
59 | cursor: none !important;
60 | transition: filter 0.25s ease-in-out;
61 | }
62 |
63 | *, *:before, *:after {
64 | box-sizing: border-box;
65 | outline: none;
66 | font-family: "Roboto", "Ionicons", sans-serif !important;
67 | }
68 |
69 | b {
70 | font-weight: 600;
71 | }
72 |
73 | ul, li {
74 | margin: 0;
75 | padding: 0;
76 | }
77 |
78 | input[type=text] {
79 | border: none;
80 | }
81 |
82 | html [type=button] {
83 | position: relative;
84 | -webkit-appearance: none;
85 | appearance: none;
86 | display: inline-block;
87 | width: auto;
88 | height: auto;
89 | padding: 4px 10px;
90 | background: rgba(255, 255, 255, 0.15);
91 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.2);
92 | border-radius: 4px;
93 | font-size: inherit;
94 | font-weight: inherit;
95 | font-family: inherit;
96 | color: inherit;
97 | border: none;
98 | }
99 | html [type=button]:active {
100 | background: #006AFF;
101 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.2);
102 | }
103 |
104 | input[type=checkbox] {
105 | position: relative;
106 | -webkit-appearance: none;
107 | appearance: none;
108 | display: inline-block;
109 | width: 14px;
110 | height: 14px;
111 | background: rgba(255, 255, 255, 0.15);
112 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.2);
113 | border-radius: 4px;
114 | transform: translateY(2px);
115 | }
116 | input[type=checkbox]:checked {
117 | background: rgba(255, 255, 255, 0.15);
118 | }
119 | input[type=checkbox]:checked:before {
120 | opacity: 0.75;
121 | }
122 | input[type=checkbox]:before {
123 | content: "";
124 | position: absolute;
125 | top: calc(50% - 6px);
126 | left: calc(50% - 2px);
127 | width: 5px;
128 | height: 9px;
129 | border: 2px solid #FFF;
130 | border-top: none;
131 | border-left: none;
132 | transform-origin: center center;
133 | transform: rotateZ(45deg);
134 | opacity: 0;
135 | }
136 |
137 | a {
138 | text-decoration: none;
139 | cursor: default;
140 | color: inherit;
141 | }
142 |
143 | i {
144 | font-style: normal;
145 | }
146 |
147 | input {
148 | font-family: "Questrial", sans-serif;
149 | }
150 |
151 | .video-js {
152 | position: relative;
153 | }
154 |
155 | .media {
156 | display: flex;
157 | }
158 |
159 | video {
160 | width: 100%;
161 | height: 100%;
162 | }
163 |
164 | .media__img,
165 | .media__body {
166 | flex: 0 1 auto;
167 | }
168 |
169 | .media__body {
170 | padding-left: 10px;
171 | }
172 |
173 | .desktop {
174 | position: absolute;
175 | top: 0;
176 | left: 0;
177 | right: 0;
178 | bottom: 34px;
179 | width: 100%;
180 | height: 100vh;
181 | user-select: none;
182 | transform: translate3d(0, 0, 0);
183 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/bg/abstract/macOS-Big-Sur-Vector-Wave-Wallpaper.jpg");
184 | background-size: 0px 0px;
185 | }
186 | .desktop:before {
187 | content: "";
188 | position: absolute;
189 | top: 0;
190 | left: 0;
191 | width: 100%;
192 | height: 100vh;
193 | background: inherit;
194 | background-position: center center;
195 | background-size: cover;
196 | }
197 |
198 | .window {
199 | -webkit-transform-style: preserve-3d;
200 | -moz-transform-style: preserve-3d;
201 | transform-style: preserve-3d;
202 | overflow: hidden;
203 | position: absolute;
204 | display: block;
205 | top: 0;
206 | left: 0;
207 | box-shadow: 0 40px 60px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.5);
208 | transition: all 0.1s, top 0.1s ease-in-out, left 0.1s ease-in-out, transform 0.1s ease-in-out, width 0.1s ease-in-out, height 0.1s ease-in-out, z-index 0ms, box-shadow 0ms;
209 | z-index: 0;
210 | -webkit-transform-origin: center center;
211 | -moz-transform-origin: center center;
212 | transform-origin: center center;
213 | -webkit-transform: none;
214 | -moz-transform: none;
215 | transform: none;
216 | border-radius: 10px;
217 | background: #1e1e1f;
218 | color: #FFF;
219 | min-width: 400px;
220 | min-height: 200px;
221 | overflow: hidden;
222 | z-index: 1;
223 | }
224 | .window:after {
225 | content: "";
226 | position: absolute;
227 | top: 0;
228 | left: 0;
229 | width: 100%;
230 | height: 100%;
231 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
232 | border-radius: 10px;
233 | z-index: 999999;
234 | pointer-events: none;
235 | }
236 | .window[handler=extended] .window__handler {
237 | height: 38px;
238 | }
239 | .window[handler=extended] .window__handler .window__title {
240 | top: 50%;
241 | transform: translateY(-50%);
242 | }
243 | .window[handler=extended] .window__handler .window__controls {
244 | top: 50%;
245 | transform: translateY(-50%) translateX(5px);
246 | }
247 | .window[handler=extended] .window__handler .window__actions {
248 | top: 50%;
249 | left: 70px;
250 | width: calc(100% - 70px);
251 | transform: translateY(-50%);
252 | }
253 | .window[handler=extended] .window__body {
254 | height: calc(100% - 38px);
255 | }
256 | .window[resizable=false] {
257 | transition: all 0.1s, top 0.1s ease-in-out, left 0.1s ease-in-out, transform 0.1s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0ms, box-shadow 0ms;
258 | }
259 | .window[resizable=false] .ui-resizable-handle {
260 | display: none;
261 | pointer-events: none;
262 | }
263 | .window[data-windowBackdrop=true] {
264 | background: none !important;
265 | }
266 | .window[data-windowBackdrop=true]:before {
267 | content: "";
268 | position: absolute;
269 | top: 0;
270 | left: 0;
271 | width: 100%;
272 | height: 100%;
273 | -webkit-backdrop-filter: blur(30px) saturate(1.5);
274 | backdrop-filter: blur(30px) saturate(1.5);
275 | background: #1e1e1f;
276 | border-radius: 10px;
277 | z-index: 0;
278 | }
279 | .window.tmp {
280 | max-width: 75vw;
281 | max-height: 75vh;
282 | transition: all 0s;
283 | }
284 | .window.tmp .window__body .window__main .img {
285 | width: 100%;
286 | height: calc(100% - 24px);
287 | background-size: contain !important;
288 | background-repeat: no-repeat;
289 | background-position: center center;
290 | }
291 | .window.window--active {
292 | box-shadow: 0 50px 80px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px black;
293 | }
294 | .window.window--active input[type=checkbox]:checked {
295 | background: #006AFF;
296 | }
297 | .window.window--active input[type=checkbox]:checked:before {
298 | opacity: 1;
299 | }
300 | .window.window--active .window__handler:before {
301 | background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
302 | }
303 | .window.window--active .window__handler .window__title {
304 | color: rgba(255, 255, 255, 0.65);
305 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
306 | }
307 | .window.window--active .window__handler .window__actions {
308 | opacity: 1;
309 | }
310 | .window.window--active .window__handler .window__controls .window__minimize {
311 | background: #f5c350;
312 | }
313 | .window.window--active .window__handler .window__controls .window__maximize {
314 | background: #65cd57;
315 | }
316 | .window.window--active .window__handler .window__controls .window__close {
317 | background: #FF5D5A;
318 | }
319 | .window.window--active .window__body .sidebar {
320 | pointer-events: all;
321 | }
322 | .window.window--active .window__body .sidebar .item, .window.window--active .window__body .sidebar .title {
323 | opacity: 1;
324 | }
325 | .window.window--active[data-windowBackdrop=true] {
326 | background: none !important;
327 | }
328 | .window.window--active[data-windowBackdrop=true]:before {
329 | background: rgba(30, 30, 31, 0.75);
330 | }
331 | .window.ui-draggable-dragging, .window.ui-resizable-resizing {
332 | transition: 0s;
333 | }
334 |
335 | .window--maximized {
336 | border-radius: 0px;
337 | width: 100vw !important;
338 | height: 100vh !important;
339 | transition: all 0.1s, z-index 0ms;
340 | }
341 | .window--maximized:after {
342 | border-radius: 0 !important;
343 | }
344 | .window--maximized .window__handler .window__controls .window__maximize::before {
345 | top: 50%;
346 | left: calc(50% - 4px);
347 | }
348 | .window--maximized .window__handler .window__controls .window__maximize::after {
349 | top: calc(50% - 4px);
350 | left: 50%;
351 | }
352 | .window--maximized .window__handler:before, .window--maximized .window__handler:after {
353 | border-radius: 0px !important;
354 | }
355 | .window--maximized[data-windowBackdrop=true]:before {
356 | border-radius: 0px !important;
357 | }
358 |
359 | .window--minimized {
360 | top: 100vh !important;
361 | transform: scale(0) !important;
362 | -webkit-transform-origin: center bottom !important;
363 | -moz-transform-origin: center bottom !important;
364 | transform-origin: center bottom !important;
365 | opacity: 0;
366 | pointer-events: none !important;
367 | transition: all 0.35s !important;
368 | }
369 |
370 | .window--closing {
371 | transition: 0s;
372 | }
373 |
374 | .window--closed {
375 | display: none;
376 | transition: 0s;
377 | }
378 |
379 | .ui-resizable-se {
380 | opacity: 0;
381 | }
382 |
383 | .window__handler {
384 | position: relative;
385 | overflow: hidden;
386 | top: 0;
387 | left: 0;
388 | right: 0;
389 | height: 24px;
390 | width: 100%;
391 | cursor: default;
392 | z-index: 9999;
393 | }
394 | .window__handler:before {
395 | content: "";
396 | position: absolute;
397 | top: 0;
398 | left: 0;
399 | width: 100%;
400 | height: 100%;
401 | background: rgba(255, 255, 255, 0.05);
402 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.05));
403 | box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
404 | z-index: 0;
405 | }
406 | .window__handler .window__title {
407 | position: absolute;
408 | top: 0;
409 | left: 25%;
410 | width: 50%;
411 | height: 24px;
412 | line-height: 24px;
413 | text-align: center;
414 | font-size: 14px;
415 | color: rgba(255, 255, 255, 0.25);
416 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0);
417 | white-space: nowrap;
418 | overflow: hidden;
419 | text-overflow: ellipsis;
420 | }
421 | .window__handler .window__controls {
422 | position: relative;
423 | top: 0;
424 | display: inline-block;
425 | height: 24px;
426 | left: 5px;
427 | z-index: 1;
428 | }
429 | .window__handler .window__controls:hover .window__minimize::before {
430 | background: rgba(0, 0, 0, 0.75);
431 | }
432 | .window__handler .window__controls:hover .window__close::before, .window__handler .window__controls:hover .window__close::after {
433 | background: rgba(0, 0, 0, 0.75);
434 | }
435 | .window__handler .window__controls:hover .window__maximize::before, .window__handler .window__controls:hover .window__maximize::after {
436 | border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
437 | }
438 | .window__handler .window__controls:hover .window__minimize {
439 | background: #f5c350;
440 | }
441 | .window__handler .window__controls:hover .window__maximize {
442 | background: #65cd57;
443 | }
444 | .window__handler .window__controls:hover .window__close {
445 | background: #FF5D5A;
446 | }
447 | .window__handler .window__controls > a {
448 | position: relative;
449 | display: inline-block;
450 | float: left;
451 | height: 12px;
452 | width: 12px;
453 | margin: 6px 4px;
454 | padding: 0;
455 | background: rgba(255, 255, 255, 0.1);
456 | border-radius: 100%;
457 | overflow: hidden;
458 | }
459 | .window__handler .window__controls > a:active {
460 | filter: brightness(0.5);
461 | }
462 | .window__handler .window__controls > a::before, .window__handler .window__controls > a::after {
463 | content: "";
464 | position: absolute;
465 | transition: 0.1s;
466 | }
467 | .window__handler .window__controls > a.window__minimize::before {
468 | width: calc(100% - 4px);
469 | height: 1px;
470 | top: 50%;
471 | left: 2px;
472 | }
473 | .window__handler .window__controls > a.window__maximize::before {
474 | width: 0;
475 | height: 0;
476 | top: calc(50% - 3px);
477 | left: calc(50% - 1px);
478 | border-style: solid;
479 | border-width: 0 4px 4px 0;
480 | border-color: transparent;
481 | }
482 | .window__handler .window__controls > a.window__maximize::after {
483 | width: 0;
484 | height: 0;
485 | top: calc(50% - 1px);
486 | left: calc(50% - 3px);
487 | border-style: solid;
488 | border-width: 0 4px 4px 0;
489 | border-color: transparent;
490 | transform-origin: center center;
491 | transform: rotateZ(180deg);
492 | }
493 | .window__handler .window__controls > a.window__close::before, .window__handler .window__controls > a.window__close::after {
494 | width: calc(100% - 4px);
495 | height: 1px;
496 | top: 50%;
497 | left: 2px;
498 | transform: rotateZ(45deg);
499 | }
500 | .window__handler .window__controls > a.window__close::after {
501 | transform: rotateZ(-45deg);
502 | }
503 | .window__handler .window__controls > a.disabled {
504 | background: rgba(255, 255, 255, 0.075) !important;
505 | pointer-events: none;
506 | }
507 | .window__handler .window__controls > a.disabled:before, .window__handler .window__controls > a.disabled:after {
508 | opacity: 0;
509 | }
510 | .window__handler .window__actions {
511 | position: absolute;
512 | bottom: 0;
513 | left: 0;
514 | height: 36px;
515 | width: 100%;
516 | padding: 0 6px;
517 | opacity: 0.5;
518 | }
519 | .window__handler .window__actions > a {
520 | position: relative;
521 | display: inline-block;
522 | float: left;
523 | height: 24px;
524 | width: auto;
525 | margin: 6px 5px;
526 | background: rgba(255, 255, 255, 0.15);
527 | color: rgba(255, 255, 255, 0.65);
528 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
529 | border-radius: 5px;
530 | text-align: center;
531 | line-height: 24px;
532 | overflow: hidden;
533 | }
534 | .window__handler .window__actions > a:last-child {
535 | margin-right: 0;
536 | }
537 | .window__handler .window__actions > a.nav {
538 | width: 36px;
539 | color: rgba(255, 255, 255, 0.85);
540 | line-height: 26px;
541 | margin: 6px 0;
542 | }
543 | .window__handler .window__actions > a.nav.next:before {
544 | content: "";
545 | }
546 | .window__handler .window__actions > a.nav.prev {
547 | margin-right: 2px;
548 | }
549 | .window__handler .window__actions > a.nav.prev:before {
550 | content: "";
551 | }
552 | .window__handler .window__actions > a.nav.home {
553 | margin-left: 8px;
554 | }
555 | .window__handler .window__actions > a.nav.home:before {
556 | content: "";
557 | }
558 | .window__handler .window__actions > a.nav:active {
559 | background: rgba(255, 255, 255, 0.25);
560 | }
561 | .window__handler .window__actions > a.nav.disabled {
562 | color: rgba(255, 255, 255, 0.2);
563 | }
564 | .window__handler .window__actions > a.nav.disabled:active {
565 | background: rgba(255, 255, 255, 0.15);
566 | }
567 | .window__handler .window__actions > a.search {
568 | position: relative;
569 | float: right;
570 | min-width: 200px;
571 | background: rgba(255, 255, 255, 0.15);
572 | }
573 | .window__handler .window__actions > a.search i {
574 | position: absolute;
575 | top: 0;
576 | left: 0;
577 | width: 26px;
578 | height: 100%;
579 | }
580 | .window__handler .window__actions > a.search i:before {
581 | content: "";
582 | }
583 | .window__handler .window__actions > a.search input {
584 | position: absolute;
585 | top: 0;
586 | left: 0;
587 | width: 100%;
588 | height: 100%;
589 | background: none;
590 | border: none;
591 | padding: 0 8px 0 26px;
592 | color: rgba(255, 255, 255, 0.75);
593 | border-radius: 5px;
594 | outline: 2px solid #006aff;
595 | transition: outline 0.35s ease-in-out;
596 | }
597 | .window__handler .window__actions > a.search input:focus {
598 | outline: 2px solid rgba(0, 106, 255, 0.35);
599 | }
600 | .window__handler .window__options {
601 | position: absolute;
602 | top: 24px;
603 | left: 0;
604 | height: 24px;
605 | width: 100%;
606 | }
607 | .window__handler .window__options > a.option {
608 | position: relative;
609 | display: inline-block;
610 | float: left;
611 | height: 100%;
612 | width: auto;
613 | padding: 0 10px;
614 | color: rgba(255, 255, 255, 0.65);
615 | text-align: center;
616 | line-height: 24px;
617 | }
618 | .window__handler .window__options > a.option:before {
619 | content: "";
620 | position: absolute;
621 | bottom: 0;
622 | left: 30px;
623 | width: calc(100% - 60px);
624 | height: 3px;
625 | background: rgba(255, 255, 255, 0);
626 | border-radius: 5px;
627 | transition: 0.1s;
628 | }
629 | .window__handler .window__options > a.option:hover:before {
630 | left: 10px;
631 | width: calc(100% - 20px);
632 | }
633 | .window__handler .window__options > a.option.active {
634 | color: rgba(255, 255, 255, 0.9);
635 | }
636 | .window__handler .window__options > a.option.active:before, .window__handler .window__options > a.option.active:hover:before {
637 | left: 10px;
638 | width: calc(100% - 20px);
639 | background: rgba(255, 255, 255, 0.5);
640 | }
641 | .window__handler .window__options > a.option:hover:before {
642 | background: rgba(255, 255, 255, 0.15);
643 | }
644 |
645 | .window__body {
646 | height: calc(100% - 24px);
647 | }
648 |
649 | .window--messages .window__handler:before {
650 | opacity: 0;
651 | }
652 |
653 | .window--files .window__handler {
654 | height: 60px;
655 | background: #1e1e1f !important;
656 | }
657 | .window--files .window__body {
658 | position: absolute;
659 | bottom: 0;
660 | width: 100%;
661 | height: 100%;
662 | }
663 | .window--files .sidebar {
664 | top: 60px !important;
665 | height: calc(100% - 60px) !important;
666 | }
667 | .window--files .window__main {
668 | margin-top: 60px !important;
669 | height: calc(100% - 60px) !important;
670 | background: #1e1e1f !important;
671 | }
672 |
673 | .window--safari .window__handler {
674 | -webkit-backdrop-filter: blur(15px);
675 | backdrop-filter: blur(15px);
676 | background: rgba(30, 30, 31, 0.9);
677 | height: 70px;
678 | }
679 | .window--safari .window__handler .window__controls {
680 | top: calc(42px/2);
681 | transform: translateY(-50%) translateX(5px);
682 | }
683 | .window--safari .window__handler .browse {
684 | position: absolute;
685 | top: calc(42px/2);
686 | left: 50%;
687 | width: 400px;
688 | height: 26px;
689 | transform: translateY(-50%) translateX(-50%);
690 | background: rgba(255, 255, 255, 0.1);
691 | border-radius: 5px;
692 | padding: 0 10px;
693 | color: rgba(255, 255, 255, 0.75);
694 | font-size: 85%;
695 | text-align: center;
696 | }
697 | .window--safari .window__handler .browse:focus {
698 | background: rgba(255, 255, 255, 0.15);
699 | box-shadow: inset 0 0 0 1px #006aff;
700 | color: white;
701 | }
702 | .window--safari .window__handler .browse::placeholder {
703 | color: rgba(255, 255, 255, 0.25);
704 | }
705 | .window--safari .window__handler .tabs {
706 | list-style: none;
707 | position: absolute;
708 | display: flex;
709 | bottom: 0;
710 | left: 0;
711 | width: 100%;
712 | height: 28px;
713 | box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
714 | font-size: 85%;
715 | overflow: hidden;
716 | overflow-x: auto;
717 | }
718 | .window--safari .window__handler .tabs::-webkit-scrollbar {
719 | min-width: 0;
720 | width: 0;
721 | max-width: 0;
722 | min-height: 0;
723 | height: 0;
724 | max-height: 0;
725 | background-color: none;
726 | }
727 | .window--safari .window__handler .tabs li {
728 | position: relative;
729 | flex-wrap: nowrap;
730 | flex-basis: 100%;
731 | padding: 0 28px;
732 | height: 100%;
733 | line-height: 28px;
734 | text-align: center;
735 | white-space: nowrap;
736 | overflow: hidden;
737 | text-overflow: ellipsis;
738 | background: rgba(0, 0, 0, 0.2);
739 | min-width: 150px;
740 | box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1);
741 | }
742 | .window--safari .window__handler .tabs li:hover {
743 | background: rgba(0, 0, 0, 0.3);
744 | transition: all 0.05s ease-in-out;
745 | }
746 | .window--safari .window__handler .tabs li:hover .close {
747 | opacity: 1;
748 | }
749 | .window--safari .window__handler .tabs li.active {
750 | background: none;
751 | transition: all 0s;
752 | }
753 | .window--safari .window__handler .tabs li.new {
754 | max-width: 28px !important;
755 | min-width: 28px !important;
756 | flex-grow: 0;
757 | padding: 0;
758 | }
759 | .window--safari .window__handler .tabs li.new:before {
760 | content: "";
761 | position: absolute;
762 | top: 0;
763 | left: 0;
764 | width: 100%;
765 | height: 100%;
766 | text-align: center;
767 | line-height: 28px;
768 | font-size: 100%;
769 | opacity: 0.5;
770 | }
771 | .window--safari .window__handler .tabs li .close {
772 | position: absolute;
773 | top: 6px;
774 | left: 6px;
775 | width: 16px;
776 | height: 16px;
777 | text-align: center;
778 | line-height: 16px;
779 | border-radius: 1px;
780 | opacity: 0;
781 | transition: opacity 0.1s ease-in-out;
782 | }
783 | .window--safari .window__handler .tabs li .close:before {
784 | content: "";
785 | font-size: 150%;
786 | opacity: 0.5;
787 | }
788 | .window--safari .window__handler .tabs li .close:hover {
789 | background: rgba(255, 255, 255, 0.075);
790 | }
791 | .window--safari .window__body {
792 | width: 100%;
793 | height: calc(100% - 70px);
794 | }
795 | .window--safari .window__body .content {
796 | position: relative;
797 | width: 100%;
798 | min-height: 100%;
799 | display: none;
800 | opacity: 0;
801 | pointer-events: none;
802 | background: #FFF;
803 | color: #000;
804 | }
805 | .window--safari .window__body .content.transparent {
806 | background: transparent;
807 | color: #FFF;
808 | }
809 | .window--safari .window__body .content.visible {
810 | display: block;
811 | opacity: 1;
812 | pointer-events: all;
813 | }
814 |
815 | .window__body {
816 | position: relative;
817 | display: flex;
818 | overflow: auto;
819 | height: 100%;
820 | font-size: 16px;
821 | }
822 | .window__body .sidebar {
823 | position: absolute;
824 | top: 0;
825 | left: 0;
826 | min-width: 160px;
827 | height: 100%;
828 | overflow: auto;
829 | padding: 5px 0;
830 | transition: all 0.05s;
831 | }
832 | .window__body .sidebar[data-display=items] {
833 | background: rgba(255, 255, 255, 0.025);
834 | pointer-events: none;
835 | }
836 | .window__body .sidebar[data-display=items] .item, .window__body .sidebar[data-display=items] .title {
837 | position: relative;
838 | width: calc(100% - 1px);
839 | height: 30px;
840 | line-height: 30px;
841 | padding: 0 20px 0 30px;
842 | margin: 0;
843 | margin-left: 1px;
844 | font-size: 14px;
845 | color: rgba(255, 255, 255, 0.5);
846 | opacity: 0.5;
847 | z-index: 0;
848 | }
849 | .window__body .sidebar[data-display=items] .item:last-child, .window__body .sidebar[data-display=items] .title:last-child {
850 | margin-bottom: 5px;
851 | }
852 | .window__body .sidebar[data-display=items] .item.active, .window__body .sidebar[data-display=items] .title.active {
853 | color: white;
854 | background: rgba(255, 255, 255, 0.075);
855 | }
856 | .window__body .sidebar[data-display=items] .title {
857 | text-transform: uppercase;
858 | color: rgba(255, 255, 255, 0.25);
859 | font-size: 12px;
860 | }
861 | .window__body .sidebar[data-display=items] .title:first-child {
862 | margin-top: 20px;
863 | }
864 | .window__body .sidebar[data-display=items] .item[data-item=recents] i::before {
865 | content: "";
866 | }
867 | .window__body .sidebar[data-display=items] .item[data-item=download] i::before {
868 | content: "";
869 | }
870 | .window__body .sidebar[data-display=items] .item[data-item=documents] i::before {
871 | content: "";
872 | }
873 | .window__body .sidebar[data-display=items] .item[data-item=desktop] i::before {
874 | content: "";
875 | }
876 | .window__body .sidebar[data-display=items] .item[data-item=images] i::before {
877 | content: "";
878 | }
879 | .window__body .sidebar[data-display=items] .item[data-item=music] i::before {
880 | content: "";
881 | }
882 | .window__body .sidebar[data-display=items] .item[data-item=videos] i::before {
883 | content: "";
884 | }
885 | .window__body .sidebar[data-display=items] .item[data-item=apps] i::before {
886 | content: "";
887 | }
888 | .window__body .sidebar[data-display=cards] {
889 | min-width: 300px;
890 | padding: 0;
891 | }
892 | .window__body .sidebar[data-display=cards] .card {
893 | position: relative;
894 | width: 100%;
895 | height: 70px;
896 | padding: 0;
897 | margin: 0;
898 | font-size: 14px;
899 | color: #FFF;
900 | background-size: 0px 0px;
901 | z-index: 0;
902 | }
903 | .window__body .sidebar[data-display=cards] .card:before {
904 | content: "";
905 | position: absolute;
906 | top: 15px;
907 | left: 20px;
908 | width: 40px;
909 | height: 40px;
910 | background-color: rgba(255, 255, 255, 0.1);
911 | background-image: inherit;
912 | background-size: cover;
913 | background-position: center center;
914 | border-radius: 100%;
915 | }
916 | .window__body .sidebar[data-display=cards] .card:after {
917 | content: "";
918 | position: absolute;
919 | bottom: -1px;
920 | right: 0;
921 | width: calc(100% - 20px);
922 | height: 1px;
923 | background-color: rgba(255, 255, 255, 0.1);
924 | z-index: -1;
925 | }
926 | .window__body .sidebar[data-display=cards] .card.active:after {
927 | bottom: 0px;
928 | width: 100%;
929 | height: 100%;
930 | background: #006AFF;
931 | }
932 | .window__body .sidebar[data-display=cards] .card.active span:after {
933 | opacity: 1;
934 | }
935 | .window__body .sidebar[data-display=cards] .card.active span:before {
936 | opacity: 0.75;
937 | }
938 | .window__body .sidebar[data-display=cards] .card.active .data:before {
939 | color: rgba(255, 255, 255, 0.75);
940 | }
941 | .window__body .sidebar[data-display=cards] .card.active .data:after {
942 | opacity: 0;
943 | }
944 | .window__body .sidebar[data-display=cards] .card .data {
945 | position: absolute;
946 | top: 10px;
947 | right: 20px;
948 | width: 40px;
949 | height: 50px;
950 | text-align: center;
951 | pointer-events: none;
952 | }
953 | .window__body .sidebar[data-display=cards] .card .data:before {
954 | content: attr(data-date);
955 | position: absolute;
956 | top: 0;
957 | right: 0;
958 | width: 70px;
959 | height: 15px;
960 | line-height: 15px;
961 | text-align: right;
962 | color: rgba(255, 255, 255, 0.5);
963 | }
964 | .window__body .sidebar[data-display=cards] .card .data[data-bubbles]:after {
965 | content: attr(data-bubbles);
966 | display: inline-block;
967 | margin: 25px auto 5px auto;
968 | width: auto;
969 | min-width: 20px;
970 | height: 20px;
971 | padding: 0 6px;
972 | line-height: 21px;
973 | border-radius: 20px;
974 | color: #FFF;
975 | background: #006AFF;
976 | font-size: 12px;
977 | text-align: center;
978 | font-weight: 600;
979 | }
980 | .window__body .sidebar[data-display=cards] .card span {
981 | position: relative;
982 | width: calc(100% - 145px);
983 | height: 50px;
984 | margin: 10px 70px 0 0;
985 | float: right;
986 | pointer-events: none;
987 | }
988 | .window__body .sidebar[data-display=cards] .card span:before {
989 | content: attr(data-title);
990 | position: absolute;
991 | top: 0;
992 | left: 0;
993 | width: 100%;
994 | height: 15px;
995 | white-space: nowrap;
996 | overflow: hidden;
997 | text-overflow: ellipsis;
998 | letter-spacing: 1px;
999 | word-break: break-word;
1000 | opacity: 0.5;
1001 | }
1002 | .window__body .sidebar[data-display=cards] .card span:after {
1003 | content: attr(data-subtitle);
1004 | position: absolute;
1005 | top: 20px;
1006 | left: 0;
1007 | width: 100%;
1008 | height: 30px;
1009 | white-space: pre-wrap;
1010 | overflow: hidden;
1011 | text-overflow: ellipsis;
1012 | line-height: 14px;
1013 | word-break: break-word;
1014 | }
1015 | .window__body .calendar {
1016 | position: absolute;
1017 | margin: 0;
1018 | width: 100%;
1019 | height: 100%;
1020 | }
1021 | .window__body .calendar .ui-datepicker,
1022 | .window__body .calendar .ui-datepicker table,
1023 | .window__body .calendar .ui-datepicker tr,
1024 | .window__body .calendar .ui-datepicker td,
1025 | .window__body .calendar .ui-datepicker th {
1026 | margin: 0;
1027 | padding: 0;
1028 | border: none;
1029 | border-spacing: 0;
1030 | color: rgba(255, 255, 255, 0.45);
1031 | }
1032 | .window__body .calendar .ui-datepicker {
1033 | display: none;
1034 | width: 100%;
1035 | height: 100%;
1036 | padding: 0;
1037 | cursor: default;
1038 | font-size: inherit;
1039 | font-family: inherit !important;
1040 | background: none;
1041 | }
1042 | .window__body .calendar .ui-datepicker-header {
1043 | position: relative;
1044 | background: none;
1045 | border: none;
1046 | padding: none !important;
1047 | height: 70px;
1048 | line-height: 70px;
1049 | }
1050 | .window__body .calendar .ui-datepicker-header .ui-datepicker-prev,
1051 | .window__body .calendar .ui-datepicker-header .ui-datepicker-next {
1052 | position: absolute;
1053 | top: calc(50% - 13px);
1054 | right: 26px;
1055 | width: 26px;
1056 | height: 26px;
1057 | border: none;
1058 | color: rgba(255, 255, 255, 0.75);
1059 | background: rgba(255, 255, 255, 0.15);
1060 | padding: 0 10px;
1061 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.2);
1062 | border-radius: 5px;
1063 | text-align: center;
1064 | line-height: 26px;
1065 | font-family: "Ionicons";
1066 | transition: all 0.05s linear;
1067 | }
1068 | .window__body .calendar .ui-datepicker-header .ui-datepicker-prev:active,
1069 | .window__body .calendar .ui-datepicker-header .ui-datepicker-next:active {
1070 | background: rgba(255, 255, 255, 0.1);
1071 | font-weight: inherit;
1072 | }
1073 | .window__body .calendar .ui-datepicker-header .ui-datepicker-prev span,
1074 | .window__body .calendar .ui-datepicker-header .ui-datepicker-next span {
1075 | display: none;
1076 | }
1077 | .window__body .calendar .ui-datepicker-header .ui-datepicker-prev {
1078 | left: calc(100% - 3*(26px) - 10px);
1079 | }
1080 | .window__body .calendar .ui-datepicker-header .ui-datepicker-prev:before {
1081 | content: "";
1082 | }
1083 | .window__body .calendar .ui-datepicker-header .ui-datepicker-next:before {
1084 | content: "";
1085 | }
1086 | .window__body .calendar .ui-datepicker-title {
1087 | text-align: left;
1088 | margin: 0 !important;
1089 | pointer-events: none;
1090 | font-weight: 600;
1091 | font-size: 200%;
1092 | }
1093 | .window__body .calendar .ui-datepicker-month {
1094 | position: relative;
1095 | top: 0;
1096 | left: 0;
1097 | display: inline-block;
1098 | height: 50px;
1099 | line-height: 50px;
1100 | text-align: center;
1101 | letter-spacing: 1px;
1102 | margin-left: 20px;
1103 | color: rgba(255, 255, 255, 0.9);
1104 | }
1105 | .window__body .calendar .ui-datepicker-year {
1106 | position: relative;
1107 | top: 0px;
1108 | display: inline-block;
1109 | height: 50px;
1110 | line-height: 50px;
1111 | padding-left: 5px;
1112 | text-align: center;
1113 | color: rgba(255, 255, 255, 0.45);
1114 | }
1115 | .window__body .calendar .ui-datepicker-calendar th {
1116 | height: 30px;
1117 | line-height: 30px;
1118 | font-weight: 400;
1119 | text-align: center;
1120 | }
1121 | .window__body .calendar .ui-datepicker-calendar td {
1122 | padding: 6px 6px 36px 0;
1123 | text-align: right;
1124 | color: white;
1125 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.1);
1126 | }
1127 | .window__body .calendar .ui-datepicker-calendar td:first-child {
1128 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
1129 | }
1130 | .window__body .calendar .ui-datepicker-calendar td.ui-datepicker-week-end {
1131 | background: rgba(255, 255, 255, 0.05);
1132 | color: rgba(255, 255, 255, 0.5);
1133 | }
1134 | .window__body .calendar .ui-datepicker-calendar td.ui-datepicker-other-month, .window__body .calendar .ui-datepicker-calendar td.ui-datepicker-unselectable, .window__body .calendar .ui-datepicker-calendar td.ui-state-disabled {
1135 | color: rgba(255, 255, 255, 0.25);
1136 | opacity: 1;
1137 | }
1138 | .window__body .calendar .ui-datepicker-calendar .ui-state-default {
1139 | display: inline-block;
1140 | width: 26px;
1141 | height: 26px;
1142 | text-align: center;
1143 | line-height: 22px;
1144 | outline: none;
1145 | text-decoration: none;
1146 | border: none;
1147 | font-weight: 400;
1148 | background: none;
1149 | color: inherit;
1150 | border-radius: 100%;
1151 | }
1152 | .window__body .calendar .ui-datepicker-calendar .ui-state-highlight {
1153 | font-weight: 700;
1154 | color: white;
1155 | background: #006AFF;
1156 | font-weight: inherit;
1157 | }
1158 | .window__body .tabs {
1159 | position: absolute;
1160 | top: 12px;
1161 | left: 6px;
1162 | height: 28px;
1163 | max-width: calc(100% - 72px);
1164 | z-index: 10;
1165 | }
1166 | .window__body .tabs .tab {
1167 | position: relative;
1168 | display: flex;
1169 | height: 28px;
1170 | line-height: 28px;
1171 | padding: 0 12px 0 30px;
1172 | font-size: 14px;
1173 | }
1174 | .window__body .tabs .tab:hover .close {
1175 | opacity: 0.75;
1176 | }
1177 | .window__body .tabs .tab .icon {
1178 | position: absolute;
1179 | top: 8px;
1180 | left: 8px;
1181 | width: 14px;
1182 | height: 14px;
1183 | background-position: center center !important;
1184 | background-size: cover !important;
1185 | }
1186 | .window__body .tabs .tab .close {
1187 | position: absolute;
1188 | top: 8px;
1189 | right: 8px;
1190 | width: 14px;
1191 | height: 14px;
1192 | line-height: 14px;
1193 | font-size: 16px;
1194 | text-align: center;
1195 | opacity: 0;
1196 | transition: all 0.1s cubic-bezier(0.44, 0.14, 0.34, 0.97);
1197 | }
1198 | .window__body .tabs .tab .close:before {
1199 | content: "";
1200 | }
1201 | .window__body .tabs .tab.current {
1202 | background: #fff;
1203 | border-radius: 5px 5px 0 0;
1204 | box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
1205 | }
1206 |
1207 | .window__main {
1208 | flex: 0 1 auto;
1209 | padding: 10px;
1210 | width: 100%;
1211 | }
1212 | .window__main.hasSideBar {
1213 | position: absolute;
1214 | left: 160px;
1215 | top: 0;
1216 | width: calc(100% - 160px);
1217 | height: 100%;
1218 | overflow: auto;
1219 | }
1220 | .window__main.hasSideBarCards {
1221 | position: absolute;
1222 | left: 300px;
1223 | top: 0;
1224 | width: calc(100% - 300px);
1225 | height: 100%;
1226 | overflow: auto;
1227 | background: #1e1e1f;
1228 | }
1229 | .window__main .list {
1230 | display: block;
1231 | left: 0;
1232 | right: 0;
1233 | padding: 20px;
1234 | }
1235 | .window__main .list table {
1236 | border-collapse: collapse;
1237 | margin: 0;
1238 | padding: 0;
1239 | width: 100%;
1240 | }
1241 | .window__main .list table tr {
1242 | position: relative;
1243 | border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1244 | }
1245 | .window__main .list table tr:first-child td {
1246 | padding-top: 0px;
1247 | }
1248 | .window__main .list table tr:first-child td:first-child {
1249 | padding-top: 6px;
1250 | }
1251 | .window__main .list table tr:last-child {
1252 | border-bottom: none;
1253 | }
1254 | .window__main .list table tr td {
1255 | vertical-align: top;
1256 | padding: 15px 0;
1257 | }
1258 | .window__main .list table tr td:first-child {
1259 | display: inline-block;
1260 | float: right;
1261 | text-align: right;
1262 | padding-right: 15px;
1263 | padding-left: 0;
1264 | min-width: 0;
1265 | min-width: 150px !important;
1266 | max-width: 250px !important;
1267 | vertical-align: top;
1268 | padding-top: 20px;
1269 | }
1270 | .window__main .list .item {
1271 | position: relative;
1272 | display: block;
1273 | height: 30px;
1274 | line-height: 30px;
1275 | }
1276 | .window__main .list .item.title {
1277 | font-weight: 600;
1278 | }
1279 | .window__main .list .item .description {
1280 | display: block;
1281 | line-height: 16px;
1282 | margin-left: 24px;
1283 | margin-bottom: 10px;
1284 | pointer-events: none;
1285 | opacity: 0.25;
1286 | }
1287 | .window__main .list .item.canCheck {
1288 | display: table;
1289 | }
1290 | .window__main .list .item.canCheck input[type=checkbox] {
1291 | margin-right: 10px;
1292 | }
1293 | .window__main .list .item.canCheck input[type=checkbox].disabled {
1294 | opacity: 0.25;
1295 | pointer-events: none;
1296 | }
1297 |
1298 | @keyframes toFullWidth {
1299 | 0% {
1300 | width: 0%;
1301 | }
1302 | 100% {
1303 | width: 100%;
1304 | }
1305 | }
1306 | .window__body.black, .window__body.black .window__main {
1307 | background: #000;
1308 | }
1309 |
1310 | .window--messages .window__handler .chatNav {
1311 | content: "";
1312 | position: absolute;
1313 | top: 0;
1314 | right: 0;
1315 | width: calc(100% - 300px);
1316 | height: 100%;
1317 | border-radius: 0 10px 0 0;
1318 | background: #1e1e1f;
1319 | box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.25);
1320 | }
1321 | .window--messages .window__handler .chatNav .user {
1322 | position: absolute;
1323 | top: 10px;
1324 | left: 20px;
1325 | width: 40px;
1326 | height: 40px;
1327 | border-radius: 100%;
1328 | background-color: rgba(255, 255, 255, 0.1);
1329 | background-size: cover;
1330 | background-position: center center;
1331 | background-repeat: no-repeat;
1332 | }
1333 | .window--messages .window__handler .chatNav .user:before {
1334 | content: attr(data-name);
1335 | position: absolute;
1336 | top: 5px;
1337 | left: 50px;
1338 | width: auto;
1339 | height: 15px;
1340 | line-height: 15px;
1341 | font-size: 14px;
1342 | font-weight: 600;
1343 | transition: all 0.1s ease;
1344 | }
1345 | .window--messages .window__handler .chatNav .user:after {
1346 | content: attr(data-state);
1347 | position: absolute;
1348 | top: 20px;
1349 | left: 50px;
1350 | width: auto;
1351 | height: 15px;
1352 | line-height: 15px;
1353 | font-size: 14px;
1354 | color: rgba(255, 255, 255, 0.5);
1355 | transition: all 0.1s ease;
1356 | }
1357 | .window--messages .window__handler .chatNav .user[data-state=offline]:before {
1358 | height: 30px;
1359 | line-height: 30px;
1360 | }
1361 | .window--messages .window__handler .chatNav .user[data-state=offline]:after {
1362 | opacity: 0;
1363 | }
1364 | .window--messages .window__body {
1365 | height: calc(100% - 60px);
1366 | }
1367 | .window--messages .window__body .sidebar[data-display=cards] {
1368 | height: 100%;
1369 | }
1370 | .window--messages .window__body .sidebar[data-display=cards]:before {
1371 | content: "";
1372 | position: absolute;
1373 | top: -60px;
1374 | left: 0;
1375 | width: 300px;
1376 | height: 60px;
1377 | }
1378 | .window--messages .window__body .window__main.messages {
1379 | position: relative;
1380 | padding: 20px 20px 50px 20px;
1381 | display: flex;
1382 | flex-direction: column;
1383 | user-select: text;
1384 | box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.25);
1385 | }
1386 | .window--messages .window__body .window__main.messages::-webkit-scrollbar {
1387 | min-width: 0;
1388 | width: 0;
1389 | max-width: 0;
1390 | min-height: 0;
1391 | height: 0;
1392 | max-height: 0;
1393 | background-color: none;
1394 | }
1395 | .window--messages .window__body .window__main.messages .message {
1396 | position: relative;
1397 | display: block;
1398 | margin: 0 0 10px 0;
1399 | font-size: 14px;
1400 | }
1401 | .window--messages .window__body .window__main.messages .message span {
1402 | display: inline-block;
1403 | background: rgba(255, 255, 255, 0.1);
1404 | padding: 5px 10px;
1405 | border-radius: 20px;
1406 | float: left;
1407 | max-width: 300px;
1408 | word-break: break-word;
1409 | }
1410 | .window--messages .window__body .window__main.messages .message.mine span {
1411 | background: #006AFF;
1412 | float: right;
1413 | }
1414 | .window--messages .window__body .window__main.messages .message.audio span {
1415 | position: relative;
1416 | width: 100%;
1417 | height: 50px;
1418 | overflow: hidden;
1419 | }
1420 | .window--messages .window__body .window__main.messages .message.audio span:after {
1421 | content: attr(data-duration);
1422 | position: absolute;
1423 | top: 5px;
1424 | right: 20px;
1425 | width: 50px;
1426 | height: 40px;
1427 | line-height: 40px;
1428 | font-size: 14px;
1429 | font-weight: 600;
1430 | text-align: right;
1431 | }
1432 | .window--messages .window__body .window__main.messages .message.audio span .controls {
1433 | position: relative;
1434 | display: inline-block;
1435 | margin: 0;
1436 | width: calc(100% - 65px);
1437 | height: 40px;
1438 | line-height: 40px;
1439 | }
1440 | .window--messages .window__body .window__main.messages .message.audio span .controls .play {
1441 | position: absolute;
1442 | top: 0;
1443 | left: 0;
1444 | width: 40px;
1445 | height: 40px;
1446 | }
1447 | .window--messages .window__body .window__main.messages .message.audio span .controls .play:before {
1448 | content: "";
1449 | position: absolute;
1450 | top: 0;
1451 | left: 0;
1452 | width: 100%;
1453 | height: 100%;
1454 | line-height: 40px;
1455 | font-size: 26px;
1456 | text-align: center;
1457 | }
1458 | .window--messages .window__body .window__main.messages .message.audio span .controls .timeNav {
1459 | position: relative;
1460 | margin: 0;
1461 | width: calc(100% - 40px);
1462 | height: 40px;
1463 | line-height: 40px;
1464 | float: right;
1465 | }
1466 | .window--messages .window__body .window__main.messages .message.audio span .controls .timeNav:before {
1467 | content: "";
1468 | position: absolute;
1469 | top: calc(50% - 2px);
1470 | left: 0;
1471 | width: 100%;
1472 | height: 4px;
1473 | border-radius: 10px;
1474 | background: rgba(255, 255, 255, 0.2);
1475 | }
1476 | .window--messages .window__body .window__main.messages .message.audio span .controls .timeNav .handler {
1477 | position: absolute;
1478 | top: calc(50% - 2px);
1479 | left: 6px;
1480 | width: 0;
1481 | max-width: calc(100% - 12px);
1482 | height: 4px;
1483 | border-radius: 10px;
1484 | background: #FFF;
1485 | box-shadow: -6px 0 0 0 #FFF;
1486 | animation: toFullWidth linear;
1487 | animation-duration: 3s;
1488 | }
1489 | .window--messages .window__body .window__main.messages .message.audio span .controls .timeNav .handler:before {
1490 | content: "";
1491 | position: absolute;
1492 | top: -4px;
1493 | right: -6px;
1494 | width: 12px;
1495 | height: 12px;
1496 | border-radius: 100%;
1497 | background: #FFF;
1498 | }
1499 | .window--messages .window__body .window__main.messages img.message {
1500 | border-radius: 20px;
1501 | max-width: 280px;
1502 | }
1503 | .window--messages .window__body .chatbox {
1504 | position: absolute;
1505 | bottom: 0;
1506 | right: 0;
1507 | width: calc(100% - 300px);
1508 | height: 50px;
1509 | z-index: 1;
1510 | -webkit-backdrop-filter: blur(30px) saturate(1.5);
1511 | backdrop-filter: blur(30px) saturate(1.5);
1512 | background: rgba(30, 30, 31, 0.75);
1513 | box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 1px 0 0 0 rgba(0, 0, 0, 0.25);
1514 | }
1515 | .window--messages .window__body .chatbox input {
1516 | position: absolute;
1517 | top: 0;
1518 | left: 0;
1519 | width: 100%;
1520 | height: 30px;
1521 | background: rgba(255, 255, 255, 0.05);
1522 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1523 | line-height: 30px;
1524 | padding: 0 45px 0 15px;
1525 | border-radius: 20px;
1526 | font-size: 14px;
1527 | color: #FFF;
1528 | }
1529 | .window--messages .window__body .chatbox .emoji {
1530 | position: absolute;
1531 | top: 0;
1532 | right: 0;
1533 | width: 30px;
1534 | height: 30px;
1535 | border-radius: 0 20px 20px 0;
1536 | }
1537 | .window--messages .window__body .chatbox .emoji:before {
1538 | content: "😀";
1539 | position: absolute;
1540 | top: 0;
1541 | left: 0;
1542 | width: 100%;
1543 | height: 100%;
1544 | line-height: 30px;
1545 | text-align: center;
1546 | font-size: 18px;
1547 | filter: saturate(0);
1548 | opacity: 0.5;
1549 | transition: all 0.1s ease;
1550 | }
1551 | .window--messages .window__body .chatbox .emoji:hover:before {
1552 | filter: saturate(1);
1553 | opacity: 1;
1554 | }
1555 | .window--messages .window__body .chatbox .audioMargin {
1556 | position: absolute;
1557 | top: 10px;
1558 | left: 20px;
1559 | width: calc(100% - 70px);
1560 | height: 30px;
1561 | transition: all 0.1s ease;
1562 | }
1563 | .window--messages .window__body .chatbox .audioMargin.recording {
1564 | width: calc(100% - 170px);
1565 | }
1566 | .window--messages .window__body .chatbox .audio {
1567 | position: absolute;
1568 | top: 10px;
1569 | right: 10px;
1570 | width: 30px;
1571 | height: 30px;
1572 | font-size: 14px;
1573 | transition: all 0.1s ease;
1574 | }
1575 | .window--messages .window__body .chatbox .audio .trigger {
1576 | position: absolute;
1577 | top: 0;
1578 | right: 0;
1579 | width: 30px;
1580 | height: 30px;
1581 | color: rgba(255, 255, 255, 0.5);
1582 | border-radius: 100%;
1583 | background: rgba(255, 255, 255, 0.05);
1584 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1585 | transition: all 0.1s ease;
1586 | }
1587 | .window--messages .window__body .chatbox .audio .trigger:before {
1588 | content: "";
1589 | position: absolute;
1590 | top: 0;
1591 | left: 0;
1592 | width: 30px;
1593 | height: 30px;
1594 | line-height: 30px;
1595 | text-align: center;
1596 | pointer-events: none;
1597 | }
1598 | .window--messages .window__body .chatbox .audio .cancel {
1599 | position: absolute;
1600 | top: 0;
1601 | left: -100px;
1602 | width: 30px;
1603 | height: 30px;
1604 | line-height: 30px;
1605 | text-align: center;
1606 | background: rgba(255, 255, 255, 0.05);
1607 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1608 | border-radius: 100%;
1609 | opacity: 0;
1610 | pointer-events: none;
1611 | transition: all 0.1s ease;
1612 | }
1613 | .window--messages .window__body .chatbox .audio .cancel:before, .window--messages .window__body .chatbox .audio .cancel:after {
1614 | content: "";
1615 | position: absolute;
1616 | top: calc(50% - 7px);
1617 | left: calc(50% - 1px);
1618 | width: 2px;
1619 | height: 14px;
1620 | background: white;
1621 | transform-origin: center center;
1622 | transform: rotateZ(45deg);
1623 | }
1624 | .window--messages .window__body .chatbox .audio .cancel:after {
1625 | transform: rotateZ(-45deg);
1626 | }
1627 | .window--messages .window__body .chatbox .audio .audioDuration {
1628 | position: absolute;
1629 | top: 0;
1630 | left: -65px;
1631 | width: 60px;
1632 | height: 30px;
1633 | line-height: 30px;
1634 | text-align: center;
1635 | font-size: 14px;
1636 | letter-spacing: 1px;
1637 | color: white;
1638 | pointer-events: none;
1639 | opacity: 0;
1640 | transition: all 0.1s ease;
1641 | }
1642 | .window--messages .window__body .chatbox .audio.recording .trigger {
1643 | color: white;
1644 | background: #E50000;
1645 | }
1646 | .window--messages .window__body .chatbox .audio.recording .trigger:before {
1647 | content: "";
1648 | }
1649 | .window--messages .window__body .chatbox .audio.recording .cancel {
1650 | opacity: 1;
1651 | pointer-events: all;
1652 | }
1653 | .window--messages .window__body .chatbox .audio.recording .audioDuration {
1654 | opacity: 1;
1655 | }
1656 | .window--messages .window__body .chatbox .audio.recorded .trigger {
1657 | color: rga(255, 255, 255, 0.1);
1658 | background: #006AFF;
1659 | }
1660 | .window--messages .window__body .chatbox .audio.recorded .trigger:before {
1661 | content: "";
1662 | position: absolute;
1663 | top: calc(50% - 9px);
1664 | left: calc(50% - 3px);
1665 | width: 7px;
1666 | height: 13px;
1667 | border: 2px solid #FFF;
1668 | border-top: none;
1669 | border-left: none;
1670 | transform-origin: center center;
1671 | transform: rotateZ(45deg);
1672 | }
1673 | .window--messages .window__body .chatbox .audio.recorded .cancel {
1674 | opacity: 1;
1675 | pointer-events: all;
1676 | }
1677 | .window--messages .window__body .chatbox .audio.recorded .audioDuration {
1678 | opacity: 1;
1679 | }
1680 | .window--messages .window__body .chatbox .audio.minLen .trigger {
1681 | pointer-events: none !important;
1682 | opacity: 0.5;
1683 | }
1684 | .window--messages .window__handler {
1685 | height: 60px;
1686 | }
1687 | .window--messages .window__handler:after {
1688 | content: "";
1689 | position: absolute;
1690 | bottom: 0;
1691 | left: 1px;
1692 | width: calc(100% - 1px);
1693 | height: 1px;
1694 | background: rgba(255, 255, 255, 0.05);
1695 | }
1696 | .window--messages .window__handler .search {
1697 | position: absolute;
1698 | bottom: 10px;
1699 | left: 20px;
1700 | width: 225px;
1701 | height: 22px;
1702 | padding: 0 10px;
1703 | line-height: 22px;
1704 | font-size: 14px;
1705 | border-radius: 5px;
1706 | background: rgba(255, 255, 255, 0.05);
1707 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1708 | color: #FFF;
1709 | }
1710 | .window--messages .window__handler .search::placeholder {
1711 | color: rgba(255, 255, 255, 0.25);
1712 | font-weight: 400;
1713 | }
1714 | .window--messages .window__handler .new {
1715 | position: absolute;
1716 | bottom: 10px;
1717 | left: 250px;
1718 | width: 30px;
1719 | height: 22px;
1720 | line-height: 22px;
1721 | border-radius: 5px;
1722 | background: rgba(255, 255, 255, 0.15);
1723 | color: #FFF;
1724 | }
1725 | .window--messages .window__handler .new:active {
1726 | background: rgba(255, 255, 255, 0.25);
1727 | }
1728 | .window--messages .window__handler .new:before {
1729 | content: "";
1730 | position: absolute;
1731 | top: calc(50% - 1px);
1732 | left: calc(50% - 6px);
1733 | width: 12px;
1734 | height: 2px;
1735 | background: rgba(255, 255, 255, 0.5);
1736 | pointer-events: none;
1737 | }
1738 | .window--messages .window__handler .new:after {
1739 | content: "";
1740 | position: absolute;
1741 | top: calc(50% + 1px);
1742 | left: calc(50% - 1px);
1743 | width: 2px;
1744 | height: 5px;
1745 | background: rgba(255, 255, 255, 0.5);
1746 | box-shadow: 0 -7px 0 0 rgba(255, 255, 255, 0.5);
1747 | pointer-events: none;
1748 | }
1749 |
1750 | .filesys {
1751 | font-size: 14px;
1752 | font-weight: 400;
1753 | overflow: auto;
1754 | padding: 20px;
1755 | background: none !important;
1756 | }
1757 | .filesys .sep {
1758 | position: relative;
1759 | display: block;
1760 | height: 20px;
1761 | line-height: 20px;
1762 | color: rgba(255, 255, 255, 0.25);
1763 | text-transform: uppercase;
1764 | margin: 20px 0 0 10px;
1765 | font-weight: 600;
1766 | }
1767 | .filesys .sep:first-child {
1768 | margin-top: 20px;
1769 | }
1770 | .filesys[data-visualization=icons] {
1771 | /*.folder[data-tag="blue"]:before { background: $tag-blue !important; }
1772 | .folder[data-tag="red"]:before { background: $tag-red !important; }
1773 | .folder[data-tag="green"]:before { background: $tag-green !important; }
1774 | .folder[data-tag="yellow"]:before { background: $tag-yellow !important; }
1775 | .folder[data-tag="orange"]:before { background: $tag-orange !important; }
1776 | .folder[data-tag="purple"]:before { background: $tag-purple !important; }*/
1777 | }
1778 | .filesys[data-visualization=icons] .empty {
1779 | position: absolute;
1780 | top: 0;
1781 | left: 0;
1782 | width: 100%;
1783 | height: 100%;
1784 | opacity: 0.25;
1785 | }
1786 | .filesys[data-visualization=icons] .empty:before {
1787 | content: "The folder is empty";
1788 | position: absolute;
1789 | top: calc(50% + 20px);
1790 | left: calc(50% - 100px);
1791 | width: 200px;
1792 | height: 30px;
1793 | line-height: 30px;
1794 | text-align: center;
1795 | font-weight: 600;
1796 | }
1797 | .filesys[data-visualization=icons] .empty:after {
1798 | content: "";
1799 | position: absolute;
1800 | top: calc(50% - 60px);
1801 | left: calc(50% - 40px);
1802 | width: 80px;
1803 | height: 80px;
1804 | background-image: url("");
1805 | background-position: center center;
1806 | background-size: cover;
1807 | background-repeat: no-repeat;
1808 | opacity: 0.75;
1809 | }
1810 | .filesys[data-visualization=icons] .file, .filesys[data-visualization=icons] .folder {
1811 | position: relative;
1812 | display: inline-block;
1813 | width: 130px;
1814 | height: 130px;
1815 | text-align: left;
1816 | margin: 0;
1817 | color: white;
1818 | font-size: 14px;
1819 | overflow: hidden;
1820 | vertical-align: top;
1821 | transition: all 0.1s;
1822 | }
1823 | .filesys[data-visualization=icons] .file.selected:before, .filesys[data-visualization=icons] .folder.selected:before {
1824 | background: rgba(255, 255, 255, 0.15);
1825 | }
1826 | .filesys[data-visualization=icons] .file .content, .filesys[data-visualization=icons] .folder .content {
1827 | position: absolute;
1828 | top: 5px;
1829 | left: calc(17% + 10px);
1830 | width: calc(66% - 20px);
1831 | height: calc(66% - 10px);
1832 | overflow: hidden;
1833 | background-size: contain !important;
1834 | background-repeat: no-repeat;
1835 | background-position: center center;
1836 | pointer-events: none;
1837 | }
1838 | .filesys[data-visualization=icons] .file:before, .filesys[data-visualization=icons] .folder:before {
1839 | content: "";
1840 | position: absolute;
1841 | top: 0;
1842 | left: 17%;
1843 | width: 66%;
1844 | height: 66%;
1845 | border-radius: 5px;
1846 | }
1847 | .filesys[data-visualization=icons] .file:after, .filesys[data-visualization=icons] .folder:after {
1848 | content: attr(data-name);
1849 | position: absolute;
1850 | bottom: 5%;
1851 | left: 5%;
1852 | width: 90%;
1853 | height: 24%;
1854 | text-align: center;
1855 | text-overflow: ellipsis;
1856 | white-space: pre-wrap;
1857 | overflow: hidden;
1858 | }
1859 | .filesys[data-visualization=icons] .file[data-type=f] .content, .filesys[data-visualization=icons] .folder[data-type=f] .content {
1860 | background-image: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/files/folder.png");
1861 | }
1862 | .filesys[data-visualization=icons] .file[data-type=text] .content {
1863 | background-image: url(https://bit.ly/33YyJD2);
1864 | }
1865 | .filesys[data-visualization=icons] .file[data-type=xlsx] .content {
1866 | background-image: url(https://bit.ly/2JX15qR);
1867 | }
1868 | .filesys[data-visualization=icons] .file[data-type=img] .content {
1869 | top: 5px;
1870 | left: calc(17% + 5px);
1871 | width: calc(66% - 10px);
1872 | height: calc(66% - 10px);
1873 | }
1874 |
1875 | .lockScreen {
1876 | position: fixed;
1877 | top: 0;
1878 | left: 0;
1879 | width: 100vw;
1880 | height: 100vh;
1881 | z-index: 999999;
1882 | pointer-events: none;
1883 | opacity: 0;
1884 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/bg/abstract/macOS-Big-Sur-Vector-Wave-Wallpaper.jpg");
1885 | background-size: 0px 0px;
1886 | transition: opacity 0.1s linear;
1887 | }
1888 | .lockScreen:before {
1889 | content: "";
1890 | position: absolute;
1891 | top: 0;
1892 | left: 0;
1893 | width: 100vw;
1894 | height: 100vh;
1895 | background: inherit;
1896 | background-position: center center;
1897 | background-size: cover;
1898 | filter: brightness(0.75) saturate(1.1);
1899 | }
1900 | .lockScreen.locked {
1901 | pointer-events: auto;
1902 | opacity: 1;
1903 | }
1904 | .lockScreen .user {
1905 | position: absolute;
1906 | bottom: calc(50% + 24px);
1907 | left: calc(50% - 100px);
1908 | width: 200px;
1909 | height: 100px;
1910 | background-size: 0px 0px;
1911 | }
1912 | .lockScreen .user:before {
1913 | content: "";
1914 | position: absolute;
1915 | bottom: 60px;
1916 | left: calc(50% - 60px);
1917 | width: 120px;
1918 | height: 120px;
1919 | background: url("https://avatars.githubusercontent.com/u/91379432?v=4");
1920 | background-size: cover;
1921 | background-position: center center;
1922 | background-repeat: no-repeat;
1923 | border-radius: 100%;
1924 | }
1925 | .lockScreen .user:after {
1926 | content: attr(data-user);
1927 | position: absolute;
1928 | bottom: 10px;
1929 | left: -50%;
1930 | width: 200%;
1931 | height: 40px;
1932 | color: white;
1933 | text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
1934 | text-align: center;
1935 | line-height: 40px;
1936 | font-size: 20px;
1937 | }
1938 | .lockScreen input {
1939 | position: absolute;
1940 | top: calc(50% - 17px);
1941 | left: calc(50% - 100px);
1942 | width: 200px;
1943 | height: 34px;
1944 | background: rgba(255, 255, 255, 0.15);
1945 | -webkit-backdrop-filter: blur(30px);
1946 | backdrop-filter: blur(30px);
1947 | padding: 0 15px;
1948 | font-weight: 600;
1949 | border-radius: 10px;
1950 | border: none;
1951 | color: rgba(255, 255, 255, 0.35);
1952 | letter-spacing: 3px;
1953 | transition: all 0.1s ease;
1954 | }
1955 | .lockScreen input::selection {
1956 | background: rgba(255, 255, 255, 0.35) !important;
1957 | color: rgba(255, 255, 255, 0.5);
1958 | }
1959 | .lockScreen input::placeholder {
1960 | color: inherit;
1961 | font-weight: 400;
1962 | letter-spacing: 1px;
1963 | }
1964 | .lockScreen .login {
1965 | position: absolute;
1966 | top: calc(50% - 15px);
1967 | left: calc(50% + 105px);
1968 | width: 30px;
1969 | height: 30px;
1970 | text-align: center;
1971 | line-height: 32px;
1972 | font-size: 26px;
1973 | background: rgba(255, 255, 255, 0.4);
1974 | -webkit-backdrop-filter: blur(30px);
1975 | backdrop-filter: blur(30px);
1976 | color: rgba(0, 0, 0, 0.5);
1977 | border-radius: 100%;
1978 | transition: all 0.1s ease;
1979 | }
1980 | .lockScreen .login:before {
1981 | content: "";
1982 | }
1983 | .lockScreen .login.empty {
1984 | opacity: 0;
1985 | }
1986 | .lockScreen .lockScreenLogIn {
1987 | position: absolute;
1988 | top: 0;
1989 | left: 0;
1990 | width: 100%;
1991 | height: 100%;
1992 | }
1993 | .lockScreen .lockScreenLogIn.wait {
1994 | pointer-events: none !important;
1995 | }
1996 | .lockScreen .lockScreenLogIn.wait input {
1997 | background: rgba(255, 255, 255, 0.1);
1998 | color: rgba(255, 255, 255, 0.2);
1999 | }
2000 | .lockScreen .lockScreenLogIn.wait .login {
2001 | background: rgba(255, 255, 255, 0.3);
2002 | color: rgba(0, 0, 0, 0.4);
2003 | }
2004 | .lockScreen .lockScreenLogIn.wrong {
2005 | animation: shake 0.15s 2 linear;
2006 | }
2007 | .lockScreen .lockScreenLogIn.wrong:before {
2008 | content: "Wrong password";
2009 | position: absolute;
2010 | top: calc(50% + 20px);
2011 | left: calc(50% - 100px);
2012 | width: 200px;
2013 | height: 34px;
2014 | line-height: 34px;
2015 | color: rgba(255, 255, 255, 0.8);
2016 | text-align: center;
2017 | }
2018 |
2019 | @keyframes shake {
2020 | 0% {
2021 | transform: translate(10px, 0px);
2022 | }
2023 | 50% {
2024 | transform: translate(-10px, 0px);
2025 | }
2026 | 100% {
2027 | transform: translate(0px, 0px);
2028 | }
2029 | }
2030 | @keyframes shake2 {
2031 | 0% {
2032 | transform: translate(6px, 0px);
2033 | }
2034 | 50% {
2035 | transform: translate(-6px, 0px);
2036 | }
2037 | 100% {
2038 | transform: translate(0px, 0px);
2039 | }
2040 | }
2041 | .appMenu {
2042 | position: fixed;
2043 | top: 0;
2044 | left: 0;
2045 | width: 100vw;
2046 | height: 100vh;
2047 | overflow: hidden;
2048 | white-space: nowrap;
2049 | z-index: 99998;
2050 | pointer-events: none;
2051 | opacity: 0;
2052 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/bg/abstract/macOS-Big-Sur-Vector-Wave-Wallpaper-blur.jpg");
2053 | background-size: 0px 0px;
2054 | transform: scale(1.025);
2055 | transform-origin: center center;
2056 | transition: all 0.15s ease-in-out, height 0s;
2057 | }
2058 | .appMenu:before {
2059 | content: "";
2060 | position: absolute;
2061 | top: 0;
2062 | left: 0;
2063 | width: 100vw;
2064 | height: 100vh;
2065 | background: inherit;
2066 | background-position: center center;
2067 | background-size: cover;
2068 | filter: brightness(0.75) saturate(1.1);
2069 | }
2070 | .appMenu ::-webkit-scrollbar {
2071 | min-width: 5px;
2072 | width: 5px;
2073 | max-width: 5px;
2074 | min-height: 0;
2075 | height: 0;
2076 | max-height: 0;
2077 | background: none;
2078 | }
2079 | .appMenu ::-webkit-scrollbar-thumb {
2080 | background: rgba(0, 0, 0, 0.4);
2081 | cursor: default;
2082 | backface-visibility: hidden;
2083 | }
2084 | .appMenu ::-webkit-scrollbar-thumb:hover, .appMenu ::-webkit-scrollbar-thumb:active {
2085 | background: rgba(0, 0, 0, 0.6);
2086 | }
2087 | .appMenu ::-webkit-scrollbar-button {
2088 | display: none;
2089 | height: 0px;
2090 | }
2091 | .appMenu.open {
2092 | pointer-events: auto;
2093 | transform: scale(1);
2094 | opacity: 1;
2095 | }
2096 | .appMenu .closeAppsMenu {
2097 | position: absolute;
2098 | top: 0;
2099 | left: 0;
2100 | width: 100%;
2101 | height: 100%;
2102 | }
2103 | .appMenu .searchApp {
2104 | position: absolute;
2105 | top: 30px;
2106 | left: calc(50% - 150px);
2107 | width: 300px;
2108 | height: 30px;
2109 | z-index: 1;
2110 | border-radius: 10px;
2111 | overflow: hidden;
2112 | line-height: 30px;
2113 | background: rgba(255, 255, 255, 0.1);
2114 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
2115 | }
2116 | .appMenu .searchApp i {
2117 | position: absolute;
2118 | top: 0;
2119 | left: 0;
2120 | width: 40px;
2121 | height: 100%;
2122 | color: rgba(255, 255, 255, 0.8);
2123 | font-style: normal;
2124 | text-align: center;
2125 | font-size: 18px;
2126 | }
2127 | .appMenu .searchApp i:before {
2128 | content: "";
2129 | }
2130 | .appMenu .searchApp input {
2131 | position: absolute;
2132 | left: 40px;
2133 | width: calc(100% - 40px);
2134 | height: 100%;
2135 | border: none;
2136 | background: none;
2137 | padding: 0 12px 0 0;
2138 | color: rgba(255, 255, 255, 0.8);
2139 | }
2140 | .appMenu .searchApp input::placeholder {
2141 | color: rgba(255, 255, 255, 0.5);
2142 | }
2143 | .appMenu .searchApp input::selection {
2144 | background: rgba(255, 255, 255, 0.25);
2145 | color: rgba(255, 255, 255, 0.9);
2146 | }
2147 | .appMenu .page {
2148 | position: absolute;
2149 | white-space: normal;
2150 | top: 90px;
2151 | left: 50%;
2152 | transform: translateX(-50%);
2153 | width: calc(7 * 12%);
2154 | max-width: 1700px;
2155 | height: calc(100% - 180px);
2156 | overflow: auto;
2157 | display: flex;
2158 | -webkit-flex-flow: row wrap;
2159 | justify-content: flex-start;
2160 | }
2161 | .appMenu .page .sep {
2162 | position: relative;
2163 | margin: 0 auto;
2164 | }
2165 | .appMenu .page .sep:before {
2166 | content: attr(data-text);
2167 | position: relative;
2168 | display: block;
2169 | height: 30px;
2170 | line-height: 30px;
2171 | font-size: 20px;
2172 | padding: 20px 0 0 0;
2173 | color: rgba(255, 255, 255, 0.5);
2174 | }
2175 | .appMenu .page .app {
2176 | position: relative;
2177 | width: calc((100%/7)*(2/3));
2178 | margin: 0 calc(((100%/7)*(1/3))/2);
2179 | margin-bottom: 40px;
2180 | height: 125px;
2181 | }
2182 | .appMenu .page .app .icon {
2183 | position: relative;
2184 | top: 0;
2185 | left: 0;
2186 | width: 100%;
2187 | height: 100%;
2188 | background-position: center center !important;
2189 | background-size: contain !important;
2190 | background-repeat: no-repeat !important;
2191 | }
2192 | .appMenu .page .app .icon:active {
2193 | filter: brightness(0.5);
2194 | }
2195 | .appMenu .page .app .name {
2196 | position: absolute;
2197 | bottom: -15px;
2198 | left: -10%;
2199 | width: 120%;
2200 | height: 20px;
2201 | line-height: 20px;
2202 | color: #FFF;
2203 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
2204 | white-space: nowrap;
2205 | overflow: hidden;
2206 | text-overflow: ellipsis;
2207 | text-align: center;
2208 | font-size: 14px;
2209 | padding: 0 10px;
2210 | pointer-events: none;
2211 | }
2212 | .appMenu .page .app.noMatch {
2213 | width: 0;
2214 | opacity: 0;
2215 | margin: 0 0 !important;
2216 | }
2217 |
2218 | .taskbar {
2219 | position: absolute;
2220 | left: 50%;
2221 | bottom: -1px;
2222 | height: 46px;
2223 | width: auto;
2224 | -webkit-transform: translateX(-50%);
2225 | -moz-transform: translateX(-50%);
2226 | -ms-transform: translateX(-50%);
2227 | -o-transform: translateX(-50%);
2228 | transform: translateX(-50%);
2229 | border-radius: 5px 5px 0 0;
2230 | padding: 0 10px;
2231 | z-index: 99999;
2232 | display: flex;
2233 | -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(0.8);
2234 | backdrop-filter: blur(30px) saturate(1.5) brightness(0.8);
2235 | background: rgba(50, 50, 50, 0.5);
2236 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.35);
2237 | transition: 0.2s cubic-bezier(0.44, 0.14, 0.34, 0.97);
2238 | }
2239 | .taskbar.animateOnOpen .taskbarApp.open i {
2240 | animation: 0.8s bounce ease-out;
2241 | }
2242 | .taskbar .taskbarApp {
2243 | position: relative;
2244 | display: inline-flex;
2245 | width: 40px;
2246 | height: 40px;
2247 | margin: 0;
2248 | }
2249 | .taskbar .taskbarApp:active i {
2250 | filter: brightness(0.65);
2251 | }
2252 | .taskbar .taskbarApp i {
2253 | position: absolute;
2254 | bottom: 2px;
2255 | left: 0;
2256 | width: 100%;
2257 | height: calc(100% - 8px);
2258 | background-size: contain !important;
2259 | background-position: center center !important;
2260 | background-repeat: no-repeat !important;
2261 | }
2262 | .taskbar .taskbarApp.open:after {
2263 | content: "";
2264 | position: absolute;
2265 | left: calc(50% - 2px);
2266 | bottom: -4px;
2267 | width: 4px;
2268 | height: 4px;
2269 | border-radius: 100%;
2270 | background: rgba(255, 255, 255, 0.85);
2271 | }
2272 | .taskbar .sep {
2273 | position: relative;
2274 | display: inline-flex;
2275 | width: 1px;
2276 | height: 30px;
2277 | margin: 10px 5px 10px 10px;
2278 | background: rgba(255, 255, 255, 0.15);
2279 | border-radius: 15px;
2280 | }
2281 | .taskbar.hide {
2282 | display: none;
2283 | pointer-events: none;
2284 | opacity: 0;
2285 | }
2286 |
2287 | .actionbar {
2288 | position: absolute;
2289 | left: 0;
2290 | top: 0;
2291 | height: 22px;
2292 | width: 100vw;
2293 | z-index: 10000;
2294 | display: flex;
2295 | line-height: 22px;
2296 | font-size: 14px;
2297 | -webkit-backdrop-filter: blur(30px) saturate(2) brightness(0.5);
2298 | backdrop-filter: blur(30px) saturate(2) brightness(0.5);
2299 | background: rgba(50, 50, 50, 0.5);
2300 | box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.5);
2301 | }
2302 | .actionbar .rightActions {
2303 | right: 0;
2304 | }
2305 | .actionbar .leftActions {
2306 | left: 0;
2307 | }
2308 | .actionbar .rightActions, .actionbar .leftActions {
2309 | position: absolute;
2310 | display: flex;
2311 | width: auto;
2312 | height: 100%;
2313 | }
2314 | .actionbar .rightActions .item, .actionbar .leftActions .item {
2315 | position: relative;
2316 | display: inline-flex;
2317 | width: auto;
2318 | height: 100%;
2319 | margin: 0;
2320 | padding: 0 12px;
2321 | color: white;
2322 | letter-spacing: 0.5px;
2323 | }
2324 | .actionbar .rightActions .item:not(.sActionbarNotifications).active, .actionbar .leftActions .item:not(.sActionbarNotifications).active {
2325 | background: #006AFF;
2326 | }
2327 | .actionbar .rightActions .item.sActionbarNotifications:active, .actionbar .leftActions .item.sActionbarNotifications:active {
2328 | background: #006AFF;
2329 | }
2330 | .actionbar .rightActions .item.bold, .actionbar .leftActions .item.bold {
2331 | font-weight: 600;
2332 | }
2333 | .actionbar .rightActions .item[data-trigger=sPanelLogOptions], .actionbar .leftActions .item[data-trigger=sPanelLogOptions] {
2334 | margin-left: 10px;
2335 | }
2336 | .actionbar .rightActions .item[data-trigger=sPanelLogOptions]:before, .actionbar .leftActions .item[data-trigger=sPanelLogOptions]:before {
2337 | content: "";
2338 | font-size: 20px;
2339 | line-height: 24px;
2340 | }
2341 | .actionbar .rightActions .item[data-trigger=sPanelLogOptions]:after, .actionbar .leftActions .item[data-trigger=sPanelLogOptions]:after {
2342 | content: "";
2343 | position: absolute;
2344 | left: -10px;
2345 | top: 0;
2346 | width: 10px;
2347 | height: 100%;
2348 | }
2349 | .actionbar .rightActions .item[data-trigger=sPanelNotifications], .actionbar .leftActions .item[data-trigger=sPanelNotifications] {
2350 | padding-right: 20px;
2351 | }
2352 | .actionbar .rightActions .item[data-trigger=sPanelNotifications]:before, .actionbar .leftActions .item[data-trigger=sPanelNotifications]:before {
2353 | content: "";
2354 | }
2355 | .actionbar .rightActions .item[data-trigger=sPanelNotifications].hasNotifications:after, .actionbar .leftActions .item[data-trigger=sPanelNotifications].hasNotifications:after {
2356 | content: "";
2357 | position: absolute;
2358 | bottom: 50%;
2359 | right: 16px;
2360 | width: 8px;
2361 | height: 8px;
2362 | border-radius: 100%;
2363 | background: #E53939;
2364 | }
2365 | .actionbar .rightActions .item[data-trigger=sPanelBluetooth]:before, .actionbar .leftActions .item[data-trigger=sPanelBluetooth]:before {
2366 | content: "";
2367 | font-size: 16px;
2368 | line-height: 24px;
2369 | }
2370 | .actionbar .rightActions .item[data-trigger=sPanelBluetooth]:after, .actionbar .leftActions .item[data-trigger=sPanelBluetooth]:after {
2371 | content: "";
2372 | position: absolute;
2373 | top: 50%;
2374 | left: 50%;
2375 | width: 3px;
2376 | height: 3px;
2377 | border-radius: 100%;
2378 | transform: translateY(-50%) translateX(-50%);
2379 | background: #FFF;
2380 | opacity: 0;
2381 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 5px 0 0 0 white, 5px 0 0 1px rgba(0, 0, 0, 0.25), -5px 0 0 0 white, -5px 0 0 1px rgba(0, 0, 0, 0.25);
2382 | }
2383 | .actionbar .rightActions .item[data-trigger=sPanelBluetooth][data-connected=true]:before, .actionbar .leftActions .item[data-trigger=sPanelBluetooth][data-connected=true]:before {
2384 | opacity: 0.75;
2385 | }
2386 | .actionbar .rightActions .item[data-trigger=sPanelBluetooth][data-connected=true]:after, .actionbar .leftActions .item[data-trigger=sPanelBluetooth][data-connected=true]:after {
2387 | opacity: 1;
2388 | }
2389 | .actionbar .rightActions .item[data-trigger=sPanelPower], .actionbar .leftActions .item[data-trigger=sPanelPower] {
2390 | padding-right: 36px;
2391 | }
2392 | .actionbar .rightActions .item[data-trigger=sPanelPower][sPowerShowPercentage=true], .actionbar .leftActions .item[data-trigger=sPanelPower][sPowerShowPercentage=true] {
2393 | padding-right: 46px;
2394 | }
2395 | .actionbar .rightActions .item[data-trigger=sPanelPower][sPowerShowPercentage=true]:before, .actionbar .leftActions .item[data-trigger=sPanelPower][sPowerShowPercentage=true]:before {
2396 | content: attr(data-percentage) "%";
2397 | }
2398 | .actionbar .rightActions .item[data-trigger=sPanelPower] i, .actionbar .leftActions .item[data-trigger=sPanelPower] i {
2399 | position: absolute;
2400 | top: calc(50% - 6px);
2401 | right: 12px;
2402 | width: 26px;
2403 | height: 12px;
2404 | border-radius: 3px;
2405 | box-shadow: inset 0 0 0 1px white;
2406 | }
2407 | .actionbar .rightActions .item[data-trigger=sPanelPower] i:after, .actionbar .leftActions .item[data-trigger=sPanelPower] i:after {
2408 | content: "";
2409 | position: absolute;
2410 | top: calc(50% - 4px);
2411 | left: 2px;
2412 | width: 70%;
2413 | max-width: calc(100% - 4px);
2414 | height: 8px;
2415 | background: white;
2416 | border-radius: 1px;
2417 | }
2418 | .actionbar .rightActions .item[data-trigger=sPanelPower] i:before, .actionbar .leftActions .item[data-trigger=sPanelPower] i:before {
2419 | content: "";
2420 | position: absolute;
2421 | top: calc(50% - 2px);
2422 | right: -3px;
2423 | width: 2px;
2424 | max-width: calc(100% - 4px);
2425 | height: 4px;
2426 | background: white;
2427 | border-radius: 0 100% 100% 0;
2428 | }
2429 | .actionbar.hide {
2430 | top: -26px;
2431 | pointer-events: none;
2432 | opacity: 0;
2433 | box-shadow: none;
2434 | }
2435 |
2436 | .sPanel {
2437 | position: absolute;
2438 | width: auto;
2439 | min-width: 10px;
2440 | height: auto;
2441 | min-height: 10px;
2442 | max-height: 90vh;
2443 | overflow: auto;
2444 | color: white;
2445 | font-size: 15px;
2446 | letter-spacing: 0.5px;
2447 | -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(0.8);
2448 | backdrop-filter: blur(30px) saturate(1.5) brightness(0.8);
2449 | background: rgba(50, 50, 50, 0.5);
2450 | box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.5);
2451 | opacity: 0;
2452 | pointer-events: none;
2453 | z-index: 1000;
2454 | }
2455 | .sPanel.active {
2456 | opacity: 1;
2457 | pointer-events: all;
2458 | }
2459 | .sPanel.disabled, .sPanel .menu .submenu.disabled {
2460 | opacity: 0 !important;
2461 | pointer-events: none !important;
2462 | }
2463 | .sPanel.sActionbarPanel {
2464 | top: 22px;
2465 | min-width: 200px;
2466 | border-top-left-radius: 0px !important;
2467 | border-top-right-radius: 0px !important;
2468 | }
2469 | .sPanel.round, .sPanel .menu .submenu.round {
2470 | border-radius: 10px;
2471 | }
2472 | .sPanel.round[data-roundCornerExceptionTopLeft="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionTopLeft="1"] {
2473 | border-top-left-radius: 0px !important;
2474 | }
2475 | .sPanel.round[data-roundCornerExceptionTopRight="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionTopRight="1"] {
2476 | border-top-right-radius: 0px !important;
2477 | }
2478 | .sPanel.round[data-roundCornerExceptionBottomLeft="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionBottomLeft="1"] {
2479 | border-bottom-left-radius: 0px !important;
2480 | }
2481 | .sPanel.round[data-roundCornerExceptionBottomRight="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionBottomRight="1"] {
2482 | border-bottom-right-radius: 0px !important;
2483 | }
2484 | .sPanel.round[data-roundCornerExceptionTop="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionTop="1"] {
2485 | border-top-left-radius: 0px !important;
2486 | border-top-right-radius: 0px !important;
2487 | }
2488 | .sPanel.round[data-roundCornerExceptionRight="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionRight="1"] {
2489 | border-top-right-radius: 0px !important;
2490 | border-bottom-right-radius: 0px !important;
2491 | }
2492 | .sPanel.round[data-roundCornerExceptionBottom="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionBottom="1"] {
2493 | border-bottom-left-radius: 0px !important;
2494 | border-bottom-right-radius: 0px !important;
2495 | }
2496 | .sPanel.round[data-roundCornerExceptionLeft="1"], .sPanel .menu .submenu.round[data-roundCornerExceptionLeft="1"] {
2497 | border-top-left-radius: 0px !important;
2498 | border-bottom-left-radius: 0px !important;
2499 | }
2500 | .sPanel.default {
2501 | padding: 10px 16px;
2502 | }
2503 | .sPanel.default .clickable:before, .sPanel.default .menu:before, .sPanel.default .input:before {
2504 | width: calc(100% + (2 * 10px));
2505 | left: -10px;
2506 | }
2507 | .sPanel.scrollable {
2508 | overflow: auto !important;
2509 | overflow-x: hidden;
2510 | }
2511 | .sPanel.scrollable::-webkit-scrollbar {
2512 | min-width: 5px;
2513 | width: 5px;
2514 | max-width: 5px;
2515 | min-height: 0px;
2516 | height: 0px;
2517 | max-height: 0px;
2518 | background-color: none;
2519 | }
2520 | .sPanel.scrollable::-webkit-scrollbar-thumb {
2521 | background-color: rgba(255, 255, 255, 0.25);
2522 | border: none;
2523 | border-radius: 0px;
2524 | backface-visibility: hidden;
2525 | }
2526 | .sPanel.scrollable::-webkit-scrollbar-thumb:hover, .sPanel.scrollable::-webkit-scrollbar-thumb:active {
2527 | background: rgba(255, 255, 255, 0.4);
2528 | }
2529 | .sPanel.scrollable::-webkit-scrollbar-button {
2530 | display: none;
2531 | height: 0px;
2532 | }
2533 | .sPanel.scrollable::-webkit-resizer, .sPanel.scrollable ::-webkit-scrollbar-corner {
2534 | background: none;
2535 | }
2536 | .sPanel [sSwitchVisibility=enabled] {
2537 | display: block;
2538 | pointer-events: all;
2539 | }
2540 | .sPanel [sSwitchVisibility=disabled] {
2541 | display: none;
2542 | pointer-events: none;
2543 | }
2544 | .sPanel.sidepanel {
2545 | top: 22px;
2546 | right: -350px;
2547 | height: calc(100vh - 22px);
2548 | border-radius: 0 !important;
2549 | opacity: 1 !important;
2550 | transition: right 0.2s cubic-bezier(0.5, 0.1, 0.5, 1);
2551 | }
2552 | .sPanel.sidepanel.active {
2553 | right: 0px;
2554 | }
2555 | .sPanel.sidepanel .switch {
2556 | position: relative;
2557 | height: 52px;
2558 | display: block;
2559 | box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
2560 | }
2561 | .sPanel.sidepanel .switch .select {
2562 | position: absolute;
2563 | top: calc(50% - 13px);
2564 | left: calc(50% - 120px);
2565 | width: 240px;
2566 | height: 26px;
2567 | background: rgba(255, 255, 255, 0.1);
2568 | border-radius: 10px;
2569 | overflow: hidden;
2570 | }
2571 | .sPanel.sidepanel .switch .select .option {
2572 | position: absolute;
2573 | top: 0;
2574 | left: 0;
2575 | width: 50%;
2576 | height: 100%;
2577 | line-height: 26px;
2578 | font-size: 14px;
2579 | text-align: center;
2580 | color: rgba(255, 255, 255, 0.5);
2581 | border-radius: 10px;
2582 | }
2583 | .sPanel.sidepanel .switch .select .option.active, .sPanel.sidepanel .switch .select .option.active:active {
2584 | background: rgba(255, 255, 255, 0.2);
2585 | color: white;
2586 | }
2587 | .sPanel.sidepanel .switch .select .option:last-child {
2588 | left: 50%;
2589 | }
2590 | .sPanel .clickable, .sPanel .menu {
2591 | position: relative;
2592 | z-index: 0;
2593 | }
2594 | .sPanel .clickable:before, .sPanel .menu:before {
2595 | content: "";
2596 | position: absolute;
2597 | top: 0;
2598 | left: 0;
2599 | height: 100%;
2600 | border-radius: 8px;
2601 | z-index: -1;
2602 | }
2603 | .sPanel .clickable:hover:before, .sPanel .menu:hover:before {
2604 | background: rgba(255, 255, 255, 0.15);
2605 | }
2606 | .sPanel .clickable:active:before, .sPanel .menu:active:before {
2607 | background: #006AFF;
2608 | }
2609 | .sPanel .input {
2610 | position: relative;
2611 | z-index: 0;
2612 | padding: 6px 0 !important;
2613 | margin-bottom: 4px;
2614 | content: "";
2615 | position: absolute;
2616 | }
2617 | .sPanel .input.active:before {
2618 | background: red;
2619 | }
2620 | .sPanel .input:before {
2621 | top: 0;
2622 | left: -15px !important;
2623 | width: calc(100% + (2 * 15px)) !important;
2624 | height: 100%;
2625 | z-index: -1;
2626 | background: rgba(255, 255, 255, 0.05);
2627 | }
2628 | .sPanel .input input {
2629 | border: none;
2630 | margin-left: 10px;
2631 | border-radius: 5px;
2632 | padding: 4px 10px;
2633 | background: rgba(255, 255, 255, 0.075);
2634 | color: #FFF;
2635 | min-width: 250px;
2636 | }
2637 | .sPanel .checkable {
2638 | position: relative;
2639 | }
2640 | .sPanel .checkable:after {
2641 | content: "";
2642 | position: absolute;
2643 | top: 0;
2644 | left: -20px;
2645 | width: 20px;
2646 | height: 20px;
2647 | line-height: 24px;
2648 | font-size: 24px;
2649 | text-align: center;
2650 | }
2651 | .sPanel .checkable[data-checked=true]:after {
2652 | content: "";
2653 | transform-origin: center center;
2654 | transform: scale(0.5);
2655 | }
2656 | .sPanel .info {
2657 | position: relative;
2658 | padding: 5px 0 !important;
2659 | border-radius: 5px;
2660 | }
2661 | .sPanel .info.clear, .sPanel .info.disabled {
2662 | opacity: 0.45;
2663 | }
2664 | .sPanel .info.disabled {
2665 | pointer-events: none;
2666 | }
2667 | .sPanel .info.block {
2668 | display: block;
2669 | }
2670 | .sPanel .info.active {
2671 | font-weight: 600;
2672 | }
2673 | .sPanel .info[data-before]:before {
2674 | content: attr(data-before);
2675 | }
2676 | .sPanel .info[data-beforeAppend]:before {
2677 | content: attr(data-before) attr(data-beforeAppend);
2678 | }
2679 | .sPanel .info[data-after]:after {
2680 | content: attr(data-after);
2681 | }
2682 | .sPanel .info[data-afterAppend]:after {
2683 | content: attr(data-after) attr(data-afterAppend);
2684 | }
2685 | .sPanel .info.app {
2686 | opacity: 1;
2687 | padding: 3px 0;
2688 | padding-left: 26px;
2689 | }
2690 | .sPanel .info.app i {
2691 | position: absolute;
2692 | left: 0;
2693 | vertical-align: middle;
2694 | width: 18px;
2695 | height: 18px;
2696 | background-size: contain !important;
2697 | }
2698 | .sPanel .info.menu {
2699 | padding-right: 20px;
2700 | }
2701 | .sPanel .info.menu:after {
2702 | content: "";
2703 | position: absolute;
2704 | top: 0;
2705 | right: -10px;
2706 | width: 20px;
2707 | height: 100%;
2708 | text-align: center;
2709 | line-height: 150%;
2710 | }
2711 | .sPanel .info.menu .submenu {
2712 | display: none;
2713 | pointer-events: none;
2714 | }
2715 | .sPanel .sep {
2716 | position: relative;
2717 | width: calc(100% + 40px);
2718 | height: 1px;
2719 | margin: 5px -20px;
2720 | background: rgba(255, 255, 255, 0.15);
2721 | }
2722 |
2723 | .sPanelTest {
2724 | top: 50px;
2725 | left: 50px;
2726 | width: auto;
2727 | max-width: 25vw;
2728 | height: auto;
2729 | padding: 20px;
2730 | opacity: 1;
2731 | pointer-events: all;
2732 | }
2733 |
2734 | .sPanelNotifications {
2735 | max-height: 100vh;
2736 | }
2737 | .sPanelNotifications .date {
2738 | position: relative;
2739 | display: block;
2740 | margin: 51px;
2741 | color: #FFF;
2742 | }
2743 | .sPanelNotifications .date .today {
2744 | font-size: 30px;
2745 | font-weight: 100;
2746 | margin-bottom: 15px;
2747 | display: block;
2748 | }
2749 | .sPanelNotifications .date .today .ordinal {
2750 | display: inline-block;
2751 | width: 20px;
2752 | line-height: 22px;
2753 | font-size: 14px;
2754 | vertical-align: top;
2755 | margin-left: 2px;
2756 | }
2757 | .sPanelNotifications .date .weather {
2758 | position: relative;
2759 | font-size: 14px;
2760 | }
2761 | .sPanelNotifications .date .weather .icon {
2762 | position: absolute;
2763 | }
2764 | .sPanelNotifications .date .weather .icon[data-icon=cloudly] {
2765 | top: 10px;
2766 | left: -31px;
2767 | width: 16px;
2768 | height: 6px;
2769 | background: #FFF;
2770 | border-radius: 10px 0 0 10px;
2771 | }
2772 | .sPanelNotifications .date .weather .icon[data-icon=cloudly]:before {
2773 | content: "";
2774 | position: absolute;
2775 | bottom: 0;
2776 | left: 12px;
2777 | width: 10px;
2778 | height: 10px;
2779 | background: #FFF;
2780 | border-radius: 12px 12px 12px 0;
2781 | }
2782 | .sPanelNotifications .date .weather .icon[data-icon=cloudly]:after {
2783 | content: "";
2784 | position: absolute;
2785 | bottom: 0px;
2786 | left: 3px;
2787 | width: 14px;
2788 | height: 14px;
2789 | background: #FFF;
2790 | border-radius: 12px;
2791 | }
2792 | .sPanelNotifications [sSwitchId=notifications] {
2793 | padding-top: 15px;
2794 | }
2795 | .sPanelNotifications [sSwitchId=notifications]:before {
2796 | content: attr(data-ifEmpty);
2797 | position: absolute;
2798 | top: 0;
2799 | left: 0;
2800 | width: 100%;
2801 | height: 100%;
2802 | text-align: center;
2803 | line-height: calc(100vh - 22px);
2804 | color: rgba(255, 255, 255, 0.25);
2805 | pointer-events: none;
2806 | opacity: 0;
2807 | }
2808 | .sPanelNotifications [sSwitchId=notifications].empty:before {
2809 | opacity: 1;
2810 | }
2811 | .sPanelNotifications .item, .sPanelNotifications .widget {
2812 | position: relative;
2813 | display: block;
2814 | padding: 40px 10px 10px 10px;
2815 | margin: 0 15px 15px 15px;
2816 | background: rgba(255, 255, 255, 0.1);
2817 | box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
2818 | border-radius: 10px;
2819 | color: rgba(255, 255, 255, 0.8);
2820 | text-shadow: none;
2821 | overflow: hidden;
2822 | cursor: default;
2823 | text-overflow: ellipsis;
2824 | }
2825 | .sPanelNotifications .item.close, .sPanelNotifications .widget.close {
2826 | animation: 0.3s closeNotificationItem;
2827 | height: 0;
2828 | padding: 0;
2829 | margin: 0;
2830 | pointer-events: none;
2831 | }
2832 | .sPanelNotifications .item > .name, .sPanelNotifications .widget > .name {
2833 | position: absolute;
2834 | top: 0px;
2835 | left: 0px;
2836 | width: 100%;
2837 | height: 40px;
2838 | text-indent: 36px;
2839 | line-height: 40px;
2840 | color: white;
2841 | }
2842 | .sPanelNotifications .item > .name .icon, .sPanelNotifications .widget > .name .icon {
2843 | position: absolute;
2844 | top: calc(50% - 9px);
2845 | left: 9px;
2846 | width: 18px;
2847 | height: 18px;
2848 | background-size: contain !important;
2849 | background-position: center center !important;
2850 | background-repeat: no-repeat !important;
2851 | }
2852 | .sPanelNotifications .item > .name .updateTime, .sPanelNotifications .widget > .name .updateTime {
2853 | position: relative;
2854 | float: right;
2855 | padding: 0 10px 0 0;
2856 | font-size: 14px;
2857 | font-weight: 400;
2858 | opacity: 0.35;
2859 | transition: all 0.1s cubic-bezier(0.63, 0.92, 0.68, 0.98);
2860 | }
2861 | .sPanelNotifications .item > .name .updateTime:before, .sPanelNotifications .widget > .name .updateTime:before {
2862 | content: attr(data-time);
2863 | }
2864 | .sPanelNotifications .item > b, .sPanelNotifications .widget > b {
2865 | color: rgba(255, 255, 255, 0.95);
2866 | }
2867 | .sPanelNotifications .item > .dot, .sPanelNotifications .widget > .dot {
2868 | position: relative;
2869 | padding: 0 8px;
2870 | }
2871 | .sPanelNotifications .item > .dot::before, .sPanelNotifications .widget > .dot::before {
2872 | content: "";
2873 | position: absolute;
2874 | width: 4px;
2875 | height: 4px;
2876 | top: calc(50% - 2px);
2877 | left: calc(50% - 2px);
2878 | border-radius: 100%;
2879 | background: rgba(255, 255, 255, 0.95);
2880 | }
2881 |
2882 | iframe::-webkit-scrollbar {
2883 | min-width: 20px;
2884 | width: 20px;
2885 | max-width: 20px;
2886 | min-height: 20px;
2887 | height: 20px;
2888 | max-height: 20px;
2889 | background-color: #fafafa;
2890 | }
2891 | iframe::-webkit-scrollbar-thumb {
2892 | background: #cacaca;
2893 | border: solid 7px #fafafa;
2894 | border-radius: 100px;
2895 | backface-visibility: hidden;
2896 | }
2897 | iframe::-webkit-scrollbar-thumb:hover {
2898 | background: #bababa;
2899 | }
2900 | iframe::-webkit-scrollbar-thumb:active {
2901 | background: #acacac;
2902 | }
2903 | iframe::-webkit-scrollbar-button {
2904 | display: none;
2905 | height: 0px;
2906 | }
2907 | iframe::-webkit-resizer, iframe ::-webkit-scrollbar-corner {
2908 | background: #fafafa;
2909 | }
2910 |
2911 | .full-textarea {
2912 | -webkit-appearance: none;
2913 | -moz-appearance: none;
2914 | appearance: none;
2915 | resize: none;
2916 | position: absolute;
2917 | z-index: 0;
2918 | top: 0;
2919 | left: 0;
2920 | border: none;
2921 | padding: 20px;
2922 | width: 100%;
2923 | height: 100%;
2924 | margin: 0;
2925 | font-size: 16px;
2926 | }
2927 |
2928 | /*.full-textarea::selection{
2929 | background: #EC407A;
2930 | color: #FFF;
2931 | }*/
2932 | .video-js .vjs-big-play-button {
2933 | background: rgba(255, 255, 255, 0.9);
2934 | color: rgba(0, 0, 0, 0.9);
2935 | mix-blend-mode: lighten !important;
2936 | }
2937 |
2938 | .context {
2939 | font-size: 16px;
2940 | position: absolute;
2941 | width: auto;
2942 | min-width: 160px;
2943 | height: auto;
2944 | border-radius: 5px;
2945 | box-shadow: 0 20px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.5);
2946 | color: white;
2947 | font-weight: 600;
2948 | font-size: 14px;
2949 | padding: 5px 0;
2950 | font-weight: 400;
2951 | -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(1.2);
2952 | backdrop-filter: blur(30px) saturate(1.5) brightness(1.2);
2953 | background: rgba(30, 30, 31, 0.5);
2954 | z-index: 99999;
2955 | }
2956 | .context .item, .context .text {
2957 | height: 22px;
2958 | line-height: 22px;
2959 | text-overflow: ellipsis;
2960 | white-space: nowrap;
2961 | padding: 0 10px;
2962 | }
2963 | .context .item i, .context .text i {
2964 | float: right;
2965 | padding-left: 20px;
2966 | opacity: 0.75;
2967 | }
2968 | .context .item.center, .context .text.center {
2969 | text-align: center;
2970 | }
2971 | .context .icon {
2972 | position: relative;
2973 | height: 80px;
2974 | width: 100%;
2975 | margin: 10px 0 35px 0;
2976 | background-size: contain !important;
2977 | background-repeat: no-repeat !important;
2978 | background-position: center center !important;
2979 | }
2980 | .context .icon[data-type=f] {
2981 | background: url(https://bit.ly/2m8TXOf);
2982 | }
2983 | .context .icon[data-type=text] {
2984 | background: url(https://bit.ly/33YyJD2);
2985 | }
2986 | .context .icon[data-type=xlsx] {
2987 | background: url(https://bit.ly/2JX15qR);
2988 | }
2989 | .context .icon:after {
2990 | content: attr(data-name);
2991 | position: absolute;
2992 | bottom: -30px;
2993 | left: 0;
2994 | width: 100%;
2995 | height: 20px;
2996 | line-height: 20px;
2997 | white-space: nowrap;
2998 | overflow: hidden;
2999 | text-overflow: ellipsis;
3000 | text-align: center;
3001 | font-size: 14px;
3002 | padding: 0 10px;
3003 | }
3004 | .context .item:hover {
3005 | background-color: #006AFF;
3006 | color: rgba(255, 255, 255, 0.9);
3007 | }
3008 | .context .item.warning:hover {
3009 | background-color: #FA3A4D;
3010 | color: rgba(255, 255, 255, 0.9);
3011 | }
3012 | .context .more:before {
3013 | content: "";
3014 | margin-left: 10px;
3015 | float: right;
3016 | }
3017 | .context .sep {
3018 | height: 1px;
3019 | border-top: 1px solid rgba(255, 255, 255, 0.075);
3020 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
3021 | width: calc(100% - 2px);
3022 | margin: 4px 1px;
3023 | pointer-events: none;
3024 | }
3025 |
3026 | /* CONSOLE */
3027 | .window--terminal .window__body .window__main {
3028 | line-height: 24px;
3029 | color: white;
3030 | user-select: text;
3031 | word-wrap: break-word;
3032 | overflow-x: hidden;
3033 | }
3034 | .window--terminal .window__body .window__main ::-webkit-scrollbar {
3035 | min-width: 10px;
3036 | width: 10px;
3037 | max-width: 10px;
3038 | min-height: 10px;
3039 | height: 10px;
3040 | max-height: 10px;
3041 | background: none;
3042 | }
3043 | .window--terminal .window__body .window__main ::-webkit-scrollbar-thumb {
3044 | background: #cbcbcb;
3045 | cursor: default;
3046 | backface-visibility: hidden;
3047 | border-radius: 20px;
3048 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3049 | }
3050 | .window--terminal .window__body .window__main ::-webkit-scrollbar-thumb:hover {
3051 | background: #bababa;
3052 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3053 | }
3054 | .window--terminal .window__body .window__main ::-webkit-scrollbar-thumb:active {
3055 | background: #aaa;
3056 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3057 | }
3058 | .window--terminal .window__body .window__main ::-webkit-scrollbar-button {
3059 | display: none;
3060 | height: 0px;
3061 | }
3062 |
3063 | .console-input {
3064 | background: none;
3065 | border: none;
3066 | outline: none;
3067 | margin: 0;
3068 | padding: 0;
3069 | -webkit-appearance: none;
3070 | -moz-appearance: none;
3071 | appearance: none;
3072 | font-family: inherit;
3073 | width: 100%;
3074 | color: inherit;
3075 | font-weight: inherit;
3076 | overflow: hidden;
3077 | word-spacing: 4px;
3078 | }
3079 |
3080 | .output-text,
3081 | .output-cmd {
3082 | display: block;
3083 | }
3084 |
3085 | .output-cmd {
3086 | word-spacing: 4px;
3087 | }
3088 |
3089 | .output-text {
3090 | color: rgba(255, 255, 255, 0.5);
3091 | }
3092 |
3093 | .output-text li {
3094 | padding-left: 20px;
3095 | list-style: none;
3096 | color: #ddd;
3097 | }
3098 |
3099 | .output-text b {
3100 | color: #444;
3101 | }
3102 |
3103 | .console-prompt-box {
3104 | position: relative;
3105 | width: 100%;
3106 | height: 100%;
3107 | }
3108 |
3109 | .err, .output-text .err b, .output-text .err li {
3110 | color: #F24848;
3111 | }
3112 |
3113 | .icon {
3114 | background-repeat: no-repeat !important;
3115 | }
3116 | .icon[data-size="16"] {
3117 | width: 16px;
3118 | height: 16px;
3119 | }
3120 | .icon[data-size="32"] {
3121 | width: 32px;
3122 | height: 32px;
3123 | }
3124 | .icon[data-size="64"] {
3125 | width: 64px;
3126 | height: 64px;
3127 | }
3128 | .icon[data-size="128"] {
3129 | width: 128px;
3130 | height: 128px;
3131 | }
3132 | .icon[data-display=inline-block] {
3133 | display: inline-block;
3134 | }
3135 | .icon[data-icon="os folder"] {
3136 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/files/folder.png") !important;
3137 | }
3138 | .icon[data-icon=finder] {
3139 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/finder.png") !important;
3140 | }
3141 | .icon[data-icon=launchpad] {
3142 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/launchpad.png") !important;
3143 | }
3144 | .icon[data-icon=preferences] {
3145 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/systempreferences.png") !important;
3146 | }
3147 | .icon[data-icon=messages] {
3148 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/messages.png") !important;
3149 | }
3150 | .icon[data-icon=safari] {
3151 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/safari.png") !important;
3152 | }
3153 | .icon[data-icon=podcast] {
3154 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/podcasts.png") !important;
3155 | }
3156 | .icon[data-icon=reminders] {
3157 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/reminders.png") !important;
3158 | }
3159 | .icon[data-icon=calendar] {
3160 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/calendar.png") !important;
3161 | }
3162 | .icon[data-icon=apple_mail] {
3163 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/system/icons/mail.png") !important;
3164 | }
3165 | .icon[data-icon=chrome] {
3166 | background: url(https://bit.ly/2Qj9Zmg) !important;
3167 | }
3168 | .icon[data-icon=drive] {
3169 | background: url(https://bit.ly/2M2LqJq) !important;
3170 | }
3171 | .icon[data-icon=adobe] {
3172 | background: url(https://bit.ly/2QmJnhJ) !important;
3173 | }
3174 | .icon[data-icon="adobe ae"] {
3175 | background: url(https://bit.ly/2Hz4FWU) !important;
3176 | }
3177 | .icon[data-icon="adobe ps"] {
3178 | background: url(https://bit.ly/2VJP1f0) !important;
3179 | }
3180 | .icon[data-icon="adobe id"] {
3181 | background: url(https://bit.ly/2HwDKL0) !important;
3182 | }
3183 | .icon[data-icon="adobe lr"] {
3184 | background: url(https://bit.ly/2Jy2Ewd) !important;
3185 | }
3186 | .icon[data-icon=outlook] {
3187 | background: url(https://bit.ly/37YY8yD) !important;
3188 | }
3189 | .icon[data-icon=vscode] {
3190 | background: url(https://bit.ly/2lWXorv) !important;
3191 | }
3192 | .icon[data-icon=word] {
3193 | background: url(https://bit.ly/2vZeSIF) !important;
3194 | }
3195 | .icon[data-icon=excel] {
3196 | background: url(https://bit.ly/2w1sdAc) !important;
3197 | }
3198 | .icon[data-icon="power point"] {
3199 | background: url(https://bit.ly/32rNtLO) !important;
3200 | }
3201 | .icon[data-icon=onenote] {
3202 | background: url(https://bit.ly/3c322K9) !important;
3203 | }
3204 | .icon[data-icon=console] {
3205 | background: url(https://bit.ly/2JwVZ5n) !important;
3206 | }
3207 | .icon[data-icon=whatsapp] {
3208 | background: url(https://bit.ly/2K105Co) !important;
3209 | }
3210 | .icon[data-icon=instagram] {
3211 | background: url(https://bit.ly/30EYpEw) !important;
3212 | }
3213 | .icon[data-icon="vlc player"] {
3214 | background: url(https://bit.ly/2VKPHRa) !important;
3215 | }
3216 | .icon[data-icon=spotify] {
3217 | background: url(https://bit.ly/2VEdT81) !important;
3218 | }
3219 | .icon[data-icon=slack] {
3220 | background: url(https://bit.ly/2Er8AmD) !important;
3221 | }
3222 | .icon[data-icon="davinci resolve"] {
3223 | background: url(https://bit.ly/35ygeXY) !important;
3224 | }
3225 | .icon[data-icon=discord] {
3226 | background: url(https://bit.ly/30y4IJO) !important;
3227 | }
3228 | .icon[data-icon=comet] {
3229 | background: url(https://bit.ly/2XP6Puo) !important;
3230 | }
3231 | .icon[data-icon=user] {
3232 | background: url("https://raw.githubusercontent.com/aboredvaro/codepen_resources/main/macOS/img/user/pic/1.png") !important;
3233 | }
3234 |
3235 | @keyframes bounce {
3236 | 0%, 40%, 70%, 100% {
3237 | transform: translateY(0px);
3238 | box-shadow: none;
3239 | }
3240 | 20% {
3241 | transform: translateY(-50px);
3242 | box-shadow: 0 50px 15px 0 rgba(0, 0, 0, 0.25);
3243 | }
3244 | 60% {
3245 | transform: translateY(-25px);
3246 | box-shadow: 0 25px 15px 0 rgba(0, 0, 0, 0.125);
3247 | }
3248 | 90% {
3249 | transform: translateY(-10px);
3250 | box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.075);
3251 | }
3252 | }
3253 | @keyframes bounceScale {
3254 | 0%, 40%, 70%, 100% {
3255 | transform: translateY(0px);
3256 | box-shadow: none;
3257 | }
3258 | 20% {
3259 | transform: translateY(-50px) scale(2.15);
3260 | box-shadow: 0 50px 15px 0 rgba(0, 0, 0, 0.25);
3261 | }
3262 | 60% {
3263 | transform: translateY(-25px) scale(1.2);
3264 | box-shadow: 0 25px 15px 0 rgba(0, 0, 0, 0.125);
3265 | }
3266 | 90% {
3267 | transform: translateY(-10px) scale(1.1);
3268 | box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.075);
3269 | }
3270 | }
3271 | @keyframes closeNotificationItem {
3272 | 0% {
3273 | transform: translateX(0px);
3274 | height: auto;
3275 | padding: 40px 10px 10px 10px;
3276 | margin: 0 15px 15px 15px;
3277 | }
3278 | 50% {
3279 | transform: translateX(150px);
3280 | height: auto;
3281 | padding: 40px 10px 10px 10px;
3282 | margin: 0 15px 15px 15px;
3283 | }
3284 | 100% {
3285 | transform: translateX(150px);
3286 | height: 0px;
3287 | padding: 0px;
3288 | margin: 0px;
3289 | opacity: 0;
3290 | }
3291 | }
3292 | .sPanelNotifications .widget.reminders ul {
3293 | list-style: none;
3294 | margin: 10px;
3295 | color: rgba(255, 255, 255, 0.9);
3296 | }
3297 | .sPanelNotifications .widget.reminders ul li {
3298 | position: relative;
3299 | padding: 12px 0 12px 30px;
3300 | margin-bottom: 1px;
3301 | }
3302 | .sPanelNotifications .widget.reminders ul li .canCheck {
3303 | position: absolute;
3304 | top: calc(50% - 10px);
3305 | left: 0;
3306 | height: 20px;
3307 | width: 20px;
3308 | border-radius: 100%;
3309 | box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
3310 | }
3311 | .sPanelNotifications .widget.reminders ul li:after {
3312 | content: "";
3313 | position: absolute;
3314 | bottom: -1px;
3315 | left: 0;
3316 | width: 100%;
3317 | height: 1px;
3318 | background: rgba(255, 255, 255, 0.15);
3319 | }
3320 | .sPanelNotifications .widget.reminders ul li:last-child {
3321 | margin-bottom: 0;
3322 | }
3323 | .sPanelNotifications .widget.reminders ul li:last-child:after {
3324 | background: none;
3325 | }
3326 | .sPanelNotifications .widget.miniPlayer .z-index {
3327 | position: relative;
3328 | z-index: 1;
3329 | }
3330 | .sPanelNotifications .widget.miniPlayer .cover {
3331 | position: relative;
3332 | width: 50px;
3333 | height: 50px;
3334 | margin: 10px;
3335 | border-radius: 5px;
3336 | background-size: contain !important;
3337 | background-position: center center !important;
3338 | background-repeat: no-repeat !important;
3339 | transform-origin: center center;
3340 | transition: 0.1s ease-in-out;
3341 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
3342 | }
3343 | .sPanelNotifications .widget.miniPlayer .cover:after {
3344 | content: "";
3345 | position: absolute;
3346 | top: 5px;
3347 | left: 5px;
3348 | width: calc(100% - 10px);
3349 | height: 100%;
3350 | background-image: inherit;
3351 | background-size: inherit;
3352 | background-position: inherit;
3353 | background-repeat: inherit;
3354 | filter: blur(25px) saturate(1.5);
3355 | opacity: 0.5;
3356 | z-index: -1;
3357 | }
3358 | .sPanelNotifications .widget.miniPlayer > .title {
3359 | position: absolute;
3360 | top: 55px;
3361 | left: 85px;
3362 | width: calc(100% - 105px);
3363 | height: 40px;
3364 | overflow: hidden;
3365 | }
3366 | .sPanelNotifications .widget.miniPlayer > .title:before, .sPanelNotifications .widget.miniPlayer > .title:after {
3367 | position: absolute;
3368 | left: 0;
3369 | width: 100%;
3370 | height: 20px;
3371 | line-height: 20px;
3372 | overflow: hidden;
3373 | word-break: break-all;
3374 | text-overflow: ellipsis;
3375 | }
3376 | .sPanelNotifications .widget.miniPlayer > .title:before {
3377 | content: attr(data-title);
3378 | top: 0;
3379 | font-weight: 600;
3380 | color: rgba(255, 255, 255, 0.9);
3381 | text-overflow: ellipsis;
3382 | overflow: hidden;
3383 | white-space: nowrap;
3384 | }
3385 | .sPanelNotifications .widget.miniPlayer > .title:after {
3386 | content: attr(data-author);
3387 | top: 20px;
3388 | text-overflow: ellipsis;
3389 | overflow: hidden;
3390 | white-space: nowrap;
3391 | }
3392 | .sPanelNotifications .widget.miniPlayer > .controls {
3393 | position: relative;
3394 | left: 0;
3395 | width: 100%;
3396 | height: 70px;
3397 | overflow: hidden;
3398 | text-align: center;
3399 | color: rgba(255, 255, 255, 0.9);
3400 | padding-top: 30px;
3401 | z-index: 1;
3402 | }
3403 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav {
3404 | position: absolute;
3405 | left: 10px;
3406 | top: 6px;
3407 | width: calc(100% - 20px);
3408 | height: 8px;
3409 | }
3410 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav:before {
3411 | content: "";
3412 | position: absolute;
3413 | left: 0;
3414 | top: 2px;
3415 | width: 100%;
3416 | height: 3px;
3417 | background: rgba(255, 255, 255, 0.15);
3418 | }
3419 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .timeCurrent, .sPanelNotifications .widget.miniPlayer > .controls .timeNav .timeRemaining {
3420 | position: absolute;
3421 | bottom: -20px;
3422 | width: 40%;
3423 | height: 20px;
3424 | line-height: 20px;
3425 | color: rgba(255, 255, 255, 0.9);
3426 | font-size: 75%;
3427 | pointer-events: none;
3428 | }
3429 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .timeCurrent {
3430 | left: 0;
3431 | text-align: left;
3432 | }
3433 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .timeRemaining {
3434 | right: 0;
3435 | text-align: right;
3436 | }
3437 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .timeRemaining:before {
3438 | content: "-";
3439 | }
3440 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .handler {
3441 | position: absolute;
3442 | left: 0;
3443 | top: 2px;
3444 | min-height: 3px;
3445 | height: 3px;
3446 | max-height: 3px;
3447 | min-width: 7px;
3448 | max-width: 100%;
3449 | background: rgba(255, 255, 255, 0.75);
3450 | }
3451 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .handler .ui-resizable-e {
3452 | cursor: default;
3453 | width: 14px;
3454 | right: -4px;
3455 | top: -5px;
3456 | height: 14px;
3457 | }
3458 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .handler:after {
3459 | content: "";
3460 | position: absolute;
3461 | right: 0;
3462 | top: -2px;
3463 | width: 7px;
3464 | height: 7px;
3465 | background: #FFF;
3466 | border-radius: 100%;
3467 | transform-origin: center center;
3468 | transition: all 0.1s ease-out;
3469 | }
3470 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .handler:before {
3471 | content: "";
3472 | position: absolute;
3473 | right: 0;
3474 | top: -2px;
3475 | width: 7px;
3476 | height: 7px;
3477 | background: none;
3478 | border-radius: 100%;
3479 | transform-origin: center center;
3480 | transform: scale(2);
3481 | }
3482 | .sPanelNotifications .widget.miniPlayer > .controls .timeNav .handler:hover:after {
3483 | transform: scale(2);
3484 | }
3485 | .sPanelNotifications .widget.miniPlayer > .controls .btn {
3486 | position: relative;
3487 | display: inline-block;
3488 | vertical-align: top;
3489 | top: 0;
3490 | width: 40px;
3491 | height: 40px;
3492 | font-size: 20px;
3493 | line-height: 40px;
3494 | text-align: center;
3495 | transform-origin: center center;
3496 | transition: all 0.1s cubic-bezier(0.63, 0.92, 0.68, 0.98);
3497 | }
3498 | .sPanelNotifications .widget.miniPlayer > .controls .btn:before, .sPanelNotifications .widget.miniPlayer > .controls .btn:after {
3499 | transition: all 0.1s cubic-bezier(0.63, 0.92, 0.68, 0.98);
3500 | }
3501 | .sPanelNotifications .widget.miniPlayer > .controls .btn:active {
3502 | transform: scale(0.9);
3503 | opacity: 0.9;
3504 | }
3505 | .sPanelNotifications .widget.miniPlayer > .controls .prev:before {
3506 | content: "";
3507 | }
3508 | .sPanelNotifications .widget.miniPlayer > .controls .play:before {
3509 | content: "";
3510 | position: absolute;
3511 | top: 7px;
3512 | left: calc(50% + 2px);
3513 | width: 8px;
3514 | height: 26px;
3515 | border-radius: 2px;
3516 | background: rgba(255, 255, 255, 0.9);
3517 | box-shadow: -12px 0 0 rgba(255, 255, 255, 0.9);
3518 | }
3519 | .sPanelNotifications .widget.miniPlayer > .controls .next:before {
3520 | content: "";
3521 | }
3522 |
--------------------------------------------------------------------------------
