MediaWiki:Common.css: Difference between revisions

From UtubeTrollPedia

← Older edit
Supreme Admnistrator Ganson (talk | contribs)
Bureaucrats, Interface administrators, Administrators
166 edits
No edit summary
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* =====================================================
/* =====================================
   UTubeTrollPolice Homepage
   UTTP YouTube 2007 Style Homepage CSS
   ===================================================== */
   Base Layout
 
===================================== */
.uttp-homepage{
.utp-infobox{
     width:980px;
     border:5px solid red !important;
    margin:0 auto;
     background:yellow !important;
    font-family:Arial,Helvetica,sans-serif;
     background:#ffffff;
}
}


.uttp-header{
/* FEATURED ARTICLE CONTAINER */
    background:#ffffff;
    border:1px solid #999;
    padding:12px;
}


.uttp-toplinks{
.uttp-feature-box {
    text-align:right;
    font-size:11px;
    margin-bottom:10px;
}


.uttp-toplinks a{
    width:100%;
     color:#0033cc;
    border:1px solid #cccccc;
     text-decoration:none;
     background:#ffffff;
}
     margin-bottom:20px;


.uttp-logo{
    font-size:38px;
    font-weight:bold;
    color:#cc0000;
}
}


.uttp-logo .blue{
    color:#0033cc;
}


.uttp-tagline{
.uttp-feature-header {
    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;


    background:#eeeeee;
    border-bottom:1px solid #cccccc;
    font-size:16px;
     font-weight:bold;
     font-weight:bold;
 
     padding:6px;
    text-decoration:none;
 
     padding:6px 12px;


}
}


/* ===========================================
  Main Layout
  =========================================== */


.uttp-body{
.uttp-feature-tabs {
    display:flex;
    gap:15px;
    margin-top:15px;
    align-items:flex-start;
}


.uttp-left{
     background:#f5f5f5;
     flex:1;
     border-bottom:1px solid #cccccc;
     min-width:0;
    padding:5px;
}


.uttp-right{
    width:260px;
}
}


.uttp-featured,
.uttp-main,
.uttp-sidebar{


    background:#ffffff;
.uttp-feature-tabs span {


     border:1px solid #999;
    display:inline-block;
 
    padding:5px 12px;
     margin-bottom:15px;
     border:1px solid #cccccc;
 
     background:#dddddd;
     padding:10px;
     font-size:12px;


}
}


.uttp-footer{


    margin-top:20px;
.uttp-tab-active {


     padding:12px;
     background:white !important;
 
     font-weight:bold;
    border-top:2px solid #999;
 
    text-align:center;
 
     font-size:12px;
 
    color:#666;


}
}


/* ==========================================
  Thumbnail Grid
  ========================================== */


.uttp-thumb-grid{
.uttp-feature-content {


display:flex;
    padding:0 10px;
 
justify-content:space-around;
 
flex-wrap:wrap;
 
gap:25px;


}
}


.uttp-thumb{


width:170px;


text-align:center;
/* =====================================
  ARTICLE CARD
===================================== */


}


/* ==========================================
.uttp-video {
  Classic YouTube Boxes
  ========================================== */
.uttp-thumb-grid{


display:flex;
    display:grid;
    grid-template-columns:130px 1fr 120px;
    gap:10px;


justify-content:space-around;
    padding:10px 0;


flex-wrap:wrap;
    border-bottom:1px dotted #999999;
 
gap:25px;


}
}


