Changeset 5766


Ignore:
Timestamp:
Apr 10, 2010, 5:24:50 PM (14 years ago)
Author:
Gotcha
Message:

Optimize CSS

Location:
extensions/sobre
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed

  • extensions/sobre/CSS3.css

    r5628 r5766  
    2020  src: url('./fonts/Newser.ttf');
    2121}
     22@font-face {
     23  font-family: 'Mon-menu';
     24  src: url('./fonts/menubar.ttf');
     25}
    2226
    2327.content div.thumbnailCategory div.description h3 {
    … …  
    4044font-weight:bold;
    4145}
    42 
    43 .content UL.thumbnails SPAN.wrap2 {
    44         border: 1px solid #aaaaaa;      /* thumbnails border color and style */
    45         border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */
     46#menubar dt {
     47font-family:Mon-menu;
     48font-size:18px;
     49font-style:italic;
     50font-weight:lighter;
    4651}

  • extensions/sobre/menu.css

    r5754 r5766  
    9898border:0;
    9999color:#fff48e;
    100 font-family:Mon-menu;
    101 font-size:18px;
    102 font-style:italic;
    103 font-weight:lighter;
    104100padding:5px 0;
    105101}

  • extensions/sobre/theme.css

    r5754 r5766  
    1 /* $ Id: theme.css 2010-04-03 Par Gotcha pour son thème "Sobre" $ */
    2 
    3 /* Importation de feuilles de styles additionnelles */
    4 @import "menu.css";
    5 @import "slider.css";
    6 
    7 /* Le header */
    8 /* Fonctionne avec l'administration */
    9 #theHeader p {
    10         display:none;
    11 } /* Désactivé par défaut */
    12 
    13 /* text color */
    14 BODY, H1, H3,
    15 INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
    16         color:#d0d0d0;
    17 }
    18 H2, #menubar DT {
    19         color: #fff48e;
    20 }
    21 
    22 /* backgrounds */
    23 
    24 BODY, H3, #imageBar, #imageToolBar A:hover {
    25         background: #393737
    26 }
    27 BODY {
    28 background: #EAEAEA url(images/background-0.png) repeat-x top;
    29 }
    30 
    31 #menubar DL, .content, #imageToolBar, .header_notes {
    32         background-color: #505050;
    33 }
    34 H2 {
    35         background-image: url(images/tableh1_bg.png);
    36         color: #fff48e;
    37 }
    38 #imageHeaderBar H2 {
    39         background-image: none;
    40         background-color: transparent;
    41         border: none;
    42 }
    43 #imageHeaderBar {
    44         background-image: url(images/tableh2_bg.png);
    45         background-repeat: repeat-x;
    46         background-position: center;
    47         border-top: 1px solid #000;
    48 }
    49 
    50 /* borders */
    51 .content{
    52         border: 1px solid #252525;
    53         margin: 0;
    54 }
    55 H2, #imageToolBar {
    56         border-bottom: 1px solid #000;
    57 }
    58 FIELDSET, INPUT, SELECT, TEXTAREA,
    59 .content DIV.thumbnailCategory {
    60         border: 1px solid gray;
    61 }
    62 .content UL.thumbnails SPAN.wrap2 {
    63         border: 1px solid #aaaaaa;      /* thumbnails border color and style */
    64         border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */
    65 }
    66 .content UL.thumbnails SPAN.wrap2:hover,
    67 .content UL.thumbnailCategories DIV.thumbnailCategory:hover,
    68 .content UL.thumbnailCategories DIV.thumbnailCategory:hover A {
    69         background-color: #faebd7;
    70         border-color: yellow;   /* thumbnails border color when mouse cursor is over it */
    71         color: black;
    72 }
    73 
    74 
    75 /* links */
    76 A, INPUT.rateButton {
    77         color: #fff;
    78         border: none;
    79 }
    80 A:hover {
    81         color: #FFF48E;
    82 }
    83 
    84 /* Pied de page */
    85 #copyright {
    86         color: black;
    87 }
    88 #copyright a {
    89         color: #FF7700;
    90 }
    91 
    92 /* Whois Online */
    93 .Online {
    94         color: #444444;
    95 }
    96 .Online a {
    97         color: black;
    98 }
    99  
    100 /* Couleur de fond */
    101 .content, #imageToolBar, .header_notes {
    102         background-color: black;
    103 }
    104 #imageToolBar {
    105         background-color:#505050;
    106 }
    107 
    108 /* Cadre autour de la page */
    109 #thePicturePage {
    110         border:1px solid white;
    111 }
    112 
    113 /* Les polices */
    114 h2 {
    115         font-family:Mon-menu;
    116         font-size:18px;
    117         font-style:italic;
    118         font-weight:normal;
    119 }
    120 .content ul.thumbnails span.thumbLegend {
    121         height: 100%;
    122 }
    123 
    124 /* Plus de place pour le texte des catégories */
    125 .content ul.thumbnails span.wrap2, .content div.thumbnailCategory div.description  {
    126         height: 190px;
    127 }
    128 .content div.thumbnailCategory div.description .text {
    129         text-align: justify;
    130         padding-right:5px;
    131 }
    132 .content div.thumbnailCategory div.description {
    133         overflow: none;
    134 }
    135 
    136 /* Correction de l'affichage de la liste des tags */
    137 ul.tagSelection {
    138         width:100%;
    139 }
    140 ul.tagSelection li{
    141         float:left;
    142         width:150px!important;
    143         overflow:hidden;
    144 }
    145 
    146 /* Tips pour picture.tpl */
    147 #theImage img {
    148         margin-top: 10px;
    149 }
    150 #theImage p {
    151         color: #000;
    152         font-style:italic;
    153         margin:10px auto auto;
    154         position:relative;
    155         width:800px;
    156 }
    157 #linkPrev, #linkNext {
    158         display: none;
    159 }
    160 
    161 /* Modification de zone de commentaires */
    162 #comments fieldset {
    163         margin: auto;
    164         padding: 0;
    165         background-color: #F0F0F0;
    166         color: black;
    167 }
    168 #comments fieldset legend {
    169         margin-left: 10px;
    170         background: #F0F0F0;
    171 }
    172 #thePicturePage form.filter fieldset ul, #thePicturePage form.filter fieldset label {
    173         display:block;
    174         float:none;
    175         margin-right:0;
    176         padding:0;
    177 }
    178 table.commentr {
    179         margin-top: -20px;
    180         margin-bottom: -10px;
    181 }
    182 #outils {
    183         padding-top: 17px;
    184 }
    185 form.filter input[type="submit"] {
    186         margin-top:0;
    187 }
    188 form fieldset p {
    189         margin-top:0;
    190 }
    191 #comments  {
    192         border-width:0;
    193         padding:5px;
    194 }
    195 #theImage table {
    196         background-color: #D3D3D3;
    197         border:1px solid #000;
    198         width: 800px;
    199         margin:10px auto 0;
    200 }
    201 #comments {
    202         width: 910px;
    203         margin: 0 auto;
    204         background-color: #505050;
    205 }
    206 #comments h3 {
    207         margin:14px -5px;
    208         padding:0 7px;
    209 }
    210 #comments table tbody tr td  select {
    211         width: 95px;
    212 }
    213 #comments SPAN.author {
    214         font-weight:bold;
    215 }
    216 #comments blockquote {
    217         border-color:black;
    218         border-style:solid;
    219         border-width:0 0 0 2px;
    220         padding-left:5px;
    221         font-style:italic;
    222 }
    223 div#comments fieldset legend {
    224         margin-left: 10px;
    225 }
    226 form.filter fieldset ul, form.filter fieldset label {
    227         padding-top: 5px;
    228         padding-left: 5px;
    229 }
    230 table.commentr {
    231         margin-top: -20px;
    232         margin-bottom: -10px;
    233 }
    234 #outils {
    235         padding-top: 17px;
    236 }
    237 #stuffs_block_3 #comments { /* Tip pour la page d'accueil */
    238         width: 100%;
    239 }
    240 
    241 
    242 
    243 
    244 
    245 /* Correction du centrage du cadre de la catégorie */
    246 .content ul.thumbnailCategories {
    247   padding-left: 4px;
    248 }
    249 
    250 /* Centrage modifications de la caractéristique de la catégorie. */
    251 .content div.thumbnailCategory div.description div.text p.Nb_images {
    252   border-top:1px solid #808080;
    253   color:#FF9960;
    254   font-style:italic;
    255   text-align:center;
    256 }
    257 
    258 /* Centrage modifications du nom de la catégorie. */
    259 .content div.thumbnailCategory div.description h3 {
    260   font-weight: bold;
    261   text-align:center;
    262 }
    263 
    264 /* Modifications de la description de la catégorie. */
    265 .content div.thumbnailCategory div.description div.text p {
    266   color:#996060;
    267 }
    268 
    269 /* Correction du centrage de la miniature */
    270 .content div.thumbnailCategory div.illustration {
    271   text-align: center;
    272   margin: 2px;
    273 }
    274 
    275 /* Modifications complémentaires pour my-picture.tpl */
    276 /* MOD Permametadata */
    277 .pictureTable .exifbi {
    278   text-align: right;
    279 }
    280 /* Mise en page du tableau */
    281 TABLE.infoTable {
    282 width:920px;
    283 background: #505050;
    284 }
    285 TABLE.infoTable .label {
    286   background-color: #2F0000;
    287   font-weight: bold;
    288   text-align: left;
    289   padding-right: 0.5em;
    290   padding-left: 3px;
    291 }
    292 TABLE.infoTable {
    293   border: solid 1px;
    294   margin-top: 6px;
    295 }
    296 TABLE.infoTable .value p {
    297   width: 320px;
    298   margin: 0px;
    299 }
    300 TABLE.infoTable .value {
    301   max-width: 320px;
    302 }
    303 TABLE.infoTable .label {
    304   width: 100px;
    305 }
    306 TABLE.infoTable .value p a, input.rateButton {
    307 border-width:0;
    308 color:#FF7700;
    309 }
    310 /* ================= */
    311 
    312 /* Modification pûrement visuel et esthétique modifiant l'affichage de l'enveloppe sous une miniature nouvelle */
    313 .content ul.thumbnails span.thumbLegend img {
    314   position:relative; top:-3px;
    315 }
    316 
    317 /* Affichage des tags avec le plugin Cumulus cloud tags */
    318 .tagLetter table.tagLetterContent {
    319   font-size:100%;
    320 }
    321 
    322 /* Plugin PWG_Stuff, permet d'afficher les derniers commentaires sur 2 colonnes. */
    323 .content #comments ul.thumbnailCategories li {
    324   width:49.9%;
    325 }
    326 
    327 /* Modifications pour RV Mpas & Earth */
    328 #theImage #mapPicture {
    329   width: 280px;
    330 }
    331 #theImage #map {
    332 height:600px;
    333 min-height:512px;
    334 position: relative;
    335 background-color: rgb(229, 227, 223);
    336 left: 290px;
    337 right: -290px;
    338 margin-right: 290px;
    339 }
    340 
    341 /*
    342 Petite bidouille pour le panneau de connection en haut du site avec PWG_Stuffs
    343 #stuffs_block_2 form.properties span.property {
    344   width: 150px;
    345   text-align: left;
    346 }
    347 */
    348 
    349 /* Centrage en une seule colonne */
    350 body {
    351 margin: 0 auto;
    352 max-width: 1190px;
    353 min-width: 980px;
    354 }
    355 
    356 /* Les polices */
    357 .content div.thumbnailCategory div.description div.text p {
    358   font-family:Trebuchet MS;
    359 }
    360 .stuffs_block {
    361   font-family:Comic Sans MS;
    362 }
    363 
    364 /* Bloc privé */
    365 #stuffs_block_10 div.personal_block{
    366 display:none;
    367 }
    368 #stuffs_block_10:hover div.personal_block{
    369 display:block;
    370 }
    371 
    372 /* Pour IE et Chrome surtout */
    373 .content ul.thumbnailCategories {
    374 width: 99%;
    375 }
    376 
    377 
    378 
    379 
    380 
    381 /* Modifications de la tailles des miniatures. L'expemple ci-dessous suppose une taille de 200px de coté pour les miniatures.*/
    382 /* A vous d'adapter en fonction de vos propres miniatures et choix esthétique.*/
    383 
    384 .content DIV.thumbnailCategory DIV.description {
    385         padding-left: 0px                    /* For Sylvia theme only */
    386 }
    387 .content div.thumbnailCategory div.illustration {
    388         text-align:center;
    389 }
    390 .content div.thumbnailCategory div.illustration {
    391         width:170px;                      /* Usable range 162px-360px , optimal : Thumbnail width + 10px */
    392         margin-top:19px;
    393 }
    394 .content div.thumbnailCategory {
    395         height: 200px;                    /* Usable range 172px-250px , optimal : Thumbnail height + 10px */ /* For Slyvia theme, Thumbnail height + 40px */
    396 }
    397 .content div.thumbnailCategory div.description .text {
    398         height: 110px;                   /* Optimal : Thumbnail height - 50px */
    399 }
    400 #comments div.thumbnailCategory div.illustration {
    401         width: 255px;                    /* Usable range 219px-360px , optimal : Thumbnail width + 95px */
    402 }
    403 .content ul.thumbnails span.wrap2,
    404 .content div.thumbnailCategory div.description {
    405         height: 150px;                        /* Optimal : Thumbnail height - 10px */
    406 }
    407 .content ul.thumbnails span,
    408 .content ul.thumbnails span.wrap2 a,
    409 .content ul.thumbnails label {
    410         width: 170px;                        /* Optimal : Thumbnail width + 10px */
    411 }
    412 
    413 /* Set defaults for thumbnails legend ( modifie le nbre de ligne sous les vignettes)*/
    414 #content UL.thumbnails SPAN.thumbLegend {
    415   display: block;    /* display: none; if you don't want legend */
    416   height: 5em;        /* legend height (don't set auto to be Gecko friendly)*/
    417 }
    418 
    419 /* Plugin Whois Onligne, change affichage sizing*/
    420 .Online {
    421  font-size: 11px;
    422 }
    423 
    424 /* Pour IE et Chrome surtout */
    425 .content ul.thumbnailCategories {
    426 width: 99%;
    427 }
     1@import "slider.css";body{max-width:1190px;min-width:980px;margin:0 auto;}BODY,H1,H3,INPUT.rateButtonSelected{color:#d0d0d0;}H2,#menubar DT{color:#fff48e;}A,INPUT.rateButton{color:#fff;border:none;}A:hover{color:#FFF48E;}#copyright a{color:#F70;}BODY,H3,#imageBar,#imageToolBar A:hover{background:#393737;}BODY{background:url(images/background-0.png) repeat-x top #EAEAEA;}H2{color:#fff48e;background:url(images/tableh1_bg.png);}#imageHeaderBar H2{border:none;}#imageHeaderBar{border-top:1px solid #000;background:url(images/tableh2_bg.png) repeat-x center;}.content,#imageToolBar,.header_notes{background:#000;}#imageToolBar{background:#505050;}.content{border:1px solid #252525;margin:0;}FIELDSET,INPUT,SELECT,TEXTAREA,.content DIV.thumbnailCategory{border:1px solid gray;}.content UL.thumbnails SPAN.wrap2{border:1px solid #aaa;}.content UL.thumbnails SPAN.wrap2:hover,.content UL.thumbnailCategories DIV.thumbnailCategory:hover,.content UL.thumbnailCategories DIV.thumbnailCategory:hover A{color:#000;border-color:#FF0;background:#faebd7;}#thePicturePage{border:1px solid #FFF;}h2{font-family:Mon-menu;font-size:18px;font-style:italic;font-weight:400;}.content ul.thumbnails span.thumbLegend{height:100%;}.content div.thumbnailCategory div.description div.text p{font-family:Trebuchet MS;color:#996060;}.stuffs_block{font-family:Comic Sans MS;}.content #comments ul.thumbnailCategories li{width:49.9%;}.tagLetter table.tagLetterContent{font-size:100%;}#theImage #mapPicture{width:280px;}#theImage #map{height:600px;min-height:512px;position:relative;left:290px;right:-290px;margin-right:290px;background:#e5e3df;}.Online{font-size:11px;color:#444;}.content ul.thumbnailCategories{padding-left:4px;width:99%;}.content div.thumbnailCategory div.description div.text p.Nb_images{border-top:1px solid gray;color:#FF9960;font-style:italic;text-align:center;}.content div.thumbnailCategory div.description h3{font-weight:700;text-align:center;}.content div.thumbnailCategory div.illustration{text-align:center;width:170px;margin:19px 2px 2px;}.content ul.thumbnails span.wrap2,.content div.thumbnailCategory div.description{height:190px;}.content div.thumbnailCategory div.description .text{text-align:justify;padding-right:5px;height:110px;}ul.tagSelection li{float:left;width:150px;overflow:hidden;}#theImage img{margin-top:10px;}#theImage p{color:#000;font-style:italic;position:relative;width:800px;margin:10px auto auto;}TABLE.infoTable{width:920px;border:solid 1px;margin-top:6px;background:#505050;}TABLE.infoTable .label{font-weight:700;text-align:left;padding-right:0.5em;padding-left:3px;width:100px;background:#2F0000;}TABLE.infoTable .value p{width:320px;margin:0;}TABLE.infoTable .value{max-width:320px;}TABLE.infoTable .value p a,input.rateButton{color:#F70;border-width:0;}#comments fieldset{color:#000;margin:auto;padding:0;background:#F0F0F0;}#comments fieldset legend{margin-left:10px;background:#F0F0F0;}#thePicturePage form.filter fieldset ul,#thePicturePage form.filter fieldset label{display:block;float:none;margin-right:0;padding:0;}table.commentr{margin-top:-20px;margin-bottom:-10px;}#outils{padding-top:17px;}#comments{width:910px;border-width:0;margin:0 auto;padding:5px;background:#505050;}#theImage table{border:1px solid #000;width:800px;margin:10px auto 0;background:#D3D3D3;}#comments h3{margin:14px -5px;padding:0 7px;}#comments table tbody tr td select{width:95px;}#comments SPAN.author{font-weight:700;}#comments blockquote{padding-left:5px;font-style:italic;border-color:#000;border-style:solid;border-width:0 0 0 2px;}div#comments fieldset legend{margin-left:10px;}form.filter fieldset ul,form.filter fieldset label{padding-top:5px;padding-left:5px;}.content ul.thumbnails span.thumbLegend img{position:relative;top:-3px;}.content DIV.thumbnailCategory DIV.description{padding-left:0;}.content div.thumbnailCategory{height:200px;}#comments div.thumbnailCategory div.illustration{width:255px;}.content ul.thumbnails span,.content ul.thumbnails span.wrap2 a,.content ul.thumbnails label{width:170px;}#content UL.thumbnails SPAN.thumbLegend{display:block;height:5em;}#menubar{height:2.1em;position:relative;width:980px;z-index:2;padding-bottom:25px;display:block;float:none;margin:-2px auto 3px;}#menubar #menuTagCloud a{display:inline;}#menubar #menuTagCloud span{display:block;text-align:left;padding:0.5em 0;}#menubar .button{border:medium none;float:right;left:95%;list-style-image:none;list-style-position:outside;list-style-type:none;position:absolute;text-align:center;text-indent:0;width:auto;margin:-2px 2px 2px;padding:0;}#menubar a,#menubar dt a,#menubar dd a{border:0;color:#fff;display:block;text-decoration:none;}#menubar a:hover,#menubar dt:hover{color:#fff;}#menubar dd{border:1px solid #8c8c8c;position:absolute;text-align:left;z-index:500;background:#333;}#menubar dd a{padding:0.5em;}#menubar dd a:hover{border:1px solid #8c8c8c;color:#FFF;font-style:italic;background:#333;}#menubar dd ul ul{border:1px solid #8c8c8c;left:100%;position:absolute;top:0;z-index:500;background:#fff;}#menubar dl{display:inline;height:25px;text-align:center;width:25%;}#menubar dt{border:0;color:#fff48e;padding:5px 0;background:url("images/tableh1_bg.png");}#menubar li{position:relative;}#menubar li span{right:7px;}#menubar li span,#menubar li IMG{padding-left:4px;position:absolute;top:7px;}#menubar p,#menubar p.totalimages,#menubar p,#menubar p.totalimages,form#quickconnect{clear:both;text-align:center;margin:0;padding:0.2em;}#menubar ul{width:20em;}#menubar ul li a{margin-left:25px;padding-right:3em;}#menubar ul,#menubar dl,#menubar ul#menuTagCloud{float:left;list-style:none;margin:0;padding:0;}#menubar ul,#menubar li{background:#333;}#menubar ul.rvTree ul{padding-left:0 !important;}body#theadminpage #menubar{border:none;display:block;float:none;width:898px;margin:5px auto;}form#quickconnect .button{left:50px;position:relative;top:-20px;}form#quickconnect fieldset{padding-top:5px;text-align:left;width:19em;}form#quickconnect label{clear:left;}form#quickconnect label input{font-size:1em;}form#quickconnect p,form#quickconnect a{border:none;padding:0;}form#quicksearch{border-bottom:1px solid #000;padding:0 0 0 15px;}#theHeader p,#linkPrev,#linkNext,#stuffs_block_10 div.personal_block,#menubar li span.bullet,div#menubar dd,div#menubar ul ul,div#menubar ul li:hover ul ul,div#menubar ul ul li:hover ul ul,div#menubar ul ul ul li:hover ul ul,div#menubar ul ul ul ul li:hover ul ul{display:none;}#copyright,.Online a{color:#000;}H2,#imageToolBar,#menubar dl dd p{border-bottom:1px solid #000;}ul.tagSelection,#stuffs_block_3 #comments{width:100%;}form.filter input[type="submit"],form fieldset p{margin-top:0;}#stuffs_block_10:hover div.personal_block,#menubar a,#menubar dt,div#menubar dl:hover dd,div#menubar ul li:hover ul,div#menubar ul ul li:hover ul,div#menubar ul ul ul li:hover ul,div#menubar ul ul ul ul li:hover ul,div#menubar ul ul ul ul ul li:hover ul{display:block;}#menubar li a,#menubar li:hover{background:#3f3f3f;}
Note: See TracChangeset for help on using the changeset viewer.