vNext (2.7): Cards & Controls

This update brings a couple of new cards, reintroduces the parallax functionality of cards, reimagines the Card Deck, and refreshes the top control area.

- New Year Progress card: See a live view of the current year's progress with a bar, percentage, and countdown of remaining days in the year
- New Character Copy card: Click on any of the quadrants to instantly copy the highlighted symbol to your clipboard
- The ability to enable or disable PARALLAX HOVER EFFECTS for cards has been readded! You can toggle the effect from control panel.
- The 'add cards'/view rolodex button has been visually separated from the control panel/timedate button to better distinguish the two functions. Functionally, both items still work as before.
- Card Deck (Codename: Rolodex) has been given a new immersive UI. Available cards and deck controls are shown in the center, and the "add" button to open the deck will transition into a close button.
- The PlusUI info badge now appears when the card deck is open
- Control panel toggles have been slightly rearranged to accommodate new+future controls
- This update fully removes the Winsider card. Any hidden/advanced methods of enabling it no longer function. The card may return at a later date.
- This update also marks the switch BACK to VanillaTilt instead of Tilt.js as the tilt provider due to better toggling & customization options
- The placeholder card gets a facelift: the space of the card is still occupied, but the item is replaced with a small button rather than a full-size card
-

css/stock_cards/characterCopyCard.css

@@ -0,0 +1,75 @@
+.characterCopyCard {
+    display: flex;
+
+
+    transform: perspective(1000px);
+}
+
+.characterCopyCard::before,
+.characterCopyCard::after {
+    background: radial-gradient(black, transparent 70%);
+}
+
+body:has(.darkModeOn) .characterCopyCard::before,
+body:has(.darkModeOn) .characterCopyCard::after {
+    background: radial-gradient(white, transparent 70%);
+}
+
+.characterCopyCard::before {
+    content: '';
+    width: 100%;
+    height: 3px;
+
+    position: absolute;
+    left: 0;
+
+    opacity: .7;
+}
+
+.characterCopyCard::after {
+    content: '';
+    height: 100%;
+    width: 3px;
+
+    position: absolute;
+    top: 0;
+}
+
+.characterCopyCard .grid {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    gap: 3px;
+    box-sizing: border-box;
+    transform: translateZ(15px);
+}
+
+.characterCopyCard .grid .gridItem {
+    width: 40px;
+    height: 40px;
+
+    border-radius: 14px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    z-index: 2;
+
+    cursor: pointer;
+}
+
+.characterCopyCard .grid .gridItem::before,
+.characterCopyCard .grid .gridItem::after {
+    opacity: .5;
+    content: '"';
+}
+
+.characterCopyCard .grid .gridItem:hover {
+    background-color: rgba(255, 255, 255, .25);
+}

css/stock_cards/emojiLocaleCard.css

@@ -2,8 +2,6 @@
     font-size: 2em;
     /* overflow: hidden; */
     /* border: 5px solid rgba(0, 0, 0, 0.4); */
-    box-sizing: border-box;
-    border-radius: 5000px;
 }
 
 .emojiLocaleCard p:first-of-type {

css/stock_cards/weatherCard.css

@@ -12,6 +12,9 @@
     flex-direction: column-reverse;
     align-items: center;
 
+    position: relative;
+    z-index: 10;
+
     font-size: 20px;
     gap: 0 !important;
 }
@@ -90,6 +93,8 @@
     width: 100%;
     height: 100%;
     display: flex;
+
+    z-index: 1;
     position: absolute;
     top: 0;
     left: 0;

css/stock_cards/yearProgCard.css

@@ -0,0 +1,131 @@
+.yearProgCard {
+    /* flex-direction: column; */
+    overflow: hidden;
+    align-items: center;
+    /* color: white !important; */
+}
+
+.yearProgCard .percLabel {
+    position: absolute;
+    bottom: 18px;
+    left: 10px;
+    z-index: 3;
+
+    gap: 3px;
+    display: flex;
+    flex-direction: row;
+    width: max-content;
+    flex-shrink: 0;
+
+    color: white;
+
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.yearProgCard.squareCard .percLabel {
+    flex-direction: column;
+}
+
+.yearProgCard.squareCard .percLabel span {
+    display: none;
+}
+
+.percLabel::before {
+    content: attr(a);
+}
+
+.percLabel::after {
+    content: attr(b);
+}
+
+.yearProgCard .yearLabel {
+    position: relative;
+    z-index: 0;
+
+    display: flex;
+
+    font-size: 90px;
+    font-weight: 800;
+    opacity: .25;
+    z-index: 0;
+}
+
+.yearProgCard .yearLabel::before {
+    content: attr(ce);
+    transition: .15s;
+}
+
+.yearProgCard .yearLabel::after {
+    content: attr(ye);
+    transition: .15s;
+}
+
+.yearProgCard.rectCard .yearLabel {
+    font-size: 90px;
+}
+
+.yearProgCard.squareCard .yearLabel {
+    font-size: 65px;
+    flex-direction: column;
+}
+
+.yearProgCard.squareCard .yearLabel::before {
+    display: flex;
+    margin-bottom: -15px;
+    margin-left: -15px;
+}
+
+.yearProgCard.squareCard .yearLabel::after {
+    display: flex;
+    margin-top: -20px;
+    margin-right: -15px;
+}
+
+.yearProgCard .percBar::before {
+    content: "";
+    width: 180px;
+    height: 50px;
+
+    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
+
+    position: absolute;
+    z-index: -1;
+    bottom: -10px;
+    left: -10px;
+}
+
+.yearProgCard .percBar {
+    position: absolute;
+    bottom: 8px;
+    z-index: 2;
+
+    width: calc(100% - 20px);
+    height: 8px;
+
+    background-color: black;
+    opacity: .75;
+
+    padding: 1px;
+
+    box-sizing: border-box;
+    border-radius: 100px;
+
+    display: flex;
+    align-items: center;
+}
+
+body:has(.darkModeOn) .yearProgCard .percBar {
+    background-color: #535353;
+}
+
+.yearProgCard .percBar .fill {
+    background-color: white;
+    border-radius: 100px;
+    height: 100%;
+}
+
+body:has(.darkModeOn) .percBar .fill {
+    background-color: #8a8a8a;
+}