Template:TemplateStyles sandbox/CX Zoom/Test1.css

/* Стилі проєкту Головної сторінки /* Сховати автонумерацію заголовків */ .mw-headline-number { display: none; } /* Для інших оформлень */ h1, h2, h3 { padding: 0; } h1:after, h2:after { border-bottom: 0 !important; } /* Шапка */ border: 1px #d7d7d7 solid; border-top: none; border-radius: 0 0 3px 3px; width: 100%; box-sizing: border-box; }   border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #fafafa); box-sizing: border-box; padding: 1em 1.25em; }   margin: 0; }   border-bottom: 0; margin: 0; font-family: inherit; font-size: 1.75em; line-height: 1.25; } /* Меню */ display: flex; justify-content: space-between; text-align: center; margin: 0; list-style: none; }   flex: 1; margin: 0; }   flex: 2; }   display: block; padding: .5em 0; background: #fafafa; }   border-bottom-left-radius: 3px; }   border-bottom-right-radius: 3px; } /* Основа */ .main-block { width: 100%; margin-top: 1rem; border: 1px #d7d7d7 solid; border-top: 3px #3366cc solid; padding: 1em 1.25em 1.25em; box-sizing: border-box; background: #fafafa; } /* Заголовок */ .main-block-header { width: 100%; padding-bottom: .25em; margin-bottom: .5em; } .main-block-header > span > h2 { display: block; margin: 0; border-bottom: 0; font-family: inherit; } /* Меню блоку */ .main-block-menu { position: relative; } .main-block-menuToggle:hover { opacity: 0.5; } .main-block-menuDropdown { display: none; background: #fff; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); position: absolute; right: 0; top: 100%; z-index: 100; } .main-block-menuDropdown ul { list-style: none; margin: 0; } .main-block-menuDropdown ul a { display: block; width: 100%; padding: .25em .75em; font-weight: bold; } /* Вміст блоку */ .main-block-content { margin: .5em 0; } /* Посилання внизу блоку */ .main-block-links { display: flex; justify-content: space-between; align-items: center; margin-top: .75em; font-weight: bold; clear: both; } .main-block-links > a:only-child { margin-left: auto; } .main-block-links .mw-ui-button { background: #fcfcfc; border-color: #bbb; border-radius: 3px; color: #000; } .main-block-links a:hover .mw-ui-button { color: #777; background: #fff; } /* Вибране зображення */ margin: .5em 0; height: auto; width: 75%; max-width: 500px; } /* Тематичні розділи */ columns: 3; column-width: 140px; margin: 0; }   align-items: center; display: flex; margin-bottom: 0.5rem; }   flex: 0 auto; width: 2em; justify-content: center; display: flex; }	font-weight: bold; flex: 1; line-height: 30px; padding-left: .5em; display: flex; align-items: center; }   opacity: 0.67; }   text-decoration: underline; } /* Підвал */ width: 100%; border: 1px #d7d7d7 solid; border-bottom: none; border-radius: 3px 3px 0 0; background: linear-gradient(#fafafa, #fff); box-sizing: border-box; padding: 1em 1.25em; margin-top: 1em; } /* Посилання з логотипом */ .logo-link { display: inline-flex; } .logo-link a:first-child { flex: 0 auto; } .logo-link a:last-child { padding-left: .25em; } .logo-link:hover a:last-child { text-decoration: underline; } /* Верхній заголовок */ border-bottom: 0; font-size: 1.5em; font-family: inherit; text-align: center; margin: 0 0 1em; } /* Список */ columns: 4; column-width: 225px; margin: 0; }   justify-content: center; align-items: center; display: flex; margin-bottom: 0.5rem; }   flex: 0 auto; }   flex: 0 auto; width: 2em; justify-content: center; display: flex; }   flex: 1; line-height: 30px; padding-left: .5em; display: flex; align-items: center; }   text-decoration: underline; } /* Нижній заголовок */ border-bottom: 0; padding: 0; margin: .5em 0 0; font-size: 1.25em; font-family: inherit; font-weight: normal; text-align: center; width: 100%; }
 * 1) main-top {
 * 1) main-head {
 * 1) main-head p {
 * 1) main-head-left > h1 {
 * 1) main-top > ul {
 * 1) main-top > ul > li {
 * 1) main-top > ul > li:nth-child(4) {
 * 1) main-top > ul > li a {
 * 1) main-top > ul > li:first-child a {
 * 1) main-top > ul > li:last-child a {
 * 1) feat-pic .main-block-content img {
 * 1) topics-list ul {
 * 1) topics-list ul > li {
 * 1) topics-list ul > li > a:first-child {
 * 1) topics-list ul > li > a:last-child {
 * 1) topics-list ul > li:hover > a:first-child {
 * 1) topics-list ul > li:hover > a:last-child {
 * 1) main-bottom {
 * 1) main-bottom h2 {
 * 1) main-bottom ul {
 * 1) main-bottom ul > li {
 * 1) main-bottom ul > li > img {
 * 1) main-bottom ul > li > a:first-child {
 * 1) main-bottom ul > li > a:last-child {
 * 1) main-bottom li:hover a:last-child {
 * 1) main-bottom h3 {

/* Для мобільних */ @media (max-width: 767px) { #main-head-left, #main-head-right { width: 100%; }   #main-top > ul, .main-block-menu { display: none; } } /* Для планшетів */ @media (min-width: 768px) { .main-block { border-radius: 3px; border-top-left-radius: 5px 3px; border-top-right-radius: 5px 3px; } } /* Для стаціонарних комп'ютерів */ @media (min-width: 1024px) { #main-head { display: flex; align-items: stretch; padding: 1.5em 2em; }   #main-head-left { flex: 3; display: flex; flex-direction: column; justify-content: center; }   #main-head-left > h1 { font-size: 2em; }	#main-head-left > p:first-of-type { font-size: 1.2em; }   #main-head-right { text-align: right; flex: 2; }   #main-wrapper { display: flex; justify-content: space-between; align-items: stretch; margin: 0 -.75rem; }   .main-column { flex: 1; margin: 0 .75rem; }   .main-block { margin-top: 1.5rem; padding: 1.25em 2em 1.5em; }   #main-bottom { margin-top: 1.5rem; padding: 1.5em 2em; } }