MediaWiki:Common.css
From UtubeTrollPedia
Revision as of 15:59, 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
================================ */
.uttp-article-card{
width:100%;
border:1px solid #b8b8b8;
background:#fff;
margin:0 0 12px 0;
border-collapse:collapse;
}
.uttp-thumb-cell{
width:170px;
padding:8px;
vertical-align:top;
}
.uttp-thumb-cell img{
border:1px solid #777;
background:#fff;
padding:3px;
}
.uttp-info-cell{
padding:10px;
vertical-align:top;
}
.uttp-title{
font-size:20px;
font-weight:bold;
color:#0033cc;
}
.uttp-summary{
margin-top:8px;
font-size:14px;
line-height:1.4;
}
.uttp-meta{
margin-top:12px;
font-size:12px;
color:#666;
}
.uttp-stats-cell{
width:120px;
text-align:center;
font-size:13px;
vertical-align:top;
padding-top:12px;
white-space:nowrap;
background:#fafafa;
border-left:1px solid #ddd;
}