vanzhiganov/clipbucket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added : Less files

Browse source
This commit is contained in:
Arslan Hassan 2013-11-26 19:22:29 +00:00
parent b9853716a0
commit b98c99cd37
9 changed files with 824 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
upload/styles/cb_2013/theme/less/buttons.less Normal file
View file

156
upload/styles/cb_2013/theme/less/elements.less Normal file
View file

@ -0,0 +1,156 @@
/*---------------------------------------------------
LESS Elements 0.9
---------------------------------------------------
A set of useful LESS mixins
More info at: http://lesselements.com
---------------------------------------------------*/
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
background: @color;
background: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0, @start),
color-stop(1, @stop));
background: -ms-linear-gradient(bottom,
@start,
@stop);
background: -moz-linear-gradient(center bottom,
@start 0%,
@stop 100%);
background: -o-linear-gradient(@stop,
@start);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
background: @color;
background: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0, rgb(@start,@start,@start)),
color-stop(1, rgb(@stop,@stop,@stop)));
background: -ms-linear-gradient(bottom,
rgb(@start,@start,@start) 0%,
rgb(@stop,@stop,@stop) 100%);
background: -moz-linear-gradient(center bottom,
rgb(@start,@start,@start) 0%,
rgb(@stop,@stop,@stop) 100%);
background: -o-linear-gradient(rgb(@stop,@stop,@stop),
rgb(@start,@start,@start));
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
border-top: solid 1px @top-color;
border-left: solid 1px @left-color;
border-right: solid 1px @right-color;
border-bottom: solid 1px @bottom-color;
}
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
-webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}
.rounded(@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-moz-border-radius-topright: @topright;
-moz-border-radius-bottomright: @bottomright;
-moz-border-radius-bottomleft: @bottomleft;
-moz-border-radius-topleft: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
.background-clip(padding-box);
}
.opacity(@opacity: 0.5) {
-moz-opacity: @opacity;
-khtml-opacity: @opacity;
-webkit-opacity: @opacity;
opacity: @opacity;
@opperc: @opacity * 100;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
filter: ~"alpha(opacity=@{opperc})";
}
.transition-duration(@duration: 0.2s) {
-moz-transition-duration: @duration;
-webkit-transition-duration: @duration;
-o-transition-duration: @duration;
transition-duration: @duration;
}
.transform(...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-o-transform: @arguments;
-ms-transform: @arguments;
transform: @arguments;
}
.rotation(@deg:5deg){
.transform(rotate(@deg));
}
.scale(@ratio:1.5){
.transform(scale(@ratio));
}
.transition(@duration:0.2s, @ease:ease-out) {
-webkit-transition: all @duration @ease;
-moz-transition: all @duration @ease;
-o-transition: all @duration @ease;
transition: all @duration @ease;
}
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}
.box-shadow(@arguments) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.box-sizing(@sizing: border-box) {
-ms-box-sizing: @sizing;
-moz-box-sizing: @sizing;
-webkit-box-sizing: @sizing;
box-sizing: @sizing;
}
.user-select(@argument: none) {
-webkit-user-select: @argument;
-moz-user-select: @argument;
-ms-user-select: @argument;
user-select: @argument;
}
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
-moz-column-width: @colwidth;
-moz-column-count: @colcount;
-moz-column-gap: @colgap;
-moz-column-rule-color: @columnRuleColor;
-moz-column-rule-style: @columnRuleStyle;
-moz-column-rule-width: @columnRuleWidth;
-webkit-column-width: @colwidth;
-webkit-column-count: @colcount;
-webkit-column-gap: @colgap;
-webkit-column-rule-color: @columnRuleColor;
-webkit-column-rule-style: @columnRuleStyle;
-webkit-column-rule-width: @columnRuleWidth;
column-width: @colwidth;
column-count: @colcount;
column-gap: @colgap;
column-rule-color: @columnRuleColor;
column-rule-style: @columnRuleStyle;
column-rule-width: @columnRuleWidth;
}
.translate(@x:0, @y:0) {
.transform(translate(@x, @y));
}
.background-clip(@argument: padding-box) {
-moz-background-clip: @argument;
-webkit-background-clip: @argument;
background-clip: @argument;
}

48
upload/styles/cb_2013/theme/less/essentials.less Normal file
View file

