updated sidebar login area

9 files changed, 218 insertions, 24 deletions

diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 5c661f0d..b2f29dc9 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -59,6 +59,11 @@ a:active {
     color: #9ae4f1;
 }
 
+#body-wrapper {
+    position: relative;
+    z-index: 0;
+}
+
 button {
     background: #4444b1;
     color: #fff;
diff --git a/static/css/shared/sidebar.css b/static/css/shared/sidebar.css
index 36ca2247..03182062 100644
--- a/static/css/shared/sidebar.css
+++ b/static/css/shared/sidebar.css
@@ -14,6 +14,7 @@
 
 .left-sidebar {
     position: relative;
+    z-index: 10;
     top: -60px;
 }
 
@@ -120,12 +121,13 @@ html[lang='ja'] #login-area>#forgot-password-button {
 }
 
 #user-area {
-    background: url("../../images/core/backgrounds/user-area.png") no-repeat;
-    background-size: 200px 250px;
+    /* background: url("../../images/core/backgrounds/user-area.png") no-repeat;
+    background-size: 200px 250px; */
     width: 200px;
     height: 196px;
     max-height: 250px;
     position: relative;
+    right: 4px;
 }
 
 .left-sidebar-authenticated {
@@ -137,34 +139,45 @@ html[lang='ja'] #login-area>#forgot-password-button {
 /* User Area */
 .user-items-container {
     position: relative;
-    left: 78px;
-    margin-top: 20px;
-    border: 8px solid transparent;
-    padding: 4px;
-    border-image: url("../../images/core/backgrounds/user-area-border.jpg") 27 round;
-    width: 122px;
+    left: 0px;
+    margin-top: 0px;
+    background-image: url("../../images/core/backgrounds/user-area.gif");
+    width: 220px;
+    height: 220px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 8px;
 }
 
 .user-item {
+    background-color: black;
     display: flex;
     align-items: center;
-    margin: 4px 0px;
+    margin: 0px 0px;
+    gap: 3px;
+    position: relative;
+    width: 106px;
+    top: 93px;
+    left: 56px;
+    padding: 2px 0;
+    font-size: 9px;
 }
 
 .user-item img {
-    width: 20px;
-    height: 20px;
-    margin-right: 8px;
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
 }
 
 .user-title {
     font-size: 14px;
     position: relative;
-    left: 78px;
+    left: 16px;
     top: 10px;
 }
 
-.user-avatar {
+/* .user-avatar {
     width: 72px;
     height: 72px;
     padding: 4px;
@@ -177,30 +190,51 @@ html[lang='ja'] #login-area>#forgot-password-button {
     width: 100%;
     height: 100%;
     border-radius: 50%;
+    box-shadow: 0 0 0 2px #AD8CFF, 0 0 10px rgba(173, 140, 255, 0.6);
+    transition: transform 0.3s ease;
 }
 
+.user-avatar img:hover {
+    transform: scale(1.05) rotate(3deg);
+} */
+
 /* Navigation Links */
 .navigation-links {
     margin: 24px 0px;
+    position: relative;
 }
 
 .navigation-title {
     width: 100%;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
-}
-
-.navigation-title {
     font-family: 'SweetFairy', sans-serif;
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #623795) drop-shadow(0px 1px 1px #623795);
     color: #623795;
+    text-align: left;
+    letter-spacing: 0.5px;
+    margin: 0;
+    padding-left: 10px;
 }
 
 .navigation-title-container {
-    background-color: rgba(173, 128, 236, 0.35);
-    padding: 10px;
+    background: linear-gradient(180deg, rgba(30, 20, 50, 0.85) 0%, rgba(15, 10, 25, 0.9) 100%);
+    padding: 6px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
+    border: 1px solid rgba(173, 140, 255, 0.7);
+    box-shadow: 0 3px 5px -2px rgba(136, 87, 210, 0.6), inset 0 0 8px rgba(148, 93, 255, 0.25);
+    position: relative;
+}
+
+.navigation-title-container::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, rgba(173, 140, 255, 0.4), rgba(255, 179, 186, 0.5), rgba(84, 242, 242, 0.5), rgba(173, 140, 255, 0.4));
 }
 
 html[lang='en'] .navigation-title {
@@ -214,20 +248,172 @@ html[lang='ja'] .navigation-title {
 .navigation-item {
     display: flex;
     align-items: center;
-    margin: 4px 0px;
+    margin: 3px 0px;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+    padding: 2px;
+}
+
+.navigation-item:hover {
+    transform: translateX(3px);
+    background-color: rgba(173, 140, 255, 0.18);
+    border-radius: 4px;
+    box-shadow: inset 0 0 3px rgba(84, 242, 242, 0.2);
 }
 
 .navigation-items-container {
-    background-color: #f4f1e90f;
-    padding: 10px;
+    background: linear-gradient(135deg, rgba(20, 15, 30, 0.9) 0%, rgba(25, 15, 45, 0.85) 100%);
+    padding: 6px;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
+    border: 1px solid rgba(173, 140, 255, 0.4);
+    border-top: none;
+    box-shadow: inset 0 0 6px rgba(173, 140, 255, 0.4);
+    -webkit-backdrop-filter: blur(1px);
+    backdrop-filter: blur(1px);
 }
 
 .navigation-item img {
     width: 20px;
     height: 20px;
     margin-right: 8px;
+    filter: drop-shadow(0 0 1px rgba(84, 242, 242, 0.7));
+}
+
+.weblog-sidebar-container {
+    position: relative;
+    /* Extend the container to cover the hovercard area */
+    padding-right: 95px;
+    margin-right: -95px;
+}
+
+.weblog-sidebar-hovered {
+    position: absolute;
+    width: 180px;
+    top: -14px;
+    right: -85px;
+    border: 2px solid #AD8CFF;
+    background: linear-gradient(135deg, rgba(244, 183, 255, 0.95) 0%, rgba(173, 128, 236, 0.95) 100%);
+    padding: 6px 8px;
+    box-shadow: 3px 3px 0 #FFB3BA, 6px 6px 0 #54F2F2, 0px 0px 15px rgba(173, 140, 255, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transform: translateX(-10px) scale(0.95);
+    border-radius: 8px;
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    pointer-events: none;
+    z-index: 1000;
+}
+
+/* Arrow pointing to weblog item */
+.weblog-sidebar-hovered::before {
+    content: '';
+    position: absolute;
+    left: -12px;
+    top: 16px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 12px solid #AD8CFF;
+}
+
+/* Create seamless hover connection */
+.weblog-sidebar-hovered::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -20px;
+    width: 20px;
+    height: 100%;
+    background: transparent;
+    pointer-events: auto;
+}
+
+/* Show hovercard on weblog container hover OR hovercard hover (including bridge) */
+.weblog-sidebar-container:hover .weblog-sidebar-hovered,
+.weblog-sidebar-hovered:hover {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0) scale(1);
+    pointer-events: auto;
+}
+
+/* Y2K style arrow pointing to sidebar items */
+.navigation-item {
+    position: relative;
+}
+
+.navigation-item::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -15px;
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 10px solid #AD8CFF;
+    opacity: 0;
+    transition: all 0.3s ease;
+    filter: drop-shadow(0 0 2px rgba(173, 140, 255, 0.5));
+}
+
+.navigation-item:hover::after {
+    opacity: 1;
+    left: -10px;
+}
+
+.hovercard-item {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    color: #4A0080;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    border: 1px dashed #9EE7FF;
+    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5);
+    position: relative;
+    overflow: hidden;
+}
+
+.hovercard-item img {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    filter: drop-shadow(0 0 1px rgba(84, 242, 242, 0.7));
+}
+
+.hovercard-item a {
+    color: #4A0080;
+    text-decoration: none;
+    font-weight: bold;
+    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5);
+}
+
+.hovercard-item:hover {
+    background-color: #FFDFBA;
+    border: 1px solid #FB91D1;
+    box-shadow: inset 0 0 5px rgba(251, 145, 209, 0.3);
+    padding-left: 20px;
+}
+
+.hovercard-item:hover::before {
+    content: '★';
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #FF009A;
+}
+
+.hovercard-item:last-child {
+    margin-bottom: 0;
 }
 
 /* User Stats */
