MediaWiki:Common.css: Difference between revisions
No edit summary Tag: Reverted |
No edit summary |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
Base Layout | Base Layout | ||
===================================== */ | ===================================== */ | ||
.utp-infobox{ | |||
border:5px solid red !important; | |||
background:yellow !important; | |||
} | |||
/* FEATURED ARTICLE CONTAINER */ | /* FEATURED ARTICLE CONTAINER */ | ||
| Line 285: | Line 288: | ||
} | } | ||
/* ================================== | /* ================================== | ||
TOP HORIZONTAL ARTICLE CARDS | TOP HORIZONTAL ARTICLE CARDS | ||
| Line 353: | Line 357: | ||
color:#555; | color:#555; | ||
} | |||
.ut-homepage{ | |||
max-width:1200px; | |||
margin:20px auto; | |||
font-family:Verdana,Arial,sans-serif; | |||
} | |||
.ut-comingsoon{ | |||
background:#ffffdd; | |||
border:1px solid #e2d48a; | |||
padding:15px; | |||
margin-bottom:20px; | |||
} | |||
.ut-placeholder{ | |||
background:#ffffff; | |||
border:1px solid #cccccc; | |||
padding:15px; | |||
} | |||
/* Minimal wiki article styling */ | |||
#content { | |||
background:white; | |||
border:1px solid #ccc; | |||
padding:20px; | |||
} | |||
#firstHeading { | |||
font-size:28px; | |||
color:#333; | |||
border-bottom:1px solid #ccc; | |||
padding-bottom:8px; | |||
} | |||
.mw-body-content { | |||
font-size:14px; | |||
line-height:1.6; | |||
} | |||
.mw-category { | |||
border-top:1px solid #ccc; | |||
padding-top:10px; | |||
} | |||
.page-Main_Page h1 { | |||
display: none; | |||
} | |||
#left-column, | |||
#sidebar, | |||
#navigation, | |||
.monaco-sidebar { | |||
display: none !important; | |||
} | |||
#widget_sidebar { | |||
display: none !important; | |||
} | |||
.left_sidebar { | |||
display: none !important; | |||
} | |||
.sidebar { | |||
display: none !important; | |||
} | |||
/*========================================================= | |||
UTubeTrollPedia Infobox Framework | |||
=========================================================*/ | |||
/*========================================================= | |||
UTubeTrollPedia Infobox System | |||
Retro YouTube / Web 2.0 Style | |||
=========================================================*/ | |||
/*========================================================= | |||
MAIN INFOBOX | |||
=========================================================*/ | |||
.utp-infobox { | |||
float: right; | |||
clear: right; | |||
width: 300px; | |||
margin: 0 0 20px 20px; | |||
background: #ffffff; | |||
border: 1px solid #999999; | |||
font-family: Arial, Helvetica, sans-serif; | |||
font-size: 12px; | |||
color: #222222; | |||
box-shadow: | |||
0 2px 5px rgba(0,0,0,0.20); | |||
} | |||
/*========================================================= | |||
BLUE YOUTUBE NAVIGATION HEADER | |||
=========================================================*/ | |||
.utp-header-blue { | |||
padding: 8px; | |||
text-align: center; | |||
font-size: 15px; | |||
font-weight: bold; | |||
color: #003366; | |||
background: | |||
linear-gradient( | |||
#d7ebff, | |||
#9bc8f5, | |||
#6da8e6 | |||
); | |||
border-bottom: 1px solid #4b82bd; | |||
text-shadow: | |||
0 1px 0 white; | |||
} | |||
/*========================================================= | |||
GOLD YOUTUBE UPLOAD BUTTON HEADER | |||
=========================================================*/ | |||
.utp-header-gold { | |||
padding: 8px; | |||
text-align: center; | |||
font-size: 15px; | |||
font-weight: bold; | |||
color: #663d00; | |||
background: | |||
linear-gradient( | |||
#fff3a8, | |||
#ffd65a, | |||
#e9a900 | |||
); | |||
border-bottom:1px solid #c18b00; | |||
text-shadow: | |||
0 1px 0 white; | |||
} | |||
/*========================================================= | |||
IMAGE AREA | |||
=========================================================*/ | |||
.utp-image { | |||
padding: 10px; | |||
text-align:center; | |||
background:#f5f5f5; | |||
} | |||
.utp-image img { | |||
max-width:260px; | |||
height:auto; | |||
padding:3px; | |||
background:white; | |||
border:1px solid #777777; | |||
} | |||
/*========================================================= | |||
IMAGE CAPTION | |||
=========================================================*/ | |||
.utp-caption { | |||
text-align:center; | |||
padding:5px; | |||
font-size:11px; | |||
color:#555555; | |||
} | |||
/*========================================================= | |||
TABLE | |||
=========================================================*/ | |||
.utp-table { | |||
width:100%; | |||
border-collapse:collapse; | |||
} | |||
/*========================================================= | |||
LABEL COLUMN | |||
=========================================================*/ | |||
.utp-table th { | |||
width:105px; | |||
padding:6px; | |||
text-align:left; | |||
vertical-align:top; | |||
font-weight:bold; | |||
color:#222222; | |||
background:#eef6ff; | |||
border-top:1px solid #d5d5d5; | |||
} | |||
/*========================================================= | |||
VALUE COLUMN | |||
=========================================================*/ | |||
.utp-table td { | |||
padding:6px; | |||
vertical-align:top; | |||
background:#ffffff; | |||
border-top:1px solid #dddddd; | |||
} | |||
/*========================================================= | |||
ALTERNATING ROWS | |||
=========================================================*/ | |||
.utp-table tr:nth-child(even) td { | |||
background:#fafcff; | |||
} | |||
/*========================================================= | |||
LINKS | |||
=========================================================*/ | |||
.utp-infobox a { | |||
color:#003399; | |||
text-decoration:none; | |||
} | |||
.utp-infobox a:hover { | |||
text-decoration:underline; | |||
} | |||
/*========================================================= | |||
SECTION HEADERS | |||
=========================================================*/ | |||
.utp-section { | |||
text-align:center; | |||
font-weight:bold; | |||
padding:6px; | |||
color:#003366; | |||
background: | |||
linear-gradient( | |||
#edf7ff, | |||
#cfe6fa | |||
); | |||
border-top:1px solid #a9c7e5; | |||
border-bottom:1px solid #a9c7e5; | |||
} | |||
/*========================================================= | |||
FOOTER | |||
=========================================================*/ | |||
.utp-footer { | |||
padding:8px; | |||
text-align:center; | |||
background:#eeeeee; | |||
border-top:1px solid #cccccc; | |||
font-size:11px; | |||
} | |||
/*========================================================= | |||
TAGS | |||
=========================================================*/ | |||
.utp-tag { | |||
display:inline-block; | |||
padding:3px 7px; | |||
margin:2px; | |||
background: | |||
linear-gradient( | |||
#ffffff, | |||
#dcecff | |||
); | |||
border:1px solid #9bb8d8; | |||
color:#003399; | |||
font-size:11px; | |||
} | |||
/*========================================================= | |||
BADGES | |||
=========================================================*/ | |||
.utp-badge { | |||
display:inline-block; | |||
padding:3px 8px; | |||
font-weight:bold; | |||
font-size:11px; | |||
} | |||
.utp-badge-blue { | |||
color:white; | |||
background:#4d91d8; | |||
} | |||
.utp-badge-gold { | |||
color:#663d00; | |||
background:#ffd45a; | |||
} | |||
.utp-badge-green { | |||
color:white; | |||
background:#55a855; | |||
} | |||
/*========================================================= | |||
BUTTONS | |||
=========================================================*/ | |||
.utp-button { | |||
display:inline-block; | |||
padding:5px 12px; | |||
margin:3px; | |||
color:#222222 !important; | |||
font-weight:bold; | |||
background: | |||
linear-gradient( | |||
#ffffff, | |||
#dddddd | |||
); | |||
border:1px solid #999999; | |||
} | |||
.utp-button:hover { | |||
background: | |||
linear-gradient( | |||
#ffffff, | |||
#bbbbbb | |||
); | |||
} | |||
/*========================================================= | |||
MOBILE | |||
=========================================================*/ | |||
@media(max-width:800px){ | |||
.utp-infobox { | |||
float:none; | |||
width:100%; | |||
margin:15px 0; | |||
} | |||
} | |||
/* ========================================================== | |||
FEATURED ARTICLES — force thumbnail + text side-by-side | |||
Append this AFTER all other CSS so it wins the cascade. | |||
========================================================== */ | |||
.ytp-feature-video{ | |||
display:flex !important; | |||
flex-direction:row !important; | |||
align-items:flex-start !important; | |||
flex-wrap:nowrap !important; | |||
width:100% !important; | |||
box-sizing:border-box !important; | |||
padding:12px !important; | |||
border-bottom:1px dashed #aaa !important; | |||
overflow:visible !important; | |||
} | |||
.ytp-feature-thumb{ | |||
display:block !important; | |||
width:150px !important; | |||
height:100px !important; | |||
min-width:150px !important; | |||
max-width:150px !important; | |||
flex:0 0 150px !important; | |||
overflow:hidden !important; | |||
margin:0 !important; | |||
} | |||
.ytp-feature-thumb img, | |||
.ytp-feature-image{ | |||
width:150px !important; | |||
height:100px !important; | |||
max-width:150px !important; | |||
max-height:100px !important; | |||
object-fit:cover !important; | |||
display:block !important; | |||
} | |||
.ytp-feature-info{ | |||
display:block !important; | |||
flex:1 1 auto !important; | |||
min-width:0 !important; | |||
padding-left:12px !important; | |||
box-sizing:border-box !important; | |||
} | |||
.ytp-feature-info h3, | |||
.ytp-feature-info p{ | |||
margin:0 0 6px !important; | |||
} | } | ||