MediaWiki:Common.css
From UtubeTrollPedia
Revision as of 17:56, 6 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.
/* =====================================================
UTubeTrollPolice Homepage
===================================================== */
.uttp-homepage{
width:980px;
margin:0 auto;
font-family:Arial,Helvetica,sans-serif;
background:#ffffff;
}
.uttp-header{
background:#ffffff;
border:1px solid #999;
padding:12px;
}
.uttp-toplinks{
text-align:right;
font-size:11px;
margin-bottom:10px;
}
.uttp-toplinks a{
color:#0033cc;
text-decoration:none;
}
.uttp-logo{
font-size:38px;
font-weight:bold;
color:#cc0000;
}
.uttp-logo .blue{
color:#0033cc;
}
.uttp-tagline{
color:#666;
font-size:13px;
margin-top:4px;
}
.uttp-search{
margin-top:15px;
}
.uttp-navigation{
display:flex;
align-items:center;
gap:8px;
background:linear-gradient(#6fa7ff,#2d5fc0);
padding:10px;
border:1px solid #1b4599;
border-radius:5px;
}
.uttp-navigation a{
display:inline-block;
color:white;
font-weight:bold;
text-decoration:none;
padding:6px 12px;
}
/* ===========================================
Main Layout
=========================================== */
.uttp-body{
display:flex;
gap:15px;
margin-top:15px;
align-items:flex-start;
}
.uttp-left{
flex:1;
min-width:0;
}
.uttp-right{
width:260px;
}
.uttp-featured,
.uttp-main,
.uttp-sidebar{
background:#ffffff;
border:1px solid #999;
margin-bottom:15px;
padding:10px;
}
.uttp-footer{
margin-top:20px;
padding:12px;
border-top:2px solid #999;
text-align:center;
font-size:12px;
color:#666;
}
/* ==========================================
Thumbnail Grid
========================================== */
.uttp-thumb-grid{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
gap:25px;
}
.uttp-thumb{
width:170px;
text-align:center;
}
/* ==========================================
Classic YouTube Boxes
========================================== */
.uttp-thumb-grid{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
gap:25px;
}
.uttp-thumb{
width:170px;
text-align:center;
}
/* ==========================================
Sidebar
========================================== */
.uttp-sidebar ul{
margin:0;
padding-left:18px;
}
.uttp-sidebar li{
margin:6px 0;
}
.uttp-sidebar a{
color:#0033cc;
text-decoration:none;
}
.uttp-sidebar a:hover{
text-decoration:underline;
}
/* ======================================
HEADER
====================================== */
.uttp-header{
background:#ffffff;
border:1px solid #b3b3b3;
padding:12px;
margin-bottom:10px;
}
.uttp-topbar{
text-align:right;
font-size:11px;
margin-bottom:15px;
}
.uttp-userlinks a{
color:#0033cc;
text-decoration:none;
margin-left:6px;
}
.uttp-header-main{
display:flex;
justify-content:space-between;
align-items:center;
}
.uttp-logo-title{
font-size:42px;
font-weight:bold;
line-height:40px;
}
.logo-red{
color:#cc0000;
}
.logo-blue{
color:#0033cc;
}
.uttp-logo-tagline{
font-size:13px;
color:#666;
margin-top:3px;
}
.uttp-search-area{
display:flex;
align-items:center;
gap:6px;
}
.uttp-searchbox{
width:340px;
padding:6px;
font-size:14px;
border:1px solid #999;
}
.uttp-searchbutton{
padding:6px 15px;
border:1px solid #666;
background:#efefef;
cursor:pointer;
}
.uttp-searchbutton:hover{
background:#dddddd;
}
/* ================================
Retro Links
================================ */
.uttp-homepage a{
color:#0033cc;
text-decoration:none;
}
.uttp-homepage a:hover{
text-decoration:underline;
}
.uttp-main{
line-height:1.6em;
font-size:14px;
}
.uttp-main h2{
color:#003399;
}
.uttp-main h3{
margin-top:18px;
color:#444;
border-bottom:1px solid #ddd;
padding-bottom:4px;
}
.uttp-navigation{
background:linear-gradient(#5f9dfd,#2b63c6);
border-radius:4px;
}
.uttp-navigation a{
padding:6px 12px;
display:inline-block;
}
.uttp-navigation a:hover{
background:rgba(255,255,255,.18);
border-radius:3px;
}
/* ===============================
YouTube Style Boxes
================================ */
.uttp-box{
background:white;
border:1px solid #b3b3b3;
margin-bottom:15px;
}
.uttp-box h2{
margin:0;
padding:8px;
font-size:15px;
background:linear-gradient(#f7f7f7,#e4e4e4);
border-bottom:1px solid #b3b3b3;
}
.uttp-box{
padding:10px;
}
.uttp-thumb{
width:160px;
text-align:center;
padding:6px;
}
.uttp-thumb img{
padding:4px;
background:white;
border:1px solid #999;
box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.uttp-thumb a{
font-weight:bold;
font-size:13px;
color:#0033cc;
text-decoration:none;
}
/* Hide TOC on Main Page */
.page-Main_Page #toc,
.page-Main_Page .toc {
display: none;
}
.page-Main_Page .mw-editsection{
display:none;
}
.page-Main_Page #toc,
.page-Main_Page .toc{
display:none;
}
/* ================================
Article Card
================================ */
/* ==========================================
YouTube 2007 Article Row
========================================== */
.uttp-video{
display:flex;
padding:18px;
margin:0;
border-bottom:1px dotted #b5b5b5;
align-items:flex-start;
background:white;
}
.uttp-video:hover{
background:#f7f7f7;
}
.uttp-video-thumb{
width:165px;
position:relative;
flex-shrink:0;
}
.uttp-video-thumb img{
width:130px;
height:97px;
border:1px solid #777;
padding:2px;
background:white;
}
.uttp-runtime{
position:absolute;
bottom:5px;
right:15px;
background:black;
color:white;
font-size:11px;
padding:2px 5px;
font-weight:bold;
}
.uttp-video-info{
flex:1;
padding-left:15px;
}
.uttp-video-title{
font-size:24px;
font-weight:bold;
margin-bottom:8px;
}
.uttp-video-title a{
color:#0033cc;
text-decoration:none;
}
.uttp-video-title a:hover{
text-decoration:underline;
}
.uttp-video-description{
font-size:14px;
line-height:1.6;
margin-bottom:6px;
}
.uttp-video-meta{
font-size:12px;
color:#666;
margin-bottom:6px;
}
.uttp-video-time{
font-size:12px;
color:#888;
}
.uttp-video-stats{
width:165px;
text-align:right;
font-size:13px;
}
.uttp-views{
font-size:18px;
font-weight:bold;
margin:6px 0;
}
.uttp-stars{
color:#ff3300;
font-size:18px;
margin-bottom:8px;
}
.uttp-more a{
font-size:13px;
font-weight:bold;
color:#0033cc;
text-decoration:none;
}
/* =======================================
Tabs
======================================= */
.uttp-tabs{
display:flex;
border-bottom:1px solid #ccc;
margin-bottom:15px;
}
.uttp-tab{
padding:8px 18px;
background:#f2f2f2;
border:1px solid #ccc;
border-bottom:none;
margin-right:3px;
font-size:13px;
font-weight:bold;
cursor:pointer;
}
.uttp-tab-active{
background:white;
border-top:3px solid #cc0000;
}
/* Small Thumbnail Strip */
.uttp-strip{
display:flex;
justify-content:space-between;
gap:15px;
margin-bottom:20px;
}
.uttp-small-thumb{
width:160px;
text-align:center;
}
.uttp-small-image{
position:relative;
}
.uttp-small-image img{
width:150px;
height:100px;
border:1px solid #777;
padding:2px;
background:white;
}
.uttp-small-badge{
position:absolute;
right:5px;
bottom:8px;
background:black;
color:white;
padding:2px 6px;
font-size:11px;
font-weight:bold;
}
.uttp-small-title{
margin-top:5px;
font-size:13px;
font-weight:bold;
}
/* =====================================
Promoted Articles
===================================== */
.uttp-promoted{
display:flex;
justify-content:space-between;
gap:15px;
margin-bottom:25px;
}
.uttp-promo{
width:175px;
text-align:center;
}
.uttp-promo-image img{
width:170px;
height:110px;
border:1px solid #666;
background:#fff;
padding:2px;
}
.uttp-promo-title{
font-weight:bold;
margin-top:6px;
font-size:14px;
}
.uttp-promo-title a{
color:#0033cc;
text-decoration:none;
}
.uttp-promo-title a:hover{
text-decoration:underline;
}
.uttp-promo-sub{
font-size:12px;
color:#666;
}
/*==========================
MAIN PAGE WIDTH
===========================*/
#uttp-homepage{
width:100%;
display:flex;
justify-content:center;
margin-top:15px;
}
#uttp-main{
width:980px;
display:flex;
align-items:flex-start;
gap:25px;
}
#uttp-left{
flex:1;
min-width:700px;
}
#uttp-right{
width:250px;
flex-shrink:0;
}
body{
background:#ffffff;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
}
/*==============================
YouTube 2007 Featured Articles
==============================*/
/*=========================================
YouTube 2007 Featured Article Card
=========================================*/
.uttp-video{
display:grid;
grid-template-columns:130px 1fr 150px;
gap:14px;
padding:12px 10px;
border-bottom:1px dotted #b7b7b7;
background:#fff;
min-height:110px;
}
.uttp-video-thumb{
position:relative;
width:120px;
}
.uttp-video-thumb img{
width:120px;
height:90px;
border:1px solid #777;
padding:2px;
background:#fff;
}
.uttp-runtime{
position:absolute;
right:4px;
bottom:4px;
background:#000;
color:#fff;
font-size:10px;
padding:2px 4px;
font-weight:bold;
}
.uttp-video-main{
display:flex;
flex-direction:column;
}
.uttp-video-title{
font-size:15px;
font-weight:bold;
margin-bottom:6px;
}
.uttp-video-title a{
color:#0033cc;
text-decoration:none;
}
.uttp-video-title a:hover{
text-decoration:underline;
}
.uttp-video-description{
font-size:12px;
line-height:18px;
margin-bottom:8px;
}
.uttp-video-meta{
font-size:11px;
color:#666;
line-height:16px;
}
.uttp-video-time{
margin-top:auto;
font-size:11px;
color:#777;
}
.uttp-video-right{
text-align:right;
font-size:11px;
}
.uttp-video-views{
font-size:22px;
font-weight:bold;
margin-bottom:8px;
}
.uttp-video-stars{
color:#ff5500;
font-size:16px;
margin-bottom:10px;
}
.uttp-video-link a{
color:#0033cc;
text-decoration:none;
font-weight:bold;
}
.uttp-video-link a:hover{
text-decoration:underline;
}
.uttp-more a{
font-weight:bold;
font-size:13px;
color:#0033cc;
text-decoration:none;
}
/*=========================================
Articles Being Read Right Now
=========================================*/
.uttp-watching{
display:flex;
justify-content:space-between;
gap:15px;
margin-bottom:25px;
}
.uttp-watch-card{
width:150px;
text-align:center;
}
.uttp-watch-image{
position:relative;
}
.uttp-watch-image img{
width:150px;
height:105px;
border:1px solid #777;
padding:2px;
background:white;
}
.uttp-watch-badge{
position:absolute;
right:6px;
bottom:6px;
background:black;
color:white;
padding:2px 5px;
font-size:11px;
font-weight:bold;
}
.uttp-watch-title{
margin-top:6px;
font-size:13px;
font-weight:bold;
}
.uttp-watch-title a{
text-decoration:none;
color:#0033cc;
}
.uttp-watch-title a:hover{
text-decoration:underline;
}