mediagoblin/static/css/base.css

   1 /* @font-face */
   2
   3 @font-face {
   4   font-family: 'Lato';
   5   font-style: normal;
   6   font-weight: 700;
   7   src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype');
   8 }
   9 @font-face {
  10   font-family: 'Lato';
  11   font-style: italic;
  12   font-weight: 400;
  13   src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/Lato-Italic.ttf') format('truetype');
  14 }
  15 @font-face {
  16   font-family: 'Lato';
  17   font-style: italic;
  18   font-weight: 700;
  19   src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../fonts/Lato-BoldItalic.ttf') format('truetype');
  20 }
  21 @font-face {
  22   font-family: 'Lato';
  23   font-style: normal;
  24   font-weight: 400;
  25   src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype');
  26 }
  27
  28 body {
  29   background-color: #111;
  30   background-image: url("../images/background.png");
  31   color: #C3C3C3;
  32   font-family: sans-serif;
  33   padding: none;
  34   margin: 0px;
  35   height: 100%;
  36   font: 16px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  37   font-family:'Lato', sans-serif;
  38 }
  39
  40 form {
  41   margin: 0px;
  42   padding: 0px;
  43 }
  44
  45 /* text styles */
  46
  47 h1{
  48   margin-bottom: 15px;
  49   margin-top: 15px;
  50   color: #fff;
  51   font-size: 1.875em;
  52 }
  53
  54 h2{
  55   font-size: 1.375em;
  56   margin-top: 20px;
  57   color: #fff;
  58 }
  59
  60 h3{
  61   border-bottom: 1px solid #333;
  62   font-size: 1.125em;
  63 }
  64
  65 a {
  66   color: #86D4B1;
  67 }
  68
  69 a.highlight {
  70   color: #fff;
  71 }
  72
  73 label {
  74   font-weight: normal;
  75 }
  76
  77 input, textarea {
  78   font-size:1em;
  79   font-family:'Lato', sans-serif;
  80 }
  81
  82 /* website structure */
  83
  84 .mediagoblin_body {
  85   position: relative;
  86   min-height: 100%;
  87 }
  88
  89 .mediagoblin_header {
  90   height: 36px;
  91   padding-top: 14px;
  92   margin-bottom: 20px;
  93   border-bottom: 1px solid #333;
  94 }
  95
  96 a.mediagoblin_logo{
  97   color: #fff;
  98   font-weight: bold;
  99   margin-right: 8px;
 100 }
 101
 102 .mediagoblin_footer {
 103   height: 30px;
 104   border-top: 1px solid #333;
 105   bottom: 0px;
 106   padding-top: 8px;
 107   text-align: center;
 108   font-size: 0.875em;
 109 }
 110
 111 .mediagoblin_content {
 112   padding-bottom: 74px;
 113 }
 114
 115 .mediagoblin_header_right {
 116   float: right;
 117 }
 118
 119 /* common website elements */
 120
 121 .button_action, .button_action_highlight {
 122   display: inline-block;
 123   color: #c3c3c3;
 124   background-color: #363636;
 125   border: 1px solid;
 126   border-color: #464646 #2B2B2B #252525;
 127   border-radius: 4px;
 128   padding: 3px 8px;
 129   font-size: 16px;
 130   text-decoration: none;
 131   font-style: normal;
 132   font-weight: bold;
 133   cursor: pointer;
 134 }
 135
 136 .button_action_highlight {
 137   background-color: #86D4B1;
 138   border-color: #A2DEC3 #6CAA8E #5C9179;
 139   color: #283F35;
 140 }
 141
 142 .button_form, .cancel_link {
 143   height: 32px;
 144   min-width: 99px;
 145   background-color: #86d4b1;
 146   background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
 147   background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
 148   background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2);
 149   background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2);
 150   background-image:      -o-linear-gradient(top, #86d4b1, #62caa2);
 151   background-image:         linear-gradient(top, #86d4b1, #62caa2);
 152   box-shadow: 0px 0px 4px #000;
 153   border-radius: 3px;
 154   border: none;
 155   color: #272727;
 156   margin: 10px 0px 10px 15px;
 157   text-align: center;
 158   padding-left: 11px;
 159   padding-right: 11px;
 160   text-decoration: none;
 161   font-family: 'Lato', sans-serif;
 162   font-weight: bold;
 163 }
 164
 165 .cancel_link {
 166   background-color: #aaa;
 167   background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
 168   background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
 169   background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa);
 170   background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa);
 171   background-image:      -o-linear-gradient(top, #D2D2D2, #aaa);
 172   background-image:         linear-gradient(top, #D2D2D2, #aaa);
 173 }
 174
 175 .pagination {
 176 text-align: center;
 177 }
 178
 179 .pagination_arrow {
 180   margin: 5px;
 181 }
 182
 183 .empty_space {
 184   background-image: url("../images/empty_back.png");
 185   font-style: italic;
 186   text-align: center;
 187   height: 160px;
 188   padding-top: 70px;
 189 }
 190
 191 .right_align {
 192   float: right;
 193 }
 194
 195 textarea#comment_content {
 196   resize: vertical;
 197   width: 634px;
 198   height: 90px;
 199   border: none;
 200   background-color: #f1f1f1;
 201   padding: 3px;
 202 }
 203
 204 /* forms */
 205
 206 .form_box {
 207   background-color: #222;
 208   background-image: url("../images/background_lines.png");
 209   background-repeat: repeat-x;
 210   padding-bottom: 30px;
 211   padding-top: 30px;
 212   margin-left: auto;
 213   margin-right: auto;
 214   display: block;
 215   float: none;
 216 }
 217
 218 .edit_box {
 219   background-image: url("../images/background_edit.png");
 220 }
 221
 222 .form_field_input input, .form_field_input textarea {
 223   width: 100%;
 224 }
 225
 226 .form_field_input {
 227   margin-bottom: 10px;
 228 }
 229
 230 .form_field_label {
 231   margin-bottom: 4px;
 232 }
 233
 234 .form_field_label {
 235   font-size:1.125em;
 236 }
 237
 238 .form_field_description {
 239   font-style: italic;
 240 }
 241
 242 .form_field_error {
 243   background-color: #87453b;
 244   color: #fff;
 245   border: none;
 246   padding: 9px;
 247   margin-top: 8px;
 248   margin-bottom: 8px;
 249 }
 250
 251 .form_submit_buttons {
 252   text-align: right;
 253 }
 254
 255 #password_boolean {
 256   margin-top: 4px;
 257   width: 20px;
 258 }
 259
 260 textarea#description {
 261   resize: vertical;
 262 }
 263
 264 /* comments */
 265
 266 .comment_author {
 267   margin-bottom: 40px;
 268   padding-top: 4px;
 269   font-size: 0.9em;
 270 }
 271
 272 .comment_content {
 273   margin-bottom: 30px;
 274 }
 275
 276 .comment_content p {
 277   margin-bottom: 0px;
 278 }
 279
 280 /* media galleries */
 281
 282 .media_thumbnail {
 283   padding: 0px;
 284   width: 180px;
 285   overflow: hidden;
 286   float: left;
 287   margin: 0px 4px 10px 4px;
 288   text-align: center;
 289   font-size: 0.875em;
 290 }
 291
 292 .media_thumbnail a {
 293   color: #eee;
 294   text-decoration: none;
 295 }
 296
 297 /* media detail */
 298
 299 h2.media_title {
 300   margin-bottom: 0px;
 301 }
 302
 303 p.media_specs {
 304   font-size: 0.9em;
 305   border-top: 1px solid #222;
 306   border-bottom: 1px solid #222;
 307   padding: 10px 0px;
 308   color: #888;
 309 }
 310
 311 .no_html5 {
 312     background: black;
 313     color: white;
 314     text-align: center;
 315     height: 160px;
 316     padding: 130px 10px 20px 10px;
 317 }
 318
 319 /* icons */
 320
 321 img.media_icon {
 322   margin: 0 4px;
 323   vertical-align: sub;
 324 }
 325
 326 /* navigation */
 327
 328 .navigation_button {
 329   width: 135px;
 330   display: block;
 331   float: left;
 332   text-align: center;
 333   background-color: #1d1d1d;
 334   border: 1px solid;
 335   border-color: #2c2c2c #232323 #1a1a1a;
 336   border-radius: 4px;
 337   text-decoration: none;
 338   padding: 12px 0 16px;
 339   font-size: 1.4em;
 340   margin: 0 0 20px
 341 }
 342
 343 .navigation_left {
 344   margin-right: 6px;
 345 }
 346
 347 /* messages */
 348
 349 ul.mediagoblin_messages {
 350   list-style: none inside;
 351   color: #f7f7f7;
 352 }
 353
 354 .mediagoblin_messages li {
 355   margin: 5px 0;
 356   padding: 8px;
 357   text-align: center;
 358 }
 359
 360 .message_success {
 361   background-color: #378566;
 362 }
 363
 364 .message_warning {
 365   background-color: #87453b;
 366 }
 367
 368 .message_error {
 369   background-color: #87453b;
 370 }
 371
 372 .message_info {
 373   background-color: #378566;
 374 }
 375
 376 .message_debug {
 377   background-color: #f7f7f7;
 378   color: #272727;
 379 }
 380
 381 ul.mediaentry_tags {
 382   list-style-type: none;
 383 }
 384
 385 ul.mediaentry_tags li {
 386   display: inline;
 387   margin: 0px 5px 0px 0px;
 388   padding: 0px;
 389 }
 390
 391
 392 /* media processing panel */
 393
 394 table.media_panel {
 395   width: 100%;
 396 }
 397
 398 table.media_panel th {
 399   font-weight: bold;
 400   padding-bottom: 4px;
 401 }
 402
 403
 404 /* Delete panel */
 405
 406 .delete_checkbox_box {
 407   margin-top: 10px;
 408   margin-left: 10px;
 409 }
 410
 411 /* ASCII art */
 412
 413 @font-face {
 414   font-family: Inconsolata;
 415   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 416 }
 417
 418 .ascii-wrapper pre {
 419   font-family: Inconsolata, monospace;
 420   line-height: 1em;
 421 }