261 lines
9.7 KiB
CSS
261 lines
9.7 KiB
CSS
/**
|
|
* @author : Arslan, Fawaz
|
|
* @Script : ClipBucket
|
|
* @Version : v3.0
|
|
* @Since : 2012
|
|
* @Rev : $REV$
|
|
*/
|
|
|
|
header{
|
|
padding-top: 10px;
|
|
}
|
|
|
|
header .header-top{position: relative; height: 55px}
|
|
header .header-top-right{position: absolute; right: 3px; display: inline-block;
|
|
top: 5px}
|
|
|
|
.logo-container{
|
|
padding-bottom: 10px;
|
|
position: absolute;
|
|
left: 0px;
|
|
}
|
|
|
|
footer{margin-top: 15px}
|
|
|
|
.container{width:1100px}
|
|
|
|
|
|
.bold{font-weight: bold}
|
|
|
|
.inlineblock{display: inline-block}
|
|
.inline{display:inline}
|
|
.block{display: block}
|
|
.display-none{display: none}
|
|
|
|
.relative {position: relative}
|
|
.absolute {position: absolute}
|
|
|
|
.bottom{bottom:0px}
|
|
.top{top:0px}
|
|
.left{left:0px}
|
|
.right{right:0px}
|
|
|
|
.valignTop{vertical-align: top}
|
|
.valignMid{vertical-align: middle}
|
|
|
|
.spanauto{width: auto}
|
|
.span100{width: 100px}
|
|
.span700{width: 700px}
|
|
.span650{width: 650px}
|
|
.span770{width: 770px}
|
|
.span734{width: 734px}
|
|
.span336{width: 336px}
|
|
.span300{width: 300px}
|
|
.span100per{width: 100%}
|
|
|
|
.width75{width: 75px}
|
|
.width100{width: 100px}
|
|
.width150{width: 150px}
|
|
.width200{width: 200px}
|
|
|
|
.height5{height: 5px}
|
|
.height10{height: 10px}
|
|
.height15{height: 15px}
|
|
.height20{height: 20px}
|
|
.height60{height: 60px}
|
|
.height100perc{height: 100%}
|
|
|
|
.marginR10{margin-right: 10px}
|
|
.marginL10{margin-left: 10px}
|
|
.marginR5{margin-right: 5px}
|
|
.marginL5{margin-left: 5px}
|
|
.margin0{margin: 0px;}
|
|
|
|
.padding0{padding: 0px}
|
|
|
|
.moveL{float: left}
|
|
.moveR{float: right}
|
|
|
|
|
|
.video-details-shadow{background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.12)));
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 100%);
|
|
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 100%);
|
|
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 100%);
|
|
background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1f000000',GradientType=0 );
|
|
; bottom: 0px; width: 100%; height:10px}
|
|
|
|
/* Icons */
|
|
.icon-hard-disk {background-position: -0px -144px;}
|
|
.icon-news {background-position: -24px -144px;}
|
|
.icon-bell {background-position: -48px -144px;}
|
|
.icon-popup {background-position: -72px -144px;}
|
|
.icon-like {background-position: -96px -144px;}
|
|
.icon-dislike {background-position: -120px -144px;}
|
|
.icon-thumb-right {background-position: -144px -144px;}
|
|
.icon-thumb-left {background-position: -168px -144px;}
|
|
.icon-thumb-up {background-position: -192px -144px;}
|
|
.icon-thumb-down {background-position: -216px -144px;}
|
|
.icon-right {background-position: -240px -144px;}
|
|
.icon-left {background-position: -264px -144px;}
|
|
.icon-up {background-position: -288px -144px;}
|
|
.icon-down {background-position: -312px -144px;}
|
|
|
|
|
|
|
|
|
|
/* V3 ClipBucket Custom icons */
|
|
.icon-stats {background-position: -0px -0px;}
|
|
.icon-globe {background-position: -24px -0px;}
|
|
.icon-keys {background-position: -48px -0px;}
|
|
.icon-reply {background-position: -72px -0px;}
|
|
.icon-groups {background-position: -96px -0px;}
|
|
.icon-add-user {background-position: -120px -0px;}
|
|
.icon-remove-user {background-position: -144px -0px;}
|
|
.icon-toggle {background-position: -0px -0px; width: 17px; height: 17px}
|
|
/* For inverting Toggle */
|
|
.toggle-invert{background-position: -24px 0px}
|
|
|
|
.icon-v3 {
|
|
background-image: url("../images/v3icons.png");
|
|
}
|
|
.icon-v3-white {
|
|
background-image: url("../images/v3icons-white.png");
|
|
}
|
|
.icon-set{
|
|
background-image:url("../images/iconset.png");
|
|
|
|
}
|
|
|
|
|
|
|
|
/* V3 Progress Bars */
|
|
.progress-rating {
|
|
background-color: #cc0000;
|
|
height: 5px;
|
|
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
|
|
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
|
|
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
|
|
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
|
|
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
|
|
}
|
|
|
|
/* Comments */
|
|
.comment{margin-top: 10px; margin-bottom: 10px}
|
|
.comment .comment-text{margin-left: 10px}
|
|
.comment-textarea{margin-left: 10px !important; width: 650px}
|
|
.comment-options{display: none}
|
|
|
|
/* Author Box */
|
|
.author-box-content{width: 220px}
|
|
|
|
|
|
/* Login and Registeration Modal box */
|
|
.login-modal-left{width: 249px; border-right: 1px solid #ccc; padding-right: 15px}
|
|
.login-modal-right{width: 250px; margin-left: 15px; padding-top: 10px}
|
|
|
|
.modal-username,.modal-password{width: 240px}
|
|
.terms-text{font-size: 10px; color: #666}
|
|
|
|
/* Categories */
|
|
.categories-nav{width:255px }
|
|
.categories-nav ul{margin: 0px; padding: 0px}
|
|
.categories-nav ul li{margin: 0px; padding: 0px; list-style: none; font-size: 13px;
|
|
padding:8px 0px 8px 15px;
|
|
border-bottom: 1px solid #d8d8d8; border-top: 1px solid #fff}
|
|
|
|
.categories-nav ul > li{background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
|
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.06)));
|
|
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%);
|
|
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%);
|
|
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%);
|
|
background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0f000000',GradientType=1 );
|
|
border-left: 5px solid #fff;
|
|
}
|
|
|
|
.categories-nav ul > li.active{border-left: 5px solid #06c}
|
|
|
|
.categories-nav ul > li ol{background-image: url(../images/gradients/categories-child.png); background-repeat: repeat-x; margin: 8px 0px -8px -15px;
|
|
background-position: 0px 1px; border-top: 1px solid #d8d8d8; padding: 7px 0px 8px 0px;}
|
|
.categories-nav ul > li ol li{background-color:#fafafa}
|
|
.categories-nav ul > li ol > li{padding-left: 35px; border-bottom: 0px;}
|
|
.categories-nav ul > li ol ul{background: none;}
|
|
.categories-nav ul > li ol ul li{background:none; border: none; font-size: 11px; padding: 3px 0px }
|
|
.categories-nav ul > li .icon-toggle{right: 10px; cursor: pointer}
|
|
.categories-nav ul > li a{color: #000; }
|
|
|
|
.sidebar-categories{float: left; width: 255px; margin-right: 25px}
|
|
.videos-container{float:left; width: 820px}
|
|
.cb-widget{margin-bottom: 15px}
|
|
|
|
/* Videos CSS */
|
|
.video-box{width: 190px; float: left; margin-right: 20px; }
|
|
.video-box .video-thumb img{width: 100%; height: 120px;}
|
|
.video-info-cont{height: 80px; margin-bottom: 20px}
|
|
.video-info-cont .title a{font-size: 12px; color: #333; text-decoration: none; font-weight: bold;
|
|
}
|
|
.video-info-cont .title {line-height:14px; margin: 4px 0px 3px}
|
|
|
|
.video-info{font-size: 12px; color: #666; width: 100%}
|
|
|
|
.rating-text{font-size: 12px;}
|
|
.rating-green{color: #006600}
|
|
.rating-red{color: #ed0000}
|
|
|
|
.video-box .video-thumb .duration{position: absolute; left: 5px; bottom: 5px;
|
|
width: 35px; height: 15px; line-height: 15px;
|
|
background-image: url("../images/duration-bg.png");
|
|
background-repeat: no-repeat;
|
|
color: #fff; font-size: 10px; text-align: center; font-weight: bold; text-shadow: 1px 1px 0px #000}
|
|
|
|
|
|
.loading_pointer {display: none; vertical-align: middle}
|
|
|
|
|
|
.add-playlist-box{background-color: #fff; max-height: 200px; overflow: auto}
|
|
.add-playlist-list{margin: 5px; padding: 4px; margin-bottom: 10px}
|
|
.add-playlist-list li{margin: 0px; padding: 0px;
|
|
float: left;width: 100px; list-style: none}
|
|
|
|
.add-playlist-list li.title{width: 330px; }
|
|
.add-playlist-list li.privacy{width: 80px}
|
|
.add-playlist-list li.loader{width: 20px}
|
|
|
|
.add-playlist-list-ul:hover{background-color: #333; color:#fff; cursor: pointer}
|
|
|
|
.add-playlist-list li{background-color: transparent}
|
|
|
|
/* Account */
|
|
.account-left{width: 220px; margin-right: 30px; float: left}
|
|
.account-left .well{padding: 10px 0px}
|
|
|
|
.account-right{width: 850px; float: left}
|
|
.account-right h2 .label{vertical-align: middle}
|
|
|
|
.account-heading{position: relative}
|
|
.account-controls-left{width: 45%; float:left}
|
|
.account-controls-right{width: 45%; float:right}
|
|
|
|
.playlist-list{margin: 0px; padding: 0px;}
|
|
.playlist-list > li{margin: 0px; list-style: none; float: left; margin-right: 10px;
|
|
height: 120px}
|
|
|
|
|
|
.playlist-list > .thumb{display: block;width: 190px; }
|
|
.playlist-thumb{position: relative}
|
|
.playlist-thumb img{width: 160px; height: 100px; border: 1px solid #fff;
|
|
position: absolute;}
|
|
|
|
.playlist-list .pltitle{font-size:13px; color:#000; font-weight: bold;}
|
|
.playlist-list .seperator{margin: 0px 8px}
|
|
.plinfo{width: 500px}
|
|
.playlist-list .pldesc{margin-top: 5px; color: #666; font-size: 11px}
|
|
.playlist-list .subinfo{font-size: 11px; color: #666}
|
|
|
|
.video-options{right: 5px; bottom: 5px;}
|
|
.video-options .btn{padding: 0px 2px; line-height: normal}
|