UtubeTrollPedia

MediaWiki:Common.css: Difference between revisions

Supreme Admnistrator Ganson (talk | contribs)
Bureaucrats, Interface administrators, Administrators
166 edits
Created page with "→======================================================= UTubeTrollPolice Retro Theme Version 1.0 =======================================================: html, body{ margin:0; padding:0; background:#e5ecf9; font-family:Verdana,Arial,sans-serif; font-size:12px; color:#222; } →Remove Vector spacing: #content, .mw-body, .vector-body{ background:white; border:1px solid #aaa; margin:15px; padding:15px; border-ra..."
 
No edit summary
 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* =======================================================
/* =====================================
   UTubeTrollPolice Retro Theme
   UTTP YouTube 2007 Style Homepage CSS
   Version 1.0
   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;
 
}


html,
 
body{
 
     margin:0;
/* =====================================
     padding:0;
  ARTICLE CARD
     background:#e5ecf9;
===================================== */
 
 
.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;
     font-family:Verdana,Arial,sans-serif;
    font-size:12px;
    color:#222;
}
}


/* Remove Vector spacing */
.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;


#content,
.mw-body,
.vector-body{
     background:white;
     background:white;
     border:1px solid #aaa;
 
     margin:15px;
     border:1px solid #777777;
     padding:15px;
 
     border-radius:6px;
}
 
 
/*=========================================================
  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 */


a{
/*=========================================================
     color:#0033cc;
  LINKS
=========================================================*/
 
.utp-infobox a {
 
     color:#003399;
 
     text-decoration:none;
     text-decoration:none;
}
}


a:hover{
 
.utp-infobox a:hover {
 
     text-decoration:underline;
     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;
}
}


/* Headers */


h1,h2,h3{
/*=========================================================
  TAGS
=========================================================*/
 
.utp-tag {
 
    display:inline-block;
 
    padding:3px 7px;
 
    margin:2px;
 
    background:
 
        linear-gradient(
            #ffffff,
            #dcecff
        );
 
    border:1px solid #9bb8d8;
 
     color:#003399;
     color:#003399;
     margin-top:10px;
 
    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;
 
}
}


/* Tables */
.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;


table{
    border-collapse:collapse;
}
}


th{
.ytp-feature-thumb img,
     background:#d8e4ff;
.ytp-feature-image{
 
    width:150px !important;
    height:100px !important;
    max-width:150px !important;
    max-height:100px !important;
 
    object-fit:cover !important;
     display:block !important;
 
}
}


td,th{
.ytp-feature-info{
     border:1px solid #ccc;
 
     padding:4px;
    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/MediaWiki:Common.css"