מדיה ויקי:Common.css: הבדלים בין גרסאות בדף
(עיצוב מותאם עם גופנים עבריים) |
(עיצוב רספונסיבי ודקורטיבי מרהיב) |
||
| שורה 1: | שורה 1: | ||
/* === | /* === סמארפדיה - עיצוב מרהיב === */ | ||
/* | /* Google Fonts - Hebrew */ | ||
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&family=David+Libre:wght@400;500;700&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&family=David+Libre:wght@400;500;700&family=Secular+One&display=swap'); | ||
:root { | |||
--primary-blue: #1a1a6c; | |||
--primary-gold: #c9a227; | |||
--light-gold: #f4e8c1; | |||
--light-blue: #e8e8f4; | |||
--bg-cream: #fefcf6; | |||
} | } | ||
/* | /* === BASE === */ | ||
body { | |||
font-family: 'Heebo', Arial, sans-serif !important; | |||
font-family: ' | background: linear-gradient(135deg, #f5f5f5 0%, #e8e8f4 100%); | ||
line-height: 1.8; | |||
} | } | ||
h1, .firstHeading { | /* === CONTENT AREA === */ | ||
font-size: 2em; | .mw-body { | ||
border-bottom: | background: var(--bg-cream); | ||
padding-bottom: | border-radius: 15px; | ||
box-shadow: 0 4px 20px rgba(26, 26, 108, 0.1); | |||
padding: 25px; | |||
margin: 15px; | |||
} | |||
.mw-body-content { | |||
font-size: 17px; | |||
} | |||
/* === HEADINGS === */ | |||
h1, h2, h3, .mw-headline, .firstHeading { | |||
font-family: 'David Libre', 'Secular One', serif !important; | |||
color: var(--primary-blue); | |||
} | |||
.firstHeading, h1 { | |||
font-size: 2.2em; | |||
background: linear-gradient(90deg, var(--primary-blue), #3d3d9c); | |||
-webkit-background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
background-clip: text; | |||
border-bottom: 4px solid var(--primary-gold); | |||
padding-bottom: 15px; | |||
margin-bottom: 25px; | |||
} | } | ||
h2 { | h2 { | ||
border- | font-size: 1.6em; | ||
padding- | border-right: 5px solid var(--primary-gold); | ||
padding-right: 15px; | |||
margin: 30px 0 15px; | |||
} | } | ||
h3 { | |||
color: var(--primary-gold); | |||
font-size: 1.3em; | |||
} | } | ||
a | /* === LINKS === */ | ||
color: | a { | ||
color: var(--primary-blue); | |||
text-decoration: none; | |||
transition: all 0.3s ease; | |||
} | } | ||
a:hover { | |||
color: var(--primary-gold); | |||
text-decoration: underline; | |||
} | } | ||
/* | /* === TABLES === */ | ||
.wikitable { | .wikitable { | ||
border-radius: | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
border: none !important; | |||
box-shadow: 0 2px 10px rgba(0,0,0,0.08); | |||
} | } | ||
/* | .wikitable th { | ||
background: linear-gradient(135deg, var(--primary-blue), #2a2a8c) !important; | |||
color: white !important; | |||
padding: 15px !important; | |||
font-weight: 500; | |||
} | |||
.wikitable td { | |||
padding: 12px 15px !important; | |||
border-color: #eee !important; | |||
} | |||
.wikitable tr:hover td { | |||
background: var(--light-gold) !important; | |||
} | |||
/* === CATEGORIES === */ | |||
.catlinks { | .catlinks { | ||
background: # | background: linear-gradient(135deg, var(--light-blue), #f0f0ff); | ||
border-radius: | border-radius: 12px; | ||
padding: | padding: 15px 20px; | ||
border: | border: 2px solid var(--primary-gold); | ||
margin-top: 30px; | |||
} | } | ||
/* | /* === PORTAL BOXES === */ | ||
div[style*="border-radius"] { | |||
transition: transform 0.3s ease, box-shadow 0.3s ease; | |||
} | } | ||
/* | div[style*="border-radius"]:hover { | ||
transform: translateY(-3px); | |||
box-shadow: 0 8px 25px rgba(26, 26, 108, 0.15); | |||
} | |||
/* === SIDEBAR === */ | |||
.vector-menu-portal .vector-menu-heading { | |||
color: var(--primary-blue); | |||
font-weight: 700; | |||
} | |||
/* === FOOTER === */ | |||
#footer { | #footer { | ||
background: # | background: linear-gradient(135deg, var(--primary-blue), #0d0d4d); | ||
color: | color: white; | ||
padding: | padding: 20px; | ||
border-radius: 0 0 | border-radius: 15px 15px 0 0; | ||
margin-top: 30px; | |||
} | } | ||
#footer a { | #footer a { | ||
color: | color: var(--primary-gold) !important; | ||
} | |||
/* === DECORATIVE ELEMENTS === */ | |||
.mw-body::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
width: 150px; | |||
height: 150px; | |||
background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 70%); | |||
pointer-events: none; | |||
} | |||
/* === RESPONSIVE / MOBILE === */ | |||
@media (max-width: 1000px) { | |||
.mw-body { | |||
margin: 10px; | |||
padding: 15px; | |||
border-radius: 10px; | |||
} | |||
.firstHeading, h1 { | |||
font-size: 1.6em; | |||
} | |||
h2 { | |||
font-size: 1.3em; | |||
} | |||
.mw-body-content { | |||
font-size: 16px; | |||
} | |||
.wikitable { | |||
display: block; | |||
overflow-x: auto; | |||
} | |||
} | } | ||
@media (max-width: 720px) { | |||
@media (max-width: | |||
body { | body { | ||
font-size: 15px; | font-size: 15px; | ||
} | } | ||
h1 { | |||
font-size: 1. | .mw-body { | ||
margin: 5px; | |||
padding: 12px; | |||
} | |||
.firstHeading, h1 { | |||
font-size: 1.4em; | |||
padding-bottom: 10px; | |||
} | |||
h2 { | |||
font-size: 1.2em; | |||
border-right-width: 3px; | |||
padding-right: 10px; | |||
} | |||
.wikitable th, .wikitable td { | |||
padding: 8px 10px !important; | |||
font-size: 14px; | |||
} | |||
/* Stack portal boxes on mobile */ | |||
div[style*="width:25%"] { | |||
width: 48% !important; | |||
margin-bottom: 10px; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.firstHeading, h1 { | |||
font-size: 1.2em; | |||
} | |||
div[style*="width:25%"], | |||
div[style*="width:20%"] { | |||
width: 100% !important; | |||
margin-bottom: 8px; | |||
} | |||
.catlinks { | |||
padding: 10px; | |||
font-size: 14px; | |||
} | |||
} | |||
/* === ANIMATIONS === */ | |||
@keyframes fadeIn { | |||
from { opacity: 0; transform: translateY(10px); } | |||
to { opacity: 1; transform: translateY(0); } | |||
} | |||
.mw-body-content { | |||
animation: fadeIn 0.4s ease-out; | |||
} | |||
/* === PRINT STYLES === */ | |||
@media print { | |||
.mw-body { | |||
box-shadow: none; | |||
background: white; | |||
} | |||
a { | |||
color: black !important; | |||
} | } | ||
} | } | ||
גרסה מ־19:28, 4 בפברואר 2026
/* === סמארפדיה - עיצוב מרהיב === */
/* Google Fonts - Hebrew */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&family=David+Libre:wght@400;500;700&family=Secular+One&display=swap');
:root {
--primary-blue: #1a1a6c;
--primary-gold: #c9a227;
--light-gold: #f4e8c1;
--light-blue: #e8e8f4;
--bg-cream: #fefcf6;
}
/* === BASE === */
body {
font-family: 'Heebo', Arial, sans-serif !important;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8f4 100%);
line-height: 1.8;
}
/* === CONTENT AREA === */
.mw-body {
background: var(--bg-cream);
border-radius: 15px;
box-shadow: 0 4px 20px rgba(26, 26, 108, 0.1);
padding: 25px;
margin: 15px;
}
.mw-body-content {
font-size: 17px;
}
/* === HEADINGS === */
h1, h2, h3, .mw-headline, .firstHeading {
font-family: 'David Libre', 'Secular One', serif !important;
color: var(--primary-blue);
}
.firstHeading, h1 {
font-size: 2.2em;
background: linear-gradient(90deg, var(--primary-blue), #3d3d9c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
border-bottom: 4px solid var(--primary-gold);
padding-bottom: 15px;
margin-bottom: 25px;
}
h2 {
font-size: 1.6em;
border-right: 5px solid var(--primary-gold);
padding-right: 15px;
margin: 30px 0 15px;
}
h3 {
color: var(--primary-gold);
font-size: 1.3em;
}
/* === LINKS === */
a {
color: var(--primary-blue);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--primary-gold);
text-decoration: underline;
}
/* === TABLES === */
.wikitable {
border-radius: 12px;
overflow: hidden;
border: none !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.wikitable th {
background: linear-gradient(135deg, var(--primary-blue), #2a2a8c) !important;
color: white !important;
padding: 15px !important;
font-weight: 500;
}
.wikitable td {
padding: 12px 15px !important;
border-color: #eee !important;
}
.wikitable tr:hover td {
background: var(--light-gold) !important;
}
/* === CATEGORIES === */
.catlinks {
background: linear-gradient(135deg, var(--light-blue), #f0f0ff);
border-radius: 12px;
padding: 15px 20px;
border: 2px solid var(--primary-gold);
margin-top: 30px;
}
/* === PORTAL BOXES === */
div[style*="border-radius"] {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
div[style*="border-radius"]:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(26, 26, 108, 0.15);
}
/* === SIDEBAR === */
.vector-menu-portal .vector-menu-heading {
color: var(--primary-blue);
font-weight: 700;
}
/* === FOOTER === */
#footer {
background: linear-gradient(135deg, var(--primary-blue), #0d0d4d);
color: white;
padding: 20px;
border-radius: 15px 15px 0 0;
margin-top: 30px;
}
#footer a {
color: var(--primary-gold) !important;
}
/* === DECORATIVE ELEMENTS === */
.mw-body::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 70%);
pointer-events: none;
}
/* === RESPONSIVE / MOBILE === */
@media (max-width: 1000px) {
.mw-body {
margin: 10px;
padding: 15px;
border-radius: 10px;
}
.firstHeading, h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.3em;
}
.mw-body-content {
font-size: 16px;
}
.wikitable {
display: block;
overflow-x: auto;
}
}
@media (max-width: 720px) {
body {
font-size: 15px;
}
.mw-body {
margin: 5px;
padding: 12px;
}
.firstHeading, h1 {
font-size: 1.4em;
padding-bottom: 10px;
}
h2 {
font-size: 1.2em;
border-right-width: 3px;
padding-right: 10px;
}
.wikitable th, .wikitable td {
padding: 8px 10px !important;
font-size: 14px;
}
/* Stack portal boxes on mobile */
div[style*="width:25%"] {
width: 48% !important;
margin-bottom: 10px;
}
}
@media (max-width: 480px) {
.firstHeading, h1 {
font-size: 1.2em;
}
div[style*="width:25%"],
div[style*="width:20%"] {
width: 100% !important;
margin-bottom: 8px;
}
.catlinks {
padding: 10px;
font-size: 14px;
}
}
/* === ANIMATIONS === */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.mw-body-content {
animation: fadeIn 0.4s ease-out;
}
/* === PRINT STYLES === */
@media print {
.mw-body {
box-shadow: none;
background: white;
}
a {
color: black !important;
}
}