(Добавление стиля мобильной адаптации) |
м (Обновление стиля) |
||
Строка 21: | Строка 21: | ||
.mainpage-sop-mainrow, .mainpage-sop-row1, .mainpage-sop-row2 { | .mainpage-sop-mainrow, .mainpage-sop-row1, .mainpage-sop-row2 { | ||
display: flex; | display: flex; | ||
flex: 1 1 auto; | |||
justify-content: center; | justify-content: center; | ||
flex-wrap: wrap; | flex-wrap: wrap; |
Версия от 11:15, 19 мая 2024
/*** Шаблон:JobBanWarn ***/
table.jobbanwarn {
background: #ff000020;
border-radius: 15px;
text-align: center;
margin: auto;
}
table.jobbanwarn td.first {
font-size: 36px;
color: red;
padding: 7px;
text-shadow: 0 0 black;
}
table.jobbanwarn td.second p {
margin-bottom:0 ;
}
/*** Шаблон:Заглавная/СРП/Модуль ***/
.mainpage-sop-mainrow, .mainpage-sop-row1, .mainpage-sop-row2 {
display: flex;
flex: 1 1 auto;
justify-content: center;
flex-wrap: wrap;
}
.mainpage-sop-block {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
overflow: visible;
}
.mainpage-sop-book {
display: flex;
align-items: center;
max-width: fit-content;
overflow: hidden;
border-radius: var(--border-radius--medium);
transition: background 0.1s linear,
width 0.15s cubic-bezier(1, 0, 1, 1);
}
.mainpage-sop-text {
padding: 0 25px;
text-wrap: nowrap;
align-self: stretch;
}
.mainpage-sop-text p {
font-family: "Boxfont_Round";
font-size: 2em;
color: black;
display: block;
position: relative;
}
.mainpage-sop-text p:before,
.mainpage-sop-text p:after {
content: attr(title);
color: #ffffff80;
position: absolute;
}
.mainpage-sop-text p:before {
top: 1px;
left: 1px
}
.mainpage-sop-text p:after {
top: 2px;
left: 2px
}
.mainpage-sop-book.right {
float: right;
right: 0;
flex-direction: row-reverse;
}
.mainpage-sop-book img {
transition: all 0.15s;
}
.mainpage-sop-book img:hover {
filter: brightness(1.5);
transform: scale(1.2);
}
.mainpage-sop-book:hover:not(:has(div:hover)) {
width: fit-content !important;
backdrop-filter: blur(20px);
background: #23232399;
z-index: 1;
position: absolute;
}
/** Мобильная адаптация**/
@media(max-width: 980px) {
div.mainpage-sop-book:hover:not(:has(div:hover)) {
width: 100% !important;
}
.mainpage-sop-book:hover:not(:has(div:hover))::after {
padding: 2px 4px;
font-family: 'Boxfont_Round';
font-size: 1em;
line-height: 1.1em;
text-align: center;
bottom: 0;
position: absolute;
z-index: 3;
width: 100%;
height: 40%;
content: attr(title);
background: hsla(var(--color-primary__h), var(--color-primary__s), 15%, 0.9);
backdrop-filter: blur(10px);
}
}
/** Оформление отдельных элементов шаблона **/
/* Командование */
.cmd.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #0a117299;
}
.cmd .mainpage-sop-text p:before,
.cmd .mainpage-sop-text p:after {
color: #eeeeff80;
}
/* Служба безопасности */
.sec.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #B90E0A99;
}
.sec .mainpage-sop-text p:before,
.sec .mainpage-sop-text p:after {
color: #ffeeee80;
}
/* Юридический отдел */
.jud.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #43261699;
}
.jud .mainpage-sop-text p:before,
.jud .mainpage-sop-text p:after {
color: #ffeedd80;
}
/* Инженерный отдел */
.eng.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #E2631099;
}
.eng .mainpage-sop-text p:before,
.eng .mainpage-sop-text p:after {
color: #ffe7d780;
}
/* Отдел снабжения */
.crg.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #B5672799;
}
.crg .mainpage-sop-text p:before,
.crg .mainpage-sop-text p:after {
color: #ffead880;
}
/* Научный отдел */
.rnd.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #71019399;
}
.rnd .mainpage-sop-text p:before,
.rnd .mainpage-sop-text p:after {
color: #f4ceff80;
}
/* Медицинский отдел */
.med.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #22819599;
}
.med .mainpage-sop-text p:before,
.med .mainpage-sop-text p:after {
color: #82e9ff80;
}
/* Сервисный отдел */
.srv.mainpage-sop-book:hover:not(:has(div:hover)) {
background: #3a385299;
}
.srv .mainpage-sop-text p:before,
.srv .mainpage-sop-text p:after {
color: #a7a4c780;
}