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