зеркало из https://github.com/mozilla/CSOL-site.git
First pass on styles
This commit is contained in:
Cory Shaw
Родитель
3345351b5b
Коммит
453f9afa85
|
|
@ -30,13 +30,13 @@
|
|||
}
|
||||
.navbar .navbar-search .search-query {
|
||||
margin-bottom: 3px;
|
||||
border: 1px solid #97310e;
|
||||
border: 1px solid #1a1a1a;
|
||||
}
|
||||
@media (max-width: 979px) {
|
||||
.navbar .nav-collapse .nav li > a {
|
||||
color: #ffffff;
|
||||
border-left: 0px solid #dd4814;
|
||||
border-right: 0px solid #dd4814;
|
||||
border-left: 0px solid #738967;
|
||||
border-right: 0px solid #738967;
|
||||
}
|
||||
.navbar .nav-collapse .nav li > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
|
|
@ -44,8 +44,8 @@
|
|||
}
|
||||
.navbar .nav-collapse .navbar-form,
|
||||
.navbar .nav-collapse .navbar-search {
|
||||
border-top: 0px solid #dd4814;
|
||||
border-bottom: 0px solid #dd4814;
|
||||
border-top: 0px solid #738967;
|
||||
border-bottom: 0px solid #738967;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -63,17 +63,17 @@
|
|||
.btn-primary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #e86537;
|
||||
background-image: -moz-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef784e), to(#dd4814));
|
||||
background-image: -webkit-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: -o-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: linear-gradient(to bottom, #ef784e, #dd4814);
|
||||
background-color: #8b9e80;
|
||||
background-image: -moz-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9aac91), to(#738967));
|
||||
background-image: -webkit-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: -o-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: linear-gradient(to bottom, #9aac91, #738967);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffef784e', endColorstr='#ffdd4814', GradientType=0);
|
||||
border-color: #dd4814 #dd4814 #97310e;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9aac91', endColorstr='#ff738967', GradientType=0);
|
||||
border-color: #738967 #738967 #4e5d46;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
*background-color: #dd4814;
|
||||
*background-color: #738967;
|
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
|
|
@ -85,12 +85,12 @@
|
|||
.btn-primary.disabled,
|
||||
.btn-primary[disabled] {
|
||||
color: #ffffff;
|
||||
background-color: #dd4814;
|
||||
*background-color: #c64012;
|
||||
background-color: #738967;
|
||||
*background-color: #677a5c;
|
||||
}
|
||||
.btn-primary:active,
|
||||
.btn-primary.active {
|
||||
background-color: #ae3910 \9;
|
||||
background-color: #5b6c51 \9;
|
||||
}
|
||||
.btn-warning {
|
||||
color: #ffffff;
|
||||
|
|
@ -341,12 +341,12 @@ body {
|
|||
background-color: #ffffff;
|
||||
}
|
||||
a {
|
||||
color: #dd4814;
|
||||
color: #738967;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #97310e;
|
||||
color: #4e5d46;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.img-rounded {
|
||||
|
|
@ -2597,7 +2597,7 @@ table th[class*="span"],
|
|||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
color: #dd4814;
|
||||
color: #738967;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown-menu > li > a:hover,
|
||||
|
|
@ -2606,14 +2606,14 @@ table th[class*="span"],
|
|||
.dropdown-submenu:focus > a {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
background-color: #d44513;
|
||||
background-image: -moz-linear-gradient(top, #dd4814, #c64012);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dd4814), to(#c64012));
|
||||
background-image: -webkit-linear-gradient(top, #dd4814, #c64012);
|
||||
background-image: -o-linear-gradient(top, #dd4814, #c64012);
|
||||
background-image: linear-gradient(to bottom, #dd4814, #c64012);
|
||||
background-color: #6e8363;
|
||||
background-image: -moz-linear-gradient(top, #738967, #677a5c);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#738967), to(#677a5c));
|
||||
background-image: -webkit-linear-gradient(top, #738967, #677a5c);
|
||||
background-image: -o-linear-gradient(top, #738967, #677a5c);
|
||||
background-image: linear-gradient(to bottom, #738967, #677a5c);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd4814', endColorstr='#ffc64012', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff738967', endColorstr='#ff677a5c', GradientType=0);
|
||||
}
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
|
|
@ -2621,14 +2621,14 @@ table th[class*="span"],
|
|||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: #d44513;
|
||||
background-image: -moz-linear-gradient(top, #dd4814, #c64012);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dd4814), to(#c64012));
|
||||
background-image: -webkit-linear-gradient(top, #dd4814, #c64012);
|
||||
background-image: -o-linear-gradient(top, #dd4814, #c64012);
|
||||
background-image: linear-gradient(to bottom, #dd4814, #c64012);
|
||||
background-color: #6e8363;
|
||||
background-image: -moz-linear-gradient(top, #738967, #677a5c);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#738967), to(#677a5c));
|
||||
background-image: -webkit-linear-gradient(top, #738967, #677a5c);
|
||||
background-image: -o-linear-gradient(top, #738967, #677a5c);
|
||||
background-image: linear-gradient(to bottom, #738967, #677a5c);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd4814', endColorstr='#ffc64012', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff738967', endColorstr='#ff677a5c', GradientType=0);
|
||||
}
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
|
|
@ -2953,17 +2953,17 @@ input[type="button"].btn-block {
|
|||
.btn-primary {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #dd5c14;
|
||||
background-image: -moz-linear-gradient(top, #dd4814, #dd7a14);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dd4814), to(#dd7a14));
|
||||
background-image: -webkit-linear-gradient(top, #dd4814, #dd7a14);
|
||||
background-image: -o-linear-gradient(top, #dd4814, #dd7a14);
|
||||
background-image: linear-gradient(to bottom, #dd4814, #dd7a14);
|
||||
background-color: #708967;
|
||||
background-image: -moz-linear-gradient(top, #738967, #6b8967);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#738967), to(#6b8967));
|
||||
background-image: -webkit-linear-gradient(top, #738967, #6b8967);
|
||||
background-image: -o-linear-gradient(top, #738967, #6b8967);
|
||||
background-image: linear-gradient(to bottom, #738967, #6b8967);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd4814', endColorstr='#ffdd7a14', GradientType=0);
|
||||
border-color: #dd7a14 #dd7a14 #97530e;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff738967', endColorstr='#ff6b8967', GradientType=0);
|
||||
border-color: #6b8967 #6b8967 #495d46;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
*background-color: #dd7a14;
|
||||
*background-color: #6b8967;
|
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
|
|
@ -2975,27 +2975,27 @@ input[type="button"].btn-block {
|
|||
.btn-primary.disabled,
|
||||
.btn-primary[disabled] {
|
||||
color: #ffffff;
|
||||
background-color: #dd7a14;
|
||||
*background-color: #c66d12;
|
||||
background-color: #6b8967;
|
||||
*background-color: #5f7a5c;
|
||||
}
|
||||
.btn-primary:active,
|
||||
.btn-primary.active {
|
||||
background-color: #ae6010 \9;
|
||||
background-color: #546c51 \9;
|
||||
}
|
||||
.btn-warning {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #e86537;
|
||||
background-image: -moz-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef784e), to(#dd4814));
|
||||
background-image: -webkit-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: -o-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: linear-gradient(to bottom, #ef784e, #dd4814);
|
||||
background-color: #8b9e80;
|
||||
background-image: -moz-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9aac91), to(#738967));
|
||||
background-image: -webkit-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: -o-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: linear-gradient(to bottom, #9aac91, #738967);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffef784e', endColorstr='#ffdd4814', GradientType=0);
|
||||
border-color: #dd4814 #dd4814 #97310e;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9aac91', endColorstr='#ff738967', GradientType=0);
|
||||
border-color: #738967 #738967 #4e5d46;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
*background-color: #dd4814;
|
||||
*background-color: #738967;
|
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
|
|
@ -3007,12 +3007,12 @@ input[type="button"].btn-block {
|
|||
.btn-warning.disabled,
|
||||
.btn-warning[disabled] {
|
||||
color: #ffffff;
|
||||
background-color: #dd4814;
|
||||
*background-color: #c64012;
|
||||
background-color: #738967;
|
||||
*background-color: #677a5c;
|
||||
}
|
||||
.btn-warning:active,
|
||||
.btn-warning.active {
|
||||
background-color: #ae3910 \9;
|
||||
background-color: #5b6c51 \9;
|
||||
}
|
||||
.btn-danger {
|
||||
color: #ffffff;
|
||||
|
|
@ -3179,14 +3179,14 @@ input[type="submit"].btn.btn-mini {
|
|||
.btn-link {
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
color: #dd4814;
|
||||
color: #738967;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-link:hover,
|
||||
.btn-link:focus {
|
||||
color: #97310e;
|
||||
color: #4e5d46;
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -3327,10 +3327,10 @@ input[type="submit"].btn.btn-mini {
|
|||
background-color: #e6e6e6;
|
||||
}
|
||||
.btn-group.open .btn-primary.dropdown-toggle {
|
||||
background-color: #dd7a14;
|
||||
background-color: #6b8967;
|
||||
}
|
||||
.btn-group.open .btn-warning.dropdown-toggle {
|
||||
background-color: #dd4814;
|
||||
background-color: #738967;
|
||||
}
|
||||
.btn-group.open .btn-danger.dropdown-toggle {
|
||||
background-color: #bd362f;
|
||||
|
|
@ -3522,7 +3522,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.nav-list > .active > a:focus {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
||||
background-color: #dd4814;
|
||||
background-color: #738967;
|
||||
}
|
||||
.nav-list [class^="icon-"],
|
||||
.nav-list [class*=" icon-"] {
|
||||
|
|
@ -3605,7 +3605,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.nav-pills > .active > a:hover,
|
||||
.nav-pills > .active > a:focus {
|
||||
color: #ffffff;
|
||||
background-color: #dd4814;
|
||||
background-color: #738967;
|
||||
}
|
||||
.nav-stacked > li {
|
||||
float: none;
|
||||
|
|
@ -3660,14 +3660,14 @@ input[type="submit"].btn.btn-mini {
|
|||
border-radius: 6px;
|
||||
}
|
||||
.nav .dropdown-toggle .caret {
|
||||
border-top-color: #dd4814;
|
||||
border-bottom-color: #dd4814;
|
||||
border-top-color: #738967;
|
||||
border-bottom-color: #738967;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.nav .dropdown-toggle:hover .caret,
|
||||
.nav .dropdown-toggle:focus .caret {
|
||||
border-top-color: #97310e;
|
||||
border-bottom-color: #97310e;
|
||||
border-top-color: #4e5d46;
|
||||
border-bottom-color: #4e5d46;
|
||||
}
|
||||
/* move down carets for tabs */
|
||||
.nav-tabs .dropdown-toggle .caret {
|
||||
|
|
@ -3827,15 +3827,15 @@ input[type="submit"].btn.btn-mini {
|
|||
min-height: 40px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
background-color: #d44413;
|
||||
background-image: -moz-linear-gradient(top, #ce4213, #dd4814);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ce4213), to(#dd4814));
|
||||
background-image: -webkit-linear-gradient(top, #ce4213, #dd4814);
|
||||
background-image: -o-linear-gradient(top, #ce4213, #dd4814);
|
||||
background-image: linear-gradient(to bottom, #ce4213, #dd4814);
|
||||
background-color: #404041;
|
||||
background-image: -moz-linear-gradient(top, #404041, #404041);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#404041), to(#404041));
|
||||
background-image: -webkit-linear-gradient(top, #404041, #404041);
|
||||
background-image: -o-linear-gradient(top, #404041, #404041);
|
||||
background-image: linear-gradient(to bottom, #404041, #404041);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce4213', endColorstr='#ffdd4814', GradientType=0);
|
||||
border: 1px solid #c64012;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff404041', endColorstr='#ff404041', GradientType=0);
|
||||
border: 1px solid #333334;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -3868,7 +3868,7 @@ input[type="submit"].btn.btn-mini {
|
|||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 0 #ce4213;
|
||||
text-shadow: 0 1px 0 #404041;
|
||||
}
|
||||
.navbar .brand:hover,
|
||||
.navbar .brand:focus {
|
||||
|
|
@ -3889,8 +3889,8 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar .divider-vertical {
|
||||
height: 40px;
|
||||
margin: 0 9px;
|
||||
border-left: 1px solid #dd4814;
|
||||
border-right: 1px solid #ce4213;
|
||||
border-left: 1px solid #404041;
|
||||
border-right: 1px solid #404041;
|
||||
}
|
||||
.navbar .btn,
|
||||
.navbar .btn-group {
|
||||
|
|
@ -4032,14 +4032,14 @@ input[type="submit"].btn.btn-mini {
|
|||
padding: 10px 15px 10px;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 #ce4213;
|
||||
text-shadow: 0 1px 0 #404041;
|
||||
}
|
||||
.navbar .nav .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover {
|
||||
background-color: #a5360f;
|
||||
background-color: #222222;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -4048,7 +4048,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar .nav > .active > a:focus {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #a5360f;
|
||||
background-color: #222222;
|
||||
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
|
||||
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
|
||||
|
|
@ -4061,17 +4061,17 @@ input[type="submit"].btn.btn-mini {
|
|||
margin-right: 5px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #bd3d11;
|
||||
background-image: -moz-linear-gradient(top, #b73b11, #c64012);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b73b11), to(#c64012));
|
||||
background-image: -webkit-linear-gradient(top, #b73b11, #c64012);
|
||||
background-image: -o-linear-gradient(top, #b73b11, #c64012);
|
||||
background-image: linear-gradient(to bottom, #b73b11, #c64012);
|
||||
background-color: #333334;
|
||||
background-image: -moz-linear-gradient(top, #333334, #333334);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333334), to(#333334));
|
||||
background-image: -webkit-linear-gradient(top, #333334, #333334);
|
||||
background-image: -o-linear-gradient(top, #333334, #333334);
|
||||
background-image: linear-gradient(to bottom, #333334, #333334);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb73b11', endColorstr='#ffc64012', GradientType=0);
|
||||
border-color: #c64012 #c64012 #7f2a0c;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333334', endColorstr='#ff333334', GradientType=0);
|
||||
border-color: #333334 #333334 #0d0d0e;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
*background-color: #c64012;
|
||||
*background-color: #333334;
|
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
|
|
@ -4086,12 +4086,12 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar .btn-navbar.disabled,
|
||||
.navbar .btn-navbar[disabled] {
|
||||
color: #ffffff;
|
||||
background-color: #c64012;
|
||||
*background-color: #ae3910;
|
||||
background-color: #333334;
|
||||
*background-color: #272727;
|
||||
}
|
||||
.navbar .btn-navbar:active,
|
||||
.navbar .btn-navbar.active {
|
||||
background-color: #97310e \9;
|
||||
background-color: #1a1a1a \9;
|
||||
}
|
||||
.navbar .btn-navbar .icon-bar {
|
||||
display: block;
|
||||
|
|
@ -4150,7 +4150,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar .nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background-color: #a5360f;
|
||||
background-color: #222222;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navbar .nav li.dropdown > .dropdown-toggle .caret {
|
||||
|
|
@ -4872,7 +4872,7 @@ input[type="submit"].btn.btn-mini {
|
|||
}
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus {
|
||||
border-color: #dd4814;
|
||||
border-color: #738967;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
|
||||
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
|
||||
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
|
||||
|
|
@ -4963,11 +4963,11 @@ a.badge:focus {
|
|||
}
|
||||
.label-warning,
|
||||
.badge-warning {
|
||||
background-color: #dd4814;
|
||||
background-color: #738967;
|
||||
}
|
||||
.label-warning[href],
|
||||
.badge-warning[href] {
|
||||
background-color: #ae3910;
|
||||
background-color: #5b6c51;
|
||||
}
|
||||
.label-success,
|
||||
.badge-success {
|
||||
|
|
@ -5174,18 +5174,18 @@ a.badge:focus {
|
|||
}
|
||||
.progress-warning .bar,
|
||||
.progress .bar-warning {
|
||||
background-color: #e86537;
|
||||
background-image: -moz-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef784e), to(#dd4814));
|
||||
background-image: -webkit-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: -o-linear-gradient(top, #ef784e, #dd4814);
|
||||
background-image: linear-gradient(to bottom, #ef784e, #dd4814);
|
||||
background-color: #8b9e80;
|
||||
background-image: -moz-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9aac91), to(#738967));
|
||||
background-image: -webkit-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: -o-linear-gradient(top, #9aac91, #738967);
|
||||
background-image: linear-gradient(to bottom, #9aac91, #738967);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffef784e', endColorstr='#ffdd4814', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9aac91', endColorstr='#ff738967', GradientType=0);
|
||||
}
|
||||
.progress-warning.progress-striped .bar,
|
||||
.progress-striped .bar-warning {
|
||||
background-color: #ef784e;
|
||||
background-color: #9aac91;
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
|
|
|
|||
|
|
@ -999,7 +999,7 @@
|
|||
.nav-collapse .nav > li > a:focus,
|
||||
.nav-collapse .dropdown-menu a:hover,
|
||||
.nav-collapse .dropdown-menu a:focus {
|
||||
background-color: #dd4814;
|
||||
background-color: #404041;
|
||||
}
|
||||
.navbar-inverse .nav-collapse .nav > li > a,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a {
|
||||
|
|
@ -1052,8 +1052,8 @@
|
|||
float: none;
|
||||
padding: 10px 15px;
|
||||
margin: 10px 0;
|
||||
border-top: 1px solid #dd4814;
|
||||
border-bottom: 1px solid #dd4814;
|
||||
border-top: 1px solid #404041;
|
||||
border-bottom: 1px solid #404041;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
@green: #38B44A;
|
||||
@red: #DF382C;
|
||||
@yellow: #EFB73E;
|
||||
@orange: #DD4814;
|
||||
@orange: #738967;
|
||||
@pink: #c3325f;
|
||||
@purple: #772953;
|
||||
|
||||
|
|
@ -181,8 +181,8 @@
|
|||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 40px;
|
||||
@navbarBackgroundHighlight: #CE4213;
|
||||
@navbarBackground: @orange;
|
||||
@navbarBackgroundHighlight: #404041;
|
||||
@navbarBackground: #404041;
|
||||
@navbarBorder: darken(@navbarBackground, 5%);
|
||||
|
||||
@navbarText: @white;
|
||||
|
|
|
|||
|
|
@ -1,129 +1,258 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #EEE;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-image: url('../images/billie_holiday.png');
|
||||
}
|
||||
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
|
||||
html,
|
||||
body {
|
||||
background-image: url('../images/billie_holiday@2x.png');
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#notes {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
max-width: 300px;
|
||||
padding: 1em;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
border: solid 1px #999;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
max-width: 300px;
|
||||
padding: 1em;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
border: solid 1px #999;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#header {
|
||||
background: #EEE;
|
||||
border-bottom: solid 1px #CCC;
|
||||
position: relative;
|
||||
background: url(../images/header_bg.jpg) center;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
-webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header h1 a {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 220px;
|
||||
height: 100px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
text-indent: -999em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-right: solid 1px rgba(255, 255, 255, 0.75);
|
||||
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.125);
|
||||
display: block;
|
||||
width: 222px;
|
||||
height: 153px;
|
||||
background: url(../images/csol_logo_illustration.png);
|
||||
text-indent: -999em;
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#header h1 a::after {
|
||||
content: "CSOL";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
margin-top: -1em;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#navigation {
|
||||
line-height: 3em;
|
||||
margin: -3em 0 0;
|
||||
line-height: 3em;
|
||||
margin: 100px 0 0 0;
|
||||
border: 1px solid white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
#navigation ul {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#navigation ul li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
#navigation ul li a {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
margin: 0;
|
||||
padding: 15px 25px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#navigation ul li a:hover {
|
||||
background: #738967;
|
||||
}
|
||||
#navigation ul li:first-child {
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-moz-border-radius-topright: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#navigation ul li:first-child a {
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-moz-border-radius-topright: 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#navigation ul li:last-child {
|
||||
border-right: 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-radius-topright: 5px;
|
||||
-moz-border-radius-bottomright: 5px;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#navigation ul li:last-child a {
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-radius-topright: 5px;
|
||||
-moz-border-radius-bottomright: 5px;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
-moz-border-radius-topleft: 0;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#navigation ul li.active {
|
||||
background: #738967;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 50px 0;
|
||||
min-height: 200px;
|
||||
background: #FFF;
|
||||
padding: 50px 0;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: solid 1px #CCC;
|
||||
height: 100px;
|
||||
border-top: solid 1px #CCC;
|
||||
min-height: 100px;
|
||||
background: url(../images/header_bg.jpg) center;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
-webkit-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
|
||||
color: white;
|
||||
}
|
||||
#footer a {
|
||||
color: white;
|
||||
}
|
||||
#footer a:hover {
|
||||
background: #738967;
|
||||
}
|
||||
#footer .container {
|
||||
margin-top: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul.row {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
figure.thumbnail {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.thumbnail > a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form .divider {
|
||||
display: block;
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form .divider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
border-top: solid 1px #CCC;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
border-top: solid 1px #CCC;
|
||||
}
|
||||
|
||||
form .divider em {
|
||||
background: #FFF;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
}
|
||||
#content {
|
||||
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
#content h2 {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
position: relative;
|
||||
}
|
||||
#content h2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 35%;
|
||||
border-top: solid 1px black;
|
||||
}
|
||||
#content h2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 35%;
|
||||
border-top: solid 1px black;
|
||||
}
|
||||
.navbar-form {
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px black;
|
||||
}
|
||||
.navbar-form .brand {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 23 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 42 KiB |
|
|
@ -1,10 +1,12 @@
|
|||
// Target: ../css/core.css
|
||||
|
||||
@import "mixins.less";
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #EEE;
|
||||
.at2x('../images/billie_holiday.png',100px,100px);
|
||||
}
|
||||
|
||||
#notes {
|
||||
|
|
@ -20,12 +22,14 @@ body {
|
|||
}
|
||||
|
||||
#header {
|
||||
background: #EEE;
|
||||
border-bottom: solid 1px #CCC;
|
||||
background: url(../images/header_bg.jpg) center;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
-webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, .25);
|
||||
-moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, .25);
|
||||
box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, .25);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
|
@ -39,55 +43,106 @@ body {
|
|||
overflow: hidden;
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 220px;
|
||||
height: 100px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
width: 222px;
|
||||
height: 153px;
|
||||
background: url(../images/csol_logo_illustration.png);
|
||||
text-indent: -999em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-right: solid 1px rgba(255,255,255,0.75);
|
||||
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.125);
|
||||
margin: 20px 0;
|
||||
|
||||
&::after {
|
||||
content: "CSOL";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
margin-top: -1em;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
color: rgba(0,0,0,0.25);
|
||||
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation {
|
||||
line-height: 3em;
|
||||
margin: -3em 0 0;
|
||||
margin: 100px 0 0 0;
|
||||
border: 1px solid white;
|
||||
.border-radius(5px);
|
||||
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
|
||||
li {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-right: 1px solid white;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
.border-radius(0);
|
||||
margin: 0;
|
||||
padding: 15px 25px;
|
||||
font-size: 1.2em;
|
||||
|
||||
&:hover {
|
||||
background: #738967;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
.border-radiuses(0, 0, 5px, 5px);
|
||||
|
||||
a {
|
||||
.border-radiuses(0, 0, 5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
.border-radiuses(5px, 5px, 0, 0);
|
||||
|
||||
a {
|
||||
.border-radiuses(5px, 5px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #738967;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 50px 0;
|
||||
min-height: 200px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: solid 1px #CCC;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
background: url(../images/header_bg.jpg) center;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
-webkit-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, .25);
|
||||
-moz-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, .25);
|
||||
box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, .25);
|
||||
color: white;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: #738967;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
ul.row {
|
||||
|
|
@ -127,4 +182,48 @@ form .divider {
|
|||
padding: 0 1em;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 35%;
|
||||
border-top: solid 1px black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 35%;
|
||||
border-top: solid 1px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px black;
|
||||
|
||||
.brand {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
// Mixin helpers
|
||||
|
||||
// retina.less
|
||||
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
|
||||
|
||||
.at2x(@path, @w: auto, @h: auto) {
|
||||
background-image: url(@path);
|
||||
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
|
||||
|
||||
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
|
||||
background-image: url(@at2x_path);
|
||||
background-size: @w @h;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
|
||||
text-shadow: @string;
|
||||
}
|
||||
|
||||
.box-shadow (@string) {
|
||||
-webkit-box-shadow: @string;
|
||||
-moz-box-shadow: @string;
|
||||
box-shadow: @string;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.box-sizing (@type: border-box) {
|
||||
-webkit-box-sizing: @type;
|
||||
-moz-box-sizing: @type;
|
||||
box-sizing: @type;
|
||||
}
|
||||
|
||||
.border-radius (@radius: 5px) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.border-radiuses (@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;
|
||||
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.opacity (@opacity: 0.5) {
|
||||
-webkit-opacity: @opacity;
|
||||
-moz-opacity: @opacity;
|
||||
opacity: @opacity;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
|
||||
-webkit-animation: @name @duration @delay @ease;
|
||||
-moz-animation: @name @duration @delay @ease;
|
||||
-ms-animation: @name @duration @delay @ease;
|
||||
}
|
||||
.transition (@transition) {
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
-ms-transition: @transition;
|
||||
-o-transition: @transition;
|
||||
}
|
||||
|
||||
.transform (@string){
|
||||
-webkit-transform: @string;
|
||||
-moz-transform: @string;
|
||||
-ms-transform: @string;
|
||||
-o-transform: @string;
|
||||
}
|
||||
|
||||
.scale (@factor) {
|
||||
-webkit-transform: scale(@factor);
|
||||
-moz-transform: scale(@factor);
|
||||
-ms-transform: scale(@factor);
|
||||
-o-transform: scale(@factor);
|
||||
}
|
||||
|
||||
.rotate (@deg) {
|
||||
-webkit-transform: rotate(@deg);
|
||||
-moz-transform: rotate(@deg);
|
||||
-ms-transform: rotate(@deg);
|
||||
-o-transform: rotate(@deg);
|
||||
}
|
||||
|
||||
.skew (@deg, @deg2) {
|
||||
-webkit-transform: skew(@deg, @deg2);
|
||||
-moz-transform: skew(@deg, @deg2);
|
||||
-ms-transform: skew(@deg, @deg2);
|
||||
-o-transform: skew(@deg, @deg2);
|
||||
}
|
||||
|
||||
.translate (@x, @y:0) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-moz-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y);
|
||||
-o-transform: translate(@x, @y);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.perspective (@value: 1000) {
|
||||
-webkit-perspective: @value;
|
||||
-moz-perspective: @value;
|
||||
-ms-perspective: @value;
|
||||
perspective: @value;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
Загрузка…
Ссылка в новой задаче