mediabox diff lib/style.css @ rev 4
Add poster for video player
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Thu Feb 23 21:46:41 2017 +0100 (2017-02-23) |
parents | |
children |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/lib/style.css Thu Feb 23 21:46:41 2017 +0100 1.3 @@ -0,0 +1,120 @@ 1.4 +/* CSS style for CGI/SHell Media Box */ 1.5 + 1.6 +body { font-size: 94%; margin: 0; } 1.7 +h1, h2 { color: #e6e6e6; margin: 8px 16px; } 1.8 +ul { padding: 20px 40px;} 1.9 +li { list-style-type: none; } 1.10 +a { text-decoration: none; } 1.11 + 1.12 +/* Home page style */ 1.13 +#home { 1.14 + max-width: 600px; 1.15 + margin: 40px auto; 1.16 +} 1.17 +#home nav a { 1.18 + display: block; 1.19 + color: #777777; 1.20 + font-size: 120%; 1.21 + font-weight: bold; 1.22 + background-color: #efefef; 1.23 + padding: 12px; 1.24 + margin: 8px; 1.25 + transition-property: background-color; 1.26 + transition-duration: 0.8s; 1.27 +} 1.28 + 1.29 +#home nav a:hover { 1.30 + background-color: #e8e8e8; 1.31 + color: #555555; 1.32 +} 1.33 + 1.34 +/* Header navigation */ 1.35 +header nav { 1.36 + position: fixed; 1.37 + width: 100%; 1.38 + top: 18px; 1.39 + right: 5px; 1.40 + text-align: right; 1.41 +} 1.42 +header nav a { 1.43 + color: #888; 1.44 + padding: 0 5px; 1.45 +} 1.46 + 1.47 +/* Round corners */ 1.48 +img, nav a, #settings { 1.49 + border-radius: 4px; 1.50 + -moz-border-radius: 4px; 1.51 + -webkit-border-radius: 4px; 1.52 +} 1.53 + 1.54 +/* Audio/Videos Players */ 1.55 +#audio-player, #video-player { 1.56 + text-align: center; 1.57 + background-color: #ededed; 1.58 + /*border: 1px solid #cccccc;*/ 1.59 +} 1.60 +#audio-title, audio, #video-title, video { color: #666; } 1.61 + 1.62 +#audio-player { height: 60px; } 1.63 +audio { margin: 30px 0 0 0; width: 480px; } 1.64 + 1.65 +#audio-title { 1.66 + width: 100%; 1.67 + position: absolute; 1.68 + text-align: center; 1.69 + font-size: 80%; 1.70 + margin-top: 10px; 1.71 +} 1.72 + 1.73 +#audio-list li span, #audio-list li a, #videos-list li span, 1.74 +#videos-list li a, #radio-list li a { 1.75 + display: block; 1.76 + color: #666; 1.77 + background-color: #f4f4f4; 1.78 + line-height: 1.8em; 1.79 + margin: 4px; 1.80 + padding: 0 5px; 1.81 + font-size: 88%; 1.82 + border-radius: 2px; 1.83 +} 1.84 +#audio-list li span, #videos-list li span, #radio-list li span { 1.85 + color: #444; } 1.86 + 1.87 +#audio-list li a:hover, #videos-list li a:hover, 1.88 +#radio-list li a:hover { 1.89 + color: #222; 1.90 + background-color: #efefef; 1.91 +} 1.92 + 1.93 +#radio-list li a span { 1.94 + position: absolute; 1.95 + right: 50px; 1.96 +} 1.97 + 1.98 +#video-player { height: 315px; } 1.99 +video { margin: 0; } 1.100 + 1.101 +#video-title { 1.102 + width: 100%; 1.103 + position: absolute; 1.104 + font-size: 80%; 1.105 + text-align: center; 1.106 + margin-top: 6px; 1.107 +} 1.108 + 1.109 +/* Settings page */ 1.110 +#settings { 1.111 + max-width: 600px; 1.112 + margin: 40px auto; 1.113 + padding: 10px; 1.114 + color: #333; 1.115 + background-color: #efefef; 1.116 +} 1.117 + 1.118 +/* Footer */ 1.119 +footer { 1.120 + color: #efefef; 1.121 + font-size: 150%; 1.122 + text-align: center; 1.123 +}