MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
/* Kitchen Sink Logo*/
/* Kitchen Sink Logo*/
.lifebar-frame {
 
     position: relative;
 
/* Kitchen Sink */
.life-wrapper {
     display: flex;
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Центрирование по горизонтали на странице */
     width: 100%;
     width: 100%;
     height: 100vh; /* Занимает всю высоту экрана */
     height: 100vh; /* Полная высота экрана для центрирования */
    display: flex;
    justify-content: center;
    align-items: center;
}
}


.lifebar-bundle {
.kitchen_sink {
    position: relative;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     margin-right: 15px; /* Отступ между полосками и текстом */
     width: 150px; /* Ширина контейнера */
}
}


.lifebar-edge {
.pillar {
     width: 20px;
     width: 5px;
     height: 40px;
     height: 50%;
     background-color: #000;
     background-color: #D02019;
}
}


.lifebar-left-edge {
.left-pillar {
     margin-right: 10px;
     margin-right: 50px; /* Расстояние между полосками и линией */
}
}


.lifebar-right-edge {
.right-pillar {
     margin-left: 10px;
    transform: rotate(20deg); /* Наклоняем на 20 градусов */
     margin-left: -35px; /* Подвигаем полоску на 5px влево */
}
}


.lifebar-connector {
.bridge-beam {
     width: 50px;
    position: absolute;
     height: 2px;
     width: 10px; /* Ширина линии */
     background-color: #000;
     height: 5px; /* Толщина линии */
     background-color: #D02019;
    top: 50%; /* Центрируем вертикально по середине контейнера */
    left: calc(50% - 30px - 38px); /* Обновляем расчет для выравнивания линии */
    transform: translateY(-50%); /* Центрируем вертикально */
}
}


.lifebar-caption {
.survival-text {
     font-size: 16px;
     margin-left: 1.5em; /* Пробел между элементом и текстом */
    position: absolute;
     font-size: 16px; /* Базовый размер текста */
    left: 50%;
     transform: translateX(-50%); /* Центрирует текст по горизонтали */
}
}


Navigation menu