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 +}