feat: add Group Calendar

src/assets/scss/themes/theme.amoled.scss

@@ -13,22 +13,22 @@ $--theme-saturation: 0%;
 
 // AMOLED background tones
 // #0f0f0f
-$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); 
-$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 6%); 
-$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 6%); 
-$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 7%); 
+$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%);
+$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 6%);
+$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 6%);
+$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 7%);
 $--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 9%);
 
-$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 8%);   
-$--theme-border-2: hsla($--theme-hue, $--theme-saturation, 6%, 0.5); 
-$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 12%);  
+$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 8%);
+$--theme-border-2: hsla($--theme-hue, $--theme-saturation, 6%, 0.5);
+$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 12%);
 
-$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 85%); 
-$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 70%); 
-$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 68%); 
-$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); 
+$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 85%);
+$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 70%);
+$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 68%);
+$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%);
 
-$--theme-primary: #B18FFF;
+$--theme-primary: #b18fff;
 $--theme-success: #67c23a;
 $--theme-warning: #e6a23c;
 $--theme-danger: #f56c6c;
@@ -128,12 +128,20 @@ $--message-danger-font-color: #ff4d4f;
 
 $--pagination-hover-color: $--theme-text-4;
 
+$--calendar-selected-background-color: rgba($--theme-primary, 0.1);
+$--card-background-color: $--theme-bg-4;
+
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import '~element-ui/packages/theme-chalk/src/index';
 
-@import '_theme.dark_styles';
+:root {
+    --group-calendar-event-bg: #{$--calendar-selected-background-color};
+    --group-calendar-badge-following: #{darken($--theme-primary, 20%)};
+    --group-calendar-badge-normal: #{$--theme-info};
+}
 
+@import '_theme.dark_styles';
 
 .el-table tr,
 .el-table td.el-table__cell,
@@ -146,7 +154,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     border: 1px solid hsl($--theme-hue, $--theme-saturation, 12%);
 }
 
-.el-tree{
+.el-tree {
     background: hsl($--theme-hue, $--theme-saturation, 9%);
 }
 
@@ -170,7 +178,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     color: $--color-primary;
 }
 
