Действия

Widget

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

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

Строка 668: Строка 668:
  
 
.countries-list ul {
 
.countries-list ul {
  max-height: 400px;
+
    max-height: 400px;
  min-width: 200px;
+
    min-width: 200px;
  overflow-y: auto;
+
    overflow-y: auto;
  overflow-x: clip;
+
    overflow-x: clip;
  margin: 10px;
+
    margin: 10px;
  list-style: none;
+
    padding-left: 20px;  
  padding-left: 0;
 
 
}
 
}
  
.countries ul li {
+
.countries-list ul li {
  padding-left: 20px;
+
    position: relative;
  position: relative;  
+
    padding-left: 20px;  
 +
}
 +
 
 +
.countries-list ul li::before {
 +
    content: '•';
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
    position: absolute;
 +
    left: 5px;
 +
    top: -3px;
 
}
 
}
  
Строка 688: Строка 696:
 
.active-country-list:hover {
 
.active-country-list:hover {
 
     background: #f5d754!important;
 
     background: #f5d754!important;
}
 
 
.countries ul li::before {
 
    content: '•';
 
    font-size: 22px;
 
    font-weight: bold;
 
    position: absolute;
 
    left: 5px;
 
    top: -3px;
 
 
}
 
}
  

Версия 09:42, 18 мая 2024

<style>

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

}

.countries-list ul {

   max-height: 400px;
   min-width: 200px;
   overflow-y: auto;
   overflow-x: clip;
   margin: 10px;
   padding-left: 20px; 

}

.countries-list ul li {

   position: relative; 
   padding-left: 20px; 

}

.countries-list ul li::before {

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

}

.countries ul li:hover {

 background: #f5e9b7;

}

.active-country-list:hover {

   background: #f5d754!important;

}

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 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>