MediaWiki:Common.css: Difference between revisions

Latest revision as of 16:37, 19 September 2024

#ca-talk { display:none!important; }  /* Delete talk tab */
#ca-nstab-main { display:none!important; }  /* Delete pages tab */
#ca-view { display: none !important; }  /* Delete read tab */
#ca-history { display: none !important;}  /* Delete view history tab */
#ca-viewsource { display: none !important; }  /* Delete view source tab */

#p-tb { display: none; }  /* Remove Tools menu */

/* #footer-info { display: none; } */
#footer-places-privacy { display: none; }
#footer-places-about { display: none; }
#footer-places-disclaimer { display: none; }

/* Sidebar */
#mw-panel .portal a, #mw-panel .portal a:visited {font-size: 1.2em !important; }

/* MediaWiki:Tagline */
#siteSub {
	display: inline;
	font-size: 1.1em;
	font-weight: normal;
	font-style: italic; }

/* Hide Tagline on Main Page */
body.page-Main_Page.action-view #siteSub,
body.page-Main_Page.action-submit #siteSub {display: none;}

/* Table of Contents */
#toc { width: 390px; font-size: 110%; }

/* Page Title */
.mw-body h1, .mw-body-content h1 { font-size: 200%; }
.mw-body h2, .mw-body-content h2 { font-size: 170%; }

/* Collapsible elements-Toggle-link move left, adjust margin 
.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}*/

* { box-sizing: border-box; }

#content p { font-size: 120%; line-height: 140%; }

li .active { font-weight: bold; } 

h2 { font-size: 150%; }

audio { width:200px; }

figure.fig { padding: 0; margin: 12px 0 0 0; line-height: normal; }

.red { color: red; font-size: 18pt; }

