MediaWiki:Common.css: Difference between revisions
From UtubeTrollPedia
No edit summary |
No edit summary |
||
| Line 874: | Line 874: | ||
} | } | ||
/*============================== | |||
YouTube 2007 Featured Articles | |||
==============================*/ | |||
/* | |||
Featured | |||
.uttp-video{ | .uttp-video{ | ||
| Line 910: | Line 882: | ||
display:flex; | display:flex; | ||
padding:12px 0; | |||
border-bottom:1px dotted #bdbdbd; | |||
align-items:flex-start; | |||
} | } | ||
.uttp-video | .uttp-video-thumb{ | ||
width:130px; | |||
position:relative; | |||
flex-shrink:0; | flex-shrink:0; | ||
} | } | ||
| Line 938: | Line 902: | ||
.uttp-video-thumb img{ | .uttp-video-thumb img{ | ||
width: | width:120px; | ||
height: | height:90px; | ||
border:1px solid # | border:1px solid #666; | ||
padding:2px; | padding:2px; | ||
background: | background:#fff; | ||
} | } | ||
| Line 954: | Line 918: | ||
position:absolute; | position:absolute; | ||
right: | right:10px; | ||
bottom: | bottom:6px; | ||
background:# | background:#111; | ||
color:#fff; | color:#fff; | ||
font-size:10px; | |||
font- | font-weight:bold; | ||
padding:2px 5px; | |||
} | } | ||
.uttp-video- | .uttp-video-main{ | ||
flex:1; | flex:1; | ||
padding-left: | padding-left:12px; | ||
padding-right:20px; | |||
} | } | ||
| Line 980: | Line 946: | ||
.uttp-video-title{ | .uttp-video-title{ | ||
font-size: | font-size:30px; | ||
font-weight:bold; | font-weight:bold; | ||
margin-bottom: | margin-bottom:6px; | ||
} | } | ||
.uttp-video-title a{ | .uttp-video-title a{ | ||
color:#0033cc; | |||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
| Line 1,006: | Line 972: | ||
font-size:14px; | font-size:14px; | ||
line-height: | line-height:20px; | ||
margin-bottom:8px; | margin-bottom:8px; | ||
| Line 1,030: | Line 996: | ||
} | } | ||
.uttp-video- | .uttp-video-right{ | ||
width:170px; | |||
text-align:left; | |||
font-size:12px; | |||
} | |||
.uttp-video-author{ | |||
margin-bottom:12px; | |||
} | } | ||
.uttp-views{ | .uttp-video-views{ | ||
margin-bottom:12px; | |||
font-size:14px; | |||
} | |||
.uttp-video-stars{ | |||
color:#ff3333; | |||
font-size:18px; | |||
margin-bottom: | margin-bottom:12px; | ||
} | } | ||
.uttp- | .uttp-video-link a{ | ||
font- | font-weight:bold; | ||
color:# | color:#0033cc; | ||
text-decoration:none; | |||
} | } | ||
Revision as of 17:26, 6 July 2026
/* =====================================================
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
==============================*/
.uttp-video{
display:flex;
padding:12px 0;
border-bottom:1px dotted #bdbdbd;
align-items:flex-start;
}
.uttp-video-thumb{
width:130px;
position:relative;
flex-shrink:0;
}
.uttp-video-thumb img{
width:120px;
height:90px;
border:1px solid #666;
padding:2px;
background:#fff;
}
.uttp-runtime{
position:absolute;
right:10px;
bottom:6px;
background:#111;
color:#fff;
font-size:10px;
font-weight:bold;
padding:2px 5px;
}
.uttp-video-main{
flex:1;
padding-left:12px;
padding-right:20px;
}
.uttp-video-title{
font-size:30px;
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:14px;
line-height:20px;
margin-bottom:8px;
}
.uttp-video-meta{
font-size:12px;
color:#666;
margin-bottom:6px;
}
.uttp-video-time{
font-size:12px;
color:#777;
}
.uttp-video-right{
width:170px;
text-align:left;
font-size:12px;
}
.uttp-video-author{
margin-bottom:12px;
}
.uttp-video-views{
margin-bottom:12px;
font-size:14px;
}
.uttp-video-stars{
color:#ff3333;
font-size:18px;
margin-bottom:12px;
}
.uttp-video-link a{
font-weight:bold;
color:#0033cc;
text-decoration:none;
}
.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;
}