User:Александр III/templates.css

/***** Hummel UI *****/ /* Скрытый в десктопе шаблон */ .hummel-hidden { display: none; } /* Стиль скроллнавбокса */ .hummel-navbox { width: 100%; margin-top: 0px !important; margin-bottom: 1px !important; background: var(--theme-page-background-color--secondary) !important; border: none !important; border-left: 5px solid var(--theme-accent-color) !important; } .hummel-navbox-body { border: none !important; padding-top: 0 !important; padding-right: 0 !important; } .hummel-navbox-scroll { padding-top: 6px; padding-right: 12px; } .hummel-navbox tr:first-child td { border: none; box-shadow: 0px 1px 0px 0px var(--theme-border-color); } /* Ячеистая навигация */ .hummel-navi .navi li { border-radius: 4px; border: 2px solid var(--theme-page-background-color--secondary); box-sizing: border-box; text-align: center; transition: 0.25s; } /* Область нажатия ссылки во всю ширину и длину */ .hummel-navi .navi li a { display: block; padding-top: 10px; } .hummel-navi li div a { padding-top: 10px !important; padding-bottom: 10px !important; color: var(--theme-page-text-color) !important; } /* Анимация ячеистой навигации */ .hummel-navi .navi li:hover { background: var(--theme-page-background-color--secondary); } /* По умолчанию навигация занимает всё предоставленное ей пространство */ .hummel-navi .navi { display: flex; flex-direction: row; justify-content: space-between; list-style: outside none none; margin: 0; } /* Уточняем, что фотку закруглять не надо */ .hummel-navi .square img { border-radius: 0 !important; } .hummel-navi ul:not(.square) img { box-shadow: 0 0 10px rgb(0 0 0 / 50%) } /* Уточняем, что занимать всё пространство не надо */ .hummel-navi .left { display: flex; flex-direction: row; justify-content: flex-start; list-style: outside none none; } .hummel-navi .left li { margin: 3px; } /* Делаем фотку круглой и задаём ей размер */ .hummel-navi .navi img { height: 95px; width: 95px; border-radius: 50%; } /* Авторазмер */ .hummel-navi .auto li { width: 100%; margin: 3px !important; } /* Навигация на 2 ячейки в ширину */ .hummel-navi .zwei li { padding-top: 10px; width: calc(50% - 8px); } .hummel-navi .zwei img { height: 90px; width: 90px; } /* Навигация на 3 ячейки в ширину */ .hummel-navi .drei li { width: calc(33% - 8px); } .hummel-navi .drei img { height: 160px; width: 160px; } .hummel-navi .drei a { font-size: 16px; } /* Навигация на 4 ячейки в ширину */ .hummel-navi .vier li { width: calc(25% - 8px); } .hummel-navi .vier img { height: 120px; width: 120px; } .hummel-navi .vier a { font-size: 16px; } /* Навигация на 5 ячеек в ширину */ .hummel-navi .funf li { width: calc(20% - 8px); } .hummel-navi .funf img { height: 100px; width: 100px; } .hummel-navi .funf a { font-size: 15px; } /* Навигация на 6 ячеек в ширину */ .hummel-navi .six li { width: 16%; } .hummel-navi .six img { height: 80px; width: 80px; border-radius: 0; } .hummel-navi .six a { font-size: 14px; } /* Навигация для ссылок без фоток */ .hummel-linker a { background: rgba(var(--theme-page-text-color--rgb),0.1); border-radius: 4px; padding: 12px 6px; margin: 12px; display: block; transition: 0.25s; font-size: 14px; } .hummel-linker a:hover { background: rgba(var(--theme-link-color--rgb),0.15); color: var(--theme-link-color); } .hummel-head { background: var(--theme-accent-color); text-align: center; color: #fff; font-weight: bold; } .hummel-link a { color: #fff; } .hummel-link a:hover { color: #b5eeae !important; } .hummel-left, .hummel-right, .hummel-noside { background: var(--theme-page-background-color--secondary); /* box-shadow: 0 0 5px #0005; */ } .hummel-left { border-left: 5px solid var(--theme-accent-color); } .hummel-right { border-right: 5px solid var(--theme-accent-color); } .hummel-updown { border-top: 5px solid var(--theme-accent-color); border-bottom:5px solid var(--theme-accent-color); } .hummel-back { background: var(--theme-page-background-color--secondary); } .hummel-edit { width:100%; margin-bottom:10px; text-align:center; font-weight:bold; color: White; padding-top: 8px; padding-bottom: 8px; background-image: url("https://vignette.wikia.nocookie.net/kimpossible/images/a/a4/Under_Construction.jpg/revision/latest?cb=20201016084410&path-prefix=ru"); } .hummel-clickable a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .hummel-clickable a > img { width: 100%; height: 100%; transition: 0.25s; } .hummel-clickable a > img:hover { background: rgba(var(--theme-accent-color--rgb), 0.4); } /* Ячеистости */ .hummel-bar img { height: 16px !important; width: auto !important; } /* Подраздельные фотки 16:9 в нешакальном качестве */ .hummel-photo { margin: 5px 0 10px 20px; clear: right; } .hummel-photo, .hummel-photo img { width: 280px !important; height: auto !important; float: right !important; } .hummel-photo .floatright { margin: 0 !important; } /* Трёхколонная галерея-скроллбокс для раскадровки 16:9 */ .hummel-gallery { overflow-y: auto; max-height: 398px; } .hummel-gallery .wikia-gallery, .hummel-gallery .gallery { display: flex; flex-wrap: wrap; justify-content: center !important; } .hummel-gallery .gallerybox, .hummel-gallery .gallerybox .thumb, .hummel-gallery img, .hummel-gallery .wikia-gallery-item, .hummel-gallery a.image.lightbox, .hummel-gallery .wikia-gallery-item .thumb, .hummel-gallery .gallery-image-wrapper, .hummel-gallery li div:not(.gallerytext) { width: 225px !important; height: 126.25px !important; } .hummel-gallery ul { margin: 0 !important; padding: 0 !important; } .hummel-gallery li { margin: 3px 3px !important; } .hummel-gallery div { margin: 0 !important; } .wikia-gallery-item { padding: 3px !important; } .hummel-admin { display: flex; justify-content: center; } .hummel-admin img { width: 138px; height: 138px; border-radius: 50%; box-shadow: 0 0 10px rgb(0 0 0 / 50%); transition: 0.25s; } .hummel-admin img:hover { background: rgba(var(--theme-accent-color--rgb), 0.4); }