/* Copyright (c) 2001 - 2006 Ampache.org All rights reserved. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ /***************************************************************/ Ampache Theme "Greysme" by Spocky v1.02 (2007/09/23) Feel free to modify/reuse, just mention my name _somewhere_ /***************************************************************/ /* Theme colors : */ /* ---------------*/ /* Red : #8b3e38 (#5a211c was too dark) */ /* Light blue : #74718a (#5b596d was too dark) */ /* Dark blue : #2b293d */ /* Black : #050505 */ /* Dark grey : #111 */ /* Orange: #e9ad51 */ /************************************************/ /* General style rules */ /************************************************/ body, html, fieldset { border: 0; } h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; line-height: 1em; } /* avoid browser default inconsistent font-sizes */ a img, :link img, :visited img { border: none; } /* no blue linked image borders */ * { margin: 0; padding: 0; } /* White space reset */ html{ font-size: 62.5%; } body{ font-size: 1.1em; font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif; background: #2b293d url(../images/background.jpg) 0 0 repeat-x fixed; min-width:90em; } ol { list-style-type: decimal-leading-zero; } li { list-style-position: inside; } p { color: #e9ad51; } a { color: #74718a; text-decoration: none; } td { padding: 0 8px; color: #e9ad51; } th { padding-right: 10px; } input, select { font-size:1em; color: #e9ad51; background-color: #111; border: 1px solid #8b3e38; margin:0 0 1px 0; } input{ padding:0 2px; } input:focus, select:focus { border-style: dotted; } textarea { background-color: #111; color: #e9ad51; } .link { cursor:pointer; } /************************************************/ /* Styles for Site Header */ /************************************************/ #topbar { padding: 0 0; } #topbarright { font-size: 0.9em; text-align: right; color: #e9ad51; position: absolute; top: 0px; right: 0; padding: 3px; } #topbarright b { font-weight: normal } #topbarright a { color: #e9ad51;} #topbarleft { text-align: center; background: url(../images/ampache_back.gif) 0 0 repeat-x;} #topbarleft a { } /************************************************/ /* XSPF Player */ /************************************************/ .xspf_player { right: 20px; position: absolute; } /************************************************/ /* Footer */ /************************************************/ #footer { clear:both; text-align:center; font-size:10px; padding:3px; } #footer p { color:#999; } #footer-content { } /************************************************/ /* Buttons */ /************************************************/ .selected_button { background-color: #000; color: #fff; } .unselected_button { /* there really isn't anything for this */ } .smallbutton { border: 0px; padding: 0 1px; cursor: pointer; } input.button, input[type=button], input[type=submit], .text-action a, .text-action span { background:#8b3e38 url(../images/button_back2.png) 0 100% repeat-x !important; background:#8b3e38; color:#c98d31; padding:0px 0.5em; margin:4px 0 0 0; border:none; } .text-action span { display:block; cursor: pointer; } input.button:hover, input[type=button]:hover, input[type=submit]:hover, div.text-action a:hover, div.text-action span:hover { background:#74718a url(../images/button_back2.png) 0 100% repeat-x !important; background:#74718a; color:#e9ad51; } input[type=checkbox]{border:none;background:none;} /************************************************/ /* Tables (songs lists...) */ /************************************************/ .table-header { background: #111; vertical-align: top; } .table-header td, .table-header th { color:#8b3e38; font-variant:small-caps; font-weight:normal; } .table-header th { border-right:1px solid #000; } .table-header td a, .table-header th a { color:#8b3e38; /*padding-right:8px; background: url(../images/sort_off.gif) 100% 50% no-repeat;*/ } .table-header td a:hover, .table-header th a:hover { /*color:#111;*/ /*padding-right:8px; background:transparent url(../images/sort_on.gif) 100% 50% no-repeat;*/ } .odd, .even { background: url(../images/list_back.png) 0 50% repeat-x !important; background-image: none;} .odd { background-color: #111 !important;} .even { } .odd:hover, .even:hover { background-color: #2b293d !important;} /* .odd td img, .even td img { border: 2px solid transparent; } .odd:hover td img, .even:hover td img { border-color: #e9ad510; } */ /* todo : quand col, mettre sur les a:hover de la col action un background-color:none;*/ .odd td a img:hover, .even td a img:hover {opacity:0.5;} .headrow { font-size: 1.2em; } /* ? */ .blank { background: #fff; } /* ? */ .header { font-size: 12px; } /* ? */ .border { background: #000; } /************************************************/ /* Content block */ /************************************************/ #content {margin:10px 14em 10px 13.5em;} /* Center things on supporting browsers */ #content>table,#content>table .box { margin-left: auto; margin-right: auto; } h3#content_title{} /* Doesn't exist anymore (?) */ h3#content_title span {} /* Doesn't exist anymore (?) */ /************************************************/ /* Rightbar */ /************************************************/ #rightbar { width:13em; background:#2b293d; float:right; } #rightbar ul { list-style:none; } #rightbar a { text-decoration:none; } /* Rightbar Menu */ #rightbar #rb_action { padding:4px; } #rightbar #rb_action li { display:inline; } #rightbar li#rb_add { position:relative; z-index:10;} #rightbar li#rb_add:hover { background:#e9ad51; } /* Rightbar AddItems SubMenu */ #rightbar li:hover #rb_action_additems { display:block; } #rightbar #rb_action_additems { display:none; position:absolute; right:0px; top:15px; background: #050505 url(../images/button_back.png) 0 100% repeat-x; border:2px solid #e9ad51; width:10em; padding:0.3em; } * html #rightbar #rb_action_additems {right:100px;} /* IE6 fix */ #rightbar #rb_action_additems a { display:block; padding:0.1em; color:#8b3e38; text-decoration:none; text-align:right; } #rightbar #rb_action_additems a:hover, #rightbar #rb_current_playlist a:hover { color:#e9ad51; } /* Rightbar playlist */ #rightbar #rb_current_playlist { background: #111; padding-bottom:0.5em; } #rightbar #rb_current_playlist li { position:relative;font-size:0.9em;;line-height:14px; color:#5b5b5b; padding-right:20px;} #rightbar #rb_current_playlist li a { display:block; padding:0.2em;} #rightbar .delitem { position:absolute;right:0;top:0; } /************************************************/ /* Sidebar */ /************************************************/ #sidebar { float:left: position:relative; width: 13em; text-align: left; font-size: 0.8em; padding-top:29px; background:#2b293d url(../images/ampache_menu.gif) 50% 0 no-repeat; } /* For supporting browsers *cough*... I mean not IE6... *cough*, fix sidebar position on the left */ *>div#sidebar{ position: fixed; } #sidebar select { width: 95%; } #sidebar .smallbutton { margin: 0; } #sidebar ul { list-style:none; } /* For sidebar tabs */ /********************/ #sidebar-tabs{ border-top:1px solid #000; background:#111; } #sidebar-tabs li.sb1 { float: left; padding:1px; background: #111 ; border-top:0.5em solid #8b3e38; border-right:1px solid #000; } #sidebar-tabs li.active { /*background: #faf url(../images/top.gif) repeat-x 0 0;*/ border-top-color: #e9ad51; } #sidebar-tabs li:hover.sb1 { background:#000; border-top-color: #e9ad51; } /* Tabs content */ /****************/ #sidebar-page { position:absolute; left:0; top:52px; background: #111; padding-bottom:0.5em; width:13em; color:#8b3e38; } #sidebar-page ul.sb2 { /*padding:2px 4px;*/ } #sidebar-page ul.sb2 li{ margin:1em auto; padding-bottom: 0.5em; /*border-bottom: 1px solid #fff;*/ } #sidebar-page ul.sb2 h4{ padding:0.2em 0.5em 0.5em 0; font-style:italic; font-weight:normal; letter-spacing:0.2em; text-align:right; border-bottom:1px dotted #e9ad51; text-decoration: overline; background: url(../images/puce.gif) -8px -8px no-repeat; } #sidebar-page ul.sb2 li:hover h4{ background-color:#000; } #sidebar-page ul.sb3, #sidebar-page div.sb3 { color:#8b3e38; } #sidebar-page .sb3 a{ color:#8b3e38; } #sidebar-page ul.sb3 li{ margin:0; padding:0; border:none; font-weight:normal; background: url(../images/button_back.png) 0 100% repeat-x; border-bottom: 1px solid #000; } * html #sidebar-page ul.sb3 li{display:inline;} /* fix ie6 */ #sidebar-page .sb3 a, #sidebar-page .sb3 div{ padding:0.2em 0.6em; border-left: .5em solid #8b3e38; } #sidebar-page .sb3 a:hover{ border-left-color: #e9ad51; } #sidebar-page a{ display:block; } #sidebar-page a:hover{ background:#000; color:#e9ad51; } /* SIDEBAR : Home */ /******************/ /* SIDEBAR : Browse */ /********************/ .alphabet { background:transparent; /* fix ie bug */ /*font-size:0.95em;*/ /*font-weight:normal;*/ margin: 0.3em auto; /*color:#5b5b5b;*/ } .alphabet span.link { cursor: pointer; margin: 0; padding:3px 5px; font-family: monospace, Courier, Georgia; } .alphabet span.active{ color:#e9ad51; } .alphabet span.link:hover { background: #8b3e38; color:#111; } /* SIDEBAR : Search */ /********************/ /* SIDEBAR : Preferences */ /*************************/ /* SIDEBAR : Admin */ /*******************/ #sb_admin_catalogs li.sb_admin_catalogs_ctrls img {margin:0;} #sb_admin_catalogs li.sb_admin_catalogs_ctrls a{ display:inline; padding:0; border:none; } /************************************************/ /* Albums of the moment */ /************************************************/ .random_album { position:relative; float:left; padding:8px; } .random_album .play_album { position:absolute; top:12px; right:0; } /************************************************/ /* Styles for Now Playing */ /************************************************/ #nowplaying{ clear: both; } #np_container1{ height: 18px; } #np_container1 h1{ font-weight: bold; padding: 2px; } #np_container2{ border-width: 1px; border-style: solid; border-color:#ddd #999 #999 #ccc; padding: 6px; color: #000; } .np_row { padding-top: 3px; padding-bottom: 3px; display: block; } .np_cell { margin: 10px; } /************************************************/ /* Footer */ /************************************************/ #footer { margin-left: 150px; margin-bottom: 10px; } #footer p { color:#999; font-size:10px; } /************************************************/ /* Styles for the star ratings */ /************************************************/ .star-rating { position:relative; display:inline; } .star-rating ul, .star-rating a:hover, .star-rating .current-rating{ background: url(../images/ratings/star_rating.gif) left -1000px repeat-x; } .star-rating ul{ position:relative; width:80px; height:15px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .star-rating li{ display: inline; } .star-rating a, .star-rating span, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:15px; line-height:15px; outline:none; overflow:hidden; border: none; } .star-rating .one-stars { width:20%; z-index:6; } .star-rating .two-stars { width:40%; z-index:5; } .star-rating .three-stars { width:60%; z-index:4; } .star-rating .four-stars { width:80%; z-index:3; } .star-rating .five-stars { width:100%; z-index:2; } .star-rating .current-rating { z-index:1; background-position: left bottom; } .star-rating a.zero-stars { left:80px; width:16px; background-image: url(../images/ratings/x_off.gif); } /* hovering effect only for dynamic star rating */ .info-box .dynamic-star-rating a:hover{ background-position: left center; background-color:transparent; } .dynamic-star-rating a:hover.zero-stars { background-image: url(../images/ratings/x.gif); } /************************************************/ /* Box Related Styles */ /************************************************/ .box-title { display:block; color:#8b3e38; padding:3px 3px 0 18px; background: url(../images/puce.gif) 0 50% no-repeat; font-size: 1.1em; font-variant:small-caps; border-bottom:1px solid #8b3e38; letter-spacing:0.1em; margin: 0 10px; } .box-title:first-letter{font-style:italic;} .box-list { padding-right: 10px; } /* Enclosing Boxes Styles */ .box, .info-box { margin-top: 5px; margin-right: 3px; background: #050505 url(../images/back-box.gif) 0 0 no-repeat; font-size : 0.9em; border: 1px solid #8b3e38; float:left; clear:left; height:1%; /* IE6 : Holly Hack comes to rescue once again */ } /* Hovering effects on links */ .box a:hover, .info-box a:hover { background-color: #8b3e38; color: #e9ad51;} .box-inside { background: url(../images/right.gif) top right repeat-y; } .box-content { padding:8px 15px; } .box-top { position:relative; } .box-left-top { background: url(../images/punaise-tl.gif) no-repeat; height:16px; width:16px; position:relative;left:0;top:0; } .box-right-top { background: url(../images/curl.gif) no-repeat; height:16px; width:20px; position:absolute;right:0;top:0; } * html .box-right-top {right: expression(-this.parentNode.offsetWidth%2+"px");} /* Fixes an IE6 rounding error */ .box-bottom { position:relative;clear:both; } .box-left-bottom { background: url(../images/punaise-bl.gif) no-repeat; height:18px; width:16px; position:relative;left:0;top:0; } .box-right-bottom { background: url(../images/punaise-br.gif) no-repeat; height:18px; width:20px; position:absolute;right:0;top:0; } * html .box-right-bottom {right: expression(-this.parentNode.offsetWidth%2+"px");} /* Fixes an IE6 rounding error */ /* Specific boxes */ .box_newest_albums {} .box_newest_artists {clear:none;} .box_newest_genres {clear:none;} .box_topbarright {display:table;} .info-box th {color:#8b3e38;} /************************************************/ /* List Header Styles */ /************************************************/ .list-header { text-decoration: none; } .list-header:hover { color:#071fd4; } /************************************************/ /* Text Action Styles */ /************************************************/ .text-action { border-top:1px dotted #8b3e38; } .text-action, .text-action li { margin: 10px 0 5px 0; list-style: none; padding: 1px 0 0 0; text-wrap: none; } /* See input.button class */ /* .text-action a, .text-action span { background: #111; border: 1px solid #000; padding-left: 2px; padding-right: 2px; text-decoration: none; text-wrap: none; } */ .text-action #pt_active { background: #000; color: #fff; border: 1px solid #ddd; text-wrap: none; } /************************************************/ /* Tabs (for preferences) */ /************************************************/ #tablist { padding: 4px 0; margin: 12px 0 0 0; } #tablist li { list-style: none; display: inline; } #tablist li a { padding: 0 0.5em; margin-left: 3px; color: #000; background: #8b3e38 url(../images/button_back.png) 0 100% repeat-x !important; background: #8b3e38; } #tablist li a:hover { border-top: 2px solid #e9ad51; color: #e9ad51; } #tablist li a#current { padding: 5px 0.5em; color: #8b3e38; background: #111; background: #111 !important; border:none; } /************************************************/ /* Styles for Header */ /*(for ampache admin : installation, update...) */ /************************************************/ div#Header { height: 80px; margin-bottom: 3px; padding: 0px; } #Header h1 { background: transparent url(../themes/classic/images/bg_login_0.jpg) no-repeat top left; border: 0; width: 439px; height: 84px; float: left; } #Header h1 span { display:none } #Header h2 { background: transparent url(001/h2.gif) no-repeat top left; margin-top: 75px; width: 200px; height: 18px; float: right; } #Header h2 span { font-size: 10px; margin-left: 10px; } /************************************************/ /* User Online/Offline style, used in users.php */ /************************************************/ td.user_online{ background:#0f0; } td.user_offline { background:#7f0000; } td.user_disabled { background:#ccc; } /************************************************/ /* Styles for Login template */ /************************************************/ #container { margin: 100px auto 0px auto; text-align:center; } #container h1 { background:url(../images/ampache_back.gif) 0 0 repeat-x; } #container h1 span { background: url(../images/ampache.gif) 50% 0 no-repeat; height: 120px; margin-bottom: 8px; display:block; text-indent:-9000px; } #container div { width:340px; margin:auto; } #loginp_0 { color:#111; font-size:0.8em; font-style:italic; margin: 0 0 2em 0; } .loginp_1 { text-align:right; padding-right:100px; } .loginp_1 span { font-weight:bold; } .loginp_1 input { border:1px solid #74718a; } input.text_input { width:12em; } .loginp_1 input.check_input { margin-left:5px; } /************************************************/ /* Misc */ /************************************************/ .text-box { display: table-cell; padding:5px; margin:0 0 10px 0; background-color: #111; } .confirmation-box { padding: 5px 5px 0 5px; margin-bottom: 10px; display: table-cell; background-color: #111; border: 2px solid #000; } .alphabet { margin: 10px; font-size: 0.9em; font-weight: normal; } .display {} #mpdpl td { padding: 0 2px 0 2px; text-align: left; } table.tabledata {width:100%} .header1 { color: #8b3e38; background: #111 url(../images/button_back.png) 0 100% repeat-x !important; background: #111; font-size: 1.4em; font-variant:small-caps; display:block; padding:2px 5px; } .header2 { color: #8b3e38; font-size: 1.1em; text-align:center; font-weight: bold; border-bottom:1px solid #8b3e38; padding:1em; } .error { color: #990033; } .fatalerror { padding: 3px; display: table-cell; color: #990033; font-weight:bold; border:2px solid #990033; } #container div.fatalerror { background:none; height:auto; padding:5px; margin:10px; display:block; } .disabled { text-decoration: line-through; } #maincontainer{}