.welcome { 
   display: flex;
   flex: 1;
   background-position: center;
   background-image: url("https://dstall.com/DIY/M/P/DIY.jpg");
   background-repeat: repeat-x;
   padding: 0.1em;
   margin: 0 0 5px 0;
   text-align: center;
   font-size: 162%;
   border: 1px solid #ddd; }

.box { display: flex; flex-wrap: wrap; width: 100%; padding: 0; }

.col { margin-bottom: 5px !important; text-align: left; padding: 10px; }

.pix { flex: 1 1 0; padding: 5px; border: 1px solid #aaa; font-size: 90%; line-height: 110% !important; } 
.pix2 { flex: 1 1 0; padding: 5px; border: 1px solid #aaa; font-size: 86%; line-height: 110% !important; } 
.pix3 { flex: 1 1 0; padding: 5px; border: 1px solid #aaa !important; font-size: 50% !important; line-height: 90% !important; }
.image img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1 / 1; margin-bottom: 5px; }
.image2 img { width: 61%; height: 61%; object-fit: scale-down !important; margin-bottom: 5px; }
.image3 img { width: 100%; height: auto; object-fit: fill; aspect-ratio: 1 / 1; margin-bottom: 5px; }
.image4 img { width: 100%; height: auto; object-fit: contain !important; margin-bottom: 5px; }
.image5 img { width: 100%; height: 100%; object-fit: contain !important; margin-bottom: 5px; }
.image6 img { width: 900px; height: 600px; object-fit: cover !important; margin-bottom: 5px; }
.top1 img { object-position: top !important; } 
.top2 img { object-position: 0 20% !important; }
.top3 img { object-position: -100px 0 !important; }
.bottom img { object-position: bottom !important; } 

.aud { height: auto; width: 215px; font-size: 85%; line-height: 100%; padding: 0px 5px 5px 5px; border: 1px solid #aaa; } 
.aud2 { height: auto; width: 140px; font-size: 85%; line-height: 100%; padding: 5px; border: 1px solid #aaa; } 
.vid { font-size: 0.9em; line-height: 105% !important; padding: 5px; border: 1px solid #aaa; } 
.vid2 { height: 100% !important; font-size: 0.9em; line-height: 105% !important; padding: 5px; border: 1px solid #aaa !important; } 
.left { float: left; } 
.right { float: right; }

.vid_wrap { position: relative; padding-bottom: 56.25%; /* 16:9, for 1:1 change to 100% */ } 
.vid_wrap2 { position: relative; padding-bottom: 100%; /* 16:9, for 1:1 change to 100% */ } 
iframe.video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.box.margin-t { margin-top: 7px !important; } 
.box.margin-b { margin-bottom: 7px !important; } 
.box.margin-l { margin-left: 5px !important; } 
.box.margin-r { margin-right: 10px !important; }

.pix.margin-t { margin-top: 5px; } 
.pix.margin-b { margin-bottom: 5px; } 
.pix.margin-l { margin-left: 5px; } 
.pix.margin-r { margin-right: 5px; } 
.image2.margin-l { margin-left: 5px; }

.aud.margin-t { margin-top: 7px; }
.aud.margin-b { margin-bottom: 7px; }
.aud.margin-l { margin-left: 10px; }
.aud.margin-r { margin-right: 10px; }

.vid.margin-t { margin-top: 7px; }
.vid.margin-b { margin-bottom: 7px; }
.vid.margin-l { margin-left: 10px; }
.vid.margin-l2 { margin-left: 5px; }
.vid.margin-r { margin-right: 10px; }

.margin-t { margin-top: 5px; } 
.margin-t2 { margin-top: 10px; }
.margin-b { margin-bottom: 7px; }
.margin-l { margin-right: 5px; }
.margin-r { margin-right: 5px; }

size1 { display: block; width: 57%; margin-left: auto; margin-right: auto; text-align: center; }
.one { width: 100%; } 
.two { width: 50% } 
.three { width: 33%; } 
.four { width: 25%; } 
.five { width: 20%; } 
.six { width: 16.7%; } 
.seven { width: 14.3%; } 
.eight { width: 12.5%; }
.nine { width: 11.1%; }
.ten { width: 10%; }
.main { width: 45.75%; }

.full { float: left; display: block; box-sizing: border-box;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; width:
100%; }

.left1 { flex: 3 0 0; background: #f5fffa; margin-right: 5px; border: 1px solid #cef2e0; }

.right2 { flex: 1 0 0; background: #f5faff; border: 1px solid #cedff2; font-size: 110%; line-height: 115%; }

.left3 { flex: 1 0 0; width: 33%; background: #fff5fa; margin-right: 5px; border: 1px solid #f2cedd; font-size: 105%; line-height: 115%; }

.center4 { flex: 1 0 0; width: 33%; background: #faf5ff; margin-right: 5px; border: 1px solid #ddcef2; font-size: 105%; line-height: 115%; }

.right5 { flex: 1 0 0; width: 33%; background: ; margin: 0; border: 1px solid #eee; font-size: 105%; line-height: 115%; }

.left6 { width: 100%; background: ; border: 1px solid #eee; font-size: 105%; line-height: 115%; } 

.title { 
   display: block; 
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box; }

.title1 { line-height: 100%; font-size: 1.3em; background: #cef2e0; border: none; padding: 3px 0; }
.title2 { line-height: 100%; font-size: 1.2em; background: #cedff2; border: none; padding: 3px 0; margin-bottom: 10px; }
.title3 { line-height: 100%; font-size: 1.3em; background: #f2cedd; border: none; padding: 3px 0; margin-bottom: 10px; }
.title4 { line-height: 100%; font-size: 1.3em; background: #ddcef2; border: none; padding: 3px 0; margin-bottom: 10px; }
.title5 { line-height: 100%; font-size: 1.3em; background: #eee; border: none; padding: 3px 0; margin-bottom: 10px; }
.title6 { line-height: 100%; font-size: 1.3em; background: #eee8aa; border: none; padding: 3px 0; margin-bottom: 10px; }

.infobox {
    font-size: 100%;
    border: solid 1px #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 10px; 
    width: 300px; }

.infobox p {
    font-size: 100%; 
    font-family: serif; 
    padding: 0; margin: 0; 
    border-bottom: 1px solid #aaa; 
    width: 100%; 
    display: block; }

.infobox li, .infobox ul {padding 0; margin: 0;}

.hole { font-size: 1.1em; font-family: "Times New Roman", Times, serif; }

#pageTree, #pageTree li, #pageTree ul {padding 0; margin: 0; }

/* NAV_pageTree */

ul.custom, ul.custom > li {
    list-style-type: none;
    padding: 0px;
    margin: 0; }
ul.customUL > li.tree { padding-left: 19px; }

.tree{ --spacing : 1.2rem; --radius  : 8px; }

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px); }

.tree ul{ margin-left  : calc(var(--radius) - var(--spacing)); padding-left : 0; }

.tree ul li{ border-left : 2px solid #ddd; }

.tree ul li:last-child{ border-color : transparent; }

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px; }

.tree summary{ display : block; cursor : pointer; }

.tree summary::marker,
.tree summary::-webkit-details-marker{ display : none; }

.tree summary:focus{ outline : none; }

.tree summary:focus-visible{ outline : 1px dotted #000; }

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd; }

.tree summary::before{
  content     : '+';
  z-index     : 1;
  background  : #999;
  color       : #fff;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center; }

.tree details[open] > summary::before{ content : '−'; }

/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
	/* @noflip */
	text-align: left; }

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable { line-height: 138%; }
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
	font-weight: normal;
	/* @noflip */
	text-align: left; }

/* audio{width: 100px !important;}
audio::-webkit-media-controls-play-button{background-color:#ee7666 !important;}
audio::-webkit-media-controls-panel{background-color:#ee7666 !important;}
audio::-webkit-media-controls-current-time-display{display:none !important;}
audio::-webkit-media-controls-current-time-display{display:none !important;}
audio::-webkit-media-controls-time-remaining-display{display:none !important;}
audio::-webkit-media-controls-timeline{display:none !important;}
audio::-webkit-media-controls-mute-button{display:none !important;} */


/* [[phab:T293232]] - Mobile doesn't have this style.
 * Will be fixed with TStyles. */
div.hlist.inline ul,
div.hlist.inline li,
div.hlist.inline {display: inline;}

/* Responsive layout - screen less than 700px wide, make columns stack */
@media screen and (max-width: 700px) {
  .pix, .left1, .right2, .left3, .center4, .right5 {   
    flex-direction: column;
  }
.pix, .col.left1, .col.right2, .col.left3, .col.center4, .col.right5 {
    flex: 1 1 100%;
}
}