.uttp-thumb{


width:170px;


text-align:center;
.uttp-video-thumb {


}
    position:relative;


/* ==========================================
     width:120px;
  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;
.uttp-video-thumb img {


padding:12px;
    width:120px;
    height:90px;


margin-bottom:10px;
    border:1px solid #777777;


}
}


.uttp-topbar{


text-align:right;


font-size:11px;
.uttp-runtime {


margin-bottom:15px;
    position:absolute;


}
    bottom:3px;
    right:3px;


.uttp-userlinks a{
    background:black;
    color:white;


color:#0033cc;
    font-size:10px;


text-decoration:none;
    padding:2px 4px;
 
margin-left:6px;


}
}


.uttp-header-main{


display:flex;


justify-content:space-between;
.uttp-video-title {


align-items:center;
    font-size:14px;
    font-weight:bold;


}
}


.uttp-logo-title{


font-size:42px;


font-weight:bold;
.uttp-video-title a {


line-height:40px;
    color:#0033cc;
    text-decoration:none;


}
}


.logo-red{


color:#cc0000;


}
.uttp-video-description {


.logo-blue{
    font-size:12px;


color:#0033cc;
    margin-top:5px;


}
}


.uttp-logo-tagline{


font-size:13px;


color:#666;
.uttp-video-meta {


margin-top:3px;
    font-size:11px;
 
}
 
.uttp-search-area{
 
display:flex;


align-items:center;
    margin-top:8px;


gap:6px;
    color:#555555;


}
}


.uttp-searchbox{


width:340px;


padding:6px;
.uttp-video-time {


font-size:14px;
    font-size:11px;


border:1px solid #999;
    color:#777777;


}
}


.uttp-searchbutton{


padding:6px 15px;


border:1px solid #666;
.uttp-video-right {


background:#efefef;
    text-align:right;


cursor:pointer;
    font-size:12px;


}
}


.uttp-searchbutton:hover{


background:#dddddd;


}
.uttp-video-views {
/* ================================
  Retro Links
================================ */


.uttp-homepage a{
    font-size:14px;
 
    font-weight:bold;
color:#0033cc;
 
text-decoration:none;


}
}


.uttp-homepage a:hover{


text-decoration:underline;


}
.uttp-video-stars {


.uttp-main{
    color:#ff5500;


line-height:1.6em;
    font-size:16px;


font-size:14px;
    margin:8px 0;


}
}


.uttp-main h2{


color:#003399;


}
/* =====================================
  PROMOTED HORIZONTAL ROW
===================================== */


.uttp-main h3{


margin-top:18px;
.uttp-promoted-grid {


color:#444;
    display:flex;


border-bottom:1px solid #ddd;
    gap:12px;
 
padding-bottom:4px;


}
}


