MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 447: Line 447:
     UTubeTrollPedia Infobox Framework
     UTubeTrollPedia Infobox Framework


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


.utp-infobox{


    float:right;
/*=========================================================
  MAIN INFOBOX
=========================================================*/


    clear:right;
.utp-infobox {


     width:300px;
     float: right;


     margin:0 0 20px 20px;
     clear: right;


     background:#ffffff;
     width: 300px;
 
    margin: 0 0 20px 20px;


     border:1px solid #9cb9d8;
     background: #ffffff;


     font-family:Arial,Helvetica,sans-serif;
     border: 1px solid #999999;


     font-size:12px;
     font-family: Arial, Helvetica, sans-serif;


     color:#222;
     font-size: 12px;


     border-collapse:collapse;
     color: #222222;


     box-shadow:
     box-shadow:
         0 1px 3px rgba(0,0,0,.15);
         0 2px 5px rgba(0,0,0,0.20);


}
}


.utp-infobox table{
    width:100%;


    border-collapse:collapse;
/*=========================================================
  BLUE YOUTUBE NAVIGATION HEADER
=========================================================*/


}
.utp-header-blue {


.utp-header-blue{
    padding: 8px;


     text-align:center;
     text-align: center;


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


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


     color:white;
     color: #003366;


     padding:8px;
     background:


    background:
         linear-gradient(
         linear-gradient(
             #b9d9fb,
             #d7ebff,
             #7db3ec,
             #9bc8f5,
             #5d99da
             #6da8e6
         );
         );


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


     text-shadow:
     text-shadow:
         0 -1px 0 rgba(0,0,0,.30);
         0 1px 0 white;


}
}


.utp-header-gold{


     text-align:center;
/*=========================================================
  GOLD YOUTUBE UPLOAD BUTTON HEADER
=========================================================*/
 
.utp-header-gold {
 
     padding: 8px;


     font-size:15px;
     text-align: center;


     font-weight:bold;
     font-size: 15px;


     color:#6b4200;
     font-weight: bold;


     padding:8px;
     color: #663d00;


     background:
     background:
         linear-gradient(
         linear-gradient(
             #fff0a9,
             #fff3a8,
             #ffd45a,
             #ffd65a,
             #f0b227
             #e9a900
         );
         );


     border-bottom:1px solid #cb9200;
     border-bottom:1px solid #c18b00;


     text-shadow:
     text-shadow:
         0 1px 0 rgba(255,255,255,.60);
         0 1px 0 white;


}
}


.utp-image{


     padding:8px;
/*=========================================================
  IMAGE AREA
=========================================================*/
 
.utp-image {
 
     padding: 10px;


     text-align:center;
     text-align:center;


     background:#fafafa;
     background:#f5f5f5;


}
}


.utp-image img{
 
.utp-image img {


     max-width:260px;
     max-width:260px;


     height:auto;
     height:auto;
    border:1px solid #999;


     padding:3px;
     padding:3px;


     background:white;
     background:white;
    border:1px solid #777777;


}
}


.utp-caption{
 
/*=========================================================
  IMAGE CAPTION
=========================================================*/
 
.utp-caption {


     text-align:center;
     text-align:center;
    padding:5px;


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


     color:#666;
     color:#555555;
 
}


    padding-bottom:8px;


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


.utp-table{
.utp-table {


     width:100%;
     width:100%;
Line 580: Line 607:
}
}


.utp-table th{
 
/*=========================================================
  LABEL COLUMN
=========================================================*/
 
.utp-table th {


     width:105px;
     width:105px;
    padding:6px;


     text-align:left;
     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;
     padding:6px;


     background:#eef5fd;
    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;
     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-weight:bold;


     border-top:1px solid #d6e4f3;
     font-size:11px;


}
}


.utp-table td{


     padding:6px;
.utp-badge-blue {
 
     color:white;
 
    background:#4d91d8;
 
}
 
 
.utp-badge-gold {
 
    color:#663d00;
 
    background:#ffd45a;
 
}
 
 
.utp-badge-green {


     background:white;
     color:white;


     border-top:1px solid #e2e2e2;
     background:#55a855;


}
}


.utp-section{


     text-align:center;
/*=========================================================
  BUTTONS
=========================================================*/
 
.utp-button {
 
     display:inline-block;
 
    padding:5px 12px;
 
    margin:3px;
 
    color:#222222 !important;


     font-weight:bold;
     font-weight:bold;
Line 617: Line 819:


         linear-gradient(
         linear-gradient(
            #ffffff,
            #dddddd
        );
    border:1px solid #999999;
}


            #eef7ff,


            #d9eafb
.utp-button:hover {


    background:
        linear-gradient(
            #ffffff,
            #bbbbbb
         );
         );


     color:#003366;
}
 
 
/*=========================================================
  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;
 
}


    padding:5px;
.ytp-feature-thumb img,
.ytp-feature-image{


     border-top:1px solid #bdd4eb;
     width:150px !important;
    height:100px !important;
    max-width:150px !important;
    max-height:100px !important;


     border-bottom:1px solid #bdd4eb;
     object-fit:cover !important;
    display:block !important;


}
}


.utp-footer{
.ytp-feature-info{


     padding:8px;
    display:block !important;
 
    flex:1 1 auto !important;
    min-width:0 !important;
 
     padding-left:12px !important;
    box-sizing:border-box !important;


    text-align:center;
}


    background:#f6f6f6;
.ytp-feature-info h3,
.ytp-feature-info p{


     border-top:1px solid #ddd;
     margin:0 0 6px !important;


}
}