|
|
| (не показана 1 промежуточная версия этого же участника) |
| Строка 1: |
Строка 1: |
| /* Hide title and edit tools on main page */ | | /* Стили сайта лежат в git: custom/Common.css |
| .page-Заглавная_страница .mw-body-header,
| | Репозиторий: https://github.com/dead-space-server/mediawiki |
| .page-Заглавная_страница .mw-body-footer {
| | Эта страница пустая, чтобы одни и те же правила не подключались дважды. */ |
| display: none!important;
| |
| }
| |
| | |
| .page-Заглавная_страница .citizen-body-container {
| |
| margin: 0!important;
| |
| }
| |
| | |
| /* Downside tooltip */ | |
| .tooltip { | |
| position: relative;
| |
| display: inline-block;
| |
| cursor: help;
| |
| border-bottom: 1px dotted var(--theme-text-color-dark);
| |
| }
| |
| | |
| .tooltip .tooltiptext {
| |
| visibility: hidden;
| |
| opacity: 0;
| |
| background: rgba(20, 24, 31, 0.83);
| |
| color: var(--theme-text-color);
| |
| text-align: center;
| |
| border: 1px solid #402e75;
| |
| box-shadow: 0 0 1px #14181780;
| |
| padding: 12px;
| |
| border-radius: 1.4rem;
| |
| position: absolute;
| |
| z-index: 1500 !important;
| |
| min-width: 240px;
| |
| max-width: 100%;
| |
| left: 50%;
| |
| /* Изменено позиционирование на снизу */
| |
| top: 100%; /* Располагаем под элементом */
| |
| margin-top: 10px; /* Отступ от элемента */
| |
| transform: translateX(-50%) translateY(-10px); /* Сдвигаем вверх для анимации */
| |
| transition: opacity 0.3s ease, transform 0.3s ease;
| |
| font-size: initial;
| |
| }
| |
| | |
| .tooltip:hover .tooltiptext {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| transform: translateX(-50%) translateY(0); /* Возвращаем на исходную позицию */
| |
| }
| |
| | |
| /* Остальные стили остаются без изменений */ | |
| @media screen and (min-width: 851px) {
| |
| .mobile {
| |
| display: none;
| |
| }
| |
| | |
| .headder {
| |
| width: 25%;
| |
| float: right;
| |
| margin-left: 1em;
| |
| }
| |
| | |
| .stiky {
| |
| position: sticky;
| |
| top: 0.1em;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 850px) {
| |
| .nomobile {
| |
| display: none !important;
| |
| }
| |
| | |
| .headder {
| |
| width: 100%;
| |
| margin-left: 0;
| |
| }
| |
| | |
| .tooltip {
| |
| position: static;
| |
| border-bottom: none;
| |
| }
| |
| | |
| .tooltip .tooltiptext {
| |
| position: fixed !important;
| |
| width: 80vw !important;
| |
| top: 40vh !important;
| |
| left: 0 !important;
| |
| right: 0 !important;
| |
| bottom: auto !important;
| |
| margin: 0 auto !important;
| |
| transform: none !important;
| |
| padding: 22px;
| |
| }
| |
| | |
| .mobile-image img {
| |
| width: 32px;
| |
| height: 32px;
| |
| }
| |
| }
| |
| | |
| /* Upperside tooltip */
| |
| .tooltip2 {
| |
| position: relative;
| |
| display: inline-block;
| |
| cursor: help;
| |
| border-bottom: 1px dotted var(--theme-text-color-dark);
| |
| }
| |
| | |
| .tooltip2 .tooltiptext2 {
| |
| visibility: hidden;
| |
| opacity: 0;
| |
| background: rgba(20, 24, 31, 0.5);
| |
| color: var(--theme-text-color);
| |
| text-align: center;
| |
| border: 1px solid #402e75; /* Фиолетовая граница */
| |
| box-shadow: 0 0 1px #14181780; /* Тонкая тень */
| |
| padding: 12px;
| |
| border-radius: 1.4rem;
| |
| position: absolute;
| |
| z-index: 1500 !important;
| |
| min-width: 240px;
| |
| max-width: 100%;
| |
| left: 50%;
| |
| bottom: 125%;
| |
| transform: translateX(-50%) translateY(10px);
| |
| transition: opacity 0.3s ease, transform 0.3s ease;
| |
| font-size: initial;
| |
| }
| |
| | |
| .tooltip2:hover .tooltiptext2 {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| transform: translateX(-50%) translateY(0);
| |
| }
| |
| | |
| /* Адаптивные стили */ | |
| @media screen and (min-width: 851px) {
| |
| .mobile {
| |
| display: none;
| |
| }
| |
| | |
| .headder {
| |
| width: 25%;
| |
| float: right;
| |
| margin-left: 1em;
| |
| }
| |
| | |
| .stiky {
| |
| position: sticky;
| |
| top: 0.1em;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 850px) {
| |
| .nomobile {
| |
| display: none !important;
| |
| }
| |
| | |
| .headder {
| |
| width: 100%;
| |
| margin-left: 0;
| |
| }
| |
| | |
| .tooltip2 {
| |
| position: static;
| |
| border-bottom: none;
| |
| }
| |
| | |
| .tooltip2 .tooltiptext2 {
| |
| position: fixed !important;
| |
| width: 80vw !important;
| |
| top: 40vh !important;
| |
| left: 0 !important;
| |
| right: 0 !important;
| |
| bottom: auto !important;
| |
| margin: 0 auto !important;
| |
| transform: none !important;
| |
| padding: 22px;
| |
| }
| |
| | |
| .mobile-image img {
| |
| width: 32px;
| |
| height: 32px;
| |
| }
| |
| }
| |
| | |
| /* Downside tooltip - full covered*/
| |
| .tooltip3 {
| |
| position: relative;
| |
| display: inline-block;
| |
| cursor: help;
| |
| border-bottom: 1px dotted var(--theme-text-color-dark);
| |
| }
| |
| | |
| .tooltip3 .tooltiptext3 {
| |
| visibility: hidden;
| |
| opacity: 0;
| |
| background: #14181f;
| |
| color: var(--theme-text-color);
| |
| text-align: center;
| |
| border: 1px solid #402e75;
| |
| box-shadow: 0 0 1px #14181780;
| |
| padding: 12px;
| |
| border-radius: 1.4rem;
| |
| position: absolute;
| |
| z-index: 1500 !important;
| |
| min-width: 240px;
| |
| max-width: 100%;
| |
| left: 50%;
| |
| top: 100%;
| |
| margin-top: 10px;
| |
| transform: translateX(-50%) translateY(-10px);
| |
| transition: opacity 0.3s ease, transform 0.3s ease;
| |
| font-size: initial;
| |
| }
| |
| | |
| .tooltip3:hover .tooltiptext3 {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| transform: translateX(-50%) translateY(0);
| |
| }
| |
| | |
| @media screen and (max-width: 850px) {
| |
| .tooltip3 {
| |
| position: static;
| |
| border-bottom: none;
| |
| }
| |
| | |
| .tooltip3 .tooltiptext3 {
| |
| position: fixed !important;
| |
| width: 80vw !important;
| |
| top: 40vh !important;
| |
| left: 0 !important;
| |
| right: 0 !important;
| |
| bottom: auto !important;
| |
| margin: 0 auto !important;
| |
| transform: none !important;
| |
| padding: 22px;
| |
| }
| |
| }
| |
| | |
| /* Upperside tooltip */
| |
| .tooltip32 {
| |
| position: relative;
| |
| display: inline-block;
| |
| cursor: help;
| |
| border-bottom: 1px dotted var(--theme-text-color-dark);
| |
| }
| |
| | |
| .tooltip32 .tooltiptext32 {
| |
| visibility: hidden;
| |
| opacity: 0;
| |
| background: rgba(20, 24, 31);
| |
| color: var(--theme-text-color);
| |
| text-align: center;
| |
| border: 1px solid #402e75; /* Фиолетовая граница */
| |
| box-shadow: 0 0 1px #14181780; /* Тонкая тень */
| |
| padding: 12px;
| |
| border-radius: 1.4rem;
| |
| position: absolute;
| |
| z-index: 1500 !important;
| |
| min-width: 240px;
| |
| max-width: 100%;
| |
| left: 50%;
| |
| bottom: 125%;
| |
| transform: translateX(-50%) translateY(10px);
| |
| transition: opacity 0.3s ease, transform 0.3s ease;
| |
| font-size: initial;
| |
| }
| |
| | |
| .tooltip32:hover .tooltiptext32 {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| transform: translateX(-50%) translateY(0);
| |
| }
| |
| | |
| /* Собачка */
| |
| @keyframes floating-chef {
| |
| 0% {
| |
| transform: translateX(0) rotate(0deg);
| |
| }
| |
| 25% {
| |
| transform: translateX(25vw) rotate(90deg);
| |
| }
| |
| 50% {
| |
| transform: translateX(50vw) rotate(180deg);
| |
| }
| |
| 75% {
| |
| transform: translateX(75vw) rotate(270deg);
| |
| }
| |
| 100% {
| |
| transform: translateX(calc(100vw - 170px)) rotate(360deg);
| |
| }
| |
| }
| |
| | |
| .fixed-image-corner {
| |
| position: fixed;
| |
| bottom: 20px;
| |
| left: 0;
| |
| z-index: 1000;
| |
| padding: 10px;
| |
| opacity: 0.8;
| |
| transition: opacity 0.3s;
| |
| max-width: 150px;
| |
|
| |
| animation: floating-chef 15s linear infinite alternate;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .fixed-image-corner:hover {
| |
| opacity: 1;
| |
| animation-play-state: paused;
| |
| }
| |
| | |
| .fixed-image-corner img {
| |
| width: 100%;
| |
| height: auto;
| |
| transition: transform 0.5s ease;
| |
| }
| |
| | |
| /* footer-badges-on-dark
| |
| Citizen paints footer badges onto a fixed light plate. These two marks | |
| are light-on-transparent, so the plate made them look like empty buttons. */
| |
| html.skin-citizen #footer-icons a.cdx-button,
| |
| html.skin-citizen #footer-icons a.cdx-button:hover,
| |
| html.skin-citizen #footer-icons a.cdx-button:active,
| |
| html.skin-citizen #footer-icons a.cdx-button:visited {
| |
| background-color: transparent !important;
| |
| border-color: transparent !important;
| |
| box-shadow: none !important;
| |
| padding: 0.15rem 0.35rem !important;
| |
| min-width: 0 !important;
| |
| min-height: 0 !important;
| |
| }
| |
| | |
| html.skin-citizen #footer-icons a.cdx-button:hover {
| |
| background-color: rgba(255, 255, 255, 0.06) !important;
| |
| }
| |
| | |
| html.skin-citizen #footer-icons img {
| |
| display: block;
| |
| height: 32px !important;
| |
| width: auto !important;
| |
| max-width: none !important;
| |
| }
| |
