ssbg04/Portfolioo
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: toast notifications styles and visibility bugs in globals.css and module CSS

Browse Source
This commit is contained in:
ssbg04 committed 2026-06-06 22:43:20 +08:00
1 parent 730083b061
commit 17a34659b1
2 files changed
+126 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/css/modules/_contact.css
+6 -2
View File
@@ -99,11 +99,13 @@ textarea:focus {
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
visibility: hidden;
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.35s ease;
}
.toast-container.toast-visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
@@ -195,11 +197,13 @@ textarea:focus {
background: rgba(0, 0, 0, 0.45);
z-index: 9998;
opacity: 0;
transition: opacity 0.35s ease;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
pointer-events: none;
}
.toast-backdrop.toast-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
src/app/globals.css
+120
View File
@@ -1041,6 +1041,126 @@ textarea:focus {
justify-content: center;
}
/* =====================================================
TOAST NOTIFICATIONS
===================================================== */
.toast-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.85);
z-index: 9999;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.35s ease;
}
.toast-container.toast-visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
.toast {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 28px;
border-radius: 18px;
min-width: 300px;
max-width: 480px;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05);
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
.toast-success {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.4);
color: #10b981;
}
.toast-error {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
.toast-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.2rem;
}
.toast-success .toast-icon {
background: rgba(16, 185, 129, 0.2);
}
.toast-error .toast-icon {
background: rgba(239, 68, 68, 0.2);
}
.toast-body {
flex: 1;
}
.toast-title {
font-weight: 700;
font-size: 1.05rem;
margin-bottom: 3px;
}
.toast-msg {
font-size: 0.88rem;
opacity: 0.85;
font-weight: 400;
}
.toast-close {
background: none;
border: none;
color: currentColor;
opacity: 0.6;
cursor: pointer;
font-size: 1.2rem;
padding: 0 0 0 8px;
line-height: 1;
flex-shrink: 0;
transition: opacity 0.2s;
}
.toast-close:hover {
opacity: 1;
}
.toast-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
pointer-events: none;
}
.toast-backdrop.toast-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* =====================================================
PORTFOLIO AI CHATBOT