MediaWiki:Common.css: Difference between revisions
From UtubeTrollPedia
No edit summary |
No edit summary Tag: Reverted |
||
| Line 283: | Line 283: | ||
background:#ffffff; | 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; | |||
} | } | ||
Revision as of 18:23, 6 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;
}