Changeset 13730

Show
Ignore:
Timestamp:
03/25/12 21:23:03 (14 months ago)
Author:
Zaphod
Message:

feature 2587: theme elegant, new version

Location:
trunk/themes/elegant
Files:
10 added
3 modified

Legend:

Unmodified
Added
Removed

  • trunk/themes/elegant/local_head.tpl

    r13464 r13730  
    1 {combine_script id='elegant.scripts' require='jquery' path='themes/elegant/scripts.js'} 
     1{if $BODY_ID=='thePicturePage'} 
     2        {combine_script id='elegant.scripts_pp' load='header' require='jquery' path='themes/elegant/scripts_pp.js'} 
     3{else} 
     4        {combine_script id='elegant.scripts' load='header' require='jquery' path='themes/elegant/scripts.js'} 
     5{/if} 

  • trunk/themes/elegant/scripts.js

    r13479 r13730  
    1 jQuery("document").ready(function(jQuery){ 
    2  
    3         var menubar=jQuery("#menubar"); 
    4         var content=jQuery("#content"); 
    5  
    6         if ( (menubar.length == 1) && (content.length ==1)) { 
    7                 menubar.after("<div id=\"menuswitcher\">«</div>"); 
    8          
    9                 jQuery("#menuswitcher").click(function(){ 
    10                         if (jQuery("#menubar").is(":hidden")) { 
    11                                 showMenu(0); 
    12                                 return false; 
    13                         } else { 
    14                                 hideMenu(0); 
    15                                 return false; 
    16                         } 
    17                 }); 
    18  
    19                 // creates a variable with the contents of the cookie side-menu 
    20                 var sidemenu = jQuery.cookie('side-menu'); 
    21                  
    22                 // if cookie says the menu is hiding, keep it hidden! 
    23                 if (sidemenu == 'hiding') { 
    24                         hideMenu(0); 
    25                 } else { 
    26                         showMenu(0); 
    27                 } 
    28  
    29         } 
    30          
    31         var comments=jQuery("#thePicturePage #comments"); 
    32         if (comments.length == 1) { 
    33                 var comments_button=jQuery("#comments h3"); 
    34  
    35                 if (comments_button.length == 0) { 
    36                         jQuery("#addComment").before("<h3>Comments</h3>"); 
    37                         comments_button=jQuery("#comments h3"); 
    38                 } 
    39          
    40                 if (jQuery.cookie('comments') == 'visible') { 
    41                         comments_button.addClass("comments_toggle").addClass("comments_toggle_off"); 
    42                 } else { 
    43                         comments.addClass("comments_hidden"); 
    44                         comments_button.addClass("comments_toggle").addClass("comments_toggle_on"); 
    45                 } 
    46                  
    47                 comments_button.click(function() { 
    48  
    49                         var comments=jQuery("#thePicturePage #comments"); 
    50                         if (comments.hasClass("comments_hidden")) { 
    51                                         comments.removeClass("comments_hidden"); 
    52                                         comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");; 
    53                                         jQuery.cookie('comments', 'visible', {path: "/"}); 
    54                                 } else { 
    55                                         comments.addClass("comments_hidden"); 
    56                                         comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");; 
    57                                         jQuery.cookie('comments', 'hidden', {path: "/"}); 
    58                                 } 
    59                          
    60                 }); 
    61          
    62         } 
    63          
    64          
    65 }); 
    66  
    67 function hideMenu(delay) { 
    68  
    69         var menubar=jQuery("#menubar"); 
    70         var menuswitcher=jQuery("#menuswitcher"); 
    71         var content=jQuery("#the_page > .content"); 
    72         var pcontent=jQuery("#content"); 
    73          
    74         menubar.hide(delay); 
    75         menuswitcher.addClass("menuhidden").removeClass("menushown"); 
    76         menuswitcher.text("»"); 
    77         content.addClass("menuhidden").removeClass("menushown"); 
    78         pcontent.addClass("menuhidden").removeClass("menushown"); 
    79         jQuery.cookie('side-menu', 'hiding', {path: "/"}); 
    80          
    81 } 
    82  
    83 function showMenu(delay) { 
    84  
    85         var menubar=jQuery("#menubar"); 
    86         var menuswitcher=jQuery("#menuswitcher"); 
    87         var content=jQuery("#the_page > .content"); 
    88         var pcontent=jQuery("#content"); 
    89  
    90         menubar.show(delay); 
    91         menuswitcher.addClass("menushown").removeClass("menuhidden"); 
    92         menuswitcher.text("«"); 
    93         content.addClass("menushown").removeClass("menuhidden"); 
    94         pcontent.addClass("menushown").removeClass("menuhidden"); 
    95         jQuery.cookie('side-menu', 'showing', {path: "/"}); 
    96          
    97 } 
    98  
    99 /** 
     1/** 
    1002 * Cookie plugin 
    1013 * Copyright (c) 2006 Klaus Hartl (stilbuero.de) 
    … …  
    10810return cookieValue;}}; 
    10911 
     12if (jQuery.cookie('page-menu') == 'hidden') { 
     13        jQuery("head").append("<style type=\"text/css\">#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}</style>"); 
     14} else { 
     15        jQuery("head").append("<style type=\"text/css\">#content.contentWithMenu, #the_page > .content {margin-left:240px;}</style>"); 
     16} 
     17 
     18function hideMenu(delay) { 
     19        var menubar=jQuery("#menubar"); 
     20        var menuswitcher=jQuery("#menuSwitcher"); 
     21        var content=jQuery("#the_page > .content"); 
     22        var pcontent=jQuery("#content"); 
     23         
     24        menubar.hide(delay); 
     25        menuswitcher.addClass("menuhidden").removeClass("menushown"); 
     26        content.addClass("menuhidden").removeClass("menushown"); 
     27        pcontent.addClass("menuhidden").removeClass("menushown"); 
     28        jQuery.cookie('page-menu', 'hidden', {path: "/"}); 
     29         
     30} 
     31 
     32function showMenu(delay) { 
     33 
     34        var menubar=jQuery("#menubar"); 
     35        var menuswitcher=jQuery("#menuSwitcher"); 
     36        var content=jQuery("#the_page > .content"); 
     37        var pcontent=jQuery("#content"); 
     38 
     39        menubar.show(delay); 
     40        menuswitcher.addClass("menushown").removeClass("menuhidden"); 
     41        content.addClass("menushown").removeClass("menuhidden"); 
     42        pcontent.addClass("menushown").removeClass("menuhidden"); 
     43        jQuery.cookie('page-menu', 'visible', {path: "/"}); 
     44         
     45} 
     46 
     47jQuery("document").ready(function(jQuery){ 
     48 
     49        var sidemenu = jQuery.cookie('page-menu'); 
     50        var menubar=jQuery("#menubar"); 
     51 
     52        if (menubar.length == 1) { 
     53 
     54                jQuery("#menuSwitcher").html("<div class=\"switchArrow\">&nbsp;</div>"); 
     55 
     56                // if cookie says the menu is hiding, keep it hidden! 
     57                if (sidemenu == 'hidden') { 
     58                        hideMenu(0); 
     59                } else { 
     60                        showMenu(0); 
     61                } 
     62         
     63                jQuery("#menuSwitcher").click(function(){ 
     64                        if (jQuery("#menubar").is(":hidden")) { 
     65                                showMenu(0); 
     66                                return false; 
     67                        } else { 
     68                                hideMenu(0); 
     69                                return false; 
     70                        } 
     71                }); 
     72 
     73 
     74        }        
     75         
     76}); 
     77 
     78 

  • trunk/themes/elegant/theme.css

    r13697 r13730  
    1 /* colors & backgrounds */ 
    2  
    3 html, body {background-color:#111;} 
    4  
    5 body {margin: 5px 0;} 
    6  
    7 a:hover {border-bottom:none;} 
    8  
    9 #menuswitcher { 
    10         display:block; 
    11         font-size:200%; 
    12         text-align:center; 
    13         float:left; 
    14         height:33px; 
    15         cursor:pointer; 
    16         margin: 28px 0 0 -35px; 
    17 } 
    18  
    19 #menubar, 
    20 #menuswitcher.menuhidden { 
    21         border-radius : 0 10px 10px 0; 
    22         background-color: #222; 
    23         border: solid 1px #333; 
    24         border-width: 2px 2px 2px 0; 
    25 } 
    26  
    27 #menuswitcher.menuhidden { 
     1/* backgorunds */ 
     2 
     3html, body                                                                      { background-color: #111;} 
     4 
     5#content, .content                                                      { background-color: #222;} 
     6.content .titrePage                                                     { background-color: #111;} 
     7 
     8#menubar, #the_page #menuSwitcher.menuhidden    { background-color: #222;} 
     9 
     10#thePicturePage, #imageHeaderBar                        { background-color: #111;} 
     11#imageInfos, #infoSwitcher.infohidden           { background-color: #333;} 
     12#thePicturePage #comments                                       { background-color: #333;} 
     13 
     14.switchBox, .header_notes                                       { background-color: #555;} 
     15.thumbnailCategory, .commentElement                     { background-color: #333;} 
     16.message                                                                        { background-color: #666;} 
     17 
     18INPUT[type="text"], INPUT[type="password"], 
     19INPUT[type="button"], INPUT[type="submit"], 
     20INPUT[type="reset"], INPUT[type="file"]         { background-color: #999;} 
     21INPUT:focus, SELECT:focus, TEXTAREA:focus       { background-color: #ccc;} 
     22 
     23 
     24/* font colors */ 
     25 
     26body, legend                                                                    { color: #aaa;} 
     27a                                                                                       { color: #ccc;} 
     28a:hover                                                                                 { color: #fff;} 
     29INPUT.rateButton                                                        { color: #fff;} 
     30H1, H3, INPUT.rateButtonSelected                        { color: #ccc;} 
     31.message                                                                        { color: #fff;} 
     32.commentContent .comments_toggle:hover          { color: #fff;} 
     33 
     34 
     35/* borders */ 
     36 
     37#content,.content, .content .titrePage          { border-bottom: 2px solid #444;} 
     38#imageHeaderBar                                                                 { border: solid 0 #444; border-bottom-width:2px;} 
     39#copyright                                                                      { border-top-width:2px;} 
     40.switchBox                                                                      { border: 1px solid #000;} 
     41.switchBoxTitle                                                                 { border-bottom: 1px solid #444;} 
     42FIELDSET, INPUT, SELECT, TEXTAREA                       { border: 1px solid #999;} 
     43 
     44 
     45/* icons */  
     46 
     47.pwg-icon                                                                       { background-image: url(../default/s26/outline_808080.png);} 
     48A:hover .pwg-icon                                                       { background-image: url(../default/s26/outline_ffffff.png);} 
     49 
     50 
     51/* general rules */ 
     52 
     53body            { margin: 5px 0;} 
     54a:hover                 { border-bottom: none;} 
     55#copyright      { padding:0 4px 0 0; text-align:right;} 
     56 
     57 
     58/* content */ 
     59 
     60#the_page  #content.menushown, #the_page > .content.menushown, .contentWithMenu         { margin-left: 240px;} 
     61#the_page  #content.menuhidden, #the_page > .content.menuhidden                                         { margin-left: 35px;} 
     62#the_page  #content, #the_page > .content                                                                                       { margin-right: 0;} 
     63 
     64#content,.content                       { margin-bottom: 4px; padding-bottom: 4px;} 
     65#thePicturePage #content        { padding-bottom: 0;} 
     66.content .titrePage                     { padding:0; margin-bottom:4px;} 
     67.content .titrePage H2          { line-height: 20px; margin: 0; padding: 8px 0 0 2px;} 
     68 
     69 
     70/* menubar */ 
     71 
     72#menubar  { 
     73        display: inline; 
     74        width: 230px; 
     75        float: left; 
     76        margin: 28px 8px 10px 0; 
     77        padding: 0; 
     78} 
     79#menubar DT                             { text-align: left;} 
     80#menubar dd                             { padding: 0 0 1em 1em;} 
     81#menubar .pwg-icon-filter { display: none;} 
     82 
     83 
     84/* switchers */ 
     85 
     86#menuSwitcher { 
     87        display: block; 
     88        text-align: center; 
     89        height: 32px; 
     90        cursor: pointer; 
     91        float: left; 
     92        margin: 28px 0 0 -34px; 
     93} 
     94 
     95 
     96#imageInfos, #infoSwitcher.infohidden           { border-radius: 10px 0 0 10px;} 
     97#menubar, #the_page #menuSwitcher.menuhidden    { border-radius: 0 10px 10px 0;} 
     98#the_page #menuSwitcher.menuhidden                      { width: 25px; margin-left: 0;} 
     99 
     100#infoSwitcher { 
     101        display: block; 
     102        text-align: center; 
     103        height: 32px; 
     104        cursor: pointer; 
     105        position:absolute; 
     106        left:75%; 
     107        top:0; 
     108        margin: 10px 0 0 7px; 
     109        z-index:99; 
     110} 
     111 
     112#infoSwitcher.infohidden { 
    28113        width:25px; 
    29         margin-left:0; 
    30 } 
    31  
    32 /* content */ 
    33  
    34 #content.menushown, #the_page > .content.menushown { margin-left:240px;} 
    35 #content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;} 
    36 #content, #the_page > .content { margin-right:0;} 
    37  
    38 #content,.content { 
    39         background-color: #222; 
    40         border-bottom: 2px solid #444; 
    41         margin-bottom: 4px; 
    42         padding-bottom: 4px; 
    43 } 
    44  
    45 #thePicturePage #content {padding-bottom:0;} 
    46  
    47 .content .titrePage { 
    48         background-color: #111; 
    49         border-bottom: 2px solid #444; 
    50         padding:0; 
    51         margin-bottom:4px; 
    52 } 
    53  
    54 .content .titrePage H2 { 
    55         line-height: 20px; 
    56         margin: 0; 
     114        top:10px; 
     115        right:0; 
     116        left:auto; 
     117        margin:0; 
     118} 
     119 
     120#theImage.infohidden            { width: 100%;} 
     121 
     122#commentsSwitcher                                       { float: left; margin:3px 0; cursor:pointer;} 
     123.noCommentContent #commentsSwitcher     { display: none;} 
     124 
     125.switchArrow                            { width: 16px; height: 16px; margin: 8px 5px 8px 4px;} 
     126.switchArrow                            { background: transparent url("icon/arrows_ccc.png");} 
     127.switchArrow:hover                      { background: transparent url("icon/arrows_fff.png");} 
     128.menuhidden .switchArrow                { background-position: 0 0;} 
     129.menushown   .switchArrow               { background-position: -16px 0;} 
     130.infohidden .switchArrow                { background-position: -16px 0;} 
     131.infoshown   .switchArrow               { background-position: 0 0;} 
     132.commentshidden .switchArrow    { background-position: -48px 0;} 
     133.commentsshown   .switchArrow   { background-position: -32px 0;} 
     134 
     135 
     136/* switchboxes */ 
     137 
     138.switchBox { 
     139    border-radius: 4px 4px 4px 4px; 
     140    padding: 0.5em 10px; 
     141    text-align: left; 
     142    z-index: 100; 
     143} 
     144.switchBox .switchCheck                                 { width: 18px; text-align: left; display: inline-block; line-height:17px;} 
     145.switchBox .switchUnselected            { margin-left: 18px; line-height:17px;} 
     146 
     147 
     148/* thumbnails */ 
     149 
     150#thumbnails                                             { padding-top: 5px;} 
     151.thumbnails IMG                                                 { margin-bottom: 0; vertical-align: middle;} 
     152.thumbnailCategory DIV.illustration, 
     153.commentElement DIV.illustration                { margin: 2px; text-align: center;} 
     154 
     155 
     156/* picture page */ 
     157 
     158.contentWithMenu #imageHeaderBar        { padding: 0;} 
     159#imageHeaderBar                                                 { padding: 0 0 0 10px;} 
     160#imageHeaderBar                                                 { width: auto;} 
     161#imageHeaderBar h2                                      { font-size: 100%; font-weight: inherit;} 
     162#imageHeaderBar .browsePath { 
     163        display:inline-block; 
     164        float:none; 
     165        font-size:120%; 
     166        line-height:20px; 
    57167        padding: 8px 0 0 2px; 
    58 } 
    59  
    60  
    61 body { color: #999;} 
    62 a { color: #ccc;} 
    63 a:hover { color: #fff;} 
    64  
    65  
    66  
    67 /* menubar */ 
    68  
    69 #menubar { 
    70         float: left; 
    71         margin: 28px 13px 10px 0; 
    72         padding: 0; 
    73         display: inline; 
    74         width: 225px; 
    75 } 
    76  
    77 #menubar DT { color: #999; text-align:left;} 
    78 #menubar DT a { color: #ccc;} 
    79 #menubar DT a:hover { color: #fff;} 
    80 #menubar dd { padding: 0 0 1em 1em;} 
    81  
    82 /* text color */ 
    83 BODY, H1, H3, 
    84 INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ { 
    85         color:#d0d0d0; 
    86 } 
    87  
    88 #menubar .pwg-icon-filter {display:none;} 
    89  
    90  
    91  
    92  
    93 /* backgrounds */ 
    94  
    95  
    96 #imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { 
    97         background-color: #505050; 
    98 } 
    99  
    100 #imageHeaderBar H2 { 
    101         background-image: none; 
    102 } 
    103  
    104 #imageHeaderBar { 
    105         border-top: 1px solid #000; 
    106 } 
    107  
    108 /* borders */ 
    109 #derivativeSwitchBox, #sortOrderBox { 
    110         border: 2px solid #444; 
    111 } 
    112  
    113 .switchBoxTitle { 
    114   border-bottom:2px solid #444; 
    115 } 
    116  
    117 .derivativeSizeDetails {display:none} 
    118  
    119 FIELDSET, INPUT, SELECT, TEXTAREA { 
    120         border: 1px solid gray; 
    121 } 
    122  
    123  
    124 .thumbnails IMG {margin-bottom:0; vertical-align:middle;} 
    125 .thumbnailCategory DIV.illustration, .commentElement DIV.illustration {margin: 2px; text-align:center;} 
    126  
    127 /* picture page */ 
    128 #thePicturePage {background-color:#111;} 
    129 #imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;} 
    130 .contentWithMenu #imageHeaderBar {padding:0;} 
    131 #copyright {border-top-width:2px;} 
    132 #imageHeaderBar {border-bottom-width:2px; width:auto; background:#111} 
    133 #imageToolBar   {background:none;} 
    134 #imageToolBar {margin-top: -28px; margin-bottom:0;} 
    135 #theImage {padding-top:10px;} 
    136 #imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;} 
    137 #imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;} 
    138 #imageHeaderBar .imageNumber:before {content:'['} 
    139 #imageHeaderBar .imageNumber:after {content:']'} 
    140 #imageHeaderBar h2 {font-size:100%;} 
    141 #thePicturePage .pwg-button {width:26px;} 
    142 #thePicturePage .actionButtons {margin-right: 26px;} 
    143 #imageToolBar {float:right;} 
    144  
    145 #thePicturePage #comments {padding-top:12px; padding-bottom:12px;} 
    146 #thePicturePage #comments h3 {margin-top:10px; margin-bottom:10px;} 
    147 #thePicturePage #comments form { margin-bottom:10px;} 
    148 #thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;} 
    149 .noCommentText {display:block;} 
    150 #copyright {padding:4px 4px 0 0; text-align:right;} 
    151  
    152 #thePicturePage .comments_toggle_on:before {content:'(+) '} 
    153 #thePicturePage .comments_toggle_off:before {content:'(-) '} 
    154  
    155 .comments_hidden ul, .comments_hidden form {display:none;} 
    156 .thumbnailCategory, .commentElement {background-color: #333;} 
    157 .comments_toggle {cursor: pointer;} 
    158 .comments_toggle:hover {color:#fff;} 
    159  
    160 #the_page .content .stuffs {margin:0!important} 
    161  
    162 #thumbnails  {padding-top: 5px;} 
    163  
    164 INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;} 
    165 INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;} 
    166  
    167 /* links */ 
    168 INPUT.rateButton { 
    169         color: #fff; 
    170 } 
    171  
    172 .pwg-icon { 
    173         background-image: url(../default/s26/outline_808080.png); 
    174 } 
    175  
    176 A:hover .pwg-icon { 
    177         background-image: url(../default/s26/outline_ffffff.png); 
    178 } 
    179  
    180 .message { 
    181   color:white; 
    182   background-color:#666; 
    183 } 
     168        font-weight:bold; 
     169        margin:0; 
     170} 
     171.imageNumber                                            { display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;} 
     172#imageToolBar                                           { margin-top: -28px; margin-bottom: 0; float: right;} 
     173#thePicturePage .pwg-button                     { width: 26px;} 
     174#thePicturePage .actionButtons          { margin-right: 26px;} 
     175 
     176#theImageAndInfos { 
     177        display: block; 
     178        width: 100%; 
     179        position: relative; 
     180} 
     181#theImage { 
     182        display: inline-block; 
     183        width: 75%; 
     184        vertical-align: top; 
     185        overflow: auto; 
     186        padding: 10px 0 5px 0; 
     187} 
     188 
     189.rateButtonStarFull                                     { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;} 
     190.rateButtonStarEmpty                            { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;} 
     191 
     192 
     193/* image infos */ 
     194 
     195#imageInfos { 
     196        display: inline-block; 
     197        width: 24.5%; 
     198        vertical-align: top; 
     199        padding-top: 35px; 
     200        padding-bottom: 5px; 
     201        margin: 10px 0 10px 0.5%; 
     202        word-wrap:break-word; 
     203} 
     204 
     205#imageInfos .navThumbs                          { width: 250px; height: 130px; margin: auto; padding: 0 5px;} 
     206#imageInfos .navThumb                           { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;} 
     207#imageInfos #linkPrev                           { float: left;} 
     208#imageInfos #linkNext                           { float: right;}  
     209#imageInfos .thumbHover                                 { position: absolute; width: 100%; height: 100%;} 
     210#imageInfos .prevThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;} 
     211#imageInfos .prevThumbHover:hover       { background: transparent url(icon/img_prev.png) no-repeat center center;} 
     212#imageInfos .nextThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;} 
     213#imageInfos .nextThumbHover:hover       { background: transparent url(icon/img_next.png) no-repeat center center;} 
     214 
     215#imageInfos dl                                          { padding: 0 15px;} 
     216#imageInfos dt                                          { font-weight: bold;} 
     217#imageInfos dd                                          { margin: 0 0 5px 20px;} 
     218#imageInfos h3                                          { margin: 20px 0 10px;} 
     219 
     220 
     221/* image comments */ 
     222 
     223#thePicturePage #comments                       { padding: 2px 5px;} 
     224#thePicturePage #comments h3                    { margin: 10px 0;} 
     225#thePicturePage #comments form          { margin-bottom: 10px;} 
     226#thePicturePage #comments fieldset              { margin: 0 1em;} 
     227 
     228.noCommentText                                          { display:block;} 
     229.commentshidden ul, 
     230.commentshidden form                                    {display:none;} 
     231.commentContent .comments_toggle        {cursor: pointer;} 
     232 
     233 
     234/* plugins */ 
     235 
     236#the_page .content .stuffs              { margin: 0!important} 
     237.categoryActions .theme_menuf   { display: none;}