yunkong2/yunkong2.vis-hqwidgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
master
yunkong2.vis-hqwidgets/widgets/hqwidgets/css/hqwidgetsButtons.css
zhongjin d8e6e62923 Initial commit
2018-09-28 09:32:17 +08:00

545 lines
26 KiB
CSS
Raw Permalink Blame History

/* -------------- Button base --------------------- */
.hq-button-base-normal {
background-image: -ms-linear-gradient(top, #ADADAD 0%, #333333 100%);
background-image: -moz-linear-gradient(top, #ADADAD 0%, #333333 100%);
background-image: -o-linear-gradient(top, #ADADAD 0%, #333333 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ADADAD), color-stop(1, #333333));
background-image: -webkit-linear-gradient(top, #ADADAD 0%, #333333 100%);
background-image: linear-gradient(to bottom, #ADADAD 0%, #333333 100%);
border: 1px solid rgba(0,0,0,0.9) ;
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
0 0 1px 1px rgba(128,128,128,0.8),
0 0 0 6px rgba(0,0,0,0.06),
0 0 0 3px rgba(0,0,0,0.1);
}
.hq-button-base-normal:hover {
background-image: -ms-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
background-image: -moz-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
background-image: -o-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E0E0E0), color-stop(1, #8F8F8F));
background-image: -webkit-linear-gradient(top, #E0E0E0 0%, #8F8F8F 100%);
background-image: linear-gradient(to bottom, #E0E0E0 0%, #8F8F8F 100%);
border: 1px solid rgba(0,0,0,0.4) ;
box-shadow: inset 0 1px 0 0 rgba(128,128,128,0.5),
0 0 1px 1px rgba(128,128,128,0.8),
0 0 0 6px rgba(0,0,0,0.06),
0 0 0 3px rgba(0,0,0,0.1);
}
.hq-button-base-on {
background: rgb(255,214,94);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1)));
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
border: 1px solid rgba(0,0,0,0.4) ;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
0 0 1px 1px rgba(255,255,255,0.8),
0 0 0 6px rgba(0,0,0,0.06),
0 0 0 3px rgba(0,0,0,0.1);
}
.hq-button-base-on:hover {
background-image: -ms-linear-gradient(top, #FDCB28 0%, #E08600 100%);
background-image: -moz-linear-gradient(top, #FDCB28 0%, #E08600 100%);
background-image: -o-linear-gradient(top, #FDCB28 0%, #E08600 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDCB28), color-stop(1, #E08600));
background-image: -webkit-linear-gradient(top, #FDCB28 0%, #E08600 100%);
background-image: linear-gradient(to bottom, #FDCB28 0%, #E08600 100%);
border: 1px solid rgba(0,0,0,0.4) ;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
0 0 1px 1px rgba(255,255,255,0.8),
0 0 0 6px rgba(0,0,0,0.06),
0 0 0 3px rgba(0,0,0,0.1);
}
/* ---------------------- Button outdoor temperature */
.hq-button-base-outtemp {
background: #e0f3fa; /* Old browsers */
background: -moz-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(100%,#b6dffd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0f3fa 0%,#b6dffd 100%); /* IE10+ */
background: linear-gradient(to bottom, #e0f3fa 0%,#b6dffd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(182,223,253,0.9) ;
box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5),
0 0 1px 1px rgba(182,223,253,0.8),
0 0 0 6px rgba(182,223,253,0.06),
0 0 0 3px rgba(182,223,253,0.1);
}
.hq-button-base-outtemp:hover {
background: #bbe9f9; /* Old browsers */
background: -moz-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbe9f9), color-stop(100%,#94d1fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbe9f9 0%,#94d1fc 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbe9f9 0%,#94d1fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbe9f9', endColorstr='#94d1fc',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(182,223,253,0.9) ;
box-shadow: inset 0 1px 0 0 rgba(182,223,253,0.5),
0 0 1px 1px rgba(182,223,253,0.8),
0 0 0 6px rgba(182,223,253,0.06),
0 0 0 3px rgba(182,223,253,0.1);
}
/* ---------------------- Button indoor temperature */
.hq-button-base-intemp {
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#eaac60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6e6b4 0%,#eaac60 100%); /* IE10+ */
background: linear-gradient(to bottom, #f6e6b4 0%,#eaac60 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eaac60',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(232,158,69,0.9) ;
box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5),
0 0 1px 1px rgba(232,158,69,0.8),
0 0 0 6px rgba(232,158,69,0.06),
0 0 0 3px rgba(232,158,69,0.1);
}
.hq-button-base-intemp:hover {
background: #f4d169; /* Old browsers */
background: -moz-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4d169), color-stop(100%,#e89e45)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4d169 0%,#e89e45 100%); /* IE10+ */
background: linear-gradient(to bottom, #f4d169 0%,#e89e45 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d169', endColorstr='#e89e45',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(232,158,69,0.9) ;
box-shadow: inset 0 1px 0 0 rgba(232,158,69,0.5),
0 0 1px 1px rgba(232,158,69,0.8),
0 0 0 6px rgba(232,158,69,0.06),
0 0 0 3px rgba(232,158,69,0.1);
}
/* -------------- Button red --------------------- */
.hq-button-red-normal {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
background-color:#ededed;
}
.hq-button-red-active {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00;
}
.hq-button-red-normal, .hq-button-red-active {
-moz-box-shadow:inset 0px 1px 0px 0px #333333;
-webkit-box-shadow:inset 0px 1px 0px 0px #333333;
box-shadow:inset 0px 1px 0px 0px #333333;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.hq-button-red-normal:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
background-color:#dfdfdf;
}
.hq-button-red-active:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
background-color:#ce0100;
}
/* -------------- Button no background --------------------- */
.hq-button-no-background {
background:none;
}
/* -------------- Button green --------------------- */
.hq-button-green-normal, .hq-button-green-active {
-moz-box-shadow:inset 3px 2px 7px 0px #d9fbbe;
-webkit-box-shadow:inset 3px 2px 7px 0px #d9fbbe;
box-shadow:inset 3px 2px 7px 0px #d9fbbe;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52) );
background:-moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52');
background-color:#b8e356;
border:1px solid #83c41a;
display:inline-block;
color:#ffffff;
}
.hq-button-green-active {
position:relative;
top:1px;
}
.hq-button-green-normal:hover,
.hq-button-green-active:hover{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) );
background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356');
background-color:#a5cc52;
}
/* most of them taken here: http://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations*/
/* ---------------------------- Button metall ----------------------------- */
.hq-button-metall-normal {
/*display: block;*/
background: #434343;
}
.hq-button-metall-active {
/*display: block;*/
background: #434343;
}
.hq-button-metall-normal, .hq-button-metall-active {
/*display: block;*/
background-color: #434343;
background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151));
border: none;
border-top: 3px solid #c2c2c2;
/*border-radius*/
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
/*box-shadow*/
-webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
-moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
margin-right: 10px;
text-decoration: none;
color: #242424;
background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}
.hq-button-metall-active {
border-top: 0px solid #dde1e7;
/*box-shadow*/
-webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
-moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
/*transform*/
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
}
.hq-button-metall-normal:hover, .hq-button-metall-active:hover {
color: #00aeff;
text-shadow: -1px -2px 1px #000;
}
.hq-button-metall-normal:before,
.hq-button-metall-normal:after,
.hq-button-metall-active:before,
.hq-button-metall-active:after {
content: "";
top: 0;
left: 0;
position: absolute;
width: inherit;
height: inherit;
/*border-radius*/
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
/* fake conical gradients */
background-image: -webkit-radial-gradient( 50% 0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
-webkit-radial-gradient( 50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
-webkit-radial-gradient( 0% 50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
-webkit-radial-gradient( 100% 50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.hq-button-metall-normal:before, .hq-button-metall-active:before{
/*transform*/
-webkit-transform: rotate( 65deg);
-moz-transform: rotate( 65deg);
-ms-transform: rotate( 65deg);
-o-transform: rotate( 65deg);
transform: rotate( 65deg);
}
.hq-button-metall-normal:after, .hq-button-metall-active:after {
/*transform*/
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
transform: rotate(-65deg);
}
/* ------------------------------ Glossy buttons -------------------------------------- */
.hq-button-glossy-blue {
background: #94c4fe;
background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe));
background: -webkit-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
background: -o-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
background: -ms-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
background: linear-gradient(to bottom, #94c4fe 31%,#d3f6fe 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );
border: 1px solid #4864a9;
}
.hq-button-glossy-green {
background: #54bc3e;
background: -moz-linear-gradient(top, #54bc3e 0%, #aee850 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54bc3e), color-stop(100%,#aee850));
background: -webkit-linear-gradient(top, #54bc3e 0%,#aee850 100%);
background: -o-linear-gradient(top, #54bc3e 0%,#aee850 100%);
background: -ms-linear-gradient(top, #54bc3e 0%,#aee850 100%);
background: linear-gradient(to bottom, #54bc3e 0%,#aee850 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bc3e', endColorstr='#aee850',GradientType=0 );
border: 1px solid #1d6511;
}
.hq-button-glossy-blue,
.hq-button-glossy-green {
width: 100%;
height: 100%;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #000;
text-shadow: 1px 1px 0px rgba(255,255,255,.5);
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
}
.hq-button-glossy-blue:hover,
.hq-button-glossy-green:hover {
-webkit-filter: brightness(.9);
-moz-filter: brightness(.9);
-ms-filter: brightness(.9);
filter: brightness(.9);
}
.hq-button-glossy-blue:before,
.hq-button-glossy-green:before {
content: "";
width: calc(100% - 10px);
height: 50%;
display: block;
position: absolute;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
/* ---------------- Nice buttons ---------------------------------- */
.hq-button-nice-blue {
background: #108FE8;
box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-blue:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-red {
background: #E53030;
box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-red:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-green {
background: #0EC518;
box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-green:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-yellow {
background: #FFC334;
box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-yellow:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-grey {
background: #555555;
box-shadow: 0 -2px 0 3px #3b3b3b inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-grey:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-blue, .hq-button-nice-red, .hq-button-nice-green, .hq-button-nice-yellow, .hq-button-nice-grey {
border: 3px solid #fff;
}
/* ------------------------- Push butons ------------------------------------- */
.hq-button-push-red {
text-shadow:-1px -1px 0 #A84155;
background: #D25068;
border:1px solid #D25068;
background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
background-image:-o-linear-gradient(top, #F66C7B, #D25068);
background-image:linear-gradient(to bottom, #F66C7B, #D25068);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}
.hq-button-push-green {
text-shadow:-1px -1px 0 #2C7982;
background: #3EACBA;
border:1px solid #379AA4;
background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
background-image:linear-gradient(top, #48C6D4, #3EACBA);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}
.hq-button-push-red,
.hq-button-push-green
{
text-align:center;
color:#FFF;
text-decoration:none;
font-family:'Oswald', Helvetica;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.hq-button-push-red:before,
.hq-button-push-green:before
{
background:#f0f0f0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
position: absolute;
content: "";
left: -6px; right: -6px;
top: -6px; bottom: -10px;
z-index: -1;
}
.hq-button-push-red:active,
.hq-button-push-green:active
{
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
margin-top: 5px;
}
.hq-button-push-red:active:before,
.hq-button-push-green:active:before{
top: -6px;
bottom: -11px;
content: "";
}
.hq-button-push-red:hover {
background: #F66C7B;
background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
background-image:-o-linear-gradient(top, #D25068, #F66C7B);
background-image:linear-gradient(top, #D25068, #F66C7B);
}
.hq-button-push-green:hover {
background: #48C6D4;
background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
.hq-button-base-normal:active,
.hq-button-base-on:active,
.hq-button-base-outtemp:active,
.hq-button-base-intemp:active,
.hq-button-red-normal:active,
.hq-button-red-active:active,
.hq-button-green-normal:active,
.hq-button-green-active:active,
.hq-button-no-background:active
{
transform: scale(0.95);
}
Reference in New Issue View Git Blame Copy Permalink