Действия

Widget

Страны-эксплуатанты: различия между версиями

Материал из ВикиВоины

 
(не показано 15 промежуточных версий этого же участника)
Строка 262: Строка 262:
 
</g>
 
</g>
 
</svg><i class="fa fa-question-circle fa-question-circle-map"></i><div class="map-tooltip">Выберите страну</div><div id="popup" class="popup"></div><div class="controls"><button id="zoom-in">+</button><button id="reset">100%</button><button id="zoom-out">-</button></div></div>
 
</svg><i class="fa fa-question-circle fa-question-circle-map"></i><div class="map-tooltip">Выберите страну</div><div id="popup" class="popup"></div><div class="controls"><button id="zoom-in">+</button><button id="reset">100%</button><button id="zoom-out">-</button></div></div>
<div class="category-message category-message-countries desktop"><i class="fa fa-globe"></i> Прокручивая колесико мыши, вы можете приближать или отдалять карту, чтобы найти необходимую страну. Если значение для этой страны указано, она окрашена бордовым цветом, и при нажатии на неё жёлтым подсветится соответствующая строка в списке слева, равно как и сама выбранная страна окрасится в жёлтый цвет. Если выбрать страну в списке слева, она также подсветится жёлтым цветом на этой карте. </div>
 
 
<div class="navigation-not-searchable">
 
<div class="navigation-not-searchable">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Строка 668: Строка 667:
 
}
 
}
  
.countries-list ul {
+
.countries-list {
   max-height: 400px;
+
   height: 305px;
 
   min-width: 200px;
 
   min-width: 200px;
 
   overflow-y: auto;
 
   overflow-y: auto;
 
   overflow-x: clip;
 
   overflow-x: clip;
 +
}
 +
 +
.countries-list ul {
 +
  margin: 0 10px;
 +
  list-style: none;
 +
  padding-left: 0;
 +
}
 +
 +
.countries ul li {
 
   padding-left: 20px;
 
   padding-left: 20px;
   margin: 10px;
+
   position: relative;
 +
}
 +
 
 +
.countries ul li:hover {
 +
  background: #f5e9b7;
 +
}
 +
 
 +
.active-country-list:hover {
 +
    background: #f5d754!important;
 +
}
 +
 
 +
.countries ul li::before {
 +
    content: '•';
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
    position: absolute;
 +
    left: 5px;
 +
    top: -3px;
 
}
 
}
  
Строка 765: Строка 790:
 
   margin-left: 0;     
 
   margin-left: 0;     
 
   margin-bottom: 10px;
 
   margin-bottom: 10px;
 +
}
 +
 +
.countries-list {
 +
    max-height: 400px;
 +
    height: auto;
 
}
 
}
  

Текущая версия на 10:11, 18 мая 2024

<style>

.wrap {
 position: relative;
 float: right;
 margin-left: 15px;
 background-color: #abc6d9;

}

.countries-list {

 height: 305px;
 min-width: 200px;
 overflow-y: auto;
 overflow-x: clip;

}

.countries-list ul {

 margin: 0 10px;
 list-style: none; 
 padding-left: 0;

}

.countries ul li {

 padding-left: 20px;
 position: relative; 

}

.countries ul li:hover {

 background: #f5e9b7;

}

.active-country-list:hover {

   background: #f5d754!important;

}

.countries ul li::before {

   content: '•'; 
   font-size: 22px;
   font-weight: bold;
   position: absolute;
   left: 5px;
   top: -3px;

}

svg#map {

   outline: none;
   cursor: move;
   }
  1. popup {
 position: absolute;
 display: none;
 background-color: #fff;
 padding: 2px 2px 2px 7px;
 border: 1px solid #ccc;
 z-index: 2;
 font-size: small;

}

.map-tooltip {

height: 45px;
text-align: center;
background: #2786c285;
padding: 10px;
margin-top: -8px;
position: relative;

}

.fa-question-circle-map {

   position: absolute;
   top: 240px;
   left: 5px;
   color: #2d7bb0;

}

.controls {

  display: inline-grid;
  position: absolute;
  top: 10px;
  right: 10px;

}

.controls button {

  font-size: x-large;
  padding: 2px;
  margin: 2px;
  opacity: 0.9;

}

.controls button:focus {

  background-color: #2786c2;

}

  1. reset {
   font-size: medium;

}

path {

 fill: #fff;
 cursor: pointer;

} path:hover {

 fill: #2786c285;

}

.mobile { display: none; }

.desktop { display: block; }

.land-out {

  fill-opacity: 0;
  fill-rule: evenodd;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-dasharray: 0 1 0;
  stroke-opacity: 0.5;

}

.land-out:hover {

  fill-opacity: 1;
  fill: #2786c285;

}

@media only screen and (max-width:640px) {

.wrap {

 margin-left: 0;    
 margin-bottom: 10px;

}

.countries-list {

   max-height: 400px;
   height: auto;

}

.countries-list ul {

margin-left: 0;

}

.fa-question-circle-map {

   top: inherit;
   bottom: 30px;

}

.controls {

   top: 2px;
   right: 5px;

}

.controls button {

   padding: 0 5px;
   margin: 2px;

}

  1. reset {
  font-size: x-small;

}

.mobile { display: block; }

.desktop { display: none; }

.selected {

   fill: #c14e48!important;

}

.land-out.selected {

   fill-opacity: 1;
   fill: #2786c285!important;

}

.map-tooltip {

   padding: 0;
   font-size: 15px;
   height: 25px;
   margin-top: -9px;

}

.map-tooltip img {

   height: 18px;

}

} </style>