@ -0,0 +1,48 @@
/* 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 }

21
upload/styles/cb_2013/theme/less/footer.less Normal file
View file

@ -0,0 +1,21 @@
#footer{
margin:auto;
ul{
maring:0px; padding:0px;
li{
display: inline-block;
margin-right:15px;
}
}
}
#container:after,
footer {
height: @footer-height;
}
footer {
.box-shadow(0px;0px;10px;rgba(0,0,0,0.2));
background: #fff;
}

0
upload/styles/cb_2013/theme/less/form.less Normal file
View file

106
upload/styles/cb_2013/theme/less/main.less Normal file
View file

@ -0,0 +1,106 @@
/**
* @author : Arslan Hassan (@arslancb), Fawaz Tahir (@fawazcb)
* @ClipBucket : 2.7
* @Theme Name : ClipBucket 2013 Fall
*/
@background : #e8e8e8;
@font-color : #000;
@link-color : #09c;
@font-family : "Roboto", "Segoe UI", "Helvetica neue",Helvetica, sans-serif;
@font-size : 14px;
@container-width : 1170px;
@box-border : 3px;
@btn-border : 3px;
@image-path : '../../images';
@logo-path : '@{image-path}/logo.png';
@logo-width:188px;
@logo-height:36px;
@border-color : #09c;
@footer-height : 60px;
body{
background-color: @background;
color : @font-color;
font-family: @font-family;
font-size:@font-size;
padding-top: 70px;
}
img {max-width:100%; }
html,body{ height: 100%; }
#container{
//width : @container-width;
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -@footer-height;
position: relative;
}
#container:after {
content: "";
display: block;
}
.item { width: 25%; background-color: #05e;}
.item.w2 { width: 50%; background-color: #05e;}
.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.bold{font-weight: bold}
.test_bg{
background-color: #aaa;
&.bg1{
background-color: #356635;
}
}
.no-padding{padding: 0px;}
.absolute{position: absolute}
.relative{position: relative}
@import 'essentials.less';
@import 'elements.less';
/* Importing Navigation CSS */
@import 'nav.less';
/* Importing Form CSS */
@import 'form.less';
/* Importing Footer */
@import 'footer.less';
/* Importing Components */
@import 'objects.less';
/* Importing video css */
@import 'video.less';

97
upload/styles/cb_2013/theme/less/nav.less Normal file
View file

@ -0,0 +1,97 @@
.navbar-container{
// max-width : @container-width;
margin : auto;
.navbar-search{
width: 300px !important;
line-height:37px;
margin-left: 20px;
}
.cb-logo
{
background: url(@logo-path) no-repeat;
width: @logo-width;
height: @logo-height;
text-indent: -500000px;
display: inline-block;
margin-top:9px;
}
@media (min-width:768px)
{
.main-nav{margin-left: 25px;}
.myaccount-dd a{
padding-top: 6px;
}
}
.navbar-nav > li > a{
line-height: 31px;
}
.nav-login-btns,
.nav-login-dd,
.nav-collapse-btn,
//.navbar-sm-search,
.navbar-search{display:none}
@media(min-width:1145px)
{
.nav-login-btns,.navbar-search{
display:inline-block !important;
}
}
@media(min-width:768px) and ( max-width:1144px)
{
.nav-login-dd{
display:inline-block;
li
{
.dropdown-menu
{
max-width: 900px;
min-width: 300px;
margin-left: 20px;
padding: 10px;
line-height: 1.5;
}
}
}
}
@media(max-width:767px)
{
.nav-collapse-btn{display: inline-block}
}
@media(min-width:767px)
{
.navbar-sm-search{display: none !important}
.navbar-sm-login-links{display: none !important}
}
.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));
}
.navbar-default .navbar-nav>li>a{color:@link-color; outline: none;}

395
upload/styles/cb_2013/theme/less/objects.less Normal file
View file

