MediaWiki:Common.css: Difference between revisions
From UtubeTrollPedia
No edit summary |
No edit summary |
||
| Line 466: | Line 466: | ||
================================ */ | ================================ */ | ||
/* ========================================== | |||
YouTube 2007 Article Row | |||
========================================== */ | |||
.uttp-video{ | |||
border:1px | display:flex; | ||
align-items:flex-start; | |||
padding:12px; | |||
border-bottom:1px dotted #999; | |||
background:#fff; | background:#fff; | ||
} | |||
.uttp-video:hover{ | |||
background:#f7f7f7; | |||
} | } | ||
.uttp-thumb | .uttp-video-thumb{ | ||
width: | width:140px; | ||
position:relative; | |||
flex-shrink:0; | |||
} | } | ||
.uttp-thumb | .uttp-video-thumb img{ | ||
width:120px; | |||
height:90px; | |||
border:1px solid #777; | border:1px solid #777; | ||
background: | 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-info | .uttp-video-info{ | ||
flex:1; | |||
padding-left:15px; | |||
} | } | ||
.uttp-title{ | .uttp-video-title{ | ||
font-size: | font-size:23px; | ||
font-weight:bold; | font-weight:bold; | ||
margin-bottom:6px; | |||
} | |||
.uttp-video-title a{ | |||
color:#0033cc; | color:#0033cc; | ||
text-decoration:none; | |||
} | } | ||
.uttp- | .uttp-video-title a:hover{ | ||
text-decoration:underline; | |||
} | |||
.uttp-video-description{ | |||
font-size:14px; | font-size:14px; | ||
line-height:1. | line-height:1.5; | ||
margin-bottom:10px; | |||
} | } | ||
.uttp-meta{ | .uttp-video-meta{ | ||
font-size:12px; | |||
color:#666; | |||
margin-bottom:6px; | |||
} | |||
.uttp-video-time{ | |||
font-size:12px; | font-size:12px; | ||
color:# | 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- | .uttp-tab{ | ||
padding:8px 18px; | |||
background:#f2f2f2; | |||
border:1px solid #ccc; | |||
border-bottom:none; | |||
margin-right:3px; | |||
font-size:13px; | font-size:13px; | ||
font-weight:bold; | |||
cursor:pointer; | |||
} | |||
.uttp-tab-active{ | |||
background: | background:white; | ||
border- | border-top:3px solid #cc0000; | ||
} | } | ||
Revision as of 16:18, 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;
align-items:flex-start;
padding:12px;
border-bottom:1px dotted #999;
background:#fff;
}
.uttp-video:hover{
background:#f7f7f7;
}
.uttp-video-thumb{
width:140px;
position:relative;
flex-shrink:0;
}
.uttp-video-thumb img{
width:120px;
height:90px;
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:23px;
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:1.5;
margin-bottom:10px;
}
.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;
}