Changeset 13730 for trunk/themes/elegant


Ignore:
Timestamp:
Mar 25, 2012, 9:23:03 PM (12 years ago)
Author:
Zaphod
Message:

feature 2587: theme elegant, new version

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

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;}
Note: See TracChangeset for help on using the changeset viewer.