الفرق بين المراجعتين لصفحة: «ميدياويكي:Common.css»
المظهر
وسمان: رجوع مسترجع |
وسم: رجوع |
||
سطر ١: | سطر ١: | ||
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:[email protected]&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Readex+Pro:[email protected]&display=swap'); | ||
.mw-body-header { | |||
background: linear-gradient(135deg, # | background: linear-gradient(135deg, #f7f3f0 0%, #ede7e0 50%, #f2ebe4 100%); | ||
border-bottom: 3px solid # | border-bottom: 3px solid transparent; | ||
border-image: linear-gradient(90deg, #d4af37, #b8860b, #daa520) 1; | |||
padding: 1.5rem 2rem; | padding: 1.5rem 2rem; | ||
position: relative; | position: relative; | ||
display: flex; | display: flex; | ||
سطر ١٠: | سطر ١٠: | ||
justify-content: space-between; | justify-content: space-between; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | gap: 1.5rem; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* Layered Islamic patterns */ | |||
.mw-body-header::before { | .mw-body-header::before { | ||
content: ''; | content: ''; | ||
سطر ١٩: | سطر ٢٠: | ||
top: -50%; | top: -50%; | ||
left: -50%; | left: -50%; | ||
right: -50%; | |||
bottom: -50%; | |||
background: | background: | ||
background-size: | radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 30%), | ||
radial-gradient(circle at 70% 80%, rgba(184, 134, 11, 0.06) 0%, transparent 25%), | |||
animation: | conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(218, 165, 32, 0.03) 60deg, transparent 120deg, rgba(212, 175, 55, 0.04) 180deg, transparent 240deg, rgba(184, 134, 11, 0.02) 300deg, transparent 360deg); | ||
z-index: | background-size: 200px 200px, 150px 150px, 300px 300px; | ||
animation: rotatePattern 30s linear infinite; | |||
z-index: 0; | |||
} | } | ||
سطر ٣٥: | سطر ٣٨: | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
background: url("data:image/svg+xml,%3Csvg width=' | background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.3' opacity='0.15'%3E%3Cpath d='M40 10 L50 30 L70 30 L56 42 L60 62 L40 50 L20 62 L24 42 L10 30 L30 30 Z'/%3E%3Ccircle cx='40' cy='40' r='35' stroke-width='0.2'/%3E%3C/g%3E%3C/svg%3E") repeat; | ||
background-size: | background-size: 80px 80px; | ||
z-index: | z-index: 1; | ||
} | } | ||
@keyframes | @keyframes rotatePattern { | ||
0% { transform: rotate(0deg); } | |||
100% { transform: rotate(360deg); } | |||
} | } | ||
.vector-toc-landmark { | .vector-toc-landmark { | ||
position: relative; | position: relative; | ||
z-index: | z-index: 2; | ||
} | } | ||
سطر ٦٠: | سطر ٦٣: | ||
.vector-dropdown-label { | .vector-dropdown-label { | ||
background: linear-gradient( | background: linear-gradient(135deg, #8b7355 0%, #a0845c 100%); | ||
color: | color: #f5f5dc; | ||
border: | border: none; | ||
padding: 0.8rem 1.2rem; | padding: 0.8rem 1.2rem; | ||
border-radius: | border-radius: 12px; | ||
cursor: pointer; | cursor: pointer; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 0.6rem; | gap: 0.6rem; | ||
font-size: 0. | font-size: 0.95rem; | ||
font-weight: 500; | font-weight: 500; | ||
transition: all 0.4s cubic-bezier(0. | transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | ||
text-decoration: none; | text-decoration: none; | ||
box-shadow: 0 3px 12px rgba(139, 115, 85, 0.25); | |||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
سطر ٨٦: | سطر ٨٩: | ||
height: 100%; | height: 100%; | ||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | ||
transition: left 0. | transition: left 0.6s; | ||
} | |||
.vector-dropdown-label:hover { | |||
background: linear-gradient(135deg, #a0845c 0%, #8b7355 100%); | |||
transform: translateY(-2px); | |||
box-shadow: 0 5px 20px rgba(139, 115, 85, 0.35); | |||
} | } | ||
.vector-dropdown-label:hover::before { | .vector-dropdown-label:hover::before { | ||
left: 100%; | left: 100%; | ||
} | } | ||
سطر ١٠٤: | سطر ١٠٦: | ||
width: 18px; | width: 18px; | ||
height: 18px; | height: 18px; | ||
color: #f5f5dc; | |||
} | } | ||
سطر ١١١: | سطر ١١٢: | ||
content: '◈'; | content: '◈'; | ||
font-size: 16px; | font-size: 16px; | ||
color: # | color: #d4af37; | ||
} | } | ||
سطر ١١٧: | سطر ١١٨: | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
top: 100%; | top: calc(100% + 8px); | ||
right: 0; | right: 0; | ||
background: linear-gradient( | background: linear-gradient(145deg, #faf8f5, #f0ede8); | ||
min-width: 220px; | min-width: 220px; | ||
box-shadow: 0 | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(139, 115, 85, 0.1); | ||
border-radius: | border-radius: 12px; | ||
border: | border: 1px solid rgba(212, 175, 55, 0.2); | ||
z-index: 1000; | z-index: 1000; | ||
overflow: hidden; | overflow: hidden; | ||
backdrop-filter: blur( | backdrop-filter: blur(8px); | ||
} | |||
.vector-dropdown-content::before { | |||
content: ''; | |||
position: absolute; | |||
top: -6px; | |||
right: 20px; | |||
width: 12px; | |||
height: 12px; | |||
background: #faf8f5; | |||
border: 1px solid rgba(212, 175, 55, 0.2); | |||
border-bottom: none; | |||
border-right: none; | |||
transform: rotate(45deg); | |||
} | } | ||
.vector-dropdown:hover .vector-dropdown-content { | .vector-dropdown:hover .vector-dropdown-content { | ||
display: block; | display: block; | ||
animation: | animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
} | } | ||
@keyframes | @keyframes slideIn { | ||
from { | from { | ||
opacity: 0; | opacity: 0; | ||
transform: translateY( | transform: translateY(-8px); | ||
} | } | ||
to { | to { | ||
opacity: 1; | opacity: 1; | ||
transform: translateY(0 | transform: translateY(0); | ||
} | } | ||
} | } | ||
سطر ١٤٨: | سطر ١٦٢: | ||
.vector-unpinned-container { | .vector-unpinned-container { | ||
padding: 1rem 0; | padding: 1rem 0; | ||
} | } | ||
.vector-unpinned-container::after { | .vector-unpinned-container::after { | ||
content: ' | content: 'فهرس المحتويات'; | ||
display: block; | display: block; | ||
padding: 0. | padding: 0.8rem 1.2rem; | ||
color: # | color: #8b7355; | ||
font-weight: 600; | font-weight: 600; | ||
border-bottom: 2px solid rgba(212, 175, 55, 0.15); | |||
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent); | |||
} | } | ||
سطر ١٦٨: | سطر ١٨٠: | ||
padding: 0 2rem; | padding: 0 2rem; | ||
position: relative; | position: relative; | ||
z-index: | z-index: 2; | ||
} | } | ||
.mw-page-title-main { | .mw-page-title-main { | ||
font-size: 2.2rem; | font-size: 2.2rem; | ||
color: # | color: #5d4e37; | ||
font-weight: 700; | font-weight: 700; | ||
font-family: 'Amiri', serif; | font-family: 'Amiri', 'Times New Roman', serif; | ||
text-shadow: 2px 2px 4px rgba( | text-shadow: | ||
1px 1px 0 rgba(212, 175, 55, 0.3), | |||
2px 2px 4px rgba(93, 78, 55, 0.1); | |||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
.mw-page-title-main::before { | .mw-page-title-main::before, | ||
content: ' | .mw-page-title-main::after { | ||
content: '❋'; | |||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
color: # | color: #d4af37; | ||
font-size: 1. | font-size: 1.5rem; | ||
animation: pulse 2s ease-in-out infinite; | opacity: 0.7; | ||
animation: pulse 2s ease-in-out infinite alternate; | |||
} | |||
.mw-page-title-main::before { | |||
right: -3rem; | |||
} | } | ||
.mw-page-title-main::after { | .mw-page-title-main::after { | ||
left: -3rem; | |||
left: - | |||
} | } | ||
@keyframes pulse { | @keyframes pulse { | ||
0 | 0% { opacity: 0.5; transform: translateY(-50%) scale(0.9); } | ||
100% { opacity: 0.8; transform: translateY(-50%) scale(1.1); } | |||
} | } | ||
#ca-addsection { | #ca-addsection { | ||
background: linear-gradient( | background: linear-gradient(135deg, #556b2f 0%, #6b8e23 50%, #808000 100%); | ||
color: | color: #f0f8e8; | ||
text-decoration: none; | text-decoration: none; | ||
padding: 0.8rem 1.5rem; | padding: 0.8rem 1.5rem; | ||
border-radius: | border-radius: 12px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 0.6rem; | gap: 0.6rem; | ||
font-size: 0. | font-size: 0.95rem; | ||
font-weight: 500; | font-weight: 500; | ||
transition: all 0.4s cubic-bezier(0. | transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | ||
position: relative; | position: relative; | ||
z-index: | z-index: 2; | ||
box-shadow: 0 3px 12px rgba(85, 107, 47, 0.25); | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
سطر ٢٣٥: | سطر ٢٤٥: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
background: linear-gradient(90deg, transparent, rgba( | background: linear-gradient(90deg, transparent, rgba(240, 248, 232, 0.2), transparent); | ||
transition: left 0. | transition: left 0.6s; | ||
} | |||
#ca-addsection:hover { | |||
background: linear-gradient(135deg, #6b8e23 0%, #556b2f 50%, #808000 100%); | |||
transform: translateY(-2px); | |||
box-shadow: 0 5px 20px rgba(85, 107, 47, 0.35); | |||
} | } | ||
#ca-addsection:hover::before { | #ca-addsection:hover::before { | ||
left: 100%; | left: 100%; | ||
} | } | ||
.vector-icon.mw-ui-icon-speechBubbleAdd-progressive { | .vector-icon.mw-ui-icon-speechBubbleAdd-progressive { | ||
color: #d4af37; | |||
} | } | ||
.vector-icon.mw-ui-icon-speechBubbleAdd-progressive::before { | .vector-icon.mw-ui-icon-speechBubbleAdd-progressive::before { | ||
content: ' | content: '✦'; | ||
font-size: 18px; | font-size: 18px; | ||
font-weight: bold; | |||
} | } | ||
سطر ٢٦٧: | سطر ٢٧٥: | ||
text-align: center; | text-align: center; | ||
padding: 1.5rem 1rem; | padding: 1.5rem 1rem; | ||
gap: 1rem; | |||
} | } | ||
سطر ٢٩٢: | سطر ٣٠١: | ||
} | } | ||
} | } | ||
/* Subtle animation for the whole header */ | |||
.mw-body-header { | |||
animation: headerGlow 8s ease-in-out infinite alternate; | |||
} | } | ||
@keyframes headerGlow { | |||
0% { | |||
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1); | |||
} | |||
100% { | |||
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15); | |||
} | |||
} | } | ||
:root { | :root { |
مراجعة ١١:٠٢، ١٩ يوليو ٢٠٢٥
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:[email protected]&display=swap');
.mw-body-header {
background: linear-gradient(135deg, #f7f3f0 0%, #ede7e0 50%, #f2ebe4 100%);
border-bottom: 3px solid transparent;
border-image: linear-gradient(90deg, #d4af37, #b8860b, #daa520) 1;
padding: 1.5rem 2rem;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.5rem;
overflow: hidden;
}
/* Layered Islamic patterns */
.mw-body-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background:
radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 30%),
radial-gradient(circle at 70% 80%, rgba(184, 134, 11, 0.06) 0%, transparent 25%),
conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(218, 165, 32, 0.03) 60deg, transparent 120deg, rgba(212, 175, 55, 0.04) 180deg, transparent 240deg, rgba(184, 134, 11, 0.02) 300deg, transparent 360deg);
background-size: 200px 200px, 150px 150px, 300px 300px;
animation: rotatePattern 30s linear infinite;
z-index: 0;
}
.mw-body-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.3' opacity='0.15'%3E%3Cpath d='M40 10 L50 30 L70 30 L56 42 L60 62 L40 50 L20 62 L24 42 L10 30 L30 30 Z'/%3E%3Ccircle cx='40' cy='40' r='35' stroke-width='0.2'/%3E%3C/g%3E%3C/svg%3E") repeat;
background-size: 80px 80px;
z-index: 1;
}
@keyframes rotatePattern {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.vector-toc-landmark {
position: relative;
z-index: 2;
}
.vector-dropdown {
position: relative;
display: inline-block;
}
.vector-dropdown-checkbox {
display: none;
}
.vector-dropdown-label {
background: linear-gradient(135deg, #8b7355 0%, #a0845c 100%);
color: #f5f5dc;
border: none;
padding: 0.8rem 1.2rem;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
box-shadow: 0 3px 12px rgba(139, 115, 85, 0.25);
position: relative;
overflow: hidden;
}
.vector-dropdown-label::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s;
}
.vector-dropdown-label:hover {
background: linear-gradient(135deg, #a0845c 0%, #8b7355 100%);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(139, 115, 85, 0.35);
}
.vector-dropdown-label:hover::before {
left: 100%;
}
.vector-icon {
display: inline-flex;
width: 18px;
height: 18px;
color: #f5f5dc;
}
.vector-icon::before {
content: '◈';
font-size: 16px;
color: #d4af37;
}
.vector-dropdown-content {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: linear-gradient(145deg, #faf8f5, #f0ede8);
min-width: 220px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(139, 115, 85, 0.1);
border-radius: 12px;
border: 1px solid rgba(212, 175, 55, 0.2);
z-index: 1000;
overflow: hidden;
backdrop-filter: blur(8px);
}
.vector-dropdown-content::before {
content: '';
position: absolute;
top: -6px;
right: 20px;
width: 12px;
height: 12px;
background: #faf8f5;
border: 1px solid rgba(212, 175, 55, 0.2);
border-bottom: none;
border-right: none;
transform: rotate(45deg);
}
.vector-dropdown:hover .vector-dropdown-content {
display: block;
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vector-unpinned-container {
padding: 1rem 0;
}
.vector-unpinned-container::after {
content: 'فهرس المحتويات';
display: block;
padding: 0.8rem 1.2rem;
color: #8b7355;
font-weight: 600;
border-bottom: 2px solid rgba(212, 175, 55, 0.15);
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent);
}
.firstHeading {
flex: 1;
text-align: center;
margin: 0;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.mw-page-title-main {
font-size: 2.2rem;
color: #5d4e37;
font-weight: 700;
font-family: 'Amiri', 'Times New Roman', serif;
text-shadow:
1px 1px 0 rgba(212, 175, 55, 0.3),
2px 2px 4px rgba(93, 78, 55, 0.1);
position: relative;
display: inline-block;
}
.mw-page-title-main::before,
.mw-page-title-main::after {
content: '❋';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #d4af37;
font-size: 1.5rem;
opacity: 0.7;
animation: pulse 2s ease-in-out infinite alternate;
}
.mw-page-title-main::before {
right: -3rem;
}
.mw-page-title-main::after {
left: -3rem;
}
@keyframes pulse {
0% { opacity: 0.5; transform: translateY(-50%) scale(0.9); }
100% { opacity: 0.8; transform: translateY(-50%) scale(1.1); }
}
#ca-addsection {
background: linear-gradient(135deg, #556b2f 0%, #6b8e23 50%, #808000 100%);
color: #f0f8e8;
text-decoration: none;
padding: 0.8rem 1.5rem;
border-radius: 12px;
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
box-shadow: 0 3px 12px rgba(85, 107, 47, 0.25);
overflow: hidden;
}
#ca-addsection::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(240, 248, 232, 0.2), transparent);
transition: left 0.6s;
}
#ca-addsection:hover {
background: linear-gradient(135deg, #6b8e23 0%, #556b2f 50%, #808000 100%);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(85, 107, 47, 0.35);
}
#ca-addsection:hover::before {
left: 100%;
}
.vector-icon.mw-ui-icon-speechBubbleAdd-progressive {
color: #d4af37;
}
.vector-icon.mw-ui-icon-speechBubbleAdd-progressive::before {
content: '✦';
font-size: 18px;
font-weight: bold;
}
/* Responsive */
@media (max-width: 768px) {
.mw-body-header {
flex-direction: column;
text-align: center;
padding: 1.5rem 1rem;
gap: 1rem;
}
.firstHeading {
order: 1;
margin: 1rem 0;
padding: 0;
}
.mw-page-title-main {
font-size: 1.8rem;
}
.mw-page-title-main::before,
.mw-page-title-main::after {
display: none;
}
.vector-toc-landmark {
order: 0;
}
#ca-addsection {
order: 2;
}
}
/* Subtle animation for the whole header */
.mw-body-header {
animation: headerGlow 8s ease-in-out infinite alternate;
}
@keyframes headerGlow {
0% {
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
}
100% {
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
}
}
:root {
--soft-lavender: #f8f6ff;
--pale-mint: #f0f8f5;
--cream-white: #fdfcf8;
--dusty-rose: #f5f0f3;
--soft-blue: #e8f2ff;
--gentle-purple: #e6e0ff;
--warm-beige: #f9f7f4;
--subtle-gray: #f4f4f6;
--muted-text: #5a5a6b;
--accent-purple: #8b7fb8;
--accent-mint: #7ba898;
--accent-rose: #c4a5b0;
--soft-shadow: rgba(139, 127, 184, 0.1);
--gentle-border: rgba(139, 127, 184, 0.15);
}
.mw-footer-container{
padding: 0;
background: #ff000000;
margin: 0;
border-radius: 0px;
}
.catlinks {
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 32px;
max-width: -webkit-fill-available !important;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
max-width: 700px;
width: 100%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.catlinks::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b);
border-radius: 12px 12px 0 0;
}
.catlinks:hover {
transform: translateY(-2px);
box-shadow:
0 10px 25px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
.mw-normal-catlinks {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.catlinks-title {
font-size: 17px;
font-weight: 600;
color: #1e293b;
text-decoration: none;
padding: 12px 20px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
transition: all 0.2s ease;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.catlinks-title::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
transition: left 0.3s ease;
}
.catlinks-title:hover::before {
left: 100%;
}
.catlinks-title:hover {
background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
border-color: #3b82f6;
color: #1e40af;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}
.catlinks-title:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.category-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
}
.category-item {
display: inline-block;
position: relative;
}
.category-link {
display: inline-block;
padding: 10px 18px;
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
color: #334155;
text-decoration: none;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.category-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.3s ease;
}
.category-link:hover::before {
left: 100%;
}
.category-link:hover {
background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
border-color: #64748b;
color: #1e293b;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(100, 116, 139, 0.15);
}
.category-link:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.category-link.new {
background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
border-color: rgba(248, 113, 113, 0.3);
position: relative;
}
.category-link.new::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 8px;
height: 8px;
background: #ef4444;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.2);
}
}
.category-link.new:hover {
background: linear-gradient(145deg, #fee2e2 0%, #fecaca 100%);
border-color: #f87171;
color: #b91c1c;
box-shadow: 0 4px 8px rgba(248, 113, 113, 0.2);
}
/* Separator styling */
.category-item:not(:last-child)::before {
content: '';
position: absolute;
top: 50%;
left: -8px;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: linear-gradient(45deg, #94a3b8, #64748b);
border-radius: 50%;
z-index: 1;
}
/* Professional typography */
.catlinks {
font-feature-settings: "kern" 1, "liga" 1;
text-rendering: optimizeLegibility;
}
/* Responsive Design */
@media (max-width: 768px) {
.catlinks {
padding: 24px;
margin: 10px;
}
.mw-normal-catlinks {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.category-list {
width: 100%;
}
.catlinks-title {
font-size: 16px;
padding: 10px 16px;
}
.category-link {
font-size: 13px;
padding: 8px 14px;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.catlinks {
border-color: rgba(148, 163, 184, 0.2);
}
.catlinks-title {
background: linear-gradient(145deg, #475569 0%, #64748b 100%);
color: #f1f5f9;
border-color: rgba(148, 163, 184, 0.3);
}
.category-link {
background: linear-gradient(145deg, #475569 0%, #64748b 100%);
color: #e2e8f0;
border-color: rgba(148, 163, 184, 0.3);
}
}
/* Print styles */
@media print {
body {
background: white;
}
.catlinks {
box-shadow: none;
border: 1px solid #000;
background: white;
}
.catlinks::before {
display: none;
}
.catlinks-title,
.category-link {
background: white !important;
border: 1px solid #000;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.catlinks,
.catlinks-title,
.category-link,
.category-link::before,
.catlinks-title::before {
transition: none;
animation: none;
}
}
/* Overall page styling */
body {
background: linear-gradient(135deg, var(--soft-lavender) 0%, var(--pale-mint) 50%, var(--cream-white) 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--muted-text);
line-height: 1.6;
margin: 0;
padding: 0;
min-height: 100vh;
}
/* Main container */
.mw-page-container {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
border-radius: 20px;
max-width: max-content;
padding: 0;
margin: 0;
box-shadow: 0 8px 32px var(--soft-shadow);
overflow: hidden;
}
.skin--responsive .mw-page-container {
min-width: auto;
padding: 0 !important;
margin: 0 !important;
}
.mw-page-container-inner {
background: transparent;
}
.vector-menu-tabs .mw-list-item.selected a{
color: #3875a1 !important;
border-bottom: 3px solid;
padding: 10px !important;
background: linear-gradient(90deg, #e0f0ff00, #e8f2ff00) !important;
}
.vector-menu-tabs .mw-list-item a:visited{
color: #3875a1 !important;
border-bottom: 3px solid;
padding: 10px !important;
background: linear-gradient(90deg, #e0f0ff00, #e8f2ff00) !important;
}
/* Main content area */
.mw-body {
background: var(--cream-white);
margin: 0;
padding: 2rem;
border-radius: 0 0 20px 20px;
}
.mw-body-content {
background: transparent;
}
.mw-content-text {
background: rgba(255, 255, 255, 0.8);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 4px 20px var(--soft-shadow);
margin: 1rem 0;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: var(--accent-purple);
font-weight: 400;
margin: 1.5rem 0 1rem 0;
}
.mw-heading h2 {
padding: 1rem 1.5rem;
border-radius: 12px;
background: #f5deb300;
border-right: 4px solid;
display: flex
;
font-family: "Readex Pro", sans-serif;
font-size: 1.2rem !important;
justify-content: space-around;
flex-wrap: nowrap;
border-left: 4px solid #8E1616;
color: #8E1616;
box-shadow: 0 2px 10px var(--soft-shadow);
}
/* Paragraphs and text */
p {
margin: 1rem 0;
line-height: 1.7;
}
p b, strong {
color: var(--accent-purple);
font-weight: 600;
}
/* Category styling */
.mw-category-generated {
display: none !important;
background: var(--warm-beige);
padding: 1.5rem;
border-radius: 15px;
margin: 1rem 0;
box-shadow: 0 4px 20px var(--soft-shadow);
}
.mw-category-generated h2 {
color: var(--accent-mint);
border-bottom: 2px solid var(--accent-mint);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.mw-category {
background: rgba(255, 255, 255, 0.6);
padding: 1rem;
border-radius: 10px;
margin: 0.5rem 0;
}
.mw-category-group h3 {
color: var(--accent-rose);
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.mw-category ul {
list-style: none;
padding: 0;
}
.mw-category li {
margin: 0.3rem 0;
}
.mw-category a {
color: var(--muted-text);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 8px;
display: inline-block;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.5);
}
.mw-category a:hover {
background: var(--accent-mint);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--soft-shadow);
}
/* Toolbar styling */
.vector-page-toolbar {
background: var(--subtle-gray);
border-radius: 15px;
margin: 1rem 0;
padding: 0.5rem;
box-shadow: 0 2px 10px var(--soft-shadow);
}
.vector-menu-tabs {
background: transparent;
}
.vector-menu-tabs a {
color: var(--muted-text);
text-decoration: none;
padding: 0.7rem 1.2rem;
border-radius: 10px;
margin: 0 0.2rem;
background: rgba(255, 255, 255, 0.6);
transition: all 0.3s ease;
}
.vector-menu-tabs a:hover,
.vector-menu-tabs .selected a {
background: var(--accent-purple);
color: white;
transform: translateY(-2px);
}
/* Page tools */
.vector-page-tools {
background: var(--dusty-rose);
border-radius: 15px;
padding: 1rem;
margin: 1rem 0;
box-shadow: 0 4px 20px var(--soft-shadow);
}
/* Appearance controls */
.vector-appearance {
background: var(--soft-blue);
border-radius: 15px;
padding: 1rem;
margin: 1rem 0;
box-shadow: 0 4px 20px var(--soft-shadow);
}
.cdx-radio {
margin: 0.5rem 0;
}
.cdx-radio__label {
color: var(--muted-text);
padding: 0.5rem 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.cdx-radio__input:checked + .cdx-radio__icon + .cdx-radio__label {
background: var(--accent-purple);
color: white;
}
/* Footer */
.mw-footer {
background: linear-gradient(90deg, var(--gentle-purple), var(--soft-blue));
padding: 5rem;
border-radius: 0 0 20px 20px;
margin-top: 2rem;
}
.mw-footer ul {
list-style: none;
padding: 0;
margin: 0.5rem 0;
}
.mw-footer li {
display: inline-block;
margin: 0 1rem 0 0;
}
.mw-footer a {
color: var(--muted-text);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.mw-footer a:hover {
background: var(--accent-mint);
color: white;
}
/* Buttons */
.cdx-button {
background: var(--accent-purple);
color: white;
border: none;
background-color: #6485d1;
color: #f4faff;
/* border-color: var(--border-color-interactive, #72777d); */
border-radius: 0;
padding: 0.7rem 1.5rem;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px var(--soft-shadow);
}
.cdx-button:hover {
background: var(--accent-mint);
transform: translateY(-2px);
color: block;
box-shadow: 0 6px 20px var(--soft-shadow);
}
/* Dropdown styling */
.vector-dropdown {
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 4px 20px var(--soft-shadow);
}
.vector-dropdown-content {
background: var(--cream-white);
border-radius: 10px;
padding: 1rem;
margin-top: 0.5rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.mw-page-container {
margin: 10px;
border-radius: 15px;
}
.mw-body {
padding: 1rem;
}
.mw-content-text {
padding: 1rem;
}
.firstHeading {
font-size: 2rem;
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Selection styling */
::selection {
background: var(--accent-purple);
color: white;
}
.cdx-search-input--has-end-button {
/* background-color: #6e6069; */
display: flex
;
border: 1px solid var(--border-color-base, #a2a9b1);
/* border-radius: 2px; */
}
.cdx-text-input__input:enabled {
background-color: var(--background-color-base, #fff);
color: var(--color-base, #202122);
border-color: #72777d00;
box-shadow: inset 0 0 0 1px var(--box-shadow-color-transparent, transparent);
transition-property: background-color, color, border-color, box-shadow;
transition-duration: .25s;
}
/* Focus styling */
*:focus {
outline: 2px solid var(--accent-purple);
outline-offset: 2px;
border-radius: 4px;
}
@media screen and (min-width: 1680px) {
.mw-page-container, .vector-header-container .mw-header, .vector-header-container .vector-sticky-header {
padding-right: 3.25rem;
padding-left: 3.25rem;
border-bottom: 1px solid #27292d42 !important;
}
}