@ -0,0 +1,395 @@
.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));
.border-radius(3px);
border:1px solid #ddd;
margin-bottom : 20px;
.cb_item_container
{
padding:10px;
.item_title
{
font-size:15px;
font-weight:700;
}
.item_user,
.item_text,
.item_date
{
font-size : 13px;
}
.item_user{color : #999}
.item_date{}
.item_text{margin:5px 0px;}
.item_date{font-weight : 700}
}
img {width:100%}
&.w2{}
&.v2{
img {height:416px}
}
&.s2{
img {height:121px}
}
&.s3{
img {height:90px}
}
}
.cb-box
{
font-size : 16px;
background-color:#fff;
.box-shadow(1px;2px;3px;rgba(0,0,0,0.2));
.border-radius(3px);
border:1px solid #ddd;
padding : 10px;
h3{margin-top:0px}
&.signup-box,
&.pad-bottom
{
padding: 20px;
margin-bottom : 50px;
}
&.pad-bottom-sm
{
margin-bottom : 25px;
}
.no-pad
{
margin: -10px;
margin-bottom:10px ;
}
}
.cb-item-title-container
{
margin-top:20px;
position: relative;
min-height: 110px;
padding-left: 75px;
line-height:25px;
.relative;
.cb-item-thumb
{
.absolute;
max-width: 65px;
margin-right: 6px;
left:0px;
img
{
border: 2px solid #06c;
}
}
.cb-item-date,
.cb-item-user
{
&a{ color:#777; }
font-size:15px;
margin-top:-3px;
display: inline-block; margin-right: 6px;
}
.cb-item-title
{
padding-top: 8px;
font-size: 27px;
font-weight: bold;
color:#3d3d3d;
}
}
.cb-item-desc-container
{
.cb-item-social-icon
{
a{color:#fff; text-decoration: none; cursor: pointer}
&.twitter
{
background-color: #598dca;
}
&.facebook
{
background-color: #3a589b;
}
&.googlep
{
background-color: #d6492f;
}
&.pinterest
{
background-color: #bf0000;
}
&:last{margin-right: 0px;}
color:#fff;
padding: 3px 7px;
font-size: 20px;
margin-right: 3px;
display:inline-block;
width: 32px;
}
.nav-tabs>li>a
{
.border-radius(2px,0px,0px,2px);
padding: 4px 15px;
font-size: 14px;
border-bottom:0px;
&:hover{
border-bottom:0px;
}
}
.nav
{
margin-bottom:10px;
}
.cb-item-description
{
position: relative;
.cb-item-grad,
{
position: absolute;
height: 15px;
width: 100%;
bottom: 0px;
opacity: 0.2;
}
}
}
.cb-item-grad,
.readmore-js-toggle
{
}
.cb-item-rating
{
@media(min-width:768px)
{
.absolute;
}
@media(max-width:767px)
{
margin-top:10px;
margin-bottom:10px;
}
right: -11px;
top : 5px;
font-size: 15px;
color : #fff;
font-weight: bold;
.cb-rating-span{
padding: 0px 20px 0px 5px;
width: 110px;
display: block;
cursor: pointer;
@media(max-width:767px)
{
width : 49%;
display: inline-block;
}
.relative;
&.cb-rating-up
{
@media(min-width:768px)
{
.border-radius(0px,0px,0px,3px);
}
background-color: #50b21f;
border:1px solid #50b21f;
&:hover{border:1px solid #3a8315;}
.cb-rating-digit{
color : #50b21f;
}
margin-bottom:1px;
}
&.cb-rating-down{
@media(min-width:768px)
{
.border-radius(0px,0px,3px,0px);
}
&:hover{border:1px solid #ae3c27;}
background-color: #d6492f;
border:1px solid #d6492f;
color : #fff;
.cb-rating-digit{
color : #d6492f;
}
}
.cb-rating-digit
{
@media(min-width:768px)
{
left: -30px;
}
@media(max-width:767px)
{
right: 10px;
color:#fff !important;
}
.absolute;
}
}
}
.cb-item-add-comment
{
.sm-btn{
margin-left:15px;
margin-right:15px;
}
}
.cb-item-comments-container
{
.spam
{
display: block;
margin-left: 70px;
background-color: #eee;
padding: 5px;
color: #aaa;
border-radius: 3px;
}
.cb-item-comment
{
position: relative;
padding-left: 70px;
margin-top: 20px;
min-height: 60px;
.cb-comment-author-img
{
position: absolute;
left: 0px;
top:0px;
max-width: 60px;
}
.cb-comment-author
{
font-weight:bold;
position: relative;
.cb-comment-date
{
font-size:13px;
color:#999;
}
.cb-comment-rating-cont
{
position: absolute;
right: 12px;
top: 3px;
@media(max-width:767px)
{
position: static;
}
color:#fff;
.comment-rating
{
color:#356635;
}
.comment-like
{
background-color: #50b21f;
padding:0px 5px;
cursor: pointer;
}
.comment-dislike
{
background-color: #d6492f;
padding:0px 5px;
cursor: pointer;
}
}
}
.cb-comment-text
{
margin-bottom:10px;
padding-right:40px;
margin-top:10px;
}
.cb-comment-actions
{
font-size:13px;
}
}
}

1
upload/styles/cb_2013/theme/less/video.less Normal file
View file

@ -0,0 +1 @@
.video_player{height: inherit}