player/css/styles.css
changeset 64 3f480bb52daa
parent 55 102138d78081
child 65 1da0c1382b07
equal deleted inserted replaced
63:e33b023002b2 64:3f480bb52daa
    83 }
    83 }
    84 body {
    84 body {
    85     background: #000000; font-family: 'OpenSans'; font-weight: 400;
    85     background: #000000; font-family: 'OpenSans'; font-weight: 400;
    86 }
    86 }
    87 
    87 
       
    88 ::-webkit-scrollbar {
       
    89     width: 10px;
       
    90 }
       
    91 
       
    92 ::-webkit-scrollbar:hover {
       
    93     background: rgba(128,128,128,.2);
       
    94 }
       
    95 
       
    96 ::-webkit-scrollbar-thumb {
       
    97     background: rgba(128,128,128,.4); width: 10px; border-radius: 10px;
       
    98 }
       
    99 
       
   100 ::-webkit-scrollbar-thumb:hover {
       
   101     background: rgba(128,128,128,.6);
       
   102 }
       
   103 
    88 /* Top Bar */
   104 /* Top Bar */
    89 
   105 
    90 .top-bar {
   106 .top-bar {
    91     position: absolute; left: 0; right: 0; top: 0; height: 40px;
   107     position: absolute; left: 0; right: 0; top: 0; height: 40px;
    92 }
   108 }
   318 .annotation-templates {
   334 .annotation-templates {
   319     display: none;
   335     display: none;
   320 }
   336 }
   321 
   337 
   322 .annotation {
   338 .annotation {
   323     position: absolute;
   339     position: absolute; left: 50%;
   324 }
   340 }
   325 
   341 
   326 .annotation-title {
   342 .annotation-title {
   327     font-weight: 800; text-align: center;
   343     font-weight: 800; text-align: center;
   328 }
   344 }
   330 .close-annotation {
   346 .close-annotation {
   331     float: right; margin: 10px 10px 0 0; width: 11px; height: 10px; background-image: url(../img/sprites.png);
   347     float: right; margin: 10px 10px 0 0; width: 11px; height: 10px; background-image: url(../img/sprites.png);
   332 }
   348 }
   333 
   349 
   334 .annotation {
   350 .annotation {
   335     left: 45px; top: 800px; right: 35px;
   351     top: 800px; width: 920px; margin-left: -455px;
   336     transition: top 0.5s; -webkit-transition: top 0.5s;
   352     transition: top 0.5s; -webkit-transition: top 0.5s;
   337 }
   353 }
   338 
   354 
   339 .annotation-main:after, .about-collaboration:after {
   355 .annotation-main:after, .about-collaboration:after {
   340     content: "."; visibility: hidden; display: block; height: 0; line-height: 0; clear: both;
   356     content: "."; visibility: hidden; display: block; height: 0; line-height: 0; clear: both;
   341 }
   357 }
   342 
   358 
   343 /* Narrow annotations */
   359 /* Narrow annotations */
   344 
   360 
   345 .narrow-annotation {
   361 .narrow-annotation {
   346     left: 210px; right: 200px;
   362     width: 590px; margin-left: -290px;
   347 }
   363 }
   348 
   364 
   349 /* White annotations */
   365 /* White annotations */
   350 
   366 
   351 .white-annotation {
   367 .white-annotation {
   352     background: #ffffff; max-height: 522px; overflow: auto;
   368     background: #ffffff;
   353 }
   369 }
   354 
   370 
   355 .white-annotation {
   371 .white-annotation {
   356     color: #000000;
   372     color: #000000;
   357 }
   373 }
   363 .white-annotation .close-annotation:hover {
   379 .white-annotation .close-annotation:hover {
   364     background-position: -36px -160px;
   380     background-position: -36px -160px;
   365 }
   381 }
   366 
   382 
   367 .white-annotation .annotation-title {
   383 .white-annotation .annotation-title {
   368     font-size: 23px; margin: 24px 0;
   384     font-size: 23px; margin: 24px; line-height: 24px;
   369 }
   385 }
   370 
   386 
   371 /* Black annotations */
   387 /* Black annotations */
   372 
   388 
   373 .black-annotation .annotation-main {
   389 .black-annotation .annotation-main {
   391     font-size: 12px; color: #CCCCCC;
   407     font-size: 12px; color: #CCCCCC;
   392 }
   408 }
   393 
   409 
   394 /* Text annotation */
   410 /* Text annotation */
   395 
   411 
       
   412 .text-contents, .link-contents {
       
   413     font-family: Georgia, 'Times New Roman', serif;
       
   414     overflow: auto;
       
   415 }
       
   416 
   396 .text-contents {
   417 .text-contents {
   397     font-family: Georgia, 'Times New Roman', serif;
   418     margin: 0 25px 35px; font-size: 15px; padding: 0 20px 0;
   398     margin: 0 45px 35px; font-size: 15px;
       
   399     
       
   400 }
   419 }
   401 
   420 
   402 .text-contents p, .text-contents ul, .text-contents ol {
   421 .text-contents p, .text-contents ul, .text-contents ol {
   403     margin-bottom: 10px;
   422     margin-bottom: 10px;
   404 }
   423 }
   457 
   476 
   458 /* Link annotation */
   477 /* Link annotation */
   459 
   478 
   460 .link-contents {
   479 .link-contents {
   461     font-family: Georgia, 'Times New Roman', serif;
   480     font-family: Georgia, 'Times New Roman', serif;
   462     margin: 40px 80px 80px;
   481     margin: 40px 60px 60px; padding: 0 20px 0;
   463 }
   482 }
   464 
   483 
   465 .link-contents p {
   484 .link-contents p {
   466     text-align: center; font-size: 23px; margin: 25px 0;
   485     text-align: center; font-size: 23px; margin: 25px 0;
   467 }
   486 }