koha-tmpl/intranet-tmpl/prog/css/src/_header.scss

   1 #header {
   2     .navbar-nav li a {
   3         line-height: 40px;
   4         overflow: hidden;
   5         color: #FFFFFF;
   6
   7         &:hover, &:active {
   8             border-bottom: 1px 5px #FFFFFF;
   9         }
  10     }
  11
  12     .dropdown-menu {
  13         background-color: rgb(53, 44, 46);
  14
  15         li a {
  16             &:hover, &:focus {
  17                 background-color: transparent;
  18                 text-decoration: underline;
  19             }
  20         }
  21     }
  22
  23 }
  24
  25 #logo {
  26     display: flex;
  27     align-items: center;
  28
  29     img {
  30         height: 80%;
  31     }
  32 }
  33
  34 #toplevelmenu {
  35     background-color: transparent;
  36     box-shadow: none;
  37     position: relative;
  38     left: 0;
  39     top: 0;
  40 }
  41
  42 #header_search {
  43     border-radius: 28px;
  44     display: flex;
  45
  46     .residentsearch {
  47         padding: 0;
  48         border: 0;
  49         background-color: transparent;
  50         display: none;
  51
  52         &:first-of-type {
  53             display: block;
  54         }
  55     }
  56
  57     > ul {
  58         padding: 0;
  59         margin: 0;
  60         order: -1;
  61         border-radius: 16px 0 0 16px;
  62         padding-left: 16px;
  63         background-color: #418940;
  64         display: flex;
  65         justify-content: space-around;
  66         align-items: center;
  67         color: white;
  68
  69         li {
  70             background: transparent;
  71             border: 0;
  72             border-radius: 0;
  73
  74             background-color: transparent;
  75             border: 0;
  76             border-bottom-width: 0;
  77             padding-bottom: 0;
  78             margin: 0;
  79
  80             a {
  81                 color: #FFF;
  82                 font-size: .9em;
  83                 padding: 0 .5em;
  84             }
  85         }
  86     }
  87     .ui-state-hover, .ui-state-active {
  88         a {
  89             i {
  90                 border-bottom: 2px solid #FFFFFF;
  91                 padding-bottom: 2px;
  92             }
  93         }
  94     }
  95
  96     form {
  97         display: flex;
  98         position: relative;
  99     }
 100
 101     .form-title {
 102         padding: 0 .8em;
 103         background-image: linear-gradient(to right, #418940, #71B443);
 104         border-radius: 0 16px 16px 0;
 105         display: flex;
 106         align-items: center;
 107         z-index: 2;
 108         white-space: nowrap;
 109
 110         label {
 111             color: white;
 112             font-weight: bold;
 113         }
 114     }
 115
 116     .form-content {
 117         background-color: white;
 118         margin-left: -16px;
 119         padding-left: 16px;
 120         border-radius: 0 16px 16px 0;
 121         position: relative;
 122         z-index: 1;
 123         white-space: nowrap;
 124         display: flex;
 125
 126         input[type="text"] {
 127             border: 0;
 128             box-shadow: unset;
 129             background-color: transparent;
 130         }
 131
 132         select {
 133             margin: 0;
 134             background-color: transparent;
 135             border: 0;
 136             box-shadow: unset;
 137             max-width: 15em;
 138         }
 139     }
 140
 141     .form-extra-content {
 142         left: 0;
 143         right: 0;
 144         position: absolute;
 145         top: 31px;
 146         background-color: #352C2E;
 147         padding: 1em;
 148         border-radius: 0 0 16px 16px;
 149         z-index: 1;
 150         display: none;
 151
 152         label {
 153             color: white;
 154         }
 155
 156         .form-control {
 157             display: block;
 158             width: 100%;
 159         }
 160     }
 161
 162     .form-extra-content-toggle {
 163         opacity: .5;
 164
 165         &:hover {
 166             opacity: 1;
 167         }
 168     }
 169
 170     input[type="submit"], button[type="submit"] {
 171         height: 31px;
 172         background-color: #71B443;
 173         color: white;
 174         border: 0;
 175         text-shadow: unset;
 176         border-radius: 0 16px 16px 0;
 177         margin-left: -16px;
 178         padding-left: calc(16px + .5em);
 179     }
 180
 181     input[type="button"], button {
 182         height: 31px;
 183         border: 0;
 184         text-shadow: unset;
 185
 186         &:active {
 187             box-shadow: unset;
 188         }
 189     }
 190 }
 191
 192 #logged-in-menu {
 193     position: relative;
 194     left: 0;
 195     top: 0;
 196     height: 50px;
 197
 198     &:hover {
 199         text-decoration: none;
 200     }
 201 }
 202
 203 .loggedinusername {
 204     bottom: 5px;
 205     text-decoration: none;
 206     position: relative;
 207     float: right;
 208     right: 0;
 209     height: 20px;
 210     width: 100%;
 211 }
 212
 213 .logged-in-branch-name {
 214     position: relative;
 215     right: 0;
 216     height: 20px;
 217     top: 10px;
 218     width: 100%;
 219
 220     &:hover {
 221         text-decoration: underline;
 222     }
 223 }
 224
 225 #lastborrower-window {
 226     display: none;
 227     background-image: linear-gradient(to left, #418940, #71B443);
 228     box-shadow: 1px 1px 1px 0 #999;
 229     color: #FFFFFF;
 230     padding: .2em;
 231     border-radius: 5px 5px 5px 5px;
 232
 233     > * {
 234         padding: 0 .4em;
 235     }
 236 }
 237
 238 #lastborrower-remove {
 239     cursor: pointer;
 240     border-left: 1px solid #fff;
 241 }
 242
 243 #lastborrowerlink {
 244     color: #FFFFFF;
 245 }