static/debcodesearch.css

   1 /* debian.css is imported by virtue of minifying it together with this file
   2  * into debcodesearch.min.css. */
   3
   4 #searchdiv {
   5         text-align: center;
   6 }
   7
   8 #searchdiv input[type=text] {
   9         width: 350px;
  10         padding: 7px;
  11 }
  12
  13 #searchform input[type=text] {
  14         width: 350px;
  15 }
  16
  17 .pagination a:link
  18 , .perpackage-pagination a:link
  19 , #packages a:link
  20 , .pagination a:visited
  21 , .perpackage-pagination a:visited
  22 , #packages a:visited {
  23         text-decoration: none;
  24 }
  25 .pagination a:hover
  26 , .perpackage-pagination a:hover
  27 , #packages a:hover
  28 , .perpackage-pagination a:visited:hover
  29 , .pagination a:visited:hover
  30 , #packages a:visited:hover {
  31         text-decoration: underline;
  32 }
  33
  34 .perpackage-pagination a, .pagination a {
  35         margin-left:  0.2em;
  36         margin-right: 0.2em;
  37 }
  38
  39
  40 /* from bootstrap; consider using the entire bootstrap */
  41 .alert {
  42         padding: 15px;
  43         padding-top: 12px;
  44         margin-bottom: 20px;
  45         border: 1px solid transparent;
  46         border-radius: 4px;
  47 }
  48
  49 .alert-warning {
  50         color: #8a6d3b;
  51         background-color: #fcf8e3;
  52         border-color: #faebcc;
  53 }
  54
  55 .alert-danger {
  56         color: #cc1446;
  57         background-color: #f2dede;
  58         border-color: #ebccd1;
  59 }
  60
  61 #perpackage, #perpackage-results, .perpackage-pagination {
  62         position: relative;
  63         background-color: #fff;
  64 }
  65
  66 #options {
  67         padding-bottom: 1.5em;
  68         margin-top: 0.15em;
  69 }
  70
  71 #options input {
  72         margin-left: 0;
  73 }
  74
  75 #perpackage-results h2 {
  76         padding-top: 0.4em;
  77         padding-bottom: 0.25em;
  78         padding-right: 0.4em;
  79         text-transform: uppercase;
  80         font-family: 'Inconsolata';
  81         font-size: 17px;
  82         font-weight: bold;
  83         letter-spacing: 2px;
  84         margin-bottom: 0.5em;
  85         margin-top: 1.5em;
  86 }
  87
  88 #perpackage-results .packagename {
  89         text-transform: uppercase;
  90 }
  91
  92 #perpackage-results ul {
  93         margin-top: 0;
  94 }
  95
  96 #perpackage-results ul li:first-child {
  97         padding-top: 0.5em;
  98         border-top: 1px solid rgba(0,0,0,0.15);
  99 }
 100
 101 #perpackage>h2, #normalresults>h2 {
 102         font-size: 20px;
 103         border: 0;
 104         background-color: #f5f6f7;
 105         padding-top: 0.4em;
 106         padding-bottom: 0.5em;
 107         padding-left: 15px;
 108         margin: 0;
 109         padding-right: 0.4em;
 110         border-radius: 4px;
 111 }
 112
 113 @-webkit-keyframes movefromright {
 114         from { transform: translate3d(-100%, 0, 0); }
 115         to   { transform: none; }
 116 }
 117 @-moz-keyframes movefromright {
 118         from { transform: translate3d(-100%, 0, 0); }
 119         to   { transform: none; }
 120 }
 121 @-o-keyframes movefromright {
 122         from { transform: translate3d(-100%, 0, 0); }
 123         to   { transform: none; }
 124 }
 125 @keyframes movefromright {
 126         from { transform: translate3d(-100%, 0, 0); }
 127         to   { transform: none; }
 128 }
 129
 130 .ppanimation {
 131         -webkit-box-shadow: rgba(213, 213, 213, 0.658824) 4px 0px 1px -3px;
 132         -webkit-animation-duration: 0.30s;
 133         -webkit-animation-name: movefromright;
 134         -webkit-animation-direction: alternate;
 135
 136         -moz-box-shadow: rgba(213, 213, 213, 0.658824) 4px 0px 1px -3px;
 137         -moz-animation-duration: 0.30s;
 138         -moz-animation-name: movefromright;
 139         -moz-animation-direction: alternate;
 140
 141         -o-box-shadow: rgba(213, 213, 213, 0.658824) 4px 0px 1px -3px;
 142         -o-animation-duration: 0.30s;
 143         -o-animation-name: movefromright;
 144         -o-animation-direction: alternate;
 145
 146         box-shadow: rgba(213, 213, 213, 0.658824) 4px 0px 1px -3px;
 147         animation-duration: 0.30s;
 148         animation-name: movefromright;
 149         animation-direction: alternate;
 150 }
 151
 152 .animation-reverse {
 153         -webkit-animation-direction: reverse;
 154         -moz-animation-direction: reverse;
 155         -o-animation-direction: reverse;
 156         animation-direction: reverse;
 157 }
 158
 159 body {
 160     font-family: 'Roboto', sans-serif;
 161     letter-spacing: 0.15px;
 162 }
 163
 164 h1, h2 {
 165     letter-spacing: initial;
 166 }
 167
 168 pre, code {
 169     font-family: 'Inconsolata', monospace !important;
 170     font-size: 14px !important;
 171     margin: 0 !important;
 172     padding: 0 !important;
 173 }
 174
 175 a code {
 176     font-size: 17px !important;
 177     color: #00E;
 178 }
 179
 180 #results a, #perpackage-results a {
 181     text-decoration: none;
 182     border-bottom: 1px solid;
 183 }
 184
 185 #results, #perpackage-results ul {
 186     list-style-type: none;
 187     padding-left: 0;
 188 }
 189
 190 #results li small, #perpackage-results small {
 191     opacity: 0;
 192 }
 193
 194 #results small:hover, #perpackage-results small:hover {
 195     opacity: 0.75;
 196 }
 197
 198 #results li {
 199     margin-bottom: 1em;
 200 }
 201
 202 #results small {
 203     opacity: 0.4;
 204 }
 205
 206 .pagination, .perpackage-pagination {
 207     margin-top: 2em;
 208     margin-bottom: 2em;
 209     margin-left: auto;
 210     margin-right: auto;
 211 }
 212
 213 pre {
 214     white-space: pre-wrap;
 215     white-space: -moz-pre-wrap;
 216     white-space: -pre-wrap;
 217     white-space: -o-pre-wrap;
 218     word-wrap: break-word;
 219 }
 220
 221 .lnr {
 222     color: #999;
 223     text-align: right;
 224     padding-right: 1em;
 225     padding-top: 0;
 226     float: left;
 227     width: em;
 228 }
 229
 230 #packages {
 231     display: table;
 232     table-layout: fixed;
 233     width: 100%;
 234     max-width: 100%;
 235 }
 236
 237 #packages span {
 238     display: table-cell;
 239 }
 240
 241 #packages span:first-child {
 242     text-overflow: ellipsis;
 243     white-space: nowrap;
 244     overflow: hidden;
 245 }
 246
 247 #packages span.showhint {
 248 /* TODO: instead of specifying a percentage, can we make this auto-size? use http://jsfiddle.net/L8S9L/2/ for testing */
 249     width: 5%;
 250     padding-left: 0.5em;
 251 }
 252
 253 #packages span.showhint a {
 254    text-decoration: none;
 255 }
 256
 257 @-webkit-keyframes progress-bar-stripes {
 258   from {
 259     background-position: 40px 0;
 260   }
 261   to {
 262     background-position: 0 0;
 263   }
 264 }
 265 @keyframes progress-bar-stripes {
 266   from {
 267     background-position: 40px 0;
 268   }
 269   to {
 270     background-position: 0 0;
 271   }
 272 }
 273
 274 #progressbar {
 275     margin-top: 1em;
 276     margin-bottom: 1em;
 277     height: 30px;
 278     border-radius: 4px;
 279     background-color: #f5f5f5;
 280     overflow: hidden;
 281     position: relative;
 282     -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 283     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 284 }
 285
 286 .progressbar-back-text, .progressbar-front-text {
 287     display: block;
 288     width: 100%;
 289     text-align: center;
 290     line-height: 28px;
 291 }
 292
 293 .progressbar-back-text {
 294     position: absolute;
 295 }
 296
 297 .progress-bar {
 298     position: absolute;
 299     overflow: hidden;
 300     color: #fff;
 301     width: 50%;
 302     height: 100%;
 303     background-color: #cc1446;
 304     -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 305     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 306 }
 307
 308 .progress-active {
 309     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 310     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 311     background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 312     background-size: 40px 40px;
 313     -webkit-animation: progress-bar-stripes 2s linear infinite;
 314     -o-animation: progress-bar-stripes 2s linear infinite;
 315     animation: progress-bar-stripes 2s linear infinite;
 316 }
 317