MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 447: | Line 447: | ||
UTubeTrollPedia Infobox Framework | 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- | font-family: Arial, Helvetica, sans-serif; | ||
font-size: 12px; | |||
color: #222222; | |||
box-shadow: | box-shadow: | ||
0 | 0 2px 5px rgba(0,0,0,0.20); | ||
} | } | ||
/*========================================================= | |||
BLUE YOUTUBE NAVIGATION HEADER | |||
=========================================================*/ | |||
.utp-header-blue { | |||
padding: 8px; | |||
text-align:center; | text-align: center; | ||
font-size:15px; | font-size: 15px; | ||
font-weight:bold; | font-weight: bold; | ||
color: | color: #003366; | ||
background: | |||
linear-gradient( | linear-gradient( | ||
# | #d7ebff, | ||
# | #9bc8f5, | ||
# | #6da8e6 | ||
); | ); | ||
border-bottom:1px solid # | border-bottom: 1px solid #4b82bd; | ||
text-shadow: | text-shadow: | ||
0 | 0 1px 0 white; | ||
} | } | ||
/*========================================================= | |||
GOLD YOUTUBE UPLOAD BUTTON HEADER | |||
=========================================================*/ | |||
.utp-header-gold { | |||
padding: 8px; | |||
text-align: center; | |||
font- | font-size: 15px; | ||
font-weight: bold; | |||
color: #663d00; | |||
background: | background: | ||
linear-gradient( | linear-gradient( | ||
# | #fff3a8, | ||
# | #ffd65a, | ||
# | #e9a900 | ||
); | ); | ||
border-bottom:1px solid # | border-bottom:1px solid #c18b00; | ||
text-shadow: | text-shadow: | ||
0 1px 0 | 0 1px 0 white; | ||
} | } | ||
padding: | /*========================================================= | ||
IMAGE AREA | |||
=========================================================*/ | |||
.utp-image { | |||
padding: 10px; | |||
text-align:center; | text-align:center; | ||
background:# | background:#f5f5f5; | ||
} | } | ||
.utp-image img{ | |||
.utp-image img { | |||
max-width:260px; | max-width:260px; | ||
height:auto; | height:auto; | ||
padding:3px; | padding:3px; | ||
background:white; | background:white; | ||
border:1px solid #777777; | |||
} | } | ||
.utp-caption{ | |||
/*========================================================= | |||
IMAGE CAPTION | |||
=========================================================*/ | |||
.utp-caption { | |||
text-align:center; | text-align:center; | ||
padding:5px; | |||
font-size:11px; | font-size:11px; | ||
color:# | color:#555555; | ||
} | |||
/*========================================================= | |||
TABLE | |||
=========================================================*/ | |||
.utp-table{ | .utp-table { | ||
width:100%; | width:100%; | ||
| Line 580: | Line 607: | ||
} | } | ||
.utp-table th{ | |||
/*========================================================= | |||
LABEL COLUMN | |||
=========================================================*/ | |||
.utp-table th { | |||
width:105px; | width:105px; | ||
padding:6px; | |||
text-align:left; | 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; | padding:6px; | ||
background:# | 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; | 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-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; | font-weight:bold; | ||
| Line 617: | Line 819: | ||
linear-gradient( | 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{ | ||
padding: | 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; | |||
} | } | ||