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   padding: none;
  33   margin: 0px;
  34   height: 100%;
  35   font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  36 }
  37
  38 form {
  39   margin: 0px;
  40   padding: 0px;
  41 }
  42
  43 /* text styles */
  44
  45 h1,h2,h3,p {
  46   margin-bottom: 20px;
  47 }
  48
  49 h1,h2,h3 {
  50   font-weight: bold;
  51 }
  52
  53 h1 {
  54   margin-top: 15px;
  55   color: #fff;
  56   font-size: 1.875em;
  57 }
  58
  59 h2 {
  60   font-size: 1.375em;
  61   margin-top: 20px;
  62   color: #fff;
  63 }
  64
  65 h3 {
  66   border-bottom: 1px solid #333;
  67   font-size: 1.125em;
  68 }
  69
  70 p {
  71   margin-top: 0px;
  72 }
  73
  74 a {
  75   color: #86D4B1;
  76 }
  77
  78 a.highlight {
  79   color: #fff;
  80 }
  81
  82 em {
  83   font-style: italic;
  84 }
  85
  86 strong {
  87   font-weight: bold;
  88 }
  89
  90 ul {
  91   list-style: disc inside;
  92 }
  93
  94 ol {
  95   list-style: decimal inside;
  96 }
  97
  98 label {
  99   font-weight: normal;
 100 }
 101
 102 input, textarea {
 103   font-size:1em;
 104   font-family:'Lato', sans-serif;
 105 }
 106
 107 /* website structure */
 108
 109 .container {
 110   margin: auto;
 111   width: 96%;
 112   max-width: 820px;
 113 }
 114
 115 header {
 116   width: 100%;
 117   height: 36px;
 118   padding-top: 14px;
 119   margin-bottom: 20px;
 120   border-bottom: 1px solid #333;
 121 }
 122
 123 .header_right {
 124   float: right;
 125 }
 126
 127 a.logo {
 128   color: #fff;
 129   font-weight: bold;
 130   margin-right: 8px;
 131 }
 132
 133 .logo img {
 134   vertical-align: middle;
 135 }
 136
 137 .mediagoblin_content {
 138   width: 100%;
 139   padding-bottom: 74px;
 140 }
 141
 142 footer {
 143   width: 100%;
 144   height: 30px;
 145   border-top: 1px solid #333;
 146   bottom: 0px;
 147   padding-top: 8px;
 148   text-align: center;
 149   font-size: 0.875em;
 150   clear: both;
 151 }
 152
 153 .media_pane {
 154   width: 560px;
 155   margin-left: 0px;
 156   margin-right: 10px;
 157   float: left;
 158 }
 159
 160 img.media_image {
 161   width: 100%;
 162 }
 163
 164 .media_sidebar {
 165   width: 240px;
 166   margin-left: 10px;
 167   float: left;
 168 }
 169
 170 .profile_sidebar {
 171   width: 340px;
 172   margin-right: 10px;
 173   float: left;
 174 }
 175
 176 .profile_showcase {
 177   width: 580px;
 178   margin-left: 10px;
 179   float: left;
 180 }
 181
 182 /* common website elements */
 183
 184 .button_action, .button_action_highlight {
 185   display: inline-block;
 186   color: #c3c3c3;
 187   background-color: #363636;
 188   border: 1px solid;
 189   border-color: #464646 #2B2B2B #252525;
 190   border-radius: 4px;
 191   padding: 3px 8px;
 192   font-size: 16px;
 193   text-decoration: none;
 194   font-style: normal;
 195   font-weight: bold;
 196   cursor: pointer;
 197 }
 198
 199 .button_action_highlight {
 200   background-color: #86D4B1;
 201   border-color: #A2DEC3 #6CAA8E #5C9179;
 202   color: #283F35;
 203 }
 204
 205 .button_form, .cancel_link {
 206   height: 32px;
 207   min-width: 99px;
 208   background-color: #86d4b1;
 209   background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
 210   background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
 211   background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2);
 212   background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2);
 213   background-image:      -o-linear-gradient(top, #86d4b1, #62caa2);
 214   background-image:         linear-gradient(top, #86d4b1, #62caa2);
 215   box-shadow: 0px 0px 4px #000;
 216   border-radius: 3px;
 217   border: none;
 218   color: #272727;
 219   margin: 10px 0px 10px 15px;
 220   text-align: center;
 221   padding-left: 11px;
 222   padding-right: 11px;
 223   text-decoration: none;
 224   font-family: 'Lato', sans-serif;
 225   font-weight: bold;
 226 }
 227
 228 .cancel_link {
 229   background-color: #aaa;
 230   background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
 231   background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
 232   background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa);
 233   background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa);
 234   background-image:      -o-linear-gradient(top, #D2D2D2, #aaa);
 235   background-image:         linear-gradient(top, #D2D2D2, #aaa);
 236 }
 237
 238 .pagination {
 239 text-align: center;
 240 }
 241
 242 .pagination_arrow {
 243   margin: 5px;
 244 }
 245
 246 .empty_space {
 247   background-image: url("../images/empty_back.png");
 248   font-style: italic;
 249   text-align: center;
 250   height: 160px;
 251   padding-top: 70px;
 252 }
 253
 254 .right_align {
 255   float: right;
 256 }
 257
 258 textarea#comment_content {
 259   resize: vertical;
 260   width: 634px;
 261   height: 90px;
 262   border: none;
 263   background-color: #f1f1f1;
 264   padding: 3px;
 265 }
 266
 267 .clear {
 268   clear: both;
 269   display: block;
 270   overflow: hidden;
 271   visibility: hidden;
 272   width: 0;
 273   height: 0;
 274 }
 275
 276 h3.sidedata {
 277   border: none;
 278   background-color: #212121;
 279   border-radius: 4px 4px 0 0;
 280   padding: 3px 8px;
 281   margin: 20px 0 5px 0;
 282   font-size: 1em;
 283 }
 284
 285 /* forms */
 286
 287 .form_box,.form_box_xl {
 288   background-color: #222;
 289   background-image: url("../images/background_lines.png");
 290   background-repeat: repeat-x;
 291   padding: 3% 5%;
 292   display: block;
 293   float: none;
 294   width: 90%;
 295   max-width: 340px;
 296   margin-left: auto;
 297   margin-right: auto;
 298 }
 299
 300 .form_box_xl {
 301   max-width: 460px;
 302 }
 303
 304 .edit_box {
 305   background-image: url("../images/background_edit.png");
 306 }
 307
 308 .form_field_input input, .form_field_input textarea {
 309   width: 100%;
 310 }
 311
 312 .form_field_input {
 313   margin-bottom: 10px;
 314 }
 315
 316 .form_field_label {
 317   margin-bottom: 4px;
 318 }
 319
 320 .form_field_label {
 321   font-size:1.125em;
 322 }
 323
 324 .form_field_description {
 325   font-style: italic;
 326 }
 327
 328 .form_field_error {
 329   background-color: #87453b;
 330   color: #fff;
 331   border: none;
 332   padding: 9px;
 333   margin-top: 8px;
 334   margin-bottom: 8px;
 335 }
 336
 337 .form_submit_buttons {
 338   text-align: right;
 339 }
 340
 341 #password_boolean {
 342   margin-top: 4px;
 343   width: 20px;
 344 }
 345
 346 textarea#description, textarea#bio {
 347   resize: vertical;
 348 }
 349
 350 /* comments */
 351
 352 .comment_author {
 353   margin-bottom: 40px;
 354   padding-top: 4px;
 355   font-size: 0.9em;
 356 }
 357
 358 .comment_content {
 359   margin-bottom: 30px;
 360 }
 361
 362 .comment_content p {
 363   margin-bottom: 0px;
 364 }
 365
 366 textarea#comment_content {
 367   width: 634px;
 368   height: 90px;
 369   border: none;
 370   background-color: #f1f1f1;
 371   padding: 3px;
 372 }
 373
 374 /* media galleries */
 375
 376 .media_thumbnail {
 377   padding: 0px;
 378   width: 180px;
 379   overflow: hidden;
 380   float: left;
 381   margin: 0px 4px 10px 4px;
 382   text-align: center;
 383   font-size: 0.875em;
 384 }
 385
 386 .media_thumbnail a {
 387   color: #eee;
 388   text-decoration: none;
 389 }
 390
 391 /* media detail */
 392
 393 h2.media_title {
 394   margin-bottom: 0px;
 395 }
 396
 397 p.context {
 398   display: inline-block;
 399   padding-top: 4px;
 400 }
 401
 402 p.media_specs {
 403   font-size: 0.9em;
 404   border-top: 1px solid #222;
 405   padding: 10px 0px;
 406   color: #888;
 407 }
 408
 409 .no_html5 {
 410     background: black;
 411     color: white;
 412     text-align: center;
 413     height: 160px;
 414     padding: 130px 10px 20px 10px;
 415 }
 416
 417 /* icons */
 418
 419 img.media_icon {
 420   margin: 0 4px;
 421   vertical-align: sub;
 422 }
 423
 424 /* navigation */
 425
 426 .navigation {
 427   float: right;
 428 }
 429
 430 .navigation_button {
 431   width: 135px;
 432   display: inline-block;
 433   text-align: center;
 434   background-color: #1d1d1d;
 435   border: 1px solid;
 436   border-color: #2c2c2c #232323 #1a1a1a;
 437   border-radius: 4px;
 438   text-decoration: none;
 439   padding: 4px 0 8px;
 440   margin: 0 0 6px
 441 }
 442
 443 .navigation_left {
 444   margin-right: 6px;
 445 }
 446
 447 /* messages */
 448
 449 ul.mediagoblin_messages {
 450   list-style: none inside;
 451   color: #f7f7f7;
 452   padding: 0;
 453 }
 454
 455 .mediagoblin_messages li {
 456   margin: 5px 0;
 457   padding: 8px;
 458   text-align: center;
 459 }
 460
 461 .message_success {
 462   background-color: #378566;
 463 }
 464
 465 .message_warning {
 466   background-color: #87453b;
 467 }
 468
 469 .message_error {
 470   background-color: #87453b;
 471 }
 472
 473 .message_info {
 474   background-color: #378566;
 475 }
 476
 477 .message_debug {
 478   background-color: #f7f7f7;
 479   color: #272727;
 480 }
 481
 482 ul.mediaentry_tags {
 483   list-style-type: none;
 484 }
 485
 486 ul.mediaentry_tags li {
 487   display: inline;
 488   margin: 0px 5px 0px 0px;
 489   padding: 0px;
 490 }
 491
 492
 493 /* media processing panel */
 494
 495 table.media_panel {
 496   width: 100%;
 497 }
 498
 499 table.media_panel th {
 500   font-weight: bold;
 501   padding-bottom: 4px;
 502 }
 503
 504
 505 /* Delete panel */
 506
 507 .delete_checkbox_box {
 508   margin-top: 10px;
 509   margin-left: 10px;
 510 }
 511
 512 /* ASCII art */
 513
 514 @font-face {
 515   font-family: Inconsolata;
 516   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 517 }
 518
 519 .ascii-wrapper pre {
 520   font-family: Inconsolata, monospace;
 521   line-height: 1em;
 522 }
 523
 524 /* Media queries and other responsivisivity */
 525 @media screen and (max-width: 680px) {
 526   .media_pane {
 527     width: 100%;
 528     margin: 0px;
 529   }
 530   img.media_image {
 531     width: 100%;
 532   }
 533 }
 534
 535 @media screen and (max-width: 960px) {
 536   .profile_sidebar {
 537     width: 100%;
 538     margin: 0px;
 539   }
 540   .profile_showcase {
 541     width: 100%;
 542     margin: 0px;
 543   }
 544 }