.uttp-navigation{


background:linear-gradient(#5f9dfd,#2b63c6);


border-radius:4px;
.uttp-promoted-card {


}
    width:130px;


.uttp-navigation a{
    text-align:center;
 
padding:6px 12px;
 
display:inline-block;


}
}


.uttp-navigation a:hover{


background:rgba(255,255,255,.18);


border-radius:3px;
.uttp-promoted-card img {


}
    width:120px;
/* ===============================
  YouTube Style Boxes
================================ */


.uttp-box{
    height:90px;
 
background:white;
 
border:1px solid #b3b3b3;


margin-bottom:15px;
    border:1px solid #777777;


}
}


.uttp-box h2{


margin:0;


padding:8px;
.uttp-promoted-title {


font-size:15px;
    font-size:11px;


background:linear-gradient(#f7f7f7,#e4e4e4);
    font-weight:bold;
 
border-bottom:1px solid #b3b3b3;


}
}


.uttp-box{


padding:10px;


}
.uttp-promoted-author {
.uttp-thumb{


width:160px;
    font-size:10px;
 
text-align:center;


padding:6px;
    color:#555555;


}
}


.uttp-thumb img{


padding:4px;


background:white;
/* =====================================
  HOME PAGE TWO COLUMN
===================================== */


border:1px solid #999;


box-shadow:0 1px 2px rgba(0,0,0,.2);
.uttp-homepage {


}
    display:grid;


.uttp-thumb a{
    grid-template-columns:1fr 280px;


font-weight:bold;
    gap:15px;
 
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,
.uttp-sidebar {
.page-Main_Page .toc{
    display:none;
}


/* ================================
    border:1px solid #cccccc;
  Article Card
================================ */


/* ==========================================
    padding:10px;
  YouTube 2007 Article Row
========================================== */


.uttp-video{
    background:#ffffff;
 
display:flex;
 
padding:18px;
 
margin:0;
 
border-bottom:1px dotted #b5b5b5;
 
align-items:flex-start;
 
background:white;


}
}


.uttp-video:hover{
/* ==================================
  TOP HORIZONTAL ARTICLE CARDS
================================== */


background:#f7f7f7;


}
.uttp-top-grid {


.uttp-video-thumb{
    display:flex;


width:165px;
    flex-direction:row;


position:relative;
    gap:12px;


flex-shrink:0;
    width:100%;


}
    overflow:hidden;


.uttp-video-thumb img{
    margin-bottom:15px;
 
width:130px;
 
height:97px;
 
border:1px solid #777;
 
padding:2px;
 
background:white;


}
}


.uttp-runtime{


position:absolute;


bottom:5px;
.uttp-top-card {


right:15px;
    width:150px;


background:black;
    height:130px;


color:white;
    border:1px solid #cccccc;


font-size:11px;
    background:#ffffff;


padding:2px 5px;
    padding:5px;


font-weight:bold;
    text-align:center;


}
}


.uttp-video-info{


flex:1;


padding-left:15px;
.uttp-top-card img {


}
    width:120px;


.uttp-video-title{
    height:80px;


font-size:24px;
    object-fit:cover;


font-weight:bold;
}


margin-bottom:8px;


}


.uttp-video-title a{
.uttp-top-title {


color:#0033cc;
    font-size:12px;


text-decoration:none;
    font-weight:bold;


}
}


.uttp-video-title a:hover{


text-decoration:underline;


}
.uttp-top-author {


.uttp-video-description{
    font-size:10px;


font-size:14px;
    color:#555;
 
line-height:1.6;
 
margin-bottom:6px;


}
}


.uttp-video-meta{
.ut-homepage{
 
    max-width:1200px;
font-size:12px;
    margin:20px auto;
 
    font-family:Verdana,Arial,sans-serif;
color:#666;
 
margin-bottom:6px;
 
}
}


.uttp-video-time{
.ut-comingsoon{
 
    background:#ffffdd;
font-size:12px;
    border:1px solid #e2d48a;
 
    padding:15px;
color:#888;
    margin-bottom:20px;
 
}
}


.uttp-video-stats{
.ut-placeholder{
 
    background:#ffffff;
width:165px;
    border:1px solid #cccccc;
 
    padding:15px;
text-align:right;
 
font-size:13px;
 
}
}
/* Minimal wiki article styling */


.uttp-views{
#content {


font-size:18px;
    background:white;


font-weight:bold;
    border:1px solid #ccc;


margin:6px 0;
    padding:20px;


}
}


.uttp-stars{
color:#ff3300;
font-size:18px;
margin-bottom:8px;
}


.uttp-more a{
#firstHeading {


font-size:13px;
    font-size:28px;


font-weight:bold;
    color:#333;


color:#0033cc;
    border-bottom:1px solid #ccc;


text-decoration:none;
    padding-bottom:8px;


}
}


/* =======================================
  Tabs
======================================= */
.uttp-tabs{


display:flex;
.mw-body-content {


border-bottom:1px solid #ccc;
    font-size:14px;


margin-bottom:15px;
    line-height:1.6;


}
}


.uttp-tab{
padding:8px 18px;
background:#f2f2f2;
border:1px solid #ccc;
border-bottom:none;


margin-right:3px;
.mw-category {


font-size:13px;
    border-top:1px solid #ccc;


font-weight:bold;
    padding-top:10px;
 
cursor:pointer;


}
}
 
.page-Main_Page h1 {
.uttp-tab-active{
    display: none;
 
background:white;
 
border-top:3px solid #cc0000;
 
}
}


/* Small Thumbnail Strip */
#left-column,
 
#sidebar,
.uttp-strip{
#navigation,
 
.monaco-sidebar {
display:flex;
    display: none !important;
 
justify-content:space-between;
 
gap:15px;
 
margin-bottom:20px;
 
}
}


.uttp-small-thumb{
#widget_sidebar {
 
    display: none !important;
width:160px;
 
text-align:center;
 
}
}


.uttp-small-image{
.left_sidebar {
 
    display: none !important;
position:relative;
 
}
}


.uttp-small-image img{
.sidebar {
 
    display: none !important;
width:150px;
 
height:100px;
 
border:1px solid #777;
 
padding:2px;
 
background:white;
 
}
}


.uttp-small-badge{
/*=========================================================


position:absolute;
    UTubeTrollPedia Infobox Framework


right:5px;
=========================================================*/
/*=========================================================
  UTubeTrollPedia Infobox System
  Retro YouTube / Web 2.0 Style
=========================================================*/


bottom:8px;


background:black;
/*=========================================================
  MAIN INFOBOX
=========================================================*/


color:white;
.utp-infobox {


padding:2px 6px;
    float: right;


font-size:11px;
    clear: right;


font-weight:bold;
    width: 300px;


}
    margin: 0 0 20px 20px;
 
.uttp-small-title{
 
margin-top:5px;


font-size:13px;
    background: #ffffff;


font-weight:bold;
    border: 1px solid #999999;


}
    font-family: Arial, Helvetica, sans-serif;
/* =====================================
  Promoted Articles
===================================== */


.uttp-promoted{
    font-size: 12px;


display:flex;
    color: #222222;


justify-content:space-between;
    box-shadow:
 
        0 2px 5px rgba(0,0,0,0.20);
gap:15px;
 
margin-bottom:25px;


}
}


.uttp-promo{


width:175px;
/*=========================================================
  BLUE YOUTUBE NAVIGATION HEADER
=========================================================*/


text-align:center;
.utp-header-blue {


}
    padding: 8px;


.uttp-promo-image img{
    text-align: center;


width:170px;
    font-size: 15px;


height:110px;
    font-weight: bold;


border:1px solid #666;
    color: #003366;


background:#fff;
    background:


padding:2px;
        linear-gradient(
            #d7ebff,
            #9bc8f5,
            #6da8e6
        );


}
    border-bottom: 1px solid #4b82bd;


.uttp-promo-title{
    text-shadow:
 
        0 1px 0 white;
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;
/*=========================================================
 
  GOLD YOUTUBE UPLOAD BUTTON HEADER
}
=========================================================*/


.uttp-promo-sub{
.utp-header-gold {


font-size:12px;
    padding: 8px;


color:#666;
    text-align: center;


}
    font-size: 15px;


/*==========================
    font-weight: bold;
MAIN PAGE WIDTH
===========================*/


#uttp-homepage{
    color: #663d00;


width:100%;
    background:


display:flex;
        linear-gradient(
            #fff3a8,
            #ffd65a,
            #e9a900
        );


justify-content:center;
    border-bottom:1px solid #c18b00;


margin-top:15px;
    text-shadow:
        0 1px 0 white;


}
}


#uttp-main{


width:980px;
/*=========================================================
  IMAGE AREA
=========================================================*/


display:flex;
.utp-image {


align-items:flex-start;
    padding: 10px;


gap:25px;
    text-align:center;


}
    background:#f5f5f5;
 
#uttp-left{
 
flex:1;
 
min-width:700px;


}
}


