MediaWiki:Common.css: Difference between revisions
From UtubeTrollPedia
No edit summary |
No edit summary |
||
| Line 438: | Line 438: | ||
.sidebar { | .sidebar { | ||
display: none !important; | 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; | |||
} | } | ||
Revision as of 17:41, 14 July 2026
/* =====================================
UTTP YouTube 2007 Style Homepage CSS
Base Layout
===================================== */
/* 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;
}