From 26d24d3fce6200e2ec5b3d7e8f307d8cb5ff87f0 Mon Sep 17 00:00:00 2001 From: umaircb Date: Thu, 27 Mar 2014 05:13:48 +0000 Subject: [PATCH] added --- upload/styles/cb_2014/theme/css/channel.css | 1046 +++++++++++++++++++ 1 file changed, 1046 insertions(+) create mode 100644 upload/styles/cb_2014/theme/css/channel.css diff --git a/upload/styles/cb_2014/theme/css/channel.css b/upload/styles/cb_2014/theme/css/channel.css new file mode 100644 index 00000000..feaaf644 --- /dev/null +++ b/upload/styles/cb_2014/theme/css/channel.css @@ -0,0 +1,1046 @@ +/** + * @author : Arslan Hassan (@arslancb), Fawaz Tahir (@fawazcb) + * @ClipBucket : 2.7 + * @Theme Name : ClipBucket 2013 Fall + */ +body { + background-color: #e8e8e8; + color: #000000; + font-family: "Roboto", "Segoe UI", "Helvetica neue", Helvetica, sans-serif; + font-size: 14px; + padding-top: 70px; +} +img { + max-width: 100%; +} +html, +body { + height: 100%; +} +#container { + min-height: 100%; + height: auto !important; + height: 100%; + /* Negative indent footer by it's height */ + margin: 0 auto -60px; + position: relative; +} +#container:after { + content: ""; + display: block; +} +.item { + width: 25%; + background-color: #05e; +} +.item.w2 { + width: 50%; + background-color: #05e; +} +.bold { + font-weight: bold; +} +.test_bg { + background-color: #aaa; +} +.test_bg.bg1 { + background-color: #356635; +} +.no-padding { + padding: 0px; +} +.absolute { + position: absolute; +} +.relative { + position: relative; +} +/* Margins */ +.nm { + margin: 0px; +} +.mxs { + margin: 3px; +} +.ms { + margin: 5px; +} +.mm { + margin: 10px; +} +.ml { + margin: 18px; +} +.mxl { + margin: 25px; +} +.mtxs { + margin-top: 3px; +} +.mts { + margin-top: 5px; +} +.mtm { + margin-top: 10px; +} +.mtl { + margin-top: 18px; +} +.mtxl { + margin-top: 25px; +} +.mrxs { + margin-right: 3px; +} +.mrs { + margin-right: 5px; +} +.mrm { + margin-right: 10px; +} +.mrl { + margin-right: 18px; +} +.mrxl { + margin-right: 25px; +} +.mbxs { + margin-bottom: 3px; +} +.mbs { + margin-bottom: 5px !important; +} +.mbm { + margin-bottom: 10px !important; +} +.mbl { + margin-bottom: 18px; +} +.mbxl { + margin-bottom: 25px; +} +.mlxs { + margin-left: 3px; +} +.mls { + margin-left: 5px; +} +.mlm { + margin-left: 10px; +} +.mll { + margin-left: 18px; +} +.mlxl { + margin-right: 25px; +} +/* Positions */ +.posrxs { + right: 0px; +} +.posrs { + right: 3px; +} +.posrm { + right: 5px; +} +.posr { + right: 10px; +} +.posrl { + right: 15px; +} +.postxs { + top: 0px; +} +.posts { + top: 3px; +} +.postm { + top: 5px; +} +.post { + top: 10px; +} +.postl { + top: 15px; +} +.postxl { + top: 20px; +} +.postxxl { + top: 30px; +} +.postxxxl { + top: 50px; +} +/* Invert Margins */ +.imxs { + margin: -3px; +} +.ims { + margin: -5px; +} +.imm { + margin: -10px; +} +.iml { + margin: -18px; +} +.imxl { + margin: -25px; +} +.imtxs { + margin-top: -3px; +} +.imts { + margin-top: -5px; +} +.imtm { + margin-top: -10px; +} +.imtl { + margin-top: -18px; +} +.imtxl { + margin-top: -25px; +} +.imrxs { + margin-right: -3px; +} +.imrs { + margin-right: -5px; +} +.imrm { + margin-right: -10px; +} +.imrl { + margin-right: -18px; +} +.imrxl { + margin-right: -25px; +} +.imbxs { + margin-bottom: -3px; +} +.imbs { + margin-bottom: -5px !important; +} +.imbm { + margin-bottom: -10px; +} +.imbl { + margin-bottom: -18px; +} +.imbxl { + margin-bottom: -25px; +} +.imlxs { + margin-left: -3px; +} +.imls { + margin-left: -5px; +} +.imlm { + margin-left: -10px !important; +} +.imll { + margin-left: -18px; +} +.imlxl { + margin-right: -25px; +} +/* Paddings */ +.np { + padding: 0px; +} +.pxs { + padding: 3px; +} +.ps { + padding: 5px; +} +.pm { + padding: 10px; +} +.pl { + padding: 18px; +} +.pxl { + padding: 25px; +} +.p8 { + padding: 8px; +} +.ptxs { + padding-top: 3px; +} +.pts { + padding-top: 5px; +} +.ptm { + padding-top: 10px; +} +.ptl { + padding-top: 18px; +} +.ptxl { + padding-top: 25px; +} +.prxs { + padding-right: 3px; +} +.prs { + padding-right: 5px; +} +.prm { + padding-right: 10px; +} +.prl { + padding-right: 18px; +} +.prxl { + padding-right: 25px; +} +.pbxs { + padding-bottom: 3px; +} +.pbs { + padding-bottom: 5px !important; +} +.pbm { + padding-bottom: 10px !important; +} +.pbl { + padding-bottom: 18px; +} +.pbxl { + padding-bottom: 25px; +} +.plxs { + padding-left: 3px; +} +.pls { + padding-left: 5px; +} +.plm { + padding-left: 10px !important; +} +.pll { + padding-left: 18px; +} +.plxl { + padding-right: 25px; +} +.pl15 { + padding-left: 15px; +} +.pr15 { + padding-right: 15px; +} +/* Borders */ +.bc-bfb { + border-color: #bfbfbf; +} +.bc-inh { + border-color: inherit; +} +.bws { + border-width: 1px; +} +.bwinh { + border-width: inherit; +} +.bss { + border-style: solid; +} +.bsdo { + border-style: dotted; +} +.bsda { + border-style: dashed; +} +.bsdou { + border-style: double; +} +.bsinh { + border-style: inherit; +} +.bsins { + border-style: inset; +} +/* Fonts | Weight */ +.fwb { + font-weight: bold; +} +.fwn { + font-weight: normal; +} +.fwbb { + font-weight: bolder; +} +.fwl { + font-weight: lighter; +} +/* Fonts | Size */ +.fss { + font-size: 11px !important; +} +.fsn { + font-size: 12px !important; +} +.fsxn { + font-size: 13px !important; +} +.fsm { + font-size: 14px !important; +} +.fsxm { + font-size: 16px !important; +} +.fsxm2 { + font-size: 18px !important; +} +.fsl { + font-size: 22px !important; +} +.fsxl { + font-size: 26px !important; +} +.fsxl2 { + font-size: 30px !important; +} +/* Text | Transform */ +.ttu { + text-transform: uppercase; +} +.ttl { + text-transform: lowercase; +} +.ttn { + text-transform: none; +} +.ttinh { + text-transform: inherit; +} +.tover { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +/* Text | Decoration */ +.tdn { + text-decoration: none !important; +} +/*--------------------------------------------------- + LESS Elements 0.9 + --------------------------------------------------- + A set of useful LESS mixins + More info at: http://lesselements.com + ---------------------------------------------------*/ +/* Importing Navigation CSS */ +.navbar-container { + margin: auto; +} +.navbar-container .navbar-search { + width: 300px !important; + line-height: 37px; + margin-left: 20px; +} +.navbar-container .cb-logo { + background: url('../../images/logo.png') no-repeat; + width: 188px; + height: 36px; + text-indent: -500000px; + display: inline-block; + margin-top: 9px; +} +@media (min-width: 768px) { + .navbar-container .main-nav { + margin-left: 25px; + } + .navbar-container .myaccount-dd a { + padding-top: 6px; + } +} +.navbar-container .navbar-nav > li > a { + line-height: 31px; +} +.navbar-container .nav-login-btns, +.navbar-container .nav-login-dd, +.navbar-container .nav-collapse-btn, +.navbar-container .navbar-search { + display: none; +} +@media (min-width: 1145px) { + .navbar-container .nav-login-btns, + .navbar-container .navbar-search { + display: inline-block !important; + } +} +@media (min-width: 768px) and (max-width: 1144px) { + .navbar-container .nav-login-dd { + display: inline-block; + } + .navbar-container .nav-login-dd li .dropdown-menu { + max-width: 900px; + min-width: 300px; + margin-left: 20px; + padding: 10px; + line-height: 1.5; + } +} +@media (max-width: 767px) { + .navbar-container .nav-collapse-btn { + display: inline-block; + } +} +@media (min-width: 767px) { + .navbar-container .navbar-sm-search { + display: none !important; + } + .navbar-container .navbar-sm-login-links { + display: none !important; + } +} +.navbar-container .nav-toggle { + line-height: 12px; + padding-left: 15px; + padding-right: 15px; +} +.navbar { + line-height: 60px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); +} +.navbar-default .navbar-nav > li > a { + color: #0099cc; + outline: none; +} +/* Importing Form CSS */ +/* Importing Footer */ +#footer { + margin: auto; +} +#footer ul { + maring: 0px; + padding: 0px; +} +#footer ul li { + display: inline-block; + margin-right: 15px; +} +#container:after, +footer { + height: 60px; +} +footer { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + background: #fff; +} +/* Importing Components */ +.readmore-js-toggle { + display: block; + text-align: center; +} +.cb_item { + font-size: 16px; + background-color: #fff; + box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); + -webkit-border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ddd; + margin-bottom: 20px; +} +.cb_item .cb_item_container { + padding: 10px; +} +.cb_item .cb_item_container .item_title { + font-size: 15px; + font-weight: 700; +} +.cb_item .cb_item_container .item_user, +.cb_item .cb_item_container .item_text, +.cb_item .cb_item_container .item_date { + font-size: 13px; +} +.cb_item .cb_item_container .item_user { + color: #999999; +} +.cb_item .cb_item_container .item_text { + margin: 5px 0px; +} +.cb_item .cb_item_container .item_date { + font-weight: 700; +} +.cb_item img { + width: 100%; +} +.cb_item.v2 img { + height: 416px; +} +.cb_item.s2 img { + height: 121px; +} +.cb_item.s3 img { + height: 90px; +} +.cb-box { + font-size: 16px; + background-color: #fff; + box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); + -webkit-border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #ddd; + padding: 10px; +} +.cb-box h3 { + margin-top: 0px; +} +.cb-box.signup-box, +.cb-box.pad-bottom { + padding: 20px; + margin-bottom: 50px; +} +.cb-box.pad-bottom-sm { + margin-bottom: 25px; +} +.cb-box .no-pad { + margin: -10px; + margin-bottom: 10px ; +} +.cb-item-title-container { + margin-top: 20px; + min-height: 110px; + padding-left: 75px; + line-height: 25px; + position: relative; +} +.cb-item-title-container .cb-item-thumb { + position: absolute; + max-width: 65px; + margin-right: 6px; + left: 0px; +} +.cb-item-title-container .cb-item-thumb img { + border: 2px solid #06c; +} +.cb-item-title-container .cb-item-date, +.cb-item-title-container .cb-item-user { + font-size: 15px; + margin-top: -3px; + display: inline-block; + margin-right: 6px; +} +.cb-item-title-container .cb-item-datea, +.cb-item-title-container .cb-item-usera { + color: #777; +} +.cb-item-title-container .cb-item-title { + padding-top: 8px; + font-size: 27px; + font-weight: bold; + color: #3d3d3d; +} +.cb-item-desc-container .cb-item-social-icon { + color: #fff; + padding: 3px 7px; + font-size: 20px; + margin-right: 3px; + display: inline-block; + width: 32px; +} +.cb-item-desc-container .cb-item-social-icon a { + color: #fff; + text-decoration: none; + cursor: pointer; +} +.cb-item-desc-container .cb-item-social-icon.twitter { + background-color: #598dca; +} +.cb-item-desc-container .cb-item-social-icon.facebook { + background-color: #3a589b; +} +.cb-item-desc-container .cb-item-social-icon.googlep { + background-color: #d6492f; +} +.cb-item-desc-container .cb-item-social-icon.pinterest { + background-color: #bf0000; +} +.cb-item-desc-container .cb-item-social-icon:last { + margin-right: 0px; +} +.cb-item-desc-container .nav-tabs > li > a { + -webkit-border-top-right-radius: 2px; + -webkit-border-bottom-right-radius: 0px; + -webkit-border-bottom-left-radius: 0px; + -webkit-border-top-left-radius: 2px; + -moz-border-radius-topright: 2px; + -moz-border-radius-bottomright: 0px; + -moz-border-radius-bottomleft: 0px; + -moz-border-radius-topleft: 2px; + border-top-right-radius: 2px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; + border-top-left-radius: 2px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + padding: 4px 15px; + font-size: 14px; + border-bottom: 0px; +} +.cb-item-desc-container .nav-tabs > li > a:hover { + border-bottom: 0px; +} +.cb-item-desc-container .nav { + margin-bottom: 10px; +} +.cb-item-desc-container .cb-item-description { + position: relative; +} +.cb-item-desc-container .cb-item-description .cb-item-grad { + position: absolute; + height: 15px; + width: 100%; + bottom: 0px; + opacity: 0.2; +} +.cb-item-rating { + right: -11px; + top: 5px; + font-size: 15px; + color: #fff; + font-weight: bold; +} +@media (min-width: 768px) { + .cb-item-rating { + position: absolute; + } +} +@media (max-width: 767px) { + .cb-item-rating { + margin-top: 10px; + margin-bottom: 10px; + } +} +.cb-item-rating .cb-rating-span { + padding: 0px 20px 0px 5px; + width: 110px; + display: block; + cursor: pointer; + position: relative; +} +@media (max-width: 767px) { + .cb-item-rating .cb-rating-span { + width: 49%; + display: inline-block; + } +} +.cb-item-rating .cb-rating-span.cb-rating-up { + background-color: #50b21f; + border: 1px solid #50b21f; + margin-bottom: 1px; +} +@media (min-width: 768px) { + .cb-item-rating .cb-rating-span.cb-rating-up { + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0px; + -webkit-border-bottom-left-radius: 0px; + -webkit-border-top-left-radius: 3px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0px; + -moz-border-radius-bottomleft: 0px; + -moz-border-radius-topleft: 3px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; + border-top-left-radius: 3px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + } +} +.cb-item-rating .cb-rating-span.cb-rating-up:hover { + border: 1px solid #3a8315; +} +.cb-item-rating .cb-rating-span.cb-rating-up .cb-rating-digit { + color: #50b21f; +} +.cb-item-rating .cb-rating-span.cb-rating-down { + background-color: #d6492f; + border: 1px solid #d6492f; + color: #fff; +} +@media (min-width: 768px) { + .cb-item-rating .cb-rating-span.cb-rating-down { + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0px; + -webkit-border-bottom-left-radius: 3px; + -webkit-border-top-left-radius: 0px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0px; + -moz-border-radius-bottomleft: 3px; + -moz-border-radius-topleft: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 3px; + border-top-left-radius: 0px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + } +} +.cb-item-rating .cb-rating-span.cb-rating-down:hover { + border: 1px solid #ae3c27; +} +.cb-item-rating .cb-rating-span.cb-rating-down .cb-rating-digit { + color: #d6492f; +} +.cb-item-rating .cb-rating-span .cb-rating-digit { + position: absolute; +} +@media (min-width: 768px) { + .cb-item-rating .cb-rating-span .cb-rating-digit { + left: -30px; + } +} +@media (max-width: 767px) { + .cb-item-rating .cb-rating-span .cb-rating-digit { + right: 10px; + color: #fff !important; + } +} +.cb-item-add-comment .sm-btn { + margin-left: 15px; + margin-right: 15px; +} +.cb-item-comments-container .cb-item-comment { + position: relative; + padding-left: 70px; + margin-top: 20px; + min-height: 60px; +} +.cb-item-comments-container .cb-item-comment .cb-comment-author-img { + position: absolute; + left: 0px; + top: 0px; +} +.cb-item-comments-container .cb-item-comment .cb-comment-author { + font-weight: bold; + position: relative; +} +.cb-item-comments-container .cb-item-comment .cb-comment-author .cb-comment-date { + font-size: 13px; + color: #999; +} +.cb-item-comments-container .cb-item-comment .cb-comment-author .cb-comment-rating-cont { + position: absolute; + right: 12px; + top: 3px; + color: #fff; +} +@media (max-width: 767px) { + .cb-item-comments-container .cb-item-comment .cb-comment-author .cb-comment-rating-cont { + position: static; + } +} +.cb-item-comments-container .cb-item-comment .cb-comment-author .cb-comment-rating-cont .comment-rating { + color: #356635; +} +.cb-item-comments-container .cb-item-comment .cb-comment-author .cb-comment-rating-cont .comment-like { + background-color: #50b21f; + padding: 0px 5px; + cursor: pointer; +} +.cb-item-comments-container .cb-item-comment .cb-comment-author .cb-comment-rating-cont .comment-dislike { + background-color: #d6492f; + padding: 0px 5px; + cursor: pointer; +} +.cb-item-comments-container .cb-item-comment .cb-comment-text { + margin-bottom: 10px; + padding-right: 40px; + margin-top: 10px; +} +.cb-item-comments-container .cb-item-comment .cb-comment-actions { + font-size: 13px; +} +/* Importing video css */ +.video_player { + height: inherit; +} + + +.relative1 { + position: relative; +} +.relative2 { + position: relative; + top: 78px; + left: 2px; + background-color: #000000; + width: 140px; + border: 5px solid; + border-color: #ffffff; +} +.channel { + padding-left: 200px; +} +.cname { + color: #ffffff; + padding-top: 30px; +} +.padding33 { + padding-top: 100px; +} +.padding34 { + padding-top: 90px; + padding-left: 55px; +} +.padding35 { + padding-left: 27px; +} + +.btng { + background-color: #000000; +} + + +.padding36 { + padding-left: 40px; + padding-top: 40px; + font-size: 12px; +} + +.padding37 { + padding-left: 140px; +} + + +.new +{ + color: #ffffff; + filter:alpha(opacity=60); IE + -moz-opacity:0.6; Mozilla + opacity: 0.4; CSS3 + + +} + +.font { + font-size: 15px; + font-family: sans-serif; +} + +.font1 { + font-size: 10px; + padding-right: 5px; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; +} +.font2 { + font-size: 10px; + padding-left: 20px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + + + + + +.content{margin:0px; width:550px; height:500px; padding:0px; overflow:auto; background:#ffffff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;} +.content p:nth-child(even){color:#ffffff; font-family:Georgia,serif; font-size:17px; font-style:italic;} + + + +.new1 { + opacity: 0.7; + border: 0px; + color: #808080; + font: bold; +} + +.duration1 { + font-size: 10px; + position: absolute; + top: 4px; + left: 135px; + right: 100px; +} + +.margin { + margin-top: -10px; + margin-bottom: -20px; + font-size: 15px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.channels { + margin-left: -31px; + font-size: 12px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #000000; +} +.channels1 { + margin-left: -31px; +} + +.hr { display: block; height: 1px; + border: 0; border-top: 1px solid #ccc; + margin: 1em 0; padding: 0; } + +.border { + border: 1px solid; + border-color: black; +} + +.color { + background-color: #696969; + color: #ffffff; + opacity: 0.8; + font-size: 13px; + font-family: "Roboto", "Segoe UI", "Helvetica neue", Helvetica, sans-serif; +} + +.white { + color: #ffffff; +} + +.pchannels { + margin-right: -15px; + margin-left: -15px; + margin-top: -2px; +} \ No newline at end of file