mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
feat: modern and animated notices on homepage
This commit is contained in:
SethBurkart123
+397
-5
@@ -1175,11 +1175,6 @@ div > ol:has(.uiFileHandlerWrapper) {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.notices-container h2 {
|
||||
margin: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.notice {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
@@ -3543,3 +3538,400 @@ body {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.notice-unified-content.notice-modal-state {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// Notice card hover effects for main page cards
|
||||
.notice-unified-content.notice-card-state:not([data-transitioning]) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-secondary) !important;
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-staff {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.notice-preview {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Modal styles
|
||||
.notice-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notice-modal-transition {
|
||||
position: fixed;
|
||||
z-index: 10001;
|
||||
transition: none; // Controlled by motion animations
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
background: var(--background-primary);
|
||||
border-radius: 16px;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&.notice-transitioning {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-unified-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.notice-unified-content {
|
||||
// Override any conflicting .notice styles - unified for both states
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: inherit !important;
|
||||
color: inherit !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.notice-content-title {
|
||||
font-size: 20px !important; // Nice middle ground - not too big, not too small
|
||||
font-weight: 600 !important;
|
||||
color: var(--text-primary) !important;
|
||||
margin: 0 0 12px 0 !important;
|
||||
line-height: 1.3 !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-content-body {
|
||||
font-size: 14px !important;
|
||||
color: var(--text-secondary) !important;
|
||||
line-height: 1.5 !important;
|
||||
margin: 0 !important;
|
||||
flex: 1;
|
||||
display: block;
|
||||
// Force stable layout dimensions - content renders at full size always
|
||||
min-width: 600px; // Ensure tables have consistent width for layout
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// The ONLY difference between states is clipping!
|
||||
&.notice-card-state {
|
||||
.notice-content-body {
|
||||
// Clip to show only 2 lines but keep full layout
|
||||
overflow: hidden;
|
||||
max-height: 3em; // ~2 lines worth of height
|
||||
}
|
||||
}
|
||||
|
||||
&.notice-modal-state {
|
||||
.notice-close-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notice-content-body {
|
||||
// Show full content with scrolling
|
||||
overflow-y: auto;
|
||||
|
||||
// Custom scrollbar for long content
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
// Style content elements nicely
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.notice-badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notice-close-btn {
|
||||
position: absolute !important;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: var(--background-secondary);
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease !important;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-tertiary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-modal-badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notice-modal-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-modal-staff {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.notice-modal-close {
|
||||
background: var(--background-secondary);
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-tertiary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-modal-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 16px 20px 20px 20px;
|
||||
line-height: 1.3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-modal-body {
|
||||
padding: 0 20px 20px 20px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
// Custom scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
// Style content elements
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode adjustments
|
||||
.dark {
|
||||
.notice-card {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile responsiveness
|
||||
@media (max-width: 768px) {
|
||||
.notice-modal-overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.notice-modal-title {
|
||||
font-size: 20px;
|
||||
margin: 12px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.notice-modal-body {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.notice-preview {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user