@@ Line 1: / Line 1: @@
-/* =====================================================
+/* =====================================
-    UTubeTrollPolice Homepage
+    UTTP YouTube 2007 Style Homepage CSS
-    ===================================================== */
+    Base Layout
+===================================== */
+.utp-infobox{
+    border:5px solid red !important;
+    background:yellow !important;
+}
+/* FEATURED ARTICLE CONTAINER */
+.uttp-feature-box {
-.uttp-homepage{
+     width:100%;
-     width:980px;
+     border:1px solid #cccccc;
-    margin:0 auto;
-     font-family:Arial,Helvetica,sans-serif;
      background:#ffffff;
+    margin-bottom:20px;
 }
-.uttp-header{
-     background:#ffffff;
+.uttp-feature-header {
-     border:1px solid #999;
-     padding:12px;
+     background:#eeeeee;
+     border-bottom:1px solid #cccccc;
+    font-size:16px;
+    font-weight:bold;
+     padding:6px;
 }
-.uttp-toplinks{
-     text-align:right;
+.uttp-feature-tabs {
-     font-size:11px;
-     margin-bottom:10px;
+     background:#f5f5f5;
+     border-bottom:1px solid #cccccc;
+     padding:5px;
 }
-.uttp-toplinks a{
-     color:#0033cc;
+.uttp-feature-tabs span {
-     text-decoration:none;
+    display:inline-block;
+    padding:5px 12px;
+     border:1px solid #cccccc;
+     background:#dddddd;
+    font-size:12px;
 }
-.uttp-logo{
-     font-size:38px;
+.uttp-tab-active {
+     background:white !important;
      font-weight:bold;
-    color:#cc0000;
 }
-.uttp-logo .blue{
-     color:#0033cc;
+.uttp-feature-content {
+     padding:0 10px;
 }
-.uttp-tagline{
-     color:#666;
-     font-size:13px;
+/* =====================================
-     margin-top:4px;
+   ARTICLE CARD
+===================================== */
+.uttp-video {
+     display:grid;
+     grid-template-columns:130px 1fr 120px;
+    gap:10px;
+     padding:10px 0;
+    border-bottom:1px dotted #999999;
 }
-.uttp-search{
-     margin-top:15px;
+.uttp-video-thumb {
+     position:relative;
+    width:120px;
 }
-.uttp-navigation{
-     margin-top:8px;
-     padding:8px;
+.uttp-video-thumb img {
-     background:#3366cc;
+    width:120px;
+    height:90px;
+     border:1px solid #777777;
+}
+.uttp-runtime {
+    position:absolute;
+    bottom:3px;
+     right:3px;
+     background:black;
      color:white;
-     border:1px solid #003399;
+     font-size:10px;
+    padding:2px 4px;
 }
-.uttp-navigation a{
-     color:white;
+.uttp-video-title {
+    font-size:14px;
+    font-weight:bold;
+}
+.uttp-video-title a {
+     color:#0033cc;
      text-decoration:none;
-     margin-right:20px;
+}
+.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-navigation a:hover{
-     text-decoration:underline;
+.uttp-video-stars {
+    color:#ff5500;
+     font-size:16px;
+    margin:8px 0;
 }
-/* ===========================================
-   Main Layout
-   =========================================== */
-.uttp-body{
+/* =====================================
+   PROMOTED HORIZONTAL ROW
+===================================== */
+.uttp-promoted-grid {
      display:flex;
-     gap:15px;
-     margin-top:15px;
+     gap:12px;
-     align-items:flex-start;
+}
+.uttp-promoted-card {
+     width:130px;
+     text-align:center;
 }
-.uttp-left{
-     flex:1;
-     min-width:0;
+.uttp-promoted-card img {
+    width:120px;
+     height:90px;
+     border:1px solid #777777;
 }
-.uttp-right{
-     width:260px;
+.uttp-promoted-title {
+    font-size:11px;
+     font-weight:bold;
 }
-.uttp-featured,
-.uttp-main,
-.uttp-sidebar{
-    background:#ffffff;
-    border:1px solid #999;
+.uttp-promoted-author {
-     margin-bottom:15px;
+     font-size:10px;
-     padding:10px;
+     color:#555555;
 }
-.uttp-footer{
-    margin-top:20px;
-     padding:12px;
+/* =====================================
+   HOME PAGE TWO COLUMN
+===================================== */
+.uttp-homepage {
+     display:grid;
+    grid-template-columns:1fr 280px;
+    gap:15px;
+}
-    border-top:2px solid #999;
-     text-align:center;
+.uttp-sidebar {
+     border:1px solid #cccccc;
-     font-size:12px;
+     padding:10px;
-     color:#666;
+     background:#ffffff;
 }
-/* ==========================================
+/* ==================================
-    Thumbnail Grid
+    TOP HORIZONTAL ARTICLE CARDS
-   ========================================== */
+================================== */
+.uttp-top-grid {
-.uttp-thumb-grid{
      display:flex;
-    justify-content:space-between;
-     flex-wrap:wrap;
+     flex-direction:row;
      gap:12px;
+    width:100%;
+    overflow:hidden;
+    margin-bottom:15px;
 }
-.uttp-thumb{
+.uttp-top-card {
      width:150px;
+    height:130px;
+    border:1px solid #cccccc;
+    background:#ffffff;
+    padding:5px;
      text-align:center;
-     font-size:13px;
+}
+.uttp-top-card img {
+    width:120px;
+    height:80px;
+     object-fit:cover;
 }
-.uttp-thumb img{
-    border:1px solid #999;
-     background:white;
+.uttp-top-title {
+     font-size:12px;
-     padding:3px;
+     font-weight:bold;
 }
-.uttp-thumb a{
-    color:#0033cc;
-     text-decoration:none;
+.uttp-top-author {
+    font-size:10px;
+    color:#555;
+}
+.ut-homepage{
+     max-width:1200px;
+    margin:20px auto;
+    font-family:Verdana,Arial,sans-serif;
+}
-     font-weight:bold;
+.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 */
-.uttp-thumb a:hover{
+#content {
-     text-decoration:underline;
+     background:white;
+    border:1px solid #ccc;
+    padding:20px;
 }
-/* ==========================================
-   Classic YouTube Boxes
-   ========================================== */
-.uttp-featured,
+#firstHeading {
-.uttp-main,
-.uttp-sidebar{
-     background:#fafafa;
+     font-size:28px;
-     border:1px solid #b3b3b3;
+     color:#333;
-     margin-bottom:15px;
+     border-bottom:1px solid #ccc;
+    padding-bottom:8px;
 }
-.uttp-featured h2,
-.uttp-main h2,
-.uttp-sidebar h2{
-     margin:-10px -10px 10px -10px;
+.mw-body-content {
+     font-size:14px;
+    line-height:1.6;
+}
-    padding:8px;
+.mw-category {
-     background:#e5ecf9;
+     border-top:1px solid #ccc;
-     border-bottom:1px solid #b3b3b3;
+     padding-top:10px;
-     font-size:16px;
+}
+.page-Main_Page h1 {
+     display: none;
+}
+#left-column,
+#sidebar,
+#navigation,
+.monaco-sidebar {
+    display: none !important;
 }
-/* ==========================================
+#widget_sidebar {
-   Sidebar
+    display: none !important;
-   ========================================== */
+}
-.uttp-sidebar ul{
+.left_sidebar {
-     margin:0;
+     display: none !important;
-    padding-left:18px;
 }
-.uttp-sidebar li{
+.sidebar {
-     margin:6px 0;
+     display: none !important;
 }
-.uttp-sidebar a{
+/*=========================================================
-     color:#0033cc;
-     text-decoration:none;
+    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:
+2px 5px rgba(0,0,0,0.20);
 }
-.uttp-sidebar a:hover{
-     text-decoration:underline;
+/*=========================================================
+   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:
+1px 0 white;
 }
-/* ======================================
-   HEADER
-====================================== */
-.uttp-header{
-background:#ffffff;
+/*=========================================================
+   GOLD YOUTUBE UPLOAD BUTTON HEADER
+=========================================================*/
+.utp-header-gold {
+    padding: 8px;
+    text-align: center;
+    font-size: 15px;
+    font-weight: bold;
+    color: #663d00;
+    background:
-border:1px solid #b3b3b3;
+        linear-gradient(
+            #fff3a8,
+            #ffd65a,
+            #e9a900
+        );
-padding:12px;
+    border-bottom:1px solid #c18b00;
-margin-bottom:10px;
+    text-shadow:
+1px 0 white;
 }
-.uttp-topbar{
-text-align:right;
+/*=========================================================
+   IMAGE AREA
+=========================================================*/
-font-size:11px;
+.utp-image {
-margin-bottom:15px;
+    padding: 10px;
+    text-align:center;
+    background:#f5f5f5;
 }
-.uttp-userlinks a{
-color:#0033cc;
+.utp-image img {
+    max-width:260px;
+    height:auto;
+    padding:3px;
-text-decoration:none;
+    background:white;
-margin-left:6px;
+    border:1px solid #777777;
 }
-.uttp-header-main{
-display:flex;
+/*=========================================================
+   IMAGE CAPTION
+=========================================================*/
+.utp-caption {
+    text-align:center;
-justify-content:space-between;
+    padding:5px;
-align-items:center;
+    font-size:11px;
+    color:#555555;
 }
-.uttp-logo-title{
-font-size:42px;
+/*=========================================================
+   TABLE
+=========================================================*/
-font-weight:bold;
+.utp-table {
-line-height:40px;
+    width:100%;
+    border-collapse:collapse;
 }
-.logo-red{
-color:#cc0000;
+/*=========================================================
+   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;
 }
-.logo-blue{
-color:#0033cc;
+/*=========================================================
+   VALUE COLUMN
+=========================================================*/
+.utp-table td {
+    padding:6px;
+    vertical-align:top;
+    background:#ffffff;
+    border-top:1px solid #dddddd;
 }
-.uttp-logo-tagline{
-font-size:13px;
+/*=========================================================
+   ALTERNATING ROWS
+=========================================================*/
-color:#666;
+.utp-table tr:nth-child(even) td {
-margin-top:3px;
+    background:#fafcff;
 }
-.uttp-search-area{
-display:flex;
+/*=========================================================
+   LINKS
+=========================================================*/
-align-items:center;
+.utp-infobox a {
-gap:6px;
+    color:#003399;
+    text-decoration:none;
 }
-.uttp-searchbox{
-width:340px;
+.utp-infobox a:hover {
+    text-decoration:underline;
+}
+/*=========================================================
+   SECTION HEADERS
+=========================================================*/
+.utp-section {
+    text-align:center;
+    font-weight:bold;
+    padding:6px;
+    color:#003366;
-padding:6px;
+    background:
-font-size:14px;
+        linear-gradient(
+            #edf7ff,
+            #cfe6fa
+        );
-border:1px solid #999;
+    border-top:1px solid #a9c7e5;
+    border-bottom:1px solid #a9c7e5;
 }
-.uttp-searchbutton{
-padding:6px 15px;
+/*=========================================================
+   FOOTER
+=========================================================*/
+.utp-footer {
+    padding:8px;
+    text-align:center;
-border:1px solid #666;
+    background:#eeeeee;
-background:#efefef;
+    border-top:1px solid #cccccc;
-cursor:pointer;
+    font-size:11px;
 }
-.uttp-searchbutton:hover{
-background:#dddddd;
+/*=========================================================
+   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;
 }
-/* ================================
-   Retro Links
-================================ */
-.uttp-homepage a{
-color:#0033cc;
+/*=========================================================
+   BADGES
+=========================================================*/
+.utp-badge {
+    display:inline-block;
+    padding:3px 8px;
-text-decoration:none;
+    font-weight:bold;
+    font-size:11px;
 }
-.uttp-homepage a:hover{
-text-decoration:underline;
+.utp-badge-blue {
+    color:white;
+    background:#4d91d8;
 }
-.uttp-main{
-line-height:1.6em;
+.utp-badge-gold {
-font-size:14px;
+    color:#663d00;
+    background:#ffd45a;
 }
-.uttp-main h2{
-color:#003399;
+.utp-badge-green {
+    color:white;
+    background:#55a855;
 }
-.uttp-main h3{
-margin-top:18px;
+/*=========================================================
+   BUTTONS
+=========================================================*/
+.utp-button {
+    display:inline-block;
-color:#444;
+    padding:5px 12px;
-border-bottom:1px solid #ddd;
+    margin:3px;
-padding-bottom:4px;
+    color:#222222 !important;
+    font-weight:bold;
+    background:
+        linear-gradient(
+            #ffffff,
+            #dddddd
+        );
+    border:1px solid #999999;
 }
-.uttp-navigation{
-background:linear-gradient(#5f9dfd,#2b63c6);
+.utp-button:hover {
-border-radius:4px;
+    background:
+        linear-gradient(
+            #ffffff,
+            #bbbbbb
+        );
 }
-.uttp-navigation a{
-padding:6px 12px;
+/*=========================================================
+   MOBILE
+=========================================================*/
+@media(max-width:800px){
+    .utp-infobox {
+        float:none;
+        width:100%;
+        margin:15px 0;
-display:inline-block;
+    }
 }
+/* ==========================================================
+   FEATURED ARTICLES — force thumbnail + text side-by-side
+   Append this AFTER all other CSS so it wins the cascade.
+   ========================================================== */
-.uttp-navigation a:hover{
+.ytp-feature-video{
-background:rgba(255,255,255,.18);
+    display:flex !important;
+    flex-direction:row !important;
+    align-items:flex-start !important;
+    flex-wrap:nowrap !important;
-border-radius:3px;
+    width:100% !important;
+    box-sizing:border-box !important;
+    padding:12px !important;
+    border-bottom:1px dashed #aaa !important;
+    overflow:visible !important;
 }
-/* ===============================
-   YouTube Style Boxes
-================================ */
-.uttp-box{
+.ytp-feature-thumb{
-background:white;
+    display:block !important;
-border:1px solid #b3b3b3;
+    width:150px !important;
+    height:100px !important;
-margin-bottom:15px;
+    min-width:150px !important;
+    max-width:150px !important;
+    flex:0 0 150px !important;
+    overflow:hidden !important;
+    margin:0 !important;
 }
-.uttp-box h2{
+.ytp-feature-thumb img,
+.ytp-feature-image{
-margin:0;
+    width:150px !important;
+    height:100px !important;
+    max-width:150px !important;
+    max-height:100px !important;
+    object-fit:cover !important;
+    display:block !important;
+}
-padding:8px;
+.ytp-feature-info{
-font-size:15px;
+    display:block !important;
-background:linear-gradient(#f7f7f7,#e4e4e4);
+    flex:1 1 auto !important;
+    min-width:0 !important;
-border-bottom:1px solid #b3b3b3;
+    padding-left:12px !important;
+    box-sizing:border-box !important;
 }
-.uttp-box{
+.ytp-feature-info h3,
+.ytp-feature-info p{
-padding:10px;
+    margin:0 0 6px !important;
 }

MediaWiki:Common.css: Difference between revisions