vNext - Mono mode

Futur3Sn0w · Jan 31, 2024 · 2e4a4f2 · 2e4a4f2
1 parent 97d2bda
commit 2e4a4f2
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 59 deletions.
diff --git a/css/stock_cards/batteryCard.css b/css/stock_cards/batteryCard.css
@@ -1,6 +1,6 @@
 .batteryCard {
     background: linear-gradient(360deg, #47ad0c, #59e754);
-    color: white !important;
+    color: white;
     font-size: 22px;
     font-weight: 600;
 }
@@ -36,6 +36,10 @@
     transform: scale(0.7) translateZ(15px);
 }
 
+.subCards:not(.darkModeOn).plated .batteryCard .bcIndicator {
+    border: 3px solid #222222;
+}
+
 .bcIndicator::after {
     content: "";
     width: 7px;
@@ -48,6 +52,11 @@
     right: -8px;
 }
 
+.subCards:not(.darkModeOn).plated .batteryCard .bcIndicator::after,
+.subCards:not(.darkModeOn).plated .batteryCard .bciProg {
+    background-color: #222;
+}
+
 .bciProg {
     width: 100%;
     height: 100%;

diff --git a/css/stock_cards/calendarCard.css b/css/stock_cards/calendarCard.css
@@ -26,6 +26,14 @@
     justify-content: center;
 }
 
+.subCards.plated .calendarCard .month {
+    background: #000;
+}
+
+.subCards:not(.darkModeOn).plated .calendarCard .month {
+    background: #fff;
+}
+
 .calendarCard .calenDayNo {
     font-size: 42px;
     height: 50px;

diff --git a/css/stock_cards/emojiLocaleCard.css b/css/stock_cards/emojiLocaleCard.css
@@ -40,6 +40,10 @@
     justify-content: center;
 }
 
+.subCards.plated .emojiLocaleCard div p:last-of-type {
+    opacity: 0;
+}
+
 .emojiLocaleCard:active p:first-of-type {
     opacity: 0;
 }
diff --git a/css/stock_cards/shortcutCard.css b/css/stock_cards/shortcutCard.css
@@ -3,6 +3,7 @@
     align-items: center;
     justify-content: center;
     background-color: transparent !important;
+    background: transparent !important;
     box-shadow: none !important;
     overflow: visible !important;
 }

diff --git a/css/stock_cards/textCard.css b/css/stock_cards/textCard.css
@@ -3,12 +3,12 @@
 
     font-weight: normal;
     position: relative;
-    background-color: white !important;
+    background-color: white;
 }
 
 .shelf.darkModeOn .subCards .textCard {
-    background-color: #222222 !important;
-    color: white !important;
+    background-color: #222222;
+    color: white;
 }
 
 .textCard.expanded::before {
@@ -45,6 +45,14 @@
     justify-content: center;
 }
 
+.subCards.plated .textCard::before {
+    background: #000;
+}
+
+.subCards:not(.darkModeOn).plated .textCard::before {
+    background: #fff;
+}
+
 .textCard.rectCard textarea {
     height: calc(100% - 10px);
     width: calc(100% - 10px);

diff --git a/css/stock_cards/weatherCard.css b/css/stock_cards/weatherCard.css
@@ -35,6 +35,12 @@
     transition: .2s;
 }
 
+.subCards:not(.darkModeOn).plated .weatherCard .temp,
+.subCards:not(.darkModeOn).plated .weatherCard>i {
+    color: black;
+}
+
+
 .temp {
     font-size: 25px;
     transform: translateX(-10px);

diff --git a/css/structure/css.css b/css/structure/css.css
@@ -72,7 +72,7 @@ body:has(.modal-about.visible)::before {
 
     background-color: rgba(255, 255, 255, 0.65);
     backdrop-filter: blur(70px) saturate(6);
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .35);
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: 16px;
 

diff --git a/css/structure/globals.css b/css/structure/globals.css
@@ -25,14 +25,6 @@
     width: 180px;
 }
 
-.card.dbg {
-    display: none;
-}
-
-.card.dbg.enabled {
-    display: flex;
-}
-
 .displayNone {
     display: none !important;
 }
diff --git a/index.html b/index.html
@@ -50,7 +50,7 @@
             </div>
         </div>
         <div class="aboutText">
-            A hybrid dashboard and digital display for large-format screens, heavily inspired by TV
+            A hybrid dashboard and digital display for large-format screens, heavily inspired by TV & VisionOS
             <!-- PlusUI is your one-stop-shop for all your information, shortcuts, notes, and more. <br>PlusUI is currently
             in beta/Open Demo, meaning it won't be super customizable yet, but it will save your changes for
             later.<br>Feel free to report bugs on
@@ -71,8 +71,8 @@
 
     <div class="backDrop" id="backDrop2"></div>
 
-    <div class="surface aboutBtn" id="topChromeAboutBtn"></div>
-    <div class="surface timeDate singleLine darkModeOn">
+    <div class="surface aboutBtn interactable-hov" id="topChromeAboutBtn"></div>
+    <div class="surface timeDate interactable-hov">
         <div class="tdm time" id="time"></div>
         <div class="ccButtons">
             <div class="ccb ccb1" label="Personalize"><i class="fa-solid fa-brush"></i></div>
@@ -94,8 +94,9 @@
             </div>
             <div class="group">
                 <div class="dcExpt interactable-hov">
-                    <i class="fa-solid fa-triangle-exclamation"></i>
-                    <label for="">idkyet</label>
+                    <input type="checkbox" name="monoMode" id="cbMonoMode">
+                    <i class="fa-solid fa-cube"></i>
+                    <label for="">Mono Widgets</label>
                 </div>
                 <div class="dcExpt interactable-hov floatModeCardOptGroup">
                     <input type="checkbox" name="floatMode" id="cbFloatMode">
@@ -162,7 +163,7 @@
             <i id="cmi-resize-icn" class="fa-solid fa-up-right-and-down-left-from-center"></i>
         </div>
         <div class="cmItem cmi-expand interactable-hov" data-btnLabel="">
-            <i id="cmi-expand-icn" class="fa-solid fa-up-right-from-square"></i>
+            <i id="cmi-expand-icn" class="fa-solid fa-clone"></i>
             Expand
         </div>
         <div class="cmItem cmi-disableCard interactable-hov">
@@ -297,7 +298,6 @@
     <div class="shelf left">
         <div class="shelfLabel surface">Shelf</div>
         <div class="spacerA spcLeft"></div>
-        <!-- <div class="surface cards darkModeOn" id="cards"> -->
         <div class="surface subCards">
 
             <div class="weatherCard card expandable labeled rectCard" data-enabled="y" data-resizableCard="y"

diff --git a/js/app.js b/js/app.js
@@ -60,6 +60,11 @@ window.onload = function () {
         $('#cbFloatMode').prop('checked', true);
     }
 
+    if (localStorage.getItem('monoCards') == 'true') {
+        $('.subCards').addClass('plated');
+        $('#cbMonoMode').prop('checked', true);
+    }
+
     $('#backDrop2').css('background-image', "url(" + backdropImg + ")");
     $('body').css('background-image', "url(" + backdropImg + ")");
     refreshWall();

diff --git a/js/shelf.js b/js/shelf.js
@@ -102,7 +102,7 @@ $('.cmi-disableCard').on('click', function () {
     $('.shelfLabel').addClass('show').text(friendlyName + " removed");
     setTimeout(() => {
         $('.shelfLabel').removeClass('show')
-    }, 10000);
+    }, 6000);
 
     $(".subCards").sortable("refresh");
     dockRadi();
@@ -252,4 +252,16 @@ $('#cbFloatMode').click(function () {
         localStorage.setItem('float', 'false');
     }
     alignShelfLabel();
+});
+
+// Monochrome mode
+
+$('#cbMonoMode').click(function () {
+    if ($(this).is(':checked')) {
+        $('.subCards').addClass('plated');
+        localStorage.setItem('monoCards', 'true');
+    } else {
+        $('.subCards').removeClass('plated');
+        localStorage.setItem('monoCards', 'false');
+    }
 });
diff --git a/js/stock_cards.js b/js/stock_cards.js
@@ -53,42 +53,31 @@ let touchstartX = 0
 let touchendX = 0
 
 function checkDirectionWC() {
-    if ($('.shelf').hasClass('float')) {
-    } else {
-        if (touchendX < touchstartX) {
-            // left swipe
-            if ($('.shelf').hasClass('right')) {
-                if ($('.cards').hasClass('collapsed') == 0) {
-                    $('#saoL-radio').click()
-                } else {
-                    $('#saoC-radio').click()
-                }
-            } else if ($('.shelf').hasClass('center')) {
-                $('#saoL-radio').click()
-            }
-        } else if (touchendX > touchstartX) {
-            // right swipe
-            if ($('.shelf').hasClass('left')) {
-                if ($('.cards').hasClass('collapsed') == 0) {
-                    $('#saoR-radio').click()
-                } else {
-                    $('#saoC-radio').click()
-                }
-            } else if ($('.shelf').hasClass('center')) {
-                $('#saoR-radio').click()
-            }
+    if (touchendX < touchstartX) {
+        // left swipe
+        if ($('.shelf').hasClass('right')) {
+            $('#saoC-radio').click()
+        } else if ($('.shelf').hasClass('center')) {
+            $('#saoL-radio').click()
+        }
+    } else if (touchendX > touchstartX) {
+        // right swipe
+        if ($('.shelf').hasClass('left')) {
+            $('#saoC-radio').click()
+        } else if ($('.shelf').hasClass('center')) {
+            $('#saoR-radio').click()
         }
     }
-
 }
 
-// document.querySelector('.subCards').addEventListener('touchstart', e => {
+// document.querySelector('.shelf:not(.subCards)').addEventListener('touchstart', e => {
 //     touchstartX = e.changedTouches[0].screenX
 // })
 
-// document.querySelector('.subCards').addEventListener('touchend', e => {
+// document.querySelector('.shelf:not(.subCards)').addEventListener('touchend', e => {
 //     touchendX = e.changedTouches[0].screenX
 //     checkDirectionWC()
+//     e.stopPropagation();
 // })
 
 //

diff --git a/master_cards.css b/master_cards.css
@@ -235,7 +235,7 @@ body:has(.shelf.float) .shelfBack {
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.35);
     outline: solid 3px transparent;
 
     position: relative;
@@ -258,6 +258,18 @@ body:has(.shelf.float) .shelfBack {
     margin-right: -10px !important;
 }
 
+.plated .card {
+    background: var(--section-l);
+    background-color: var(--section-l);
+    color: black;
+}
+
+.plated.darkModeOn .card {
+    background: var(--section-d);
+    background-color: var(--section-d);
+    color: white;
+}
+
 .card.md {
     transition: none !important;
 }

diff --git a/master_controlPanel.css b/master_controlPanel.css
@@ -6,7 +6,7 @@
     --section-inputBorder-l: rgba(0, 0, 0, .25);
     --surface-button-l: rgba(0, 0, 0, .15);
 
-    --section-d: rgba(0, 0, 0, 0.6);
+    --section-d: rgba(34, 34, 34, 0.6);
     --section-input-d: rgba(255, 255, 255, 0.2);
     --section-inputBorder-d: rgba(0, 0, 0, .2);
     --surface-button-d: rgba(255, 255, 255, 0.15);
@@ -46,6 +46,7 @@
 .timeDate.ccOpen {
     height: 50px;
     gap: 3px;
+    transform: none !important;
     /* padding-right: 3px; */
 }
 
@@ -260,7 +261,6 @@
 
     background-color: rgba(255, 255, 255, .25);
     user-select: none;
-    cursor: pointer;
 
     transition: .15s;
 }
@@ -331,7 +331,7 @@
     color: inherit;
     border-radius: 19px;
     padding: 10px;
-    padding-top: 35px;
+    /* padding-top: 35px; */
     margin: 0 10px;
 
     opacity: 0;
@@ -357,10 +357,11 @@
 .controlPanelOptGroup::before {
     content: attr(data-sect);
 
-    position: absolute;
     top: 10px;
-    left: 10px;
-    width: fit-content;
+    width: 100%;
+    padding: 5px 0;
+
+    text-align: center;
 
     display: flex;
     align-items: center;
@@ -379,8 +380,10 @@
 }
 
 .controlPanelOptGroup .ccSubHead {
-    padding-left: 7px;
-    margin-right: auto;
+    /* padding-left: 1px; */
+    /* margin-right: auto; */
+    width: 100%;
+    text-align: center;
 
     font-weight: 500;
     font-size: 14px;
@@ -474,7 +477,7 @@
 
     color: inherit;
     font-size: 12px;
-    border-radius: 15px;
+    border-radius: 50px;
     background-color: var(--section-input-l);
     padding: 3px;
 
@@ -573,12 +576,13 @@
 }
 
 .sectLabel {
-    width: fit-content;
+    width: 100%;
 
     display: flex;
     align-items: center;
     justify-content: center;
 
+    text-align: center;
     user-select: none;
     font-weight: 500;
     font-size: 14px;