333 lines
10 KiB
Plaintext
333 lines
10 KiB
Plaintext
@textColorRed: #cc3300;
|
||
@textColorGreen: #6b931f;
|
||
@linkColor: #116d9d;
|
||
|
||
@defaultWhiteColor: #fff;
|
||
|
||
@defaultBgColor: #fff;
|
||
@textColor: #333;
|
||
@textColorGrayDark: #83888d;
|
||
@textColorGrayLight: #b2b2b2;
|
||
@textColorBlackDark: #666;
|
||
@textColorBlackLight: #999;
|
||
|
||
@textColorLinkMain: #5891d0;
|
||
|
||
@helpLinkBackgroundColor: #a9d4ef;
|
||
|
||
@helpBorderColor: #d9d9d9;
|
||
@helpTableBorderColor: #d7d8dc;
|
||
@helpTableHRColor: #e4e4e4;
|
||
|
||
@helpBorderBottomColor: #d1dce2;
|
||
@helpBorderExampleColor: #e0e0e0;
|
||
|
||
@helpNoteColor: #efefef;
|
||
@helpNoteTextColor: #808080;
|
||
|
||
|
||
@buttonTextColor: #fff;
|
||
|
||
@formError: #bf3703;
|
||
|
||
@popUpPanelBackground: #aaa;
|
||
|
||
@mobileMenuColor: #f6f6f6;
|
||
@mobileDefaultWidth: 100%;
|
||
|
||
/*@redColor: #f94a0c;*/
|
||
/*@redHoverColor: #fa6e3d;*/
|
||
@redColor: #ff642e;
|
||
@redHoverColor: #ff7a4b;
|
||
@yellowColor: #fc4;
|
||
@greenColor: #3DB80F;
|
||
|
||
@lightGrayTextColor: #666;
|
||
@baseBackgroundColor: #f6f6f6;
|
||
|
||
|
||
.borderRadius (@value: 8px) {
|
||
border-radius: @value;
|
||
-moz-border-radius: @value;
|
||
-webkit-border-radius: @value;
|
||
}
|
||
|
||
.borderRadiusCustomizable (@valueTopLeft: 8px, @valueTopRight: 8px, @valueBottomRight: 8px, @valueBottomLeft: 8px) {
|
||
border-radius: @valueTopLeft @valueTopRight @valueBottomRight @valueBottomLeft;
|
||
-moz-border-radius: @valueTopLeft @valueTopRight @valueBottomRight @valueBottomLeft;
|
||
-webkit-border-radius: @valueTopLeft @valueTopRight @valueBottomRight @valueBottomLeft;
|
||
}
|
||
|
||
.shadow (@radius: 4px, @color: rgba(0, 0, 0, 0.5)) {
|
||
.shadowFullCustomizable(0, 2px, @radius, @color);
|
||
}
|
||
|
||
.shadowFullCustomizable (@byX: 0, @byY: 2px, @radius: 4px, @color: rgba(0, 0, 0, 0.5)) {
|
||
box-shadow: @byX @byY @radius @color;
|
||
-moz-box-shadow: @byX @byY @radius @color;
|
||
-webkit-box-shadow: @byX @byY @radius @color;
|
||
}
|
||
.shadowFullCustomizableInset(@byX: 0, @byY: 2px, @radius: 4px, @strength: 0, @color: rgba(0, 0, 0, 0.5)) {
|
||
box-shadow: inset @byX @byY @radius @strength @color;
|
||
-moz-box-shadow: inset @byX @byY @radius @strength @color;
|
||
-webkit-box-shadow: inset @byX @byY @radius @strength @color;
|
||
}
|
||
|
||
.noShadow() {
|
||
box-shadow: none;
|
||
-moz-box-shadow: 0 none;
|
||
-webkit-box-shadow: 0 none;
|
||
}
|
||
|
||
.boxShadow (@blurRadius: 4px) {
|
||
background: @defaultBgColor;
|
||
border: 1px solid #D1D1D1;
|
||
.shadow(@blurRadius);
|
||
}
|
||
|
||
.linkStyle (@colorLink: #333){
|
||
color:@colorLink;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
padding: 0;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.textStyle (@colorText: #333, @sizeText: 12px){
|
||
color: @colorText;
|
||
font-size: @sizeText;
|
||
}
|
||
|
||
.resetListStyle (@marginValue: 0, @paddingValue: 0) {
|
||
list-style: none;
|
||
margin: @marginValue;
|
||
padding: @paddingValue;
|
||
}
|
||
|
||
// Gradient
|
||
// -------------------------
|
||
|
||
// Horizontal gradient, from left to right
|
||
//
|
||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||
// Color stops are not available in IE9 and below.
|
||
.gradient-horizontal(@start-color: #555, @start-percent: 0%, @end-color: #333, @end-percent: 100%) {
|
||
background-color: @end-color;
|
||
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
|
||
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
|
||
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
|
||
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
|
||
background-repeat: repeat-x;
|
||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
|
||
}
|
||
|
||
// Vertical gradient, from top to bottom
|
||
//
|
||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||
// Color stops are not available in IE9 and below.
|
||
.gradient-vertical(@start-color: #555, @start-percent: 0%, @end-color: #333, @end-percent: 100%) {
|
||
background-color: @end-color;
|
||
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
|
||
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
|
||
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
|
||
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
|
||
background-repeat: repeat-x;
|
||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
|
||
}
|
||
|
||
.bg-vertical-gradient(@start-color, @end-color) {
|
||
.gradient-vertical(@start-color, 0%, @end-color, 100%);
|
||
}
|
||
|
||
.bg-horizontal-gradient(@start-color, @end-color) {
|
||
.gradient-horizontal(@start-color, 0%, @end-color, 100%);
|
||
}
|
||
|
||
.bg-gradient-with-image (@img, @img-width, @img-height, @start-color, @end-color) {
|
||
|
||
background: url(@img) no-repeat scroll @img-width @img-height, @end-color; /* <20><><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> */
|
||
background: url(@img) no-repeat scroll @img-width @img-height, -moz-linear-gradient(bottom, @start-color, @end-color); /* Firefox 3.6+ */
|
||
background: url(@img) no-repeat scroll @img-width @img-height, -webkit-linear-gradient(bottom, @start-color, @end-color); /* Chrome 10+, Safari 5.1+ */
|
||
background: url(@img) no-repeat scroll @img-width @img-height, -o-linear-gradient(bottom, @start-color, @end-color); /* Opera 11.10+ */
|
||
background: url(@img) no-repeat scroll @img-width @img-height, -ms-linear-gradient(center bottom, @start-color, @end-color); /* IE10 */
|
||
background: url(@img) no-repeat scroll @img-width @img-height, linear-gradient(bottom, @start-color, @end-color); /* CSS3 */
|
||
}
|
||
|
||
.bg-gradient-slider(@start-color, @end-color) {
|
||
background: @end-color; /* Old browsers */
|
||
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
|
||
background: -moz-linear-gradient(left, @end-color 1%, @start-color 50%, @end-color 100%); /* FF3.6+ */
|
||
background: -webkit-gradient(linear, left top, right top, color-stop(1%,@end-color), color-stop(50%,@start-color), color-stop(100%,@end-color)); /* Chrome,Safari4+ */
|
||
background: -webkit-linear-gradient(left, @end-color 1%,@start-color 50%,@end-color 100%); /* Chrome10+,Safari5.1+ */
|
||
background: -o-linear-gradient(left, @end-color 1%,@start-color 50%,@end-color 100%); /* Opera 11.10+ */
|
||
background: -ms-linear-gradient(left, @end-color 1%,@start-color 50%,@end-color 100%); /* IE10+ */
|
||
background: linear-gradient(to right, @end-color 1%,@start-color 50%,@end-color 100%); /* W3C */
|
||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); /* IE6-8*/
|
||
}
|
||
|
||
.img-pseudo-base(@top: 0, @left: 0, @height: 16px, @width: 16px) {
|
||
content: " ";
|
||
display: block;
|
||
height: @height;
|
||
position: absolute;
|
||
left: @left;
|
||
top: @top;
|
||
width: @width;
|
||
}
|
||
.null-sized() {
|
||
height: 0;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
width: 0;
|
||
}
|
||
|
||
.rotate (@deg: 30deg) {
|
||
-ms-transform: rotate(@deg); /* IE 9 */
|
||
-webkit-transform: rotate(@deg); /* Chrome, Safari, Opera */
|
||
transform: rotate(@deg);
|
||
}
|
||
|
||
.customApearance (@value: none){
|
||
-webkit-appearance: @value;
|
||
-moz-appearance: @value;
|
||
appearance: @value;
|
||
}
|
||
|
||
/* buttons */
|
||
.baseBtn() {
|
||
border: 0 none;
|
||
color: @buttonTextColor;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
vertical-align: middle;
|
||
padding: 17px 22px;
|
||
text-align: center;
|
||
text-decoration: none !important;
|
||
.borderRadius(3px);
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
line-height: 1em;
|
||
|
||
|
||
&::-moz-focus-inner {
|
||
outline: none;
|
||
-moz-outline: none;
|
||
border: 0 none;
|
||
}
|
||
&:focus {
|
||
outline: none;
|
||
-moz-outline: none;
|
||
border: 0 none;
|
||
}
|
||
}
|
||
|
||
.InnerPage {
|
||
.main {
|
||
.description {
|
||
.MainHelpCenter {
|
||
li {
|
||
a.button,
|
||
a.button:hover,
|
||
a.button:active,
|
||
a.button:visited
|
||
{
|
||
.baseBtn();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
a.button,
|
||
a.button:hover,
|
||
a.button:active,
|
||
a.button:visited
|
||
{
|
||
.baseBtn();
|
||
}
|
||
.button {
|
||
.baseBtn();
|
||
.customApearance(none);
|
||
|
||
&:hover, &:active, &:visited {
|
||
.baseBtn();
|
||
}
|
||
&.red {
|
||
background: @redColor;
|
||
|
||
&:hover {
|
||
background: @redHoverColor;
|
||
}
|
||
|
||
&::-moz-focus-inner {
|
||
background: @redHoverColor;
|
||
}
|
||
|
||
&:focus {
|
||
background: @redHoverColor;
|
||
}
|
||
|
||
&.disabled, &.disabled:hover {
|
||
background: #fa6e3d;
|
||
cursor: default;
|
||
|
||
&::-moz-focus-inner {
|
||
background: #fa6e3d;
|
||
}
|
||
|
||
&:focus {
|
||
background: #fa6e3d;
|
||
}
|
||
}
|
||
}
|
||
&.gray {
|
||
background: #444;
|
||
|
||
&:hover {
|
||
background: #565656;
|
||
}
|
||
|
||
&::-moz-focus-inner {
|
||
background: #4e4e4e;
|
||
}
|
||
|
||
&:focus {
|
||
background: #4e4e4e;
|
||
}
|
||
|
||
&.disabled, &.disabled:hover {
|
||
background: #666;
|
||
cursor: default;
|
||
|
||
&::-moz-focus-inner {
|
||
background: #666;
|
||
}
|
||
|
||
&:focus {
|
||
background: #666;
|
||
}
|
||
}
|
||
}
|
||
&.white {
|
||
background: #fff;
|
||
border: 1px solid #B2B2B2 !important;
|
||
color: #666 !important;
|
||
|
||
&:hover {
|
||
background: #fff;
|
||
color: #adadad !important;
|
||
border-color: #adadad;
|
||
}
|
||
|
||
&::-moz-focus-inner {
|
||
background: #fff;
|
||
}
|
||
|
||
&:focus {
|
||
background: #a3a3a3;
|
||
}
|
||
|
||
}
|
||
|
||
} |