#uttp-right{


width:250px;
.utp-image img {


flex-shrink:0;
    max-width:260px;


}
    height:auto;
body{


background:#ffffff;
    padding:3px;


font-family:Arial,Helvetica,sans-serif;
    background:white;


font-size:13px;
    border:1px solid #777777;


}
}


/*==============================
YouTube 2007 Featured Articles
==============================*/


/*=========================================
/*=========================================================
YouTube 2007 Featured Article Card
  IMAGE CAPTION
=========================================*/
=========================================================*/


.uttp-video{
.utp-caption {
    display:grid;
    grid-template-columns:130px 1fr 150px;
    gap:14px;


     padding:12px 10px;
     text-align:center;


     border-bottom:1px dotted #b7b7b7;
     padding:5px;


     background:#fff;
     font-size:11px;
 
    min-height:110px;
}
 
.uttp-video-thumb{
 
    position:relative;


     width:120px;
     color:#555555;


}
}


.uttp-video-thumb img{
    width:120px;


    height:90px;
/*=========================================================
  TABLE
=========================================================*/


    border:1px solid #777;
.utp-table {


     padding:2px;
     width:100%;


     background:#fff;
     border-collapse:collapse;


}
}


.uttp-runtime{
    position:absolute;


    right:4px;
/*=========================================================
  LABEL COLUMN
=========================================================*/


    bottom:4px;
.utp-table th {


     background:#000;
     width:105px;


     color:#fff;
     padding:6px;


     font-size:10px;
     text-align:left;


     padding:2px 4px;
     vertical-align:top;


     font-weight:bold;
     font-weight:bold;


}
    color:#222222;


.uttp-video-main{
    background:#eef6ff;


     display:flex;
     border-top:1px solid #d5d5d5;
 
    flex-direction:column;


}
}


.uttp-video-title{


    font-size:15px;
/*=========================================================
  VALUE COLUMN
=========================================================*/


    font-weight:bold;
.utp-table td {


     margin-bottom:6px;
     padding:6px;


}
    vertical-align:top;


.uttp-video-title a{
    background:#ffffff;


     color:#0033cc;
     border-top:1px solid #dddddd;
 
    text-decoration:none;


}
}


