Шаблон:Global/RuleBox: различия между версиями

Версия от 13:29, 3 апреля 2025

.rules__block {

   position: relative !important; /* Ключевое свойство */
   border-radius: 0.3em;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;

} .rules__image-wrapper {

   position: absolute !important;
   top: 12px !important;
   right: 12px !important;
   z-index: 2;
   line-height: 0; /* Убирает зазор под изображением */

} .rules__image-wrapper img {

   width: 40px !important;
   height: 76px !important;
   object-fit: contain;
   display: block !important;
   float: none !important; /* Отключает обтекание */

} .rules__title {

   font-size: 1.2em;
   padding-right: 60px !important; /* Защита от наложения текста */

}

/* Мобильная адаптация */ @media (max-width: 700px) {

   .rules__image-wrapper {
       position: relative !important;
       float: right !important;
       top: auto !important;
       right: auto !important;
       margin: 0 0 10px 10px !important;
   }
   .rules__title {
       padding-right: 0 !important;
   }

}

@@ Строка 1: / Строка 1: @@
 <div class="rules__block" style="background-color:{{{background-color|#282831}}};box-shadow:{{{box-shadow|0 2px 4px rgba(0, 0, 0, 0.3)}}};margin:{{{margin|15px 5px}}};border-left:{{{border-size|5px}}} solid {{{border-color|#404053}}};padding:{{{padding|12px}}};color:{{{color|lightgrey}}};">
      <div class="rules__container">
-         {{{image|<div class="rules__image-wrapper">[[File:x.png|40x76px|link=]]</div>}}}
+        <!-- Изображение с абсолютным позиционированием -->
+         {{#if: {{{image|}}} |
+        <div class="rules__image-wrapper">{{{image}}}</div>
+        }}
          {{#if: {{{title|}}} |
          <div class="rules__title" style="margin-bottom:{{{margin-bottom-title|8px}}};">'''{{{title}}}'''</div>
@@ Строка 15: / Строка 18: @@
 <div class="customCSS" style="display:none">
 .rules__block {
-     position: relative;
+     position: relative !important; /* Ключевое свойство */
      border-radius: 0.3em;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 .rules__image-wrapper {
-     position: absolute;
+     position: absolute !important;
-     top: 12px;
+     top: 12px !important;
-     right: 12px;
+     right: 12px !important;
      z-index: 2;
+    line-height: 0; /* Убирает зазор под изображением */
 }
 .rules__image-wrapper img {
@@ Строка 29: / Строка 33: @@
      height: 76px !important;
      object-fit: contain;
-     display: block;
+     display: block !important;
+    float: none !important; /* Отключает обтекание */
 }
 .rules__title {
      font-size: 1.2em;
-     margin-right: 55px; /* Отступ для картинки */
+     padding-right: 60px !important; /* Защита от наложения текста */
 }
-/* Адаптивные стили */
+/* Мобильная адаптация */
 @media (max-width: 700px) {
      .rules__image-wrapper {
-         position: static;
+         position: relative !important;
-         float: right;
+         float: right !important;
-         margin: 0 0 10px 10px;
+        top: auto !important;
+        right: auto !important;
+         margin: 0 0 10px 10px !important;
      }
      .rules__title {
-         margin-right: 0;
+         padding-right: 0 !important;
      }
 }
 </div>