MediaWiki:Common.css: Difference between revisions

No edit summary
Tag: Reverted
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 3: Line 3:
   Base Layout
   Base Layout
===================================== */
===================================== */
 
.utp-infobox{
    border:5px solid red !important;
    background:yellow !important;
}


/* FEATURED ARTICLE CONTAINER */
/* FEATURED ARTICLE CONTAINER */
Line 285: Line 288:


}
}
/* ==================================
/* ==================================
   TOP HORIZONTAL ARTICLE CARDS
   TOP HORIZONTAL ARTICLE CARDS
Line 353: Line 357:


     color:#555;
     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;


}
}