.uttp-video-title a:hover{


    text-decoration:underline;
/*=========================================================
  ALTERNATING ROWS
=========================================================*/


}
.utp-table tr:nth-child(even) td {


.uttp-video-description{
    background:#fafcff;


    font-size:12px;
}
 
    line-height:18px;


    margin-bottom:8px;


}
/*=========================================================
  LINKS
=========================================================*/


.uttp-video-meta{
.utp-infobox a {


     font-size:11px;
     color:#003399;


     color:#666;
     text-decoration:none;
 
    line-height:16px;


}
}


.uttp-video-time{


    margin-top:auto;
.utp-infobox a:hover {


     font-size:11px;
     text-decoration:underline;
 
    color:#777;


}
}


.uttp-video-right{
    text-align:right;


    font-size:11px;
/*=========================================================
  SECTION HEADERS
=========================================================*/


}
.utp-section {


.uttp-video-views{
     text-align:center;
 
     font-size:22px;


     font-weight:bold;
     font-weight:bold;


     margin-bottom:8px;
     padding:6px;


}
    color:#003366;


.uttp-video-stars{
    background:


    color:#ff5500;
        linear-gradient(
            #edf7ff,
            #cfe6fa
        );


     font-size:16px;
     border-top:1px solid #a9c7e5;


     margin-bottom:10px;
     border-bottom:1px solid #a9c7e5;


}
}


.uttp-video-link a{


    color:#0033cc;
/*=========================================================
  FOOTER
=========================================================*/
 
.utp-footer {


     text-decoration:none;
     padding:8px;


     font-weight:bold;
     text-align:center;


}
    background:#eeeeee;


.uttp-video-link a:hover{
    border-top:1px solid #cccccc;


     text-decoration:underline;
     font-size:11px;


}
}


.uttp-more a{


font-weight:bold;
/*=========================================================
  TAGS
=========================================================*/


font-size:13px;
.utp-tag {


color:#0033cc;
    display:inline-block;


text-decoration:none;
    padding:3px 7px;


}
    margin:2px;


/*=========================================
    background:
Articles Being Read Right Now
=========================================*/


.uttp-watching{
        linear-gradient(
            #ffffff,
            #dcecff
        );


display:flex;
    border:1px solid #9bb8d8;


justify-content:space-between;
    color:#003399;


gap:15px;
    font-size:11px;
 
margin-bottom:25px;


}
}


.uttp-watch-card{


width:150px;
/*=========================================================
  BADGES
=========================================================*/


text-align:center;
.utp-badge {


}
    display:inline-block;


.uttp-watch-image{
    padding:3px 8px;


position:relative;
    font-weight:bold;


}
    font-size:11px;
 
.uttp-watch-image img{
 
width:150px;
 
height:105px;
 
border:1px solid #777;
 
padding:2px;
 
background:white;


}
}


.uttp-watch-badge{


position:absolute;
.utp-badge-blue {


right:6px;
    color:white;


bottom:6px;
    background:#4d91d8;
 
background:black;
 
color:white;
 
padding:2px 5px;
 
font-size:11px;
 
font-weight:bold;


}
}


.uttp-watch-title{


margin-top:6px;
.utp-badge-gold {


font-size:13px;
    color:#663d00;


font-weight:bold;
    background:#ffd45a;


}
}


.uttp-watch-title a{


text-decoration:none;
.utp-badge-green {


color:#0033cc;
    color:white;


}
    background:#55a855;
 
.uttp-watch-title a:hover{
 
text-decoration:underline;


}
}


/*================================
Featured Articles Box
================================*/


.uttp-feature-box{
/*=========================================================
  BUTTONS
=========================================================*/


width:100%;
.utp-button {


border:1px solid #ccc;
    display:inline-block;


background:white;
    padding:5px 12px;


margin-bottom:20px;
    margin:3px;


}
    color:#222222 !important;


    font-weight:bold;


.uttp-feature-header{
    background:
 
background:#eeeeee;
 
border-bottom:1px solid #ccc;
 
font-size:16px;
 
font-weight:bold;


padding:7px 10px;
        linear-gradient(
            #ffffff,
            #dddddd
        );


color:#333;
    border:1px solid #999999;


}
}