-
 .x-friend-item:hover,
 .x-change-image-item:hover {
     color: $--color-primary;
@@ -178,7 +185,74 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 // Tag background variants
 @each $type in success, warning, danger {
-  .el-tag--plain.el-tag--#{$type} {
-    background-color: hsl($--theme-hue, $--theme-saturation, 9%);
-  }
-}
+    .el-tag--plain.el-tag--#{$type} {
+        background-color: hsl($--theme-hue, $--theme-saturation, 9%);
+    }
+}
+
+.el-calendar {
+    background-color: $--theme-bg-4 !important;
+}
+
+.el-calendar__title {
+    color: $--theme-text-1 !important;
+}
+
+.el-card {
+    background-color: $--theme-bg-5 !important;
+    border-color: $--theme-border-1 !important;
+}
+
+.el-descriptions__body {
+    background-color: $--theme-bg-4 !important;
+    color: $--theme-text-1 !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: #{darken($--theme-primary, 20%)} !important;
+}
+
+.el-timeline-item__node {
+    background-color: #{darken($--theme-primary, 20%)} !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow {
+    border-top-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow::after {
+    border-top-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow {
+    border-bottom-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow {
+    border-left-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow::after {
+    border-left-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow {
+    border-right-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow::after {
+    border-right-color: $--theme-bg-4 !important;
+}
+
+// Group Calendar Dialog borders
+.search-container {
+    border-bottom-color: $--border-color-light !important;
+}
+
+.group-header {
+    border-bottom-color: $--border-color-light !important;
+}

src/assets/scss/themes/theme.dark.scss

@@ -126,8 +126,84 @@ $--message-danger-font-color: #ff4d4f;
 
 $--pagination-hover-color: $--theme-text-4;
 
+$--calendar-selected-background-color: rgba($--theme-primary, 0.1);
+$--card-background-color: $--theme-bg-4;
+
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import '~element-ui/packages/theme-chalk/src/index';
 
-@import '_theme.dark_styles';
+:root {
+    --group-calendar-event-bg: #{$--calendar-selected-background-color};
+    --group-calendar-badge-following: #{$--color-success};
+    --group-calendar-badge-normal: #{$--color-primary};
+}
+
+@import '_theme.dark_styles';
+
+.el-calendar {
+    background-color: $--theme-bg-4 !important;
+}
+
+.el-calendar__title {
+    color: $--theme-text-1 !important;
+}
+
+.el-card {
+    background-color: $--theme-bg-5 !important;
+    border-color: $--theme-border-1 !important;
+}
+
+.el-descriptions__body {
+    background-color: $--theme-bg-4 !important;
+    color: $--theme-text-1 !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: $--theme-border-2 !important;
+}
+
+.el-timeline-item__node {
+    background-color: $--theme-border-2 !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow {
+    border-top-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow::after {
+    border-top-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow {
+    border-bottom-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow {
+    border-left-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow::after {
+    border-left-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow {
+    border-right-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow::after {
+    border-right-color: $--theme-bg-4 !important;
+}
+
+// Group Calendar Dialog borders
+.search-container {
+    border-bottom-color: $--border-color-light !important;
+}
+
+.group-header {
+    border-bottom-color: $--border-color-light !important;
+}

src/assets/scss/themes/theme.darkblue.scss

@@ -126,8 +126,84 @@ $--message-danger-font-color: #ff4d4f;
 
 $--pagination-hover-color: $--theme-text-4;
 
+$--calendar-selected-background-color: rgba($--theme-primary, 0.1);
+$--card-background-color: $--theme-bg-4;
+
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import '~element-ui/packages/theme-chalk/src/index';
 
+:root {
+    --group-calendar-event-bg: #{$--calendar-selected-background-color};
+    --group-calendar-badge-following: #{$--color-success};
+    --group-calendar-badge-normal: #{$--color-primary};
+}
+
 @import '_theme.dark_styles';
+
+.el-calendar {
+    background-color: $--theme-bg-4 !important;
+}
+
+.el-calendar__title {
+    color: $--theme-text-1 !important;
+}
+
+.el-card {
+    background-color: $--theme-bg-5 !important;
+    border-color: $--theme-border-1 !important;
+}
+
+.el-descriptions__body {
+    background-color: $--theme-bg-4 !important;
+    color: $--theme-text-1 !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: $--theme-border-2 !important;
+}
+
+.el-timeline-item__node {
+    background-color: $--theme-border-2 !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow {
+    border-top-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow::after {
+    border-top-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow {
+    border-bottom-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow {
+    border-left-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow::after {
+    border-left-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow {
+    border-right-color: $--theme-bg-4 !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow::after {
+    border-right-color: $--theme-bg-4 !important;
+}
+
+// Group Calendar Dialog borders
+.search-container {
+    border-bottom-color: $--border-color-light !important;
+}
+
+.group-header {
+    border-bottom-color: $--border-color-light !important;
+}

src/assets/scss/themes/theme.darkvanilla.scss

@@ -556,11 +556,41 @@ div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 23
     color: #ddd;
 }
 
-.el-popper[x-placement^='top'] .popper__arrow,
-.el-popper[x-placement^='left'] .popper__arrow,
-.el-popper[x-placement^='right'] .popper__arrow,
+.el-popover {
+    background-color: var(--dv_bg-top) !important;
+    border-color: var(--dv_bg-mid) !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow {
+    border-top-color: var(--dv_bg-top) !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow::after {
+    border-top-color: var(--dv_bg-top) !important;
+}
+
 .el-popper[x-placement^='bottom'] .popper__arrow {
-    display: none;
+    border-bottom-color: var(--dv_bg-top) !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: var(--dv_bg-top) !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow {
+    border-left-color: var(--dv_bg-top) !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow::after {
+    border-left-color: var(--dv_bg-top) !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow {
+    border-right-color: var(--dv_bg-top) !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow::after {
+    border-right-color: var(--dv_bg-top) !important;
 }
 
 img.x-link,
@@ -760,3 +790,44 @@ div.x-friend-list
     > span.el-input__count {
     background-color: var(--mid) !important;
 }
+
+:root {
+    --group-calendar-event-bg: rgba(var(--dv_bright-rgb), 0.1);
+    --group-calendar-badge-following: var(--dv_muted);
+    --group-calendar-badge-normal: var(--dv_bright);
+}
+
+.el-calendar {
+    background-color: var(--dv_bg-top) !important;
+}
+
+.el-calendar__title {
+    color: var(--dv_bright) !important;
+}
+
+.el-card {
+    background-color: var(--dv_bg-mid) !important;
+    border-color: var(--dv_bg-bot) !important;
+}
+
+.el-descriptions__body {
+    background-color: var(--dv_bg-top) !important;
+    color: var(--dv_bright) !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: var(--dv_muted) !important;
+}
+
+.el-timeline-item__node {
+    background-color: var(--dv_muted) !important;
+}
+
+// Group Calendar Dialog borders
+.search-container {
+    border-bottom: 1px solid var(--dv_muted) !important;
+}
+
+.group-header {
+    border-bottom: 2px solid var(--dv_muted) !important;
+}

src/assets/scss/themes/theme.darkvanillaold.scss

@@ -18,6 +18,10 @@
     --theme-text-muted: #906d92;
     --theme-text-rgb: 238, 204, 224;
     --theme-text-muted-rgb: 144, 109, 146;
+
+    --group-calendar-event-bg: rgba(var(--theme-text-muted-rgb), 0.1);
+    --group-calendar-badge-following: var(--theme-text-muted);
+    --group-calendar-badge-normal: var(--theme-text);
 }
 
 div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
@@ -372,3 +376,29 @@ div.x-friend-list
     > span.el-input__count {
     background-color: var(--mid) !important;
 }
+
+.el-calendar {
+    background-color: var(--mid) !important;
+}
+
+.el-calendar__title {
+    color: var(--theme-text) !important;
+}
+
+.el-card {
+    background-color: var(--top) !important;
+    border-color: var(--top-border) !important;
+}
+
+.el-descriptions__body {
+    background-color: var(--top) !important;
+    color: var(--theme-text) !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: var(--theme-text-muted) !important;
+}
+
+.el-timeline-item__node {
+    background-color: var(--theme-text-muted) !important;
+}

src/assets/scss/themes/theme.material3.scss

@@ -117,6 +117,12 @@ body {
     user-select: none;
     font-family: var(--md-sys-typescale-body-small-font);
     font-variant-numeric: tabular-nums;
+
+    --group-calendar-event-bg: rgba(var(--md-sys-color-primary), 0.05);
+    --group-calendar-badge-following: rgb(
+        var(--md-sys-color-primary-container)
+    );
+    --group-calendar-badge-normal: rgb(var(--md-sys-color-secondary));
 }
 
 ::selection {
@@ -1639,8 +1645,42 @@ img.x-link.el-popover__reference {
     border-top: 1px solid rgb(var(--md-sys-color-outline-variant));
     margin-top: 8px;
 }
-.el-popper .popper__arrow {
-    display: none;
+
+.el-popover {
+    background: var(--md-sys-color-surface-3) !important;
+    border-color: rgb(var(--md-sys-color-outline-variant)) !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow {
+    border-top-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow::after {
+    border-top-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow {
+    border-bottom-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow {
+    border-left-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow::after {
+    border-left-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow {
+    border-right-color: var(--md-sys-color-surface-3) !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow::after {
+    border-right-color: var(--md-sys-color-surface-3) !important;
 }
 
 /* Status icon */
@@ -2113,3 +2153,42 @@ div.x-friend-list
     > span.el-input__count {
     background-color: var(--md-sys-color-surface-3) !important;
 }
+
+.el-calendar {
+    background: var(--md-sys-color-surface-3) !important;
+}
+
+.el-calendar__title {
+    color: rgb(var(--md-sys-color-on-surface)) !important;
+}
+
+.el-card {
+    background: var(--md-sys-color-surface-2) !important;
+    border-color: rgb(var(--md-sys-color-outline-variant)) !important;
+}
+
+.el-descriptions__body {
+    background: var(--md-sys-color-surface-3) !important;
+    color: rgb(var(--md-sys-color-on-surface)) !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: rgb(var(--md-sys-color-outline-variant)) !important;
+}
+
+.el-timeline-item__node {
+    background-color: rgb(var(--md-sys-color-outline)) !important;
+}
+
+.x-dialog .top-content {
+    height: 640px !important ;
+}
+
+// Group Calendar Dialog borders
+.search-container {
+    border-bottom: 1px solid rgba(var(--md-sys-color-outline), 0.5) !important;
+}
+
+.group-header {
+    border-bottom: 2px solid rgba(var(--md-sys-color-outline), 0.5) !important;
+}

src/assets/scss/themes/theme.pink.scss

@@ -16,6 +16,10 @@
     --font:
         'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
         'Noto Sans SC', sans-serif;
+
+    --group-calendar-event-bg: rgba(223, 162, 162, 0.1);
+    --group-calendar-badge-following: var(--theme);
+    --group-calendar-badge-normal: var(--lighter-border);
 }
 body,
 button,
@@ -430,3 +434,75 @@ input[type='checkbox']:checked + .el-switch__core {
     background-size: 400% 100%;
     animation: el-skeleton-loading 1.4s ease infinite;
 }
+
+.el-calendar {
+    background-color: var(--lighter-bg) !important;
+}
+
+.el-calendar__title {
+    color: var(--theme) !important;
+}
+
+.el-card {
+    background-color: var(--light-bg) !important;
+    border-color: var(--lighter-bg) !important;
+}
+
+.el-descriptions__body {
+    background-color: var(--bg) !important;
+    color: var(--theme) !important;
+}
+
+.el-timeline-item__tail {
+    border-left-color: var(--lighter-border) !important;
+}
+
+.el-timeline-item__node {
+    background-color: var(--lighter-border) !important;
+}
+
+.el-popover {
+    background-color: var(--bg) !important;
+    border-color: var(--lighter-bg) !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow {
+    border-top-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='top'] .popper__arrow::after {
+    border-top-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow {
+    border-bottom-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='bottom'] .popper__arrow::after {
+    border-bottom-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow {
+    border-left-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='left'] .popper__arrow::after {
+    border-left-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow {
+    border-right-color: var(--bg) !important;
+}
+
+.el-popper[x-placement^='right'] .popper__arrow::after {
+    border-right-color: var(--bg) !important;
+}
+
+// Group Calendar Dialog borders
+.search-container {
+    border-bottom: 1px solid var(--lighter-bg) !important;
+}
+
+.group-header {
+    border-bottom: 2px solid var(--lighter-bg) !important;
+}