|
|
| Line 1: |
Line 1: |
| /* ===================================================== | | /* ===================================== |
| UTubeTrollPolice Homepage | | UTTP YouTube 2007 Style Homepage CSS |
| ===================================================== */ | | Base Layout |
| | ===================================== */ |
|
| |
|
| .uttp-homepage{
| |
| width:980px;
| |
| margin:0 auto;
| |
| 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{
| |
| color:#666;
| |
| font-size:13px;
| |
| margin-top:4px;
| |
| }
| |
|
| |
|
| .uttp-search{ | | .uttp-feature-header { |
| 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;
| |
| | |
| margin-bottom:15px;
| |
| | |
| padding:10px;
| |
| | |
| }
| |
| | |
| .uttp-footer{ | |
| | |
| margin-top:20px;
| |
| | |
| padding:12px;
| |
| | |
| border-top:2px solid #999;
| |
| | |
| text-align:center;
| |
|
| |
|
| | display:inline-block; |
| | padding:5px 12px; |
| | border:1px solid #cccccc; |
| | background:#dddddd; |
| font-size:12px; | | font-size:12px; |
|
| |
| color:#666;
| |
|
| |
|
| } | | } |
|
| |
|
| /* ==========================================
| |
| Thumbnail Grid
| |
| ========================================== */
| |
|
| |
|
| .uttp-thumb-grid{ | | .uttp-tab-active { |
|
| |
|
| display:flex;
| | background:white !important; |
| | | font-weight:bold; |
| justify-content:space-around;
| |
| | |
| flex-wrap:wrap;
| |
| | |
| gap:25px;
| |
|
| |
|
| } | | } |
|
| |
|
| .uttp-thumb{
| |
|
| |
|
| width:170px;
| | .uttp-feature-content { |
|
| |
|
| text-align:center;
| | padding:0 10px; |
|
| |
|
| } | | } |
|
| |
|
| /* ==========================================
| |
| Classic YouTube Boxes
| |
| ========================================== */
| |
| .uttp-thumb-grid{
| |
|
| |
|
| display:flex;
| |
|
| |
|
| justify-content:space-around;
| | /* ===================================== |
| | | ARTICLE CARD |
| flex-wrap:wrap;
| | ===================================== */ |
| | |
| gap:25px;
| |
| | |
| }
| |
| | |
| .uttp-thumb{
| |
| | |
| width:170px;
| |
| | |
| text-align:center;
| |
| | |
| }
| |
| | |
| /* ==========================================
| |
| 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;
| |
| | |
| padding:12px;
| |
| | |
| margin-bottom:10px;
| |
| | |
| }
| |
| | |
| .uttp-topbar{
| |
| | |
| text-align:right;
| |
| | |
| font-size:11px;
| |
| | |
| margin-bottom:15px;
| |
| | |
| }
| |
| | |
| .uttp-userlinks a{
| |
| | |
| color:#0033cc;
| |
| | |
| text-decoration:none;
| |
| | |
| margin-left:6px;
| |
| | |
| }
| |
| | |
| .uttp-header-main{
| |
| | |
| display:flex;
| |
| | |
| justify-content:space-between;
| |
| | |
| align-items:center;
| |
| | |
| }
| |
| | |
| .uttp-logo-title{
| |
| | |
| font-size:42px;
| |
| | |
| font-weight:bold;
| |
| | |
| line-height:40px;
| |
| | |
| }
| |
| | |
| .logo-red{
| |
| | |
| color:#cc0000;
| |
| | |
| }
| |
| | |
| .logo-blue{
| |
| | |
| color:#0033cc;
| |
| | |
| }
| |
| | |
| .uttp-logo-tagline{
| |
| | |
| font-size:13px;
| |
| | |
| color:#666;
| |
| | |
| margin-top:3px;
| |
| | |
| }
| |
| | |
| .uttp-search-area{
| |
| | |
| display:flex;
| |
| | |
| align-items:center;
| |
| | |
| gap:6px;
| |
| | |
| }
| |
| | |
| .uttp-searchbox{
| |
| | |
| width:340px;
| |
| | |
| padding:6px;
| |
| | |
| font-size:14px;
| |
| | |
| border:1px solid #999;
| |
| | |
| }
| |
| | |
| .uttp-searchbutton{
| |
| | |
| padding:6px 15px;
| |
| | |
| border:1px solid #666;
| |
| | |
| background:#efefef;
| |
| | |
| cursor:pointer;
| |
| | |
| }
| |
| | |
| .uttp-searchbutton:hover{
| |
| | |
| background:#dddddd;
| |
| | |
| }
| |
| /* ================================
| |
| Retro Links
| |
| ================================ */
| |
| | |
| .uttp-homepage a{
| |
| | |
| color:#0033cc;
| |
| | |
| text-decoration:none;
| |
| | |
| }
| |
| | |
| .uttp-homepage a:hover{
| |
| | |
| text-decoration:underline;
| |
| | |
| }
| |
| | |
| .uttp-main{
| |
| | |
| line-height:1.6em;
| |
| | |
| font-size:14px;
| |
| | |
| }
| |
| | |
| .uttp-main h2{
| |
|
| |
|
| color:#003399;
| |
|
| |
| }
| |
|
| |
| .uttp-main h3{
| |
|
| |
| margin-top:18px;
| |
|
| |
| color:#444;
| |
|
| |
| border-bottom:1px solid #ddd;
| |
|
| |
| padding-bottom:4px;
| |
|
| |
| }
| |
|
| |
| .uttp-navigation{
| |
|
| |
| background:linear-gradient(#5f9dfd,#2b63c6);
| |
|
| |
| border-radius:4px;
| |
|
| |
| }
| |
|
| |
| .uttp-navigation a{
| |
|
| |
| padding:6px 12px;
| |
|
| |
| display:inline-block;
| |
|
| |
| }
| |
|
| |
| .uttp-navigation a:hover{
| |
|
| |
| background:rgba(255,255,255,.18);
| |
|
| |
| border-radius:3px;
| |
|
| |
| }
| |
| /* ===============================
| |
| YouTube Style Boxes
| |
| ================================ */
| |
|
| |
| .uttp-box{
| |
|
| |
| background:white;
| |
|
| |
| border:1px solid #b3b3b3;
| |
|
| |
| margin-bottom:15px;
| |
|
| |
| }
| |
|
| |
| .uttp-box h2{
| |
|
| |
| margin:0;
| |
|
| |
| padding:8px;
| |
|
| |
| font-size:15px;
| |
|
| |
| background:linear-gradient(#f7f7f7,#e4e4e4);
| |
|
| |
| border-bottom:1px solid #b3b3b3;
| |
|
| |
| }
| |
|
| |
| .uttp-box{
| |
|
| |
| padding:10px;
| |
|
| |
| }
| |
| .uttp-thumb{
| |
|
| |
| width:160px;
| |
|
| |
| text-align:center;
| |
|
| |
| padding:6px;
| |
|
| |
| }
| |
|
| |
| .uttp-thumb img{
| |
|
| |
| padding:4px;
| |
|
| |
| background:white;
| |
|
| |
| border:1px solid #999;
| |
|
| |
| box-shadow:0 1px 2px rgba(0,0,0,.2);
| |
|
| |
| }
| |
|
| |
| .uttp-thumb a{
| |
|
| |
| font-weight:bold;
| |
|
| |
| 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,
| |
| .page-Main_Page .toc{
| |
| display:none;
| |
| }
| |
|
| |
| /* ================================
| |
| Article Card
| |
| ================================ */
| |
|
| |
| /* ==========================================
| |
| YouTube 2007 Article Row
| |
| ========================================== */
| |
|
| |
|
| .uttp-video { | | .uttp-video { |
|
| |
|
| display:grid; | | display:grid; |
|
| |
| grid-template-columns:130px 1fr 120px; | | grid-template-columns:130px 1fr 120px; |
|
| |
| gap:10px; | | gap:10px; |
|
| |
|
| padding:8px 0; | | padding:10px 0; |
|
| |
|
| border-bottom:1px dotted #aaa; | | border-bottom:1px dotted #999999; |
|
| |
|
| } | | } |
|
| |
|
|
| |
|
| .uttp-video-thumb img {
| |
|
| |
|
| width:120px;
| | .uttp-video-thumb { |
|
| |
|
| height:90px; | | position:relative; |
|
| |
|
| }
| | width:120px; |
| | |
| | |
| .uttp-video-title {
| |
| | |
| font-size:14px; | |
| | |
| font-weight:bold;
| |
|
| |
|
| } | | } |
|
| |
|
|
| |
|
| .uttp-video-description {
| |
|
| |
|
| font-size:11px;
| | .uttp-video-thumb img { |
| | |
| line-height:14px;
| |
| | |
| }
| |
| | |
| | |
| .uttp-video-meta {
| |
| | |
| font-size:10px;
| |
| | |
| }
| |
| | |
| | |
| .uttp-video-right {
| |
| | |
| font-size:11px;
| |
| | |
| }
| |
| | |
| | |
| .uttp-video-views {
| |
| | |
| font-size:14px;
| |
| | |
| }
| |
| | |
| .uttp-stars{
| |
| | |
| color:#ff3300;
| |
| | |
| font-size:18px;
| |
| | |
| margin-bottom:8px;
| |
| | |
| }
| |
| | |
| .uttp-more a{
| |
| | |
| font-size:13px;
| |
| | |
| font-weight:bold;
| |
| | |
| color:#0033cc;
| |
| | |
| text-decoration:none;
| |
| | |
| }
| |
| | |
| /* =======================================
| |
| Tabs
| |
| ======================================= */
| |
| | |
| .uttp-tabs{
| |
| | |
| display:flex;
| |
| | |
| border-bottom:1px solid #ccc;
| |
| | |
| margin-bottom:15px;
| |
| | |
| }
| |
| | |
| .uttp-tab{
| |
| | |
| padding:8px 18px;
| |
| | |
| background:#f2f2f2;
| |
| | |
| border:1px solid #ccc;
| |
| | |
| border-bottom:none;
| |
| | |
| margin-right:3px;
| |
| | |
| font-size:13px;
| |
| | |
| font-weight:bold;
| |
| | |
| cursor:pointer;
| |
| | |
| }
| |
| | |
| .uttp-tab-active{
| |
| | |
| background:white;
| |
| | |
| border-top:3px solid #cc0000;
| |
| | |
| }
| |
| | |
| /* Small Thumbnail Strip */
| |
| | |
| .uttp-strip{
| |
| | |
| display:flex;
| |
| | |
| justify-content:space-between;
| |
| | |
| gap:15px;
| |
| | |
| margin-bottom:20px;
| |
| | |
| }
| |
| | |
| .uttp-small-thumb{
| |
| | |
| width:160px;
| |
| | |
| text-align:center;
| |
| | |
| }
| |
| | |
| .uttp-small-image{
| |
| | |
| position:relative;
| |
| | |
| }
| |
| | |
| .uttp-small-image img{
| |
| | |
| width:150px;
| |
| | |
| height:100px;
| |
| | |
| border:1px solid #777;
| |
| | |
| padding:2px;
| |
| | |
| background:white;
| |
| | |
| }
| |
| | |
| .uttp-small-badge{
| |
| | |
| position:absolute;
| |
| | |
| right:5px;
| |
| | |
| bottom:8px;
| |
| | |
| background:black;
| |
| | |
| color:white;
| |
| | |
| padding:2px 6px;
| |
| | |
| font-size:11px;
| |
| | |
| font-weight:bold;
| |
| | |
| }
| |
| | |
| .uttp-small-title{
| |
| | |
| margin-top:5px;
| |
| | |
| font-size:13px;
| |
| | |
| font-weight:bold;
| |
| | |
| }
| |
| /* =====================================
| |
| Promoted Articles
| |
| ===================================== */
| |
| | |
| .uttp-promoted{
| |
| | |
| display:flex;
| |
| | |
| justify-content:space-between;
| |
| | |
| gap:15px;
| |
| | |
| margin-bottom:25px;
| |
| | |
| }
| |
| | |
| .uttp-promo{
| |
| | |
| width:175px;
| |
| | |
| text-align:center;
| |
| | |
| }
| |
| | |
| .uttp-promo-image img{
| |
| | |
| width:170px;
| |
| | |
| height:110px;
| |
| | |
| border:1px solid #666;
| |
| | |
| background:#fff;
| |
| | |
| padding:2px;
| |
| | |
| }
| |
| | |
| .uttp-promo-title{
| |
| | |
| 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;
| |
| | |
| }
| |
| | |
| .uttp-promo-sub{
| |
| | |
| font-size:12px;
| |
| | |
| color:#666;
| |
| | |
| }
| |
| | |
| /*==========================
| |
| MAIN PAGE WIDTH
| |
| ===========================*/
| |
| | |
| #uttp-homepage{
| |
| | |
| width:100%;
| |
| | |
| display:flex;
| |
| | |
| justify-content:center;
| |
| | |
| margin-top:15px;
| |
| | |
| }
| |
| | |
| #uttp-main{
| |
| | |
| width:980px;
| |
| | |
| display:flex;
| |
| | |
| align-items:flex-start;
| |
| | |
| gap:25px;
| |
| | |
| }
| |
| | |
| #uttp-left{
| |
| | |
| flex:1;
| |
| | |
| min-width:700px;
| |
| | |
| }
| |
| | |
| #uttp-right{
| |
| | |
| width:250px;
| |
| | |
| flex-shrink:0;
| |
| | |
| }
| |
| body{
| |
| | |
| background:#ffffff;
| |
| | |
| font-family:Arial,Helvetica,sans-serif;
| |
| | |
| font-size:13px;
| |
| | |
| }
| |
| | |
| /*==============================
| |
| YouTube 2007 Featured Articles
| |
| ==============================*/
| |
| | |
| /*=========================================
| |
| YouTube 2007 Featured Article Card
| |
| =========================================*/
| |
| | |
| .uttp-video{
| |
| display:grid;
| |
| grid-template-columns:130px 1fr 150px;
| |
| gap:14px;
| |
| | |
| padding:12px 10px;
| |
| | |
| border-bottom:1px dotted #b7b7b7;
| |
| | |
| background:#fff;
| |
| | |
| min-height:110px;
| |
| }
| |
| | |
| .uttp-video-thumb{
| |
| | |
| position:relative;
| |
| | |
| width:120px;
| |
| | |
| }
| |
| | |
| .uttp-video-thumb img{ | |
|
| |
|
| width:120px; | | width:120px; |
|
| |
| height:90px; | | height:90px; |
|
| |
|
| border:1px solid #777; | | border:1px solid #777777; |
|
| |
|
| padding:2px;
| | } |
|
| |
|
| background:#fff;
| |
|
| |
|
| }
| |
|
| |
|
| .uttp-runtime{ | | .uttp-runtime { |
|
| |
|
| position:absolute; | | position:absolute; |
|
| |
|
| right:4px; | | bottom:3px; |
| | right:3px; |
|
| |
|
| bottom:4px;
| | background:black; |
| | | color:white; |
| background:#000; | |
| | |
| color:#fff; | |
|
| |
|
| font-size:10px; | | font-size:10px; |
| Line 850: |
Line 118: |
| padding:2px 4px; | | padding:2px 4px; |
|
| |
|
| font-weight:bold;
| | } |
|
| |
|
| }
| |
|
| |
|
| .uttp-video-main{
| |
|
| |
|
| display:flex;
| | .uttp-video-title { |
|
| |
|
| flex-direction:column; | | font-size:14px; |
| | font-weight:bold; |
|
| |
|
| } | | } |
|
| |
|
| .uttp-video-title{
| |
|
| |
|
| font-size:15px;
| |
|
| |
|
| font-weight:bold;
| | .uttp-video-title a { |
| | |
| margin-bottom:6px;
| |
| | |
| }
| |
| | |
| .uttp-video-title a{ | |
|
| |
|
| color:#0033cc; | | color:#0033cc; |
|
| |
| text-decoration:none; | | text-decoration:none; |
|
| |
|
| } | | } |
|
| |
|
| .uttp-video-title a:hover{
| |
|
| |
|
| text-decoration:underline;
| |
|
| |
|
| }
| | .uttp-video-description { |
| | |
| .uttp-video-description{ | |
|
| |
|
| font-size:12px; | | font-size:12px; |
|
| |
|
| line-height:18px;
| | margin-top:5px; |
| | |
| margin-bottom:8px; | |
|
| |
|
| } | | } |
|
| |
|
| .uttp-video-meta{
| |
|
| |
|
| font-size:11px;
| |
|
| |
|
| color:#666;
| | .uttp-video-meta { |
| | |
| line-height:16px;
| |
| | |
| }
| |
| | |
| .uttp-video-time{ | |
| | |
| margin-top:auto;
| |
|
| |
|
| font-size:11px; | | font-size:11px; |
|
| |
|
| color:#777; | | margin-top:8px; |
| | |
| }
| |
| | |
| .uttp-video-right{
| |
|
| |
|
| text-align:right; | | color:#555555; |
| | |
| font-size:11px;
| |
|
| |
|
| } | | } |
|
| |
|
| .uttp-video-views{
| |
|
| |
| font-size:22px;
| |
|
| |
|
| font-weight:bold;
| |
|
| |
|
| margin-bottom:8px;
| | .uttp-video-time { |
|
| |
|
| }
| | font-size:11px; |
|
| |
|
| .uttp-video-stars{
| | color:#777777; |
| | |
| color:#ff5500; | |
| | |
| font-size:16px;
| |
| | |
| margin-bottom:10px;
| |
|
| |
|
| } | | } |
|
| |
|
| .uttp-video-link a{
| |
|
| |
|
| color:#0033cc;
| |
|
| |
|
| text-decoration:none;
| | .uttp-video-right { |
|
| |
|
| font-weight:bold; | | text-align:right; |
|
| |
|
| }
| | font-size:12px; |
| | |
| .uttp-video-link a:hover{
| |
| | |
| text-decoration:underline; | |
|
| |
|
| } | | } |
|
| |
|
| .uttp-more a{
| |
|
| |
|
| font-weight:bold;
| |
|
| |
|
| font-size:13px;
| | .uttp-video-views { |
|
| |
|
| color:#0033cc;
| | font-size:14px; |
| | | font-weight:bold; |
| text-decoration:none;
| |
|
| |
|
| } | | } |
|
| |
|
| /*=========================================
| |
| Articles Being Read Right Now
| |
| =========================================*/
| |
|
| |
|
| .uttp-watching{
| |
|
| |
|
| display:flex;
| | .uttp-video-stars { |
|
| |
|
| justify-content:space-between;
| | color:#ff5500; |
|
| |
|
| gap:15px;
| | font-size:16px; |
|
| |
|
| margin-bottom:25px; | | margin:8px 0; |
|
| |
|
| } | | } |
|
| |
|
| .uttp-watch-card{
| |
|
| |
|
| width:150px;
| |
|
| |
|
| text-align:center;
| | /* ===================================== |
| | PROMOTED HORIZONTAL ROW |
| | ===================================== */ |
|
| |
|
| }
| |
|
| |
|
| .uttp-watch-image{ | | .uttp-promoted-grid { |
|
| |
|
| position:relative;
| | display:flex; |
|
| |
|
| }
| | gap:12px; |
| | |
| .uttp-watch-image img{
| |
| | |
| width:150px;
| |
| | |
| height:105px;
| |
| | |
| border:1px solid #777;
| |
| | |
| padding:2px;
| |
| | |
| background:white;
| |
|
| |
|
| } | | } |
|
| |
|
| .uttp-watch-badge{
| |
|
| |
|
| position:absolute;
| |
|
| |
|
| right:6px;
| | .uttp-promoted-card { |
|
| |
|
| bottom:6px;
| | width:130px; |
|
| |
|
| background:black;
| | text-align:center; |
| | |
| color:white;
| |
| | |
| padding:2px 5px;
| |
| | |
| font-size:11px;
| |
| | |
| font-weight:bold;
| |
|
| |
|
| } | | } |
|
| |
|
| .uttp-watch-title{
| |
|
| |
|
| margin-top:6px;
| |
|
| |
|
| font-size:13px;
| | .uttp-promoted-card img { |
|
| |
|
| font-weight:bold;
| | width:120px; |
|
| |
|
| }
| | height:90px; |
|
| |
|
| .uttp-watch-title a{
| | border:1px solid #777777; |
| | |
| text-decoration:none;
| |
| | |
| color:#0033cc;
| |
|
| |
|
| } | | } |
|
| |
|
| .uttp-watch-title a:hover{
| |
|
| |
|
| text-decoration:underline;
| |
|
| |
|
| }
| | .uttp-promoted-title { |
|
| |
|
| /*================================
| | font-size:11px; |
| Featured Articles Box
| |
| ================================*/
| |
|
| |
|
| .uttp-feature-box{
| | font-weight:bold; |
| | |
| width:100%;
| |
| | |
| border:1px solid #ccc;
| |
| | |
| background:white;
| |
| | |
| margin-bottom:20px;
| |
|
| |
|
| } | | } |
|
| |
|
|
| |
|
| .uttp-feature-header{
| |
|
| |
|
| background:#eeeeee;
| | .uttp-promoted-author { |
|
| |
|
| border-bottom:1px solid #ccc;
| | font-size:10px; |
|
| |
|
| font-size:16px;
| | color:#555555; |
| | |
| font-weight:bold;
| |
| | |
| padding:7px 10px;
| |
| | |
| color:#333; | |
|
| |
|
| } | | } |
|
| |
|
|
| |
|
| .uttp-feature-tabs{
| |
|
| |
|
| background:#f7f7f7;
| | /* ===================================== |
| | HOME PAGE TWO COLUMN |
| | ===================================== */ |
|
| |
|
| border-bottom:1px solid #ccc;
| |
|
| |
|
| padding:5px 10px;
| | .uttp-homepage { |
|
| |
|
| font-size:12px;
| | display:grid; |
|
| |
|
| }
| | grid-template-columns:1fr 280px; |
|
| |
|
| | | gap:15px; |
| .uttp-feature-tabs span{
| |
| | |
| display:inline-block;
| |
| | |
| padding:5px 12px;
| |
| | |
| margin-right:5px;
| |
| | |
| border:1px solid #ccc;
| |
| | |
| background:#ddd;
| |
| | |
| cursor:pointer;
| |
| | |
| }
| |
| | |
| | |
| .uttp-feature-tabs .uttp-tab-active{
| |
| | |
| background:white;
| |
| | |
| border-bottom:1px solid white;
| |
| | |
| font-weight:bold;
| |
|
| |
|
| } | | } |
|
| |
|
|
| |
|
| .uttp-feature-content{ | | .uttp-sidebar { |
| | |
| padding:0 10px;
| |
| | |
| }
| |
| | |
| /*================================
| |
| Promoted Article Horizontal Cards
| |
| ================================*/
| |
| | |
| .uttp-promoted-grid {
| |
| | |
| display:flex;
| |
| | |
| gap:12px;
| |
| | |
| flex-wrap:nowrap;
| |
|
| |
|
| overflow:hidden; | | border:1px solid #cccccc; |
|
| |
|
| padding:10px; | | padding:10px; |
|
| |
|
| }
| | background:#ffffff; |
| | |
| | |
| .uttp-promoted-card {
| |
| | |
| width:150px; | |
| | |
| flex:none;
| |
| | |
| text-align:center;
| |
| | |
| }
| |
| | |
| | |
| .uttp-promoted-card img {
| |
| | |
| width:120px;
| |
| | |
| height:90px;
| |
| | |
| border:1px solid #777;
| |
| | |
| }
| |
| | |
| | |
| .uttp-promoted-title {
| |
| | |
| font-size:11px;
| |
| | |
| font-weight:bold;
| |
| | |
| line-height:14px;
| |
| | |
| }
| |
| | |
| | |
| .uttp-promoted-author {
| |
| | |
| font-size:10px;
| |
| | |
| color:#555;
| |
|
| |
|
| } | | } |
/* =====================================
UTTP YouTube 2007 Style Homepage CSS
Base Layout
===================================== */
/* 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;
}