.uttp-feature-tabs{
.utp-button:hover {
 
background:#f7f7f7;


border-bottom:1px solid #ccc;
    background:


padding:5px 10px;
        linear-gradient(
 
            #ffffff,
font-size:12px;
            #bbbbbb
        );


}
}




.uttp-feature-tabs span{
/*=========================================================
  MOBILE
=========================================================*/


display:inline-block;
@media(max-width:800px){


padding:5px 12px;
    .utp-infobox {


margin-right:5px;
        float:none;


border:1px solid #ccc;
        width:100%;


background:#ddd;
        margin:15px 0;


cursor:pointer;
    }


}
}
/* ==========================================================
  FEATURED ARTICLES — force thumbnail + text side-by-side
  Append this AFTER all other CSS so it wins the cascade.
  ========================================================== */


.ytp-feature-video{


.uttp-feature-tabs .uttp-tab-active{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    flex-wrap:nowrap !important;


background:white;
    width:100% !important;
    box-sizing:border-box !important;


border-bottom:1px solid white;
    padding:12px !important;
    border-bottom:1px dashed #aaa !important;


font-weight:bold;
    overflow:visible !important;


}
}


.ytp-feature-thumb{


.uttp-feature-content{
     display:block !important;
 
padding:0 10px;
 
}
 
/*================================
Promoted Article Horizontal Cards
================================*/
 
.uttp-promoted-grid {
 
     display:flex;
 
    gap:12px;
 
    flex-wrap:nowrap;
 
    overflow:hidden;
 
    padding:10px;
 
}
 


.uttp-promoted-card {
    width:150px !important;
    height:100px !important;


     width:150px;
     min-width:150px !important;
    max-width:150px !important;


     flex:none;
     flex:0 0 150px !important;


     text-align:center;
     overflow:hidden !important;
    margin:0 !important;


}
}


.ytp-feature-thumb img,
.ytp-feature-image{


.uttp-promoted-card img {
    width:150px !important;
    height:100px !important;
    max-width:150px !important;
    max-height:100px !important;


     width:120px;
     object-fit:cover !important;
 
     display:block !important;
    height:90px;
 
     border:1px solid #777;


}
}


.ytp-feature-info{


.uttp-promoted-title {
     display:block !important;
 
     font-size:11px;


     font-weight:bold;
     flex:1 1 auto !important;
    min-width:0 !important;


     line-height:14px;
     padding-left:12px !important;
    box-sizing:border-box !important;


}
}


.ytp-feature-info h3,
.ytp-feature-info p{


.uttp-promoted-author {
     margin:0 0 6px !important;
 
     font-size:10px;
 
    color:#555;


}
}

Latest revision as of 23:00, 14 July 2026

/* =====================================
   UTTP YouTube 2007 Style Homepage CSS
   Base Layout
===================================== */
.utp-infobox{
    border:5px solid red !important;
    background:yellow !important;
}

/* 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

=========================================================*/
/*=========================================================
   UTubeTrollPedia Infobox System
   Retro YouTube / Web 2.0 Style
=========================================================*/


/*=========================================================
   MAIN INFOBOX
=========================================================*/

.utp-infobox {

    float: right;

    clear: right;

    width: 300px;

    margin: 0 0 20px 20px;

    background: #ffffff;

    border: 1px solid #999999;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #222222;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.20);

}


/*=========================================================
   BLUE YOUTUBE NAVIGATION HEADER
=========================================================*/

.utp-header-blue {

    padding: 8px;

    text-align: center;

    font-size: 15px;

    font-weight: bold;

    color: #003366;

    background:

        linear-gradient(
            #d7ebff,
            #9bc8f5,
            #6da8e6
        );

    border-bottom: 1px solid #4b82bd;

    text-shadow:
        0 1px 0 white;

}


/*=========================================================
   GOLD YOUTUBE UPLOAD BUTTON HEADER
=========================================================*/

.utp-header-gold {

    padding: 8px;

    text-align: center;

    font-size: 15px;

    font-weight: bold;

    color: #663d00;

    background:

        linear-gradient(
            #fff3a8,
            #ffd65a,
            #e9a900
        );

    border-bottom:1px solid #c18b00;

    text-shadow:
        0 1px 0 white;

}


/*=========================================================
   IMAGE AREA
=========================================================*/

.utp-image {

    padding: 10px;

    text-align:center;

    background:#f5f5f5;

}


