koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss

   1 @import "mixins";
   2 @import "fonts";
   3 @import "common";
   4
   5 body {
   6     background-color: #FCF9FC;
   7 }
   8
   9 a {
  10     color: $sci-link-color;
  11
  12     &:visited {
  13         color: $sci-link-color;
  14     }
  15
  16     &.title {
  17         font-weight: bold;
  18     }
  19 }
  20
  21 .ui-widget-content {
  22     a,
  23     a:visited {
  24         color: $sci-link-color;
  25     }
  26 }
  27
  28 h1 {
  29     color: $sci-heading-color;
  30     font-size: 140%;
  31     line-height: 150%;
  32 }
  33
  34 h2 {
  35     color: $sci-heading-color;
  36     font-size: 130%;
  37     line-height: 150%;
  38 }
  39
  40 h3 {
  41     color: $sci-heading-color;
  42     font-size: 120%;
  43     line-height: 150%;
  44 }
  45
  46 h4 {
  47     color: $sci-heading-color;
  48     font-size: 110%;
  49 }
  50
  51 h5 {
  52     color: $sci-heading-color;
  53     font-size: 100%;
  54 }
  55
  56 caption {
  57     color: $sci-heading-color;
  58     font-size: 120%;
  59     font-weight: bold;
  60     margin: .5em 0;
  61     text-align: left;
  62 }
  63
  64 input,
  65 textarea {
  66     width: auto;
  67 }
  68
  69 // Search bar border glow
  70 input {
  71     &[type="text"],
  72     &[type="password"] {
  73         &:focus {
  74             border-color: #85CA11;
  75             box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6);
  76         }
  77     }
  78 }
  79
  80 legend {
  81     color: $sci-heading-color;
  82     font-size: 110%;
  83     font-weight: bold;
  84 }
  85
  86 th {
  87     background-color: #E2E8E8;
  88 }
  89
  90 .main {
  91     background-color: #FFF;
  92     border-color: #F0F3F3;
  93     margin: .5em 20px;
  94     padding: .8em 0;
  95 }
  96
  97 .navbar-inverse {
  98     .navbar-inner {
  99         background: #FCF9FC none;
 100         border-color: #FCF9FC;
 101         box-shadow: none;
 102     }
 103
 104     .brand {
 105         color: $sci-heading-color;
 106         font-weight: bold;
 107     }
 108
 109     .nav {
 110         li {
 111             a,
 112             a:hover,
 113             a:focus {
 114                 color: $sci-heading-color;
 115                 font-weight: bold;
 116             }
 117
 118             &.dropdown {
 119
 120                 a {
 121                     &:hover,
 122                     &:focus {
 123                         .caret {
 124                             border-bottom-color: #85CA11;
 125                             border-top-color: #85CA11;
 126                         }
 127                     }
 128                 }
 129
 130                 &.open {
 131                     &> .dropdown-toggle {
 132                         background-color: transparent;
 133                         color: #85CA11;
 134
 135                         .caret {
 136                             border-bottom-color: #85CA11;
 137                             border-top-color: #85CA11;
 138
 139                             &:hover {
 140                                 border-bottom-color: #85CA11;
 141                                 border-top-color: #85CA11;
 142                             }
 143                         }
 144                     }
 145                 }
 146             }
 147         }
 148     }
 149 }
 150
 151 .navbar {
 152     .nav {
 153         li {
 154             &.dropdown {
 155                 &> a {
 156                     &:focus,
 157                     &:hover {
 158                         .caret {
 159                             border-bottom-color: #85CA11;
 160                             border-top-color: #85CA11;
 161                         }
 162                     }
 163                 }
 164             }
 165         }
 166     }
 167 }
 168
 169 // Dropdown menus in Header
 170 .dropdown-menu {
 171     border-radius: 0;
 172
 173     &> li {
 174         &> a {
 175             &:hover,
 176             &:focus {
 177                 background: #85CA11 none;
 178                 color: #FFFFFF;
 179             }
 180         }
 181     }
 182 }
 183
 184
 185 .table-striped tbody > tr:nth-child(odd) > td,
 186 .table-striped tbody > tr:nth-child(odd) > th {
 187     background-color: #F0F3F3;
 188 }
 189
 190 .modal-header {
 191     .closebtn {
 192         margin-top: 2px;
 193     }
 194 }
 195
 196 .closebtn {
 197     color: #000000;
 198     filter: alpha(opacity=20);
 199     float: right;
 200     font-size: 20px;
 201     font-weight: bold;
 202     line-height: 20px;
 203     opacity: .2;
 204     text-shadow: 0 1px 0 #FFFFFF;
 205
 206     &:hover {
 207         color: #000000;
 208         cursor: pointer;
 209         filter: alpha(opacity=40);
 210         opacity: .4;
 211         text-decoration: none;
 212     }
 213 }
 214
 215 button {
 216     &.closebtn {
 217         background: transparent;
 218         border: 0;
 219         cursor: pointer;
 220         padding: 0;
 221     }
 222 }
 223
 224 .btn-group {
 225     label,
 226     select {
 227         font-size: 13px;
 228     }
 229 }
 230
 231 // Override Bootstrap alert
 232 .alert {
 233     background: linear-gradient(to bottom,  #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100%);
 234     border-color: #D6C43B;
 235     color: #333;
 236
 237     // Redefine a new style for Bootstrap's class "close" since we use that already
 238     // Use <a class="closebtn" href="#">&times;</a>
 239     .closebtn {
 240         line-height: 20px;
 241         position: relative;
 242         right: -21px;
 243         top: -2px;
 244     }
 245 }
 246
 247 // Override Bootstrap alert.alert-info
 248 .alert-info {
 249     background: linear-gradient(to bottom,  #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100%);
 250     border-color: #C5D1E5;
 251     color: #333;
 252 }
 253
 254 // Override Bootstrap alert.alert-success
 255 .alert-success {
 256     background: linear-gradient(to bottom,  #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100%);
 257     border-color: #9FBA35;
 258     color: #333;
 259 }
 260
 261
 262 #members {
 263     a {
 264         &.logout {
 265             color: #E8583C;
 266             padding: 0 .3em 0 .3em;
 267         }
 268     }
 269 }
 270
 271 .inline {
 272     display: inline;
 273 }
 274
 275 .table {
 276     .sorting_asc {
 277         background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
 278         padding-right: 19px;
 279     }
 280
 281     .sorting_desc {
 282         background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE;
 283         padding-right: 19px;
 284     }
 285
 286     .sorting {
 287         background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
 288         padding-right: 19px;
 289     }
 290
 291     .nosort,
 292     .nosort.sorting_asc,
 293     .nosort.sorting_desc,
 294     .nosort.sorting {
 295         background: #E2E8E8 none;
 296         padding-right: 19px;
 297     }
 298 }
 299
 300 .table-bordered {
 301     border-radius: 0;
 302
 303     thead {
 304         &:first-child {
 305             tr {
 306                 &:first-child {
 307                     &> th {
 308                         &:first-child,
 309                         &:last-child {
 310                             border-radius: 0;
 311                         }
 312                     }
 313                 }
 314
 315                 &:last-child {
 316                     &> th {
 317                         &:first-child,
 318                         &:last-child {
 319                             border-radius: 0;
 320                         }
 321                     }
 322                 }
 323             }
 324         }
 325     }
 326 }
 327
 328 #sci_logout {
 329     color: #E8583C;
 330 }
 331
 332 #sci_checkin_button,
 333 #sci_refresh_button,
 334 #sci_append_button {
 335     margin-bottom: 10px;
 336 }
 337
 338 #sci_refresh_button {
 339     color: rgb(51, 51, 51);
 340 }