MediaWiki:Common.css
From UtubeTrollPedia
Revision as of 17:44, 14 July 2026 by Supreme Admnistrator Ganson (talk | contribs)
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* =====================================
UTTP YouTube 2007 Style Homepage CSS
Base Layout
===================================== */
.utp-infobox{
border:5px solid red !important;
background:yellow !important;
}
/* FEATURED ARTICLE CONTAINER */
.uttp-feature-box {
width:100%;
border:1px solid #cccccc;
background:#ffffff;
margin-bottom:20px;
}
.uttp-feature-header {
background:#eeeeee;
border-bottom:1px solid #cccccc;
font-size:16px;
font-weight:bold;
padding:6px;
}
.uttp-feature-tabs {
background:#f5f5f5;
border-bottom:1px solid #cccccc;
padding:5px;
}
.uttp-feature-tabs span {
display:inline-block;
padding:5px 12px;
border:1px solid #cccccc;
background:#dddddd;
font-size:12px;
}
.uttp-tab-active {
background:white !important;
font-weight:bold;
}
.uttp-feature-content {
padding:0 10px;
}
/* =====================================
ARTICLE CARD
===================================== */
.uttp-video {
display:grid;
grid-template-columns:130px 1fr 120px;
gap:10px;
padding:10px 0;
border-bottom:1px dotted #999999;
}
.uttp-video-thumb {
position:relative;
width:120px;
}
.uttp-video-thumb img {
width:120px;
height:90px;
border:1px solid #777777;
}
.uttp-runtime {
position:absolute;
bottom:3px;
right:3px;
background:black;
color:white;
font-size:10px;
padding:2px 4px;
}
.uttp-video-title {
font-size:14px;
font-weight:bold;
}
.uttp-video-title a {
color:#0033cc;
text-decoration:none;
}
.uttp-video-description {
font-size:12px;
margin-top:5px;
}
.uttp-video-meta {
font-size:11px;
margin-top:8px;
color:#555555;
}
.uttp-video-time {
font-size:11px;
color:#777777;
}
.uttp-video-right {
text-align:right;
font-size:12px;
}
.uttp-video-views {
font-size:14px;
font-weight:bold;
}
.uttp-video-stars {
color:#ff5500;
font-size:16px;
margin:8px 0;
}
/* =====================================
PROMOTED HORIZONTAL ROW
===================================== */
.uttp-promoted-grid {
display:flex;
gap:12px;
}
.uttp-promoted-card {
width:130px;
text-align:center;
}
.uttp-promoted-card img {
width:120px;
height:90px;
border:1px solid #777777;
}
.uttp-promoted-title {
font-size:11px;
font-weight:bold;
}
.uttp-promoted-author {
font-size:10px;
color:#555555;
}
/* =====================================
HOME PAGE TWO COLUMN
===================================== */
.uttp-homepage {
display:grid;
grid-template-columns:1fr 280px;
gap:15px;
}
.uttp-sidebar {
border:1px solid #cccccc;
padding:10px;
background:#ffffff;
}
/* ==================================
TOP HORIZONTAL ARTICLE CARDS
================================== */
.uttp-top-grid {
display:flex;
flex-direction:row;
gap:12px;
width:100%;
overflow:hidden;
margin-bottom:15px;
}
.uttp-top-card {
width:150px;
height:130px;
border:1px solid #cccccc;
background:#ffffff;
padding:5px;
text-align:center;
}
.uttp-top-card img {
width:120px;
height:80px;
object-fit:cover;
}
.uttp-top-title {
font-size:12px;
font-weight:bold;
}
.uttp-top-author {
font-size:10px;
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
=========================================================*/
.utp-infobox{
float:right;
clear:right;
width:300px;
margin:0 0 20px 20px;
background:#ffffff;
border:1px solid #9cb9d8;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#222;
border-collapse:collapse;
box-shadow:
0 1px 3px rgba(0,0,0,.15);
}
.utp-infobox table{
width:100%;
border-collapse:collapse;
}
.utp-header-blue{
text-align:center;
font-size:15px;
font-weight:bold;
color:white;
padding:8px;
background:
linear-gradient(
#b9d9fb,
#7db3ec,
#5d99da
);
border-bottom:1px solid #4b7fb8;
text-shadow:
0 -1px 0 rgba(0,0,0,.30);
}
.utp-header-gold{
text-align:center;
font-size:15px;
font-weight:bold;
color:#6b4200;
padding:8px;
background:
linear-gradient(
#fff0a9,
#ffd45a,
#f0b227
);
border-bottom:1px solid #cb9200;
text-shadow:
0 1px 0 rgba(255,255,255,.60);
}
.utp-image{
padding:8px;
text-align:center;
background:#fafafa;
}
.utp-image img{
max-width:260px;
height:auto;
border:1px solid #999;
padding:3px;
background:white;
}
.utp-caption{
text-align:center;
font-size:11px;
color:#666;
padding-bottom:8px;
}
.utp-table{
width:100%;
border-collapse:collapse;
}
.utp-table th{
width:105px;
text-align:left;
padding:6px;
background:#eef5fd;
color:#003366;
font-weight:bold;
border-top:1px solid #d6e4f3;
}
.utp-table td{
padding:6px;
background:white;
border-top:1px solid #e2e2e2;
}
.utp-section{
text-align:center;
font-weight:bold;
background:
linear-gradient(
#eef7ff,
#d9eafb
);
color:#003366;
padding:5px;
border-top:1px solid #bdd4eb;
border-bottom:1px solid #bdd4eb;
}
.utp-footer{
padding:8px;
text-align:center;
background:#f6f6f6;
border-top:1px solid #ddd;
}