User Login    
 + Register
  • Main navigation
Main Menu
Login
Username:

Password:


Lost Password?

Register now!
Fast Search
Slow Search

Advanced Search
Google Ad
[Datsun 1200 encyclopedia]

MediaWiki:Common.css

(Difference between revisions)

Datsun 1200 encyclopedia | Recent changes | Switch to MediaWiki mode

Printable version | Disclaimers | Privacy policy | Current revision
Revision as of 08:59, 13 July 2018
ddgonzal (Talk | contribs)

<- Previous diff		 Revision as of 02:15, 18 July 2018
ddgonzal (Talk | contribs)

Next diff ->
Line 4: Line 4:
.siteHeader img{ margin:inherit; max-width:inherit;} .siteHeader img{ margin:inherit; max-width:inherit;}
 +
.test_pad_zero img { padding:0px; box-sizing:border-box; outline:thin solid black; } .test_pad_zero img { padding:0px; box-sizing:border-box; outline:thin solid black; }
Line 23: Line 24:
/* #article {width:400px} doesn't let image stretch across screen */ /* #article {width:400px} doesn't let image stretch across screen */
/* text-align: justify; affects image too */ /* text-align: justify; affects image too */
- .SeeMainArticle { padding-left:1em; font-family:courier; }+ .SeeMainArticle { padding-left:1em; background-color:Gainsboro; padding-right:1em }
@media screen and (max-device-width:480px) { #article {width:480px; } } @media screen and (max-device-width:480px) { #article {width:480px; } }
.index {float:left; white-space:nowrap; overflow:hidden; width:140px; height:124px; .index {float:left; white-space:nowrap; overflow:hidden; width:140px; height:124px;

Revision as of 02:15, 18 July 2018

.siteHeader{ width: 130px; height: 120px; overflow: hidden;}

.clippy img { clip-path:inset(30px 30px 60px 60px); }

.siteHeader img{ margin:inherit; max-width:inherit;} 


.test_pad_zero img { padding:0px; box-sizing:border-box; outline:thin solid black; }
br { clear:both; }
.img_nopad img { padding:0; }
.album_img { overflow:hidden; 
   position:relative; top:0; left:0; width:140px; height:95px; display:inline-block;}
.album_img img { padding:0 }
.album_overlay { position:absolute; top:2px; left:0px; background:black; height:18px; 
   width:50px; color:yellow; padding-left:3px; padding-top:2px; overflow:hidden; }
.album_overlayH { position:absolute; top:0px; left:0px; background:black; height:18px; 
   width:50px; color:yellow; padding-left:3px; padding-top:2px; overflow:hidden; }
.album_overlayT { position:absolute; top:2px; left:0px; background:black; height:18px; 
   width:50px; color:yellow; padding-left:3px; padding-top:2px; overflow:hidden; }
.album_overlay:hover { overflow:normal; width:140px; }
.album_overlayH:hover { display:none }
.album_overlayT:hover { display:none }

/* #article {width:400px} doesn't let image stretch across screen */
/* text-align: justify; affects image too */
.SeeMainArticle { padding-left:1em; background-color:Gainsboro; padding-right:1em }
@media screen and (max-device-width:480px)  { #article {width:480px; } }
.index {float:left; white-space:nowrap; overflow:hidden; width:140px; height:124px;
        color:RGBa(0,0,0,1);
        /* borderx:thin solid black; border-collapse:collapse; */
        box-shadow: 
        1px 0 0 0 #000, 
        0 1px 0 0 #000, 
        1px 1px 0 0 #000,   /* Just to fix the corner */
        1px 0 0 0 #000 inset, 
        0 1px 0 0 #000 inset;
        trbl; padding:4px 2px 2px 3px; text-align:center; }
.index .album_overlayT { display:none }
  .title {overflow:hidden; width:135px; color:inherit; text-transform:lowercase}
  .index:hover, .title:hover {background-color:black; color:white; white-space:normal}
@media screen and (max-device-width:800px) {
  .title {overflow:hidden; width:138px; height:32px; color:inherit; white-space:normal; }
  .index:hover, .title:hover {background-color:black; color:white; white-space:normal}
  .index img {max-width:140px; max-height:105px; padding:0; }
}
@media screen and (max-device-width:800px) { .index { height:140px; } }

@media screen {  .width_test {visibility: hidden;}}
@media screen and (min-device-width:480px)  {.width_test#w480  {visibility: visible;}}
@media screen and (min-device-width:800px)  {.width_test#w800  {visibility: visible;}}
@media screen and (min-device-width:1280px) {.width_test#w1280 {visibility: visible;}}
@media screen and (min-width:320px) and (device-aspect-ratio: 3/5) {.width_test#smallscreen {visibility: visible;}}

@media screen and (max-device-width:480px) {
   .overtable { overflow:auto; width:400px; }
   pre        { overflow:auto; width:400px; } 
}

.caption{background-color:red; width:140px;
       position:absolute;
       font-size:80%;
       padding-left:1%;
       padding-right:1%;
       margin-left:0;
       margin-right:0;
       top:0;
       left:0;
       }
.thumb {
       position:absolute;
       top:12;
       left:0;
       }

/* GLOBAL WIKI styles */
table.toc  { width:400px; }                    /* Test#TOC   */
#article blockquote { width:373px; }           /* Test#QUOTE */
img { max-width:400px;  padding:2px 0 } /* override with class="imageLGpx" or "imageMAXpx" */
@media screen and (max-device-width:480px) {
  #article pre { width:400px; white-space:pre; overflow:auto; } }

/* QUOTE styles Test#QUOTE */
#article blockquote img { max-width:373px; } /* Test#QUOTE_IMG */
#article blockquote.wide { width:90%; }
#article blockquote blockquote { width:90%; } /* Template:OwnersManual */
#article blockquote.fancy:first-letter {
  	float: left;
 	margin: 0 .3em 0 0;
 	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
 	font-size: 200%;
 	font-weight: bold; }

/* LIST styles Test#LIST */
#article ul {width:95%;
    list-style: disc outside none;
  margin-before: 0px;
padding-start: 0px;
    margin-left: 10px;
    padding-left: 5px;}
#article ul li {
    margin-top: 0px;
    margin-bottom: 0px;}
#article ul li:first-child {margin-top: 0px;}
#article ol {width:90%;
    list-style: decimal outside none;
   line-height: 1.5;
   margin-top: 0px;
    margin-left: 15px;
   padding-left: 15px;}
#article ol li {margin-top: 10px;}
#article ol li:first-child {margin-top: 0px;}
#toc ol li {margin-top: 0px;}
#toc ul {list-style:none inside none; margin-left: 0px; }

/* list img sizes Test#LIST_IMG */
#article ul li img {max-width:383px}
#article ol li img {max-width:368px}
#article ul dd img {max-width:343px}
#article ol dd img {max-width:328px}

/* TABLE styles */ 
table.wiki_table{border:thin solid black; width:400px; border-spacing:0px; padding:0px;} 
.wiki_table tr:nth-child(even){background-color: #f0f0f0}
.wiki_table th {text-align:left ; vertical-align: text-top;}
.wiki_table td,th {padding:0px 0px 0px 2px; }
.wiki_index {width:420px; border:thin solid black; border-collapse:collapse;} 
.wiki_index td,th {white-space:nowrap; max-width:144px; border:thin solid black;
            padding:2px 2px 2px 2px; text-align:center;}
.wiki_index {max-width:140px; max-height:105px; padding:0; }

/* IMG styles */
.img_width img {width:100%;}
.img_index img { height:105px; }
/*.img_index img { height:105px; display:inline-block; outline:thin solid black; padding:0; }*/
.img_height img { height:100%; padding:0; }
.img_height { display:inline-block; outline:thin solid black; position:relative; top:0; left:0; }
.img_hxw img {height:100%; width:100%;}
.img_height120 img {height:100%;}
.img_height120 { height:120px; display:inline-block; outline:thin solid black; }

/* IMG general classes */
span[class^="image"] { position:relative; display:inline-block; } /* for overlay positioning */
.imagepx      img { width: 100%; }
.image100px   img { width: 100px; }
.imageTHUMBpx img,
.image140px   img { width: 140px; }
.imageTHpx    img,
.image160px   img { width: 160px; }
.imageSMpx    img,
.image256px   img { max-width: 256px; }
.imageLGpx    img { max-width:560px; padding:2px 2px; }
@media screen and (max-device-width:480px)  {
   .imageLGpx img { max-width:480px;} }
.imageXLpx    img { max-width:640px; }
.imageMAXpx   img { width: inherit; max-width:inherit; position: relative; topx: 0; leftx: 0; padding: 0; }
.imageINDEX   img { max-width:inherit;}
.imageINDEX   a   { max-width:inherit;}

/* NAVIGATION UI styles */
#navbar {outline:solid thin black; padding:4px 4px 4px 13px; width:384px; background:#f7f8ff;}
#navbar_title {color:Black; text-transform:uppercase; font-weight:bold; height:20px}
.navbar_link { padding-left:4px;}
.section { color:DarkSlateGray; text-transform:lowercase;
   background-color:#B4CAD7;
   background: -webkit-linear-gradient(left, #B4CAD7, #7f8e88); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(right, #B4CAD7, #7f8e88); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(right, #B4CAD7, #7f8e88); /* For Firefox 3.6 to 15 */
   background: linear-gradient(to right, #B4CAD7,#7f8e88); /* Standard syntax */}
.navbox_outer {border:thin solid black; border-spacing:0px; padding:0px;}
.navbox {border:thin solid black; border-spacing:0px; padding:0px;}
.navbox tr:nth-child(1){background:#B4CAD7; height:26px; font-weight:bold;}
.navbox td:nth-child(1){background-color:#B4CAD7; width:13px;}
.navbox td {padding:0px 4px 0px 4px; height:16px;}
.photobox {border-left:thin black solid; width:187px; height:140px;}
  .photobox img {height:100%; width:100%; padding:0; }
#navbox_top {color:Black; text-transform:uppercase;}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (min-width:320px) and (device-aspect-ratio: 3/5) {
  /* #article {width:288px; } */
  #article p {width:288px; }
  h1,h2,h3,h4,h5 {width:288px; }
  .overtable       { overflow:hidden; width:288px; }
  .overtable:hover { overflow:visible; }

  /* GLOBAL WIKI styles */ 
  table.toc  { width:288px; }                    /* Test#TOC   */
  #article blockquote { width:261px; }           /* Test#QUOTE */
  #article blockquote p { width:246px; }
  img { max-width:288px;  padding:2px 0 } /* override with class="imageLGpx" or "imageMAXpx" */
  /*img { max-height:400px; } */
  #article pre { width:288px; white-space:pre; overflow:auto; }
  #article pre:hover {overflow:visible;}

  /* QUOTE styles Test#QUOTE */
  #article blockquote img { max-width:246px; } /* Test#QUOTE_IMG */
  #article blockquote.wide { width:75%; }
  #article blockquote blockquote { width:55%; } /* Template:OwnersManual */
  #article blockquote.fancy:first-letter {
  	float: left;
  	margin: 0 .3em 0 0;
 	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
 	font-size: 200%;
 	font-weight: bold; }

  /* LIST styles Test#LIST */
  #article ul {width:60%;
    list-style: disc outside none;
    margin-before: 0px;
  padding-start: 0px;
    margin-left: 10px;
    padding-left: 5px;}
  #article ul li {
    margin-top: 0px;
    margin-bottom: 0px;}
  #article ul li:first-child {margin-top: 0px;}
  #article ol {width:55%;
    list-style: decimal outside none;
    line-height: 1.5;
    margin-top: 0px;
    margin-left: 15px;
    padding-left: 15px;}
  #article ol li {margin-top: 10px;}
  #article ol li:first-child {margin-top: 0px;}
  #toc ol {width:90%; }
  #toc ul {width:90%; }
  #toc ol li {margin-top: 0px; width:90%; }
  #toc ul {list-style:none inside none; margin-left: 0px; }

  /* list img sizes Test#LIST_IMG */
  #article ul li img {max-width:271px}
  #article ol li img {max-width:256px}
  #article ul dd img {max-width:231px}
  #article ol dd img {max-width:216px}

  /* TABLE styles */ 
  table.wiki_table{border:thin solid black; width:400px; border-spacing:0px; padding:0px;} 
  .wiki_table tr:nth-child(even){background-color: #f0f0f0}
  .wiki_table th {text-align:left ; vertical-align: text-top;}
  .wiki_table td,th {padding:0px 0px 0px 2px}
  .wiki_index {width:420px; border:thin solid black; border-collapse:collapse;} 
  .wiki_index td,th {white-space:nowrap; max-width:144px; border:thin solid black;
            padding:2px 2px 2px 2px; text-align:center;}
  .wiki_index {max-width:140px; max-height:105px; padding:0; }

  /* IMG styles */
  .img_width img {max-width:140px; max-height:105px; }
  .img_index  img   { max-width:140px; max-height:105px; padding:0; }
  .index_body    { width:400px; }
  .img_height img {height:100%;}
  .img_height { display:inline-block; outline:thin solid black; }
  .img_hxw img {height:100%; width:100%;}
  .img_height120 img {height:100%;}
  .img_height120 { height:120px; display:inline-block; outline:thin solid black; }

  /* IMG general classes */
  .imagepx      img { width:100%; }
  .image100px   img { width: 100px; }
  .imageTHUMBpx img { width: 140px; }
  .image140px   img { width: 140px; }
  .imageTH      img { width: 140px; maxwidth: 140px; }
  .imageTHpx    img { width: 140px; }
  .image160px   img { width: 140px; }
  .imageSMpx  img   { max-width: 288px; }
  .image256px img   { max-width: 288px; }
  .imageLGpx  img   { max-width:288px; }
  .imageLGpx:hover img { max-width:560px;}
  .imageXLpx  img   { max-width:640px; }
  .imageINDEX img   { max-width:inherit;}
  .imageMAXpx img   { width:inherit; max-width:300px; margin-top:0; padding-top:0;}

  /* NAVIGATION UI styles */
  #navbar {outline:solid thin black; padding:4px 4px 4px 13px; width:384px; background:#f7f8ff;}
  #navbar_title {color:Black; text-transform:uppercase; font-weight:bold; height:20px}
  .navbar_link { padding-left:4px;}
  .section { color:DarkSlateGray; text-transform:lowercase;
     background-color:#B4CAD7;
     background: -webkit-linear-gradient(left, #B4CAD7, #7f8e88); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(right, #B4CAD7, #7f8e88); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(right, #B4CAD7, #7f8e88); /* For Firefox 3.6 to 15 */
     background: linear-gradient(to right, #B4CAD7,#7f8e88); /* Standard syntax */}
  .navbox_outer {border:thin solid black; border-spacing:0px; padding:0px;}
  .navbox {border:thin solid black; border-spacing:0px; padding:0px;}
  .navbox tr:nth-child(1){background:#B4CAD7; height:26px; font-weight:bold;}
  .navbox td:nth-child(1){background-color:#B4CAD7; width:13px;}
  .navbox td {padding:0px 4px 0px 4px; height:16px;}
  .photobox {border-left:thin black solid; width:187px; height:140px;}
  .photobox img {height:100%; width:100%;}
  #navbox_top {color:Black; text-transform:uppercase;}
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



.index_body .album_overlayH { display:none; }
.break { break-after: always;}

.magazine1col { width:400px; outline:thin black solid }
.magazine p
           { margin-top:0; margin-bottom:0; padding:0 6px 0 6px; text-indent:1.3em; }
.magazine1col p
           { margin:0; padding:6px; text-indent:1.3em; }
.magazine p { width:172px; font-size:x-small; }
.magazine p:first-of-type,
.magazine1col p:first-of-type { padding-top:6px; text-indent:0; }
.mag_caption p { width:172px; margin:6px; font-size:xx-small; }
.mag_caption p:first-of-type { margin-top:0px; }
.magazine H2 { width:172px; font-size:x-small; text-align:center; margin-top:0; margin-bottom:0em; }

.wiki_columns {width:560px; padding:6px; font-size:x-small; margin-top:8px; 
               -webkit-columns: 180px 3;
                  -moz-columns: 180px 3;
                       columns: 180px 3;
               -webkit-column-gap: 10px;
                  -moz-column-gap: 10px;
                       column-gap: 10px; }
.wiki_columns img { margin-top:0; margin-bottom:0.5em;
                    float:right; max-width:176px; }
.wiki_columns p { width:172px; margin-top:0; margin-bottom:0; padding-bottom:0; 
                  text-indent:1.3em; }
.wiki_columns p:first-of-type { text-indent:0; }
.wiki_columns H2 { width:172px; font-size:x-small; text-align:center; margin-top:0; 
                  margin-bottom:0em; }
p.h2 { width:172px; font-weight: bold; text-align:center; text-indent:0; margin-top:6px; }

.magazineW  { position:absolute; top:160px; left:178px; width:178px; text-align:justify; 
              font-size:9px; word-spacing:.24em; }
.magazineW p { width:172px; margin-top:0; margin-bottom:0; padding:0 6px 0 6px; 
               text-indent:1.5em; }
.magazineW p:first-of-type { padding-top:6px; text-indent:0; }
.magazineW p:last-of-type { text-align-last:justify; }

@media screen and (-webkit-device-pixel-ratio: 1.5) {
   .magazineW  { font-sizex:9.25px; }
    .magazineW p { font-size:105% }
}

Retrieved from "http://datsun1200.com/modules/mediawiki/index.php?title=MediaWiki:Common.css"