@@ -337,8 +523,11 @@ html[lang='ja'] .navigation-title {
 
 /* Credits */
 .sidebar-credits {
-    border-top: 1px solid #fff;
+    border-top: 1px solid rgba(173, 140, 255, 0.4);
     padding: 8px 0;
-    margin-top: 8px;
+    margin-top: 12px;
     text-align: center;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.7);
+    text-shadow: 0 0 2px rgba(84, 242, 242, 0.5);
 }
\ No newline at end of file
diff --git a/static/images/core/backgrounds/user-area-border.jpg b/static/images/core/backgrounds/user-area-border.jpg
deleted file mode 100644
index d53cbc61..00000000
--- a/static/images/core/backgrounds/user-area-border.jpg
+++ /dev/null
diff --git a/static/images/core/backgrounds/user-area-border.png b/static/images/core/backgrounds/user-area-border.png
new file mode 100644
index 00000000..e220709a
--- /dev/null
+++ b/static/images/core/backgrounds/user-area-border.png
diff --git a/static/images/core/backgrounds/user-area.gif b/static/images/core/backgrounds/user-area.gif
new file mode 100644
index 00000000..4b70f3f0
--- /dev/null
+++ b/static/images/core/backgrounds/user-area.gif
diff --git a/static/images/core/icons/archives.gif b/static/images/core/icons/archives.gif
new file mode 100644
index 00000000..36575787
--- /dev/null
+++ b/static/images/core/icons/archives.gif
diff --git a/static/images/core/icons/categories.gif b/static/images/core/icons/categories.gif
new file mode 100644
index 00000000..e9aa38e2
--- /dev/null
+++ b/static/images/core/icons/categories.gif
diff --git a/static/images/core/icons/tags.gif b/static/images/core/icons/tags.gif
new file mode 100644
index 00000000..83afd6a5
--- /dev/null
+++ b/static/images/core/icons/tags.gif
diff --git a/static/images/core/icons/weblog_internal.png b/static/images/core/icons/weblog_internal.png
new file mode 100644
index 00000000..38e1a1e6
--- /dev/null
+++ b/static/images/core/icons/weblog_internal.png