401 lines
No EOL
12 KiB
SCSS
401 lines
No EOL
12 KiB
SCSS
/* variables */
|
|
$sprite : url(../images/sprite.png) no-repeat;
|
|
$black:#000;
|
|
$white:#fff;
|
|
$search-txt:#a8a8a8;
|
|
$bg-theme:#17181a;
|
|
$grey-txt:#757575;
|
|
$lt-grey:#f9f9f9;
|
|
$green: #4caf50;
|
|
$sidebar-color:#1a1e21;
|
|
$orange:#ffa000;
|
|
$dark-btn:#17181a;
|
|
$header-btn:#262727;
|
|
$dropdown-bg:#424242;
|
|
$opacity:0.6;
|
|
$blue:#0080b4;
|
|
$body-bg:#eee;
|
|
$block-color:#333;
|
|
$heading-color:#666;
|
|
$search-toggle:#999;
|
|
$base-font:'Source Sans Pro', sans-serif;
|
|
$base-color:$black;
|
|
$font-icon: 'icomoon';
|
|
$bordercolor:#d9d9d9;
|
|
$default-border:1px solid $bordercolor;
|
|
$fb-color:#2b4b90;
|
|
$tw-color:#1c95d0;
|
|
$gplus-color:#d34332;
|
|
$linkedin-color:#007bb5;
|
|
$com-color:#2d2d2d;
|
|
$probox-bg: #f8f8f8;
|
|
$input-bg: #f6f6f6;
|
|
$error-color:#f44336;
|
|
/**/
|
|
@mixin overlaybg($color, $opacity){
|
|
background: rgba($color, $opacity);
|
|
}
|
|
@mixin txtinput(){
|
|
color:$base-color;
|
|
background: $input-bg;
|
|
border-color: $bordercolor;
|
|
font-size: 15px;
|
|
line-height: 28px;
|
|
height: 42px;
|
|
/* placeholder input styles */
|
|
input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */
|
|
color: lighten($base-color,74%);
|
|
}
|
|
input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color: lighten($base-color,74%);
|
|
}
|
|
input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: lighten($base-color,74%);
|
|
opacity: 1;
|
|
}
|
|
input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
color: lighten($base-color,74%);
|
|
}
|
|
}
|
|
|
|
@mixin gradient-bg(){
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+0,0.59+43,0.55+49,0.26+70,0.12+82,0.05+90,0.01+100 */
|
|
background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.59) 43%, rgba(0,0,0,0.55) 49%, rgba(0,0,0,0.26) 70%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0.01) 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.59) 43%,rgba(0,0,0,0.55) 49%,rgba(0,0,0,0.26) 70%,rgba(0,0,0,0.12) 82%,rgba(0,0,0,0.05) 90%,rgba(0,0,0,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.59) 43%,rgba(0,0,0,0.55) 49%,rgba(0,0,0,0.26) 70%,rgba(0,0,0,0.12) 82%,rgba(0,0,0,0.05) 90%,rgba(0,0,0,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#03000000',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
@mixin gradientbottom-bg(){
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.01+0,0.02+8,0.09+18,0.23+28,0.43+41,0.57+58,0.69+78,0.76+100 */
|
|
background: -moz-linear-gradient(top, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.02) 8%, rgba(0,0,0,0.09) 18%, rgba(0,0,0,0.23) 28%, rgba(0,0,0,0.43) 41%, rgba(0,0,0,0.57) 58%, rgba(0,0,0,0.69) 78%, rgba(0,0,0,0.76) 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.02) 8%,rgba(0,0,0,0.09) 18%,rgba(0,0,0,0.23) 28%,rgba(0,0,0,0.43) 41%,rgba(0,0,0,0.57) 58%,rgba(0,0,0,0.69) 78%,rgba(0,0,0,0.76) 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.02) 8%,rgba(0,0,0,0.09) 18%,rgba(0,0,0,0.23) 28%,rgba(0,0,0,0.43) 41%,rgba(0,0,0,0.57) 58%,rgba(0,0,0,0.69) 78%,rgba(0,0,0,0.76) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03000000', endColorstr='#c2000000',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
@mixin after(){
|
|
display: block;
|
|
clear: both;
|
|
content: "";
|
|
}
|
|
@mixin list-style(){
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
@mixin transition-property($transitionProperty){
|
|
-webkit-transition-property: $transitionProperty;
|
|
-moz-transition-property: $transitionProperty;
|
|
-ms-transition-property: $transitionProperty;
|
|
-o-transition-property: $transitionProperty;
|
|
transition-property: $transitionProperty;
|
|
}
|
|
@mixin transition($transition) {
|
|
-webkit-transition: $transition;
|
|
-moz-transition: $transition;
|
|
-ms-transition: $transition;
|
|
-o-transition: $transition;
|
|
}
|
|
@mixin boxsizing(){
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
@mixin text-replacement(){
|
|
text-indent:-9999px;
|
|
overflow: hidden;
|
|
}
|
|
@mixin pro-box-mix(){
|
|
background: $probox-bg;
|
|
border:1px solid #e1e1e1;
|
|
}
|
|
|
|
@mixin img-thumb(){
|
|
.row{
|
|
margin: 0 -10px;
|
|
}
|
|
.img-holder{
|
|
padding: 0 10px;
|
|
margin: 0 auto 20px;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
@mixin vertical-top(){
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
@mixin vertical-middle(){
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@mixin vertical-bottom(){
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
/**/
|
|
@mixin text-shadow ($string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
|
|
text-shadow: $string;
|
|
}
|
|
@mixin box-shadow ($string) {
|
|
-webkit-box-shadow: $string;
|
|
-moz-box-shadow: $string;
|
|
box-shadow: $string;
|
|
}
|
|
@mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
|
|
-webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
|
|
-moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
|
|
box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
|
|
}
|
|
@mixin inner-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
|
|
-webkit-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
|
|
-moz-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
|
|
box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
|
|
}
|
|
@mixin gradient ($startColor: #eee, $endColor: white) {
|
|
background-color: $startColor;
|
|
background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
|
|
background: -webkit-linear-gradient(top, $startColor, $endColor);
|
|
background: -moz-linear-gradient(top, $startColor, $endColor);
|
|
background: -ms-linear-gradient(top, $startColor, $endColor);
|
|
background: -o-linear-gradient(top, $startColor, $endColor);
|
|
}
|
|
@mixin horizontal-gradient ($startColor: #eee, $endColor: white) {
|
|
background-color: $startColor;
|
|
background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
|
|
background-image: -webkit-linear-gradient(left, $startColor, $endColor);
|
|
background-image: -moz-linear-gradient(left, $startColor, $endColor);
|
|
background-image: -ms-linear-gradient(left, $startColor, $endColor);
|
|
background-image: -o-linear-gradient(left, $startColor, $endColor);
|
|
}
|
|
@mixin myanimation ($name, $duration, $ease) {
|
|
-webkit-animation: $name $duration $ease;
|
|
-moz-animation: $name $duration $ease;
|
|
-ms-animation: $name $duration $ease;
|
|
-o-animation: $name $duration $ease;
|
|
animation: $name $duration $ease;
|
|
}
|
|
|
|
@mixin transform($string){
|
|
-webkit-transform: $string;
|
|
-moz-transform: $string;
|
|
-ms-transform: $string;
|
|
-o-transform: $string;
|
|
}
|
|
@mixin scale ($factor) {
|
|
-webkit-transform: scale($factor);
|
|
-moz-transform: scale($factor);
|
|
-ms-transform: scale($factor);
|
|
-o-transform: scale($factor);
|
|
}
|
|
@mixin rotate ($deg) {
|
|
-webkit-transform: rotate($deg);
|
|
-moz-transform: rotate($deg);
|
|
-ms-transform: rotate($deg);
|
|
-o-transform: rotate($deg);
|
|
}
|
|
@mixin skew ($deg, $deg2) {
|
|
-webkit-transform: skew($deg, $deg2);
|
|
-moz-transform: skew($deg, $deg2);
|
|
-ms-transform: skew($deg, $deg2);
|
|
-o-transform: skew($deg, $deg2);
|
|
}
|
|
@mixin translate ($x, $y:0) {
|
|
-webkit-transform: translate($x, $y);
|
|
-moz-transform: translate($x, $y);
|
|
-ms-transform: translate($x, $y);
|
|
-o-transform: translate($x, $y);
|
|
}
|
|
@mixin translate3d ($x, $y: 0, $z: 0) {
|
|
-webkit-transform: translate3d($x, $y, $z);
|
|
-moz-transform: translate3d($x, $y, $z);
|
|
-ms-transform: translate3d($x, $y, $z);
|
|
-o-transform: translate3d($x, $y, $z);
|
|
}
|
|
@mixin perspective ($value: 1000) {
|
|
-webkit-perspective: $value;
|
|
-moz-perspective: $value;
|
|
-ms-perspective: $value;
|
|
perspective: $value;
|
|
}
|
|
@mixin transform-origin ($x:center, $y:center) {
|
|
-webkit-transform-origin: $x $y;
|
|
-moz-transform-origin: $x $y;
|
|
-ms-transform-origin: $x $y;
|
|
-o-transform-origin: $x $y;
|
|
}
|
|
/* buttons */
|
|
.btn-default{
|
|
background:darken($lt-grey,5%);
|
|
border-color: darken($lt-grey,5%);
|
|
font-weight: 400;
|
|
color: $black;
|
|
&:hover,
|
|
&:active{
|
|
background:darken($lt-grey,5%);
|
|
border-color: darken($lt-grey,5%);
|
|
}
|
|
}
|
|
.btn-ghost{
|
|
background: $white;
|
|
border: 2px solid $black;
|
|
padding: 5px 10px;
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
line-height: 21px;
|
|
color:$black;
|
|
&.btn-lg{
|
|
font-size: 18px;
|
|
line-height: 36px;
|
|
}
|
|
&:hover,
|
|
&:active{
|
|
background:$blue;
|
|
border-color:$blue;
|
|
color:$white;
|
|
}
|
|
}
|
|
.btn-primary{
|
|
background:$blue;
|
|
border-color:$blue;
|
|
font-weight: 400;
|
|
color:$white;
|
|
&:hover,
|
|
&:active{
|
|
background:$blue;
|
|
border-color:$blue;
|
|
color:$white;
|
|
}
|
|
}
|
|
.btn-success{
|
|
background:$green;
|
|
border-color:$green;
|
|
font-weight: 400;
|
|
color:$white;
|
|
&:hover,
|
|
&:active{
|
|
background:$green;
|
|
border-color:$green;
|
|
color:$white;
|
|
}
|
|
}
|
|
.btn-black{
|
|
background: lighten($black,13%);
|
|
border-color:lighten($black,13%);
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color:$white;
|
|
&:hover,
|
|
&:active{
|
|
background: lighten($black,13%);
|
|
border-color:lighten($black,13%);
|
|
color:$white;
|
|
}
|
|
}
|
|
/* form elements */
|
|
.form-control{
|
|
@include txtinput();
|
|
}
|
|
/* error messages */
|
|
/* error animations */
|
|
@mixin error-animation ($name:bounce, $duration:800ms, $ease:ease-out){
|
|
-webkit-animation: $name $duration $ease;
|
|
-moz-animation: $name $duration $ease;
|
|
-ms-animation: $name $duration $ease;
|
|
-o-animation: $name $duration $ease;
|
|
animation: $name $duration $ease;
|
|
}
|
|
@mixin animatetop(){
|
|
0% {
|
|
transform:translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
transform:translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
15% {
|
|
transform:translateY(0);
|
|
padding-bottom: 5px;
|
|
}
|
|
30% {
|
|
transform:translateY(-50%);
|
|
}
|
|
40% {
|
|
transform:translateY(0%);
|
|
padding-bottom: 6px;
|
|
}
|
|
50% {
|
|
transform:translateY(-30%);
|
|
}
|
|
70% {
|
|
transform:translateY(0%);
|
|
padding-bottom: 7px;
|
|
}
|
|
80% {
|
|
transform:translateY(-15%);
|
|
}
|
|
90% {
|
|
transform:translateY(0%);
|
|
padding-bottom: 8px;
|
|
}
|
|
95% {
|
|
transform:translateY(-7%);
|
|
}
|
|
97% {
|
|
transform:translateY(0%);
|
|
padding-bottom: 9px;
|
|
}
|
|
99% {
|
|
transform:translateY(-3%);
|
|
}
|
|
100% {
|
|
transform:translateY(0);
|
|
padding-bottom: 9px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes bounce {
|
|
@include animatetop();
|
|
}
|
|
|
|
@-moz-keyframes bounce {
|
|
@include animatetop();
|
|
}
|
|
@-o-keyframes bounce {
|
|
@include animatetop();
|
|
}
|
|
@keyframes bounce {
|
|
@include animatetop();
|
|
}
|
|
.alert-msg-holder {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
max-width: 1170px !important;
|
|
}
|
|
.alert-ajax {
|
|
@include error-animation();
|
|
}
|
|
/* sprite */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
|
|
.playlists-dropdown .item_playlist .playlist-thumb .date-time,
|
|
.playlists-dropdown .playlist-header .close-playlists,
|
|
.headerIcon.active.playlist-icon a,
|
|
.headerIcon.active.channels-icon a,
|
|
.headerIcon.active.video-icon a,
|
|
.headerIcon.playlist-icon a,
|
|
.headerIcon.channels-icon a,
|
|
.headerIcon.video-icon a,
|
|
.navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting,
|
|
.navbar-default .right-menu.navbar-nav > li > a.btn-upload,
|
|
.ch-playlists .playlist-thumb .date-time,
|
|
.rating .like-dislike a.btn-dislike i,
|
|
.rating .like-dislike a.btn-like i{
|
|
// Reference the @2x Sprite
|
|
background-image:url('../images/sprite@2x.png') !important;
|
|
/* Translate the @2x sprite's dimensions back to 1x */
|
|
background-size: 60px 4400px !important;
|
|
}
|
|
} |