src/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   min-height: 700px;
  56   width: 75%;
  57   padding-right: 20px;
  58   display: inline-block;
  59   float: left;
  60 }
  61
  62 #map {
  63   height: 100%;
  64   min-height: 700px;
  65   background:#eee;
  66 }
  67
  68 #map-position {
  69   display: none;
  70   position: absolute;
  71   top: 0;
  72   right: 20px;
  73   padding: 0 5px;
  74   color: #333;
  75   font-size: 11px;
  76   background-color: rgba(255, 255, 255, 0.7);
  77   z-index: 1000;
  78 }
  79
  80 #map-position-close {
  81   text-align: right;
  82 }
  83
  84 .result {
  85   font-size: 0.8em;
  86   margin: 5px;
  87   margin-top:0px;
  88   padding: 4px 8px;
  89   border-radius: 2px;
  90   background:#F0F7FF;
  91   border: 2px solid #D7E7FF;
  92   cursor:pointer;
  93   min-height: 5em;
  94 }
  95
  96
  97 .result.highlight {
  98   background-color: #D9E7F7;
  99   border-color: #9DB9E4;
 100 }
 101 .result.highlight .details {
 102   margin: 10px auto;
 103   display: block;
 104   max-width: 10em;
 105   padding: 1px;
 106 }
 107 .result img{
 108   float: right;
 109 }
 110 .result .type{
 111   color: gray;
 112   font-size: 0.8em;
 113 }
 114 .result .details {
 115   display: none;
 116 }
 117
 118 .result .coords {
 119   display: none;
 120 }
 121
 122 .noresults{
 123   text-align: center;
 124   padding: 1em;
 125 }
 126
 127 .more{
 128   text-align:center;
 129   margin-top: 1em;
 130 }
 131
 132 @media (max-width: 768px) {
 133   #content {
 134     top: 0;
 135     position: relative;
 136   }
 137   #map-wrapper {
 138     width: 100%;
 139     max-height: 300px;
 140     padding: 20px;
 141   }
 142   #map-position {
 143     top: 20px;
 144     right: 20px;
 145   }
 146   #map {
 147     height: 300px;
 148   }
 149   .sidebar {
 150     width: 100%;
 151   }
 152   .search-button-group {
 153     display: inline;
 154   }
 155 }
 156
 157 label {
 158   font-weight: normal;
 159 }