.utp-image img {

    max-width:260px;

    height:auto;

    padding:3px;

    background:white;

    border:1px solid #777777;

}


/*=========================================================
   IMAGE CAPTION
=========================================================*/

.utp-caption {

    text-align:center;

    padding:5px;

    font-size:11px;

    color:#555555;

}


/*=========================================================
   TABLE
=========================================================*/

.utp-table {

    width:100%;

    border-collapse:collapse;

}


/*=========================================================
   LABEL COLUMN
=========================================================*/

.utp-table th {

    width:105px;

    padding:6px;

    text-align:left;

    vertical-align:top;

    font-weight:bold;

    color:#222222;

    background:#eef6ff;

    border-top:1px solid #d5d5d5;

}


/*=========================================================
   VALUE COLUMN
=========================================================*/

.utp-table td {

    padding:6px;

    vertical-align:top;

    background:#ffffff;

    border-top:1px solid #dddddd;

}


/*=========================================================
   ALTERNATING ROWS
=========================================================*/

.utp-table tr:nth-child(even) td {

    background:#fafcff;

}


/*=========================================================
   LINKS
=========================================================*/

.utp-infobox a {

    color:#003399;

    text-decoration:none;

}


.utp-infobox a:hover {

    text-decoration:underline;

}


/*=========================================================
   SECTION HEADERS
=========================================================*/

.utp-section {

    text-align:center;

    font-weight:bold;

    padding:6px;

    color:#003366;

    background:

        linear-gradient(
            #edf7ff,
            #cfe6fa
        );

    border-top:1px solid #a9c7e5;

    border-bottom:1px solid #a9c7e5;

}


/*=========================================================
   FOOTER
=========================================================*/

.utp-footer {

    padding:8px;

    text-align:center;

    background:#eeeeee;

    border-top:1px solid #cccccc;

    font-size:11px;

}


/*=========================================================
   TAGS
=========================================================*/

.utp-tag {

    display:inline-block;

    padding:3px 7px;

    margin:2px;

    background:

        linear-gradient(
            #ffffff,
            #dcecff
        );

    border:1px solid #9bb8d8;

    color:#003399;

    font-size:11px;

}


/*=========================================================
   BADGES
=========================================================*/

.utp-badge {

    display:inline-block;

    padding:3px 8px;

    font-weight:bold;

    font-size:11px;

}


.utp-badge-blue {

    color:white;

    background:#4d91d8;

}


.utp-badge-gold {

    color:#663d00;

    background:#ffd45a;

}


.utp-badge-green {

    color:white;

    background:#55a855;

}


/*=========================================================
   BUTTONS
=========================================================*/

.utp-button {

    display:inline-block;

    padding:5px 12px;

    margin:3px;

    color:#222222 !important;

    font-weight:bold;

    background:

        linear-gradient(
            #ffffff,
            #dddddd
        );

    border:1px solid #999999;

}


.utp-button:hover {

    background:

        linear-gradient(
            #ffffff,
            #bbbbbb
        );

}


/*=========================================================
   MOBILE
=========================================================*/

@media(max-width:800px){

    .utp-infobox {

        float:none;

        width:100%;

        margin:15px 0;

    }

}
/* ==========================================================
   FEATURED ARTICLES — force thumbnail + text side-by-side
   Append this AFTER all other CSS so it wins the cascade.
   ========================================================== */

.ytp-feature-video{

    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    box-sizing:border-box !important;

    padding:12px !important;
    border-bottom:1px dashed #aaa !important;

    overflow:visible !important;

}

.ytp-feature-thumb{

    display:block !important;

    width:150px !important;
    height:100px !important;

    min-width:150px !important;
    max-width:150px !important;

    flex:0 0 150px !important;

    overflow:hidden !important;
    margin:0 !important;

}

.ytp-feature-thumb img,
.ytp-feature-image{

    width:150px !important;
    height:100px !important;
    max-width:150px !important;
    max-height:100px !important;

    object-fit:cover !important;
    display:block !important;

}

.ytp-feature-info{

    display:block !important;

    flex:1 1 auto !important;
    min-width:0 !important;

    padding-left:12px !important;
    box-sizing:border-box !important;

}

.ytp-feature-info h3,
.ytp-feature-info p{

    margin:0 0 6px !important;

}
Retrieved from "https://utubetrollpolice.org/wiki/index.php?title=MediaWiki:Common.css&oldid=151"