dist/assets/css/search.css

   1 .top-bar {
   2   width: 100%;
   3   padding: 1em 15px;
   4 }
   5
   6 .top-bar #q {
   7   max-width: 500px;
   8 }
   9
  10 .tab-content {
  11   border: 1px solid #ddd;
  12   border-top: none;
  13 }
  14
  15 form #q {
  16   min-width: 500px;
  17 }
  18 @media (max-width: 850px) {
  19   form #q {
  20     min-width: 400px;
  21   }
  22 }
  23
  24 #reverse-page form label {
  25   margin-left: 0.4rem;
  26   margin-right: 0.4rem;
  27 }
  28
  29 .search-type-link {
  30   display: inline;
  31   margin-right: 2em;
  32   position: absolute;
  33   right: 0
  34 }
  35
  36 #switch-coords {
  37   font-size: 0.6rem;
  38   font-weight: bold;
  39   cursor: pointer;
  40   padding: 2px;
  41   margin: 5px;
  42 }
  43
  44 .sidebar {
  45   width: 25%;
  46   padding: 15px;
  47   padding-top: 0;
  48   display: inline-block;
  49   float: left;
  50 }
  51
  52
  53 #map-wrapper {
  54   position: relative;
  55   height: calc(100vh - 250pt);
  56   width: 75%;
  57   padding-right: 20px;
  58   display: inline-block;
  59   float: left;
  60 }
  61
  62 #map {
  63   height: 100%;
  64   background:#eee;
  65 }
  66
  67 #map-position {
  68   display: none;
  69   position: absolute;
  70   top: 0;
  71   right: 20px;
  72   padding: 0 5px;
  73   color: #333;
  74   font-size: 11px;
  75   background-color: rgba(255, 255, 255, 0.7);
  76   z-index: 1000;
  77 }
  78
  79 #map-position-close {
  80   text-align: right;
  81 }
  82
  83 .result {
  84   font-size: 0.8em;
  85   margin: 5px;
  86   margin-top:0px;
  87   padding: 4px 8px;
  88   border-radius: 2px;
  89   background:#F0F7FF;
  90   border: 2px solid #D7E7FF;
  91   cursor:pointer;
  92   min-height: 5em;
  93 }
  94
  95
  96 .result.highlight {
  97   background-color: #D9E7F7;
  98   border-color: #9DB9E4;
  99 }
 100 .result.highlight .details {
 101   margin: 10px auto;
 102   display: block;
 103   max-width: 10em;
 104   padding: 1px;
 105 }
 106 .result img{
 107   float: right;
 108 }
 109 .result .type{
 110   color: gray;
 111   font-size: 0.8em;
 112 }
 113 .result .details {
 114   display: none;
 115 }
 116
 117 .result .coords {
 118   display: none;
 119 }
 120
 121 .noresults{
 122   text-align: center;
 123   padding: 1em;
 124 }
 125
 126 .more{
 127   text-align:center;
 128   margin-top: 1em;
 129 }
 130
 131 @media (max-width: 768px) {
 132   #content {
 133     top: 0;
 134     position: relative;
 135   }
 136   #map-wrapper {
 137     width: 100%;
 138     max-height: 300px;
 139     padding: 20px;
 140   }
 141   #map-position {
 142     top: 20px;
 143     right: 20px;
 144   }
 145   #map {
 146     height: 300px;
 147   }
 148   .sidebar {
 149     width: 100%;
 150   }
 151   .search-button-group {
 152     display: inline;
 153   }
 154 }
 155
 156 label {
 157   font-weight: normal;
 158 }