vNext (2.5): Sometimes you just need a calendar

Introducing a full calendar view when expanding the calendar card, and a refreshed look for the YouTube card. - Implemented expanded view for calendar card - Tweaked YouTube card expanded view - There are now 9 available 'live display' presets available in a scrolling list - Reordered Backdrop control panel tab to better reflect the new 'live display' option - More tweaks for expanded cards with varying heights
Futur3Sn0w · Feb 12, 2024 · 7b13e93 · 7b13e93
1 parent aee071a
commit 7b13e93
Show file tree

Hide file tree

Showing 10 changed files with 371 additions and 76 deletions.
diff --git a/css/stock_cards/calendarCard.css b/css/stock_cards/calendarCard.css
@@ -6,7 +6,7 @@
     font-weight: 500;
 }
 
-.calendarCard .month {
+.calendarCard .calenMonth {
     width: 100%;
     min-height: 25px;
 
@@ -26,11 +26,11 @@
     justify-content: center;
 }
 
-.subCards.plated .calendarCard .month {
+.subCards.plated .calendarCard .calenMonth {
     background: #0000007c;
 }
 
-.subCards:not(.darkModeOn).plated .calendarCard .month {
+.subCards:not(.darkModeOn).plated .calendarCard .calenMonth {
     background: #ffffff7c;
     color: black
 }
@@ -56,33 +56,157 @@
     transform: translateZ(10px);
 }
 
+/* Expanded view */
+
+.calendarCard.expanded .calenMonth,
 .calendarCard.expanded .calenDay,
-.calendarCard.expanded .calenDayNo,
-.calendarCard.expanded .month {
-    opacity: 0;
+.calendarCard.expanded .calenDayNo {
+    display: none;
 }
 
 .calendarCard.expanded {
-    background-color: transparent !important;
+    height: 287px !important;
 }
 
-.calendarCard .expView {
+.calendarCard .wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
     display: none;
+    /* background: #fff; */
+    border-radius: 10px;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+}
+
+.calendarCard.expanded .wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.wrapper .header {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+    padding-left: 10px;
+    margin-bottom: auto;
+
+    background: linear-gradient(to bottom, #fa4c5b, red);
+    color: white;
+}
+
+.wrapper .header p {
+    margin: 0;
+    padding: 0;
+}
+
+.header .icons {
+    display: flex;
+}
+
+.header .icons i {
+    height: 35px;
+    width: 35px;
+    color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 17px;
+    user-select: none;
+    border-radius: 50%;
+}
+
+body:has(.darkModeOn) .header .icons i {
+    color: rgba(255, 255, 255, 0.75);
+}
 
+.header .icons i:hover {
+    background-color: white;
+    color: rgba(0, 0, 0, 0.75) !important;
+}
+
+.header .current-date {
+    font-size: 22px;
+    font-weight: 600;
+}
+
+.calendar {
     width: 100%;
-    height: 100%;
-    background-color: purple;
+    box-sizing: border-box;
+    margin-top: auto;
+    padding: 5px;
+}
 
-    opacity: .75;
+.calendar ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+}
 
-    position: absolute;
+.calendar .days {
+    margin-bottom: 20px;
+}
+
+.calendar li {
+    color: rgba(0, 0, 0, 0.75);
+    width: calc(100% / 7);
+    aspect-ratio: 1/1;
+    font-size: 1.07rem;
+}
+
+body:has(.darkModeOn) .calendar li {
+    color: rgba(255, 255, 255, 1);
+}
+
+.days li.inactive {
+    opacity: .5;
+}
+
+.days li.active {
+    box-shadow: inset 0 0 0 2px rgb(0, 0, 0);
 }
 
-.calendarCard .expView::after {
-    content: "Calendar fullview";
+body:has(.darkModeOn) .days li.active {
+    box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
 }
 
+.calendar .weeks li {
+    font-size: 15px;
+    opacity: .75;
+    font-weight: 500;
+    height: 20.70835px;
+}
 
-.calendarCard.expanded .expView {
+.calendar .days li {
+    z-index: 1;
+    position: relative;
+    margin-top: 1px;
+    border-radius: 500px;
     display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* .days li::before {
+    position: absolute;
+    content: "";
+    left: 50%;
+    top: 50%;
+    height: 40px;
+    width: 40px;
+    z-index: -1;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: .15s;
+}
+*/
+
+.days li:hover {
+    opacity: 1;
+    color: rgba(0, 0, 0, 0.75) !important;
+    background-color: white !important;
 }
diff --git a/css/stock_cards/textCard.css b/css/stock_cards/textCard.css
@@ -68,6 +68,7 @@
     top: -2px !important;
     border-radius: 13px;
     background-color: white;
+    color: #000;
 }
 
 .textCard textarea {

diff --git a/css/stock_cards/youtubeBrowseCard.css b/css/stock_cards/youtubeBrowseCard.css
@@ -20,12 +20,11 @@
     left: 10px;
 }
 
-.darkModeOn .youtubeCard-browse.squareCard::before {
+body:has(.darkModeOn) .youtubeCard-browse.squareCard::before {
     color: white;
 }
 
-
-.darkModeOn .youtubeCard-browse {
+body:has(.darkModeOn) .youtubeCard-browse {
     background: #0F0F0F;
 }
 
@@ -53,7 +52,7 @@
 }
 
 .searchCont>i::after {
-    content: "";
+    /* content: ""; */
     width: 9px;
     height: 9px;
 
@@ -85,7 +84,7 @@
     opacity: 0;
 }
 
-.darkModeOn .youtubeCard-browse .searchCont .ytSearch {
+body:has(.darkModeOn) .youtubeCard-browse .searchCont .ytSearch {
     background-color: #212121;
     color: white;
 }
@@ -125,7 +124,7 @@
     transition: .15s;
 }
 
-.darkModeOn .youtubeCard-browse .browseBtns .browseBtn {
+body:has(.darkModeOn) .youtubeCard-browse .browseBtns .browseBtn {
     /* background-color: #212121; */
     color: white;
 }
@@ -136,11 +135,10 @@
     box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
 }
 
-.darkModeOn .youtubeCard-browse .browseBtns .browseBtn:hover {
+body:has(.darkModeOn) .youtubeCard-browse .browseBtns .browseBtn:hover {
     background-color: rgba(35, 35, 35, 0.5) !important;
 }
 
-
 .browseBtns .browseBtn::before {
     content: attr(data-btnLabel);
 
@@ -160,15 +158,66 @@
     background-color: rgba(0, 0, 0, 0.3);
 }
 
-.darkModeOn .youtubeCard-browse .browseBtns .browseBtn:not(:last-of-type)::after {
+body:has(.darkModeOn) .youtubeCard-browse .browseBtns .browseBtn:not(:last-of-type)::after {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+/* Expanded */
+
+.youtubeCard-browse.expanded {
+    background-image: unset !important;
+}
+
+.youtubeCard-browse.expanded .searchCont .ytSearch {
+    padding-left: 10px;
+    margin-top: 65px;
+}
+
+.youtubeCard-browse.expanded .searchCont i {
+    top: 10px;
+    color: transparent;
+    height: 40px;
+    width: 25%;
+
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.youtubeCard-browse.expanded .searchCont i.fa-youtube {
+    right: unset;
+    left: 12.5%;
+    background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg');
+}
+
+.youtubeCard-browse.expanded .searchCont i.fa-youtube-music {
+    left: unset;
+    right: 12.5%;
+    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6a/Youtube_Music_icon.svg');
+}
+
+.youtubeCard-browse.expanded .searchCont i::after {
+    display: none;
+}
+
+.youtubeCard-browse.expanded .searchCont .ytSearch {
+    margin-left: 5%;
+    width: 90%;
+}
+
 .youtubeCard-browse.expanded .browseBtns {
     width: 95%;
 }
 
 .youtubeCard-browse.expanded .browseBtn {
     width: 100%;
     height: 50px;
+}
+
+.youtubeCard-browse.expanded .browseBtns .bb2::before {
+    content: 'Subscriptions';
+
+    position: absolute;
+    bottom: 4px;
+    font-size: 9px;
 }