279 lines
15 KiB
CSS
279 lines
15 KiB
CSS
/* Ice Cream Sandwich Holo Dark styles for elements
|
|
* Part of the Holo Web CSS library
|
|
*
|
|
* Copyright 2012-2015 Zachary Yaro
|
|
* Released under the MIT license
|
|
* http://holo.zmyaro.com/LICENSE.txt
|
|
*/
|
|
|
|
/* ICS blue = #33B5E5 = rgb(51, 181, 229) */
|
|
|
|
body {
|
|
background-color: #000000;
|
|
color: white;
|
|
}
|
|
body:before {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#272D33');
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#272D33')";
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#272D33));
|
|
background-image: -webkit-linear-gradient(#000000, #272D33);
|
|
background-image: -moz-linear-gradient(#000000, #272D33);
|
|
background-image: -ms-linear-gradient(#000000, #272D33);
|
|
background-image: -o-linear-gradient(#000000, #272D33);
|
|
background-image: linear-gradient(#000000, #272D33);
|
|
}
|
|
|
|
button, *[role="button"],
|
|
input[type="button"], input[type="submit"], input[type="reset"] {
|
|
background-color: #3D3D3D;
|
|
background-color: rgba(153, 153, 153, 0.4);
|
|
|
|
border-left-color: #3B3B3B;
|
|
border-left-color: rgba(0, 0, 0, 0.04);
|
|
border-right-color: #3B3B3B;
|
|
border-right-color: rgba(0, 0, 0, 0.04);
|
|
border-top-color: #656565;
|
|
border-top-color: rgba(193, 193, 193, 0.31);
|
|
border-bottom-color: #2E2E2E;
|
|
border-bottom-color: rgba(0, 0, 0, 0.24);
|
|
|
|
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
|
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
|
|
|
color: #FFFFFF;
|
|
}
|
|
button:focus, *[role="button"]:focus,
|
|
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
|
|
background-color: #14485B;
|
|
background-color: rgba(51, 181, 229, 0.41);
|
|
|
|
border-color: #007AA3;
|
|
border-color: rgba(0, 153, 204, 0.62);
|
|
|
|
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 153, 204, 0.62);
|
|
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 153, 204, 0.62);
|
|
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 153, 204, 0.62);
|
|
}
|
|
/* The “active” class is used to force the appearance of the active/pressed state */
|
|
button:enabled:active, *[role="button"]:active,
|
|
input[type="button"]:enabled:active, input[type="submit"]:enabled:active, input[type="reset"]:enabled:active,
|
|
button:enabled.active, *[role="button"].active,
|
|
input[type="button"]:enabled.active, input[type="submit"]:enabled.active, input[type="reset"]:enabled.active {
|
|
background-color: #2D9FC9;
|
|
background-color: rgba(51, 181, 229, 0.88);
|
|
|
|
border-left-color: #2C9CC6;
|
|
border-left-color: rgba(0, 0, 0, 0.017);
|
|
border-right-color: #2C9CC6;
|
|
border-right-color: rgba(0, 0, 0, 0.017);
|
|
border-top-color: #50AFD2;
|
|
border-top-color: rgba(89, 195, 234, 0.51);
|
|
border-bottom-color: #278BB1;
|
|
border-bottom-color: rgba(0, 0, 0, 0.12);
|
|
|
|
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(51, 181, 229, 0.4);
|
|
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(51, 181, 229, 0.4);
|
|
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(51, 181, 229, 0.4);
|
|
}
|
|
|
|
select:not([size]), select[size="1"] {
|
|
background: -webkit-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
|
background: -moz-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
|
background: -ms-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
|
background: -o-linear-gradient(135deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
|
background: linear-gradient(315deg, rgba(204, 204, 204, 0.6) 8px, rgba(204, 204, 204, 0) 9px);
|
|
|
|
border-bottom-color: #4B4B4B;
|
|
border-bottom-color: rgba(204, 204, 204, 0.37);
|
|
|
|
color: white;
|
|
}
|
|
select:not([size]):focus, select[size="1"]:focus {
|
|
background-color: #0F3645;
|
|
background-color: rgba(51, 181, 229, 0.3);
|
|
background: -webkit-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
|
background: -moz-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
|
background: -ms-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
|
background: -o-linear-gradient(135deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
|
background: linear-gradient(315deg, rgba(178, 200, 208, 0.72) 8px, rgba(51, 181, 229, 0.3) 9px);
|
|
|
|
border-bottom-color: #48646D;
|
|
border-bottom-color: rgba(141, 195, 214, 0.51);
|
|
|
|
-webkit-box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.6);
|
|
-moz-box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.6);
|
|
box-shadow: 0 0 0 2px rgba(51, 181, 229, 0.6);
|
|
}
|
|
/* The “active” class is used to force the appearance of the active/pressed state */
|
|
select:not([size]):active, select[size="1"]:active,
|
|
select:not([size]).active, select[size="1"].active {
|
|
background-color: #1F6D89;
|
|
background-color: rgba(51, 181, 229, 0.6);
|
|
background: -webkit-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
|
background: -moz-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
|
background: -ms-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
|
background: -o-linear-gradient(135deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
|
background: linear-gradient(315deg, rgba(160, 197, 211, 0.84) 8px, rgba(51, 181, 229, 0.6) 9px);
|
|
|
|
border-bottom-color: #5E90A3;
|
|
border-bottom-color: rgba(249, 249, 249, 0.25);
|
|
|
|
-webkit-box-shadow: 0 0 0 4px rgba(51, 181, 229, 0.6);
|
|
-moz-box-shadow: 0 0 0 4px rgba(51, 181, 229, 0.6);
|
|
box-shadow: 0 0 0 4px rgba(51, 181, 229, 0.6);
|
|
}
|
|
|
|
option {
|
|
background-color: #282828;
|
|
color: white;
|
|
border-top: 1px solid #3E3E3E;
|
|
}
|
|
|
|
input[type="radio"], input[type="checkbox"] {
|
|
border-color: #3C3C3C;
|
|
border-color: rgba(204, 204, 204, 0.4);
|
|
}
|
|
input[type="radio"]:focus, input[type="checkbox"]:focus {
|
|
-webkit-box-shadow: 0px 0px 0px 2px rgba(51, 181, 229, 0.9);
|
|
-moz-box-shadow: 0px 0px 0px 2px rgba(51, 181, 229, 0.9);
|
|
box-shadow: 0px 0px 0px 2px rgba(51, 181, 229, 0.9);
|
|
}
|
|
input[type="radio"]:enabled:active, input[type="checkbox"]:enabled:active,
|
|
input[type="radio"]:enabled.active, input[type="checkbox"]:enabled.active {
|
|
-webkit-box-shadow: 0px 0px 0px 6px rgba(51, 181, 229, 0.4);
|
|
-moz-box-shadow: 0px 0px 0px 6px rgba(51, 181, 229, 0.4);
|
|
box-shadow: 0px 0px 0px 6px rgba(51, 181, 229, 0.4);
|
|
background-color: #33B5E5;
|
|
background-color: rgba(51, 181, 229, 0.5);
|
|
}
|
|
input[type="radio"]:enabled:active,
|
|
input[type="radio"]:enabled.active {
|
|
background: -webkit-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
|
background: -moz-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
|
background: -ms-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
|
background: -o-radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
|
background: radial-gradient(rgba(51, 181, 229, 0.5), rgba(51, 181, 229, 0.4));
|
|
}
|
|
|
|
input[type="radio"]:checked {
|
|
background-color: #0099CC;
|
|
background: -webkit-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
|
background: -moz-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
|
background: -ms-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
|
background: -o-radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
|
background: radial-gradient(#33B5E5 3px, /*#94C7DA*/ #2FA3CE 4px, #306172 5px, transparent 6px);
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
/*background-image: url(check-dark.png);*/
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAMAAAAIRmf1AAAAAXNSR0IArs4c6QAAAmdQTFRFM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7XlM7PjKpW9MazaM7XlzMzMzMzMzMzMy8zMxsvNucnPpcbSjMLWdr/aZ73dUbrgM7TkLYKiTI+nOH6YMKrXM7XlzMzMy8zMyszMyszMyczMx8vNwsvNu8nPsMjQpMbTmcTUfcDYLYqsR5u6TLvjTKrNMnuXMKvYM7Xlx8vNM7XlM7XlM7TkLo6yRpu6RLjjObTiLoutJIGjM7XlvcrOxsvNM7XlM7XlM7XlLpC0Rpq5MrLhKpa9IXSSMa3bM7Xls8jQwcrOM7XlM7XlM7XlM7XlM7XlLpK3KpW9InmZMa7dqsfSvcrOMrPiLIGgLYmrM7TkM7XlM7XlM7XlL5S6RZm4RLjiKpW9I3ydMrDeM7XlM7Xlo8bTucnPMrPjLH2bT5y5TZu3Lo+zM7XlM7XlL5i+RZm4I36fMrDfM7Xln8XTtsnQJX6eQZi4RLnjRbjjRZq5L5i/L5rCRJm4RLjiMrHhI36fWrfaQLfjnsXTtcnQM7XlIXKQLZa9M7LhR5q4Rpi3KpW8JH6fMrDflMPVYLzeocbTt8nQMKzZIXWUKpa+QbjkJH6gMrHgM7XloMXTcL7bp8bSusnPMa7cInqaKpe+JH6grMfRhcHYr8jRvsrOM7XlMa/dI3ucKpW8I32fMrHguMnPncXUucrPw8vNMa/dInmZKpS7KZO6InqbMrDfxMvNx8zNM7XlMa3bIHKQIXSSMa/ew8vNM7XlM7XlM7XlzMzMyMzMv8rOyMzNv8rOusrOt8nPNLXlM7XlT49zIwAAAAF0Uk5TAEDm2GYAAAAJcEhZcwAACxMAAAsTAQCanBgAAABmSURBVBjTY2AgCBQwhQyNjNGFbGxP29mjCnnYnvb0whQKQxVKTjntmQrj5OWDyBJkoeqa2joGhsam081wIYbuntMpvX1AoX4kg2Z4np45E1WIgWGx55kzaEIgweY1GH7auo2BSgAALNIh9xzOtlkAAAAASUVORK5CYII=);
|
|
}
|
|
|
|
input[type="radio"]:checked:enabled:active,
|
|
input[type="radio"]:checked:enabled.active {
|
|
background-color: #FFFFFF;
|
|
background: -webkit-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
|
background: -moz-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
|
background: -ms-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
|
background: -o-radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
|
background: radial-gradient(#FFFFFF 4px, rgba(51, 181, 229, 0.4) 6px);
|
|
}
|
|
input[type="checkbox"]:checked:enabled:active,
|
|
input[type="checkbox"]:checked:enabled.active {
|
|
/*background-image: url(check-active-dark.png);*/
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZlJREFUOMvd001LAkEYB/ARkwixg+EHsIKOdY6OfQgxjC5ZURF0CqK3rxCBgdcOWVEdIqOy0C22F22NoLItTah0HF3c1dx1d2e3Q1lLCKVeov99fvPwn2cA+AuZCGWWPbGcr5eA3TVBM2FmM56XXiSsSATkgw4CdlYFzYaZ7XheSirqewRZEeZvspsVQ9NhZvcxJ8ESJCmqHEjylIOAXRVBUxRzEM1JqS9IkQnIXw2QqaWKoMkLxv/ASUgLBSB/PXSCVsseGD9P71GZ4tPCLRu0E7AVAAB6CNgxSTHH95yY/oSwIvuThcjgCdr4btQBAMDoKfIOtzW2W00Gi9VU19Sg162bz9KspV5fb7caW5pNBrMOACArKj5CQtQTy9OqDrjKTjV3yRxmi/j143KVFbGwFs/TNCcy2okOEvz9AIm8P/ayGGHPWRHz6lcvWANhX6Lw4CTR1q9KtgWg0X3HXWhBDRR1kmi7olezE7DFTXNUCRSxIu+/FKL9JFqpasNtfmh0RdgQEuTcznOB7jtOjdT8kcfO0j7wb/IGCSVN6j2UdLQAAAAASUVORK5CYII=);
|
|
}
|
|
|
|
input[type="range"], progress {
|
|
background-color: #292929;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
input[type="range"]::-moz-range-track {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
input[type="range"]::-ms-track {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
background-color: rgba(51, 181, 229, 0.6);
|
|
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
|
}
|
|
input[type="range"]::-moz-range-thumb {
|
|
background-color: rgba(51, 181, 229, 0.6);
|
|
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
|
}
|
|
input[type="range"]::-ms-thumb {
|
|
background-color: rgba(51, 181, 229, 0.6);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.6) 5px);
|
|
}
|
|
input[type="range"]:focus::-webkit-slider-thumb {
|
|
background-color: rgba(51, 181, 229, 0.3);
|
|
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
|
}
|
|
input[type="range"]:focus::-moz-range-thumb {
|
|
background-color: rgba(51, 181, 229, 0.3);
|
|
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
|
}
|
|
input[type="range"]:focus::-ms-thumb {
|
|
background-color: rgba(51, 181, 229, 0.3);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.3) 5px);
|
|
}
|
|
input[type="range"]:enabled:active::-webkit-slider-thumb,
|
|
input[type="range"]:enabled.active::-webkit-slider-thumb {
|
|
background-color: rgba(51, 181, 229, 0.4);
|
|
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
|
border-color: #33B5E5;
|
|
}
|
|
input[type="range"]:enalbed:active::-moz-range-thumb,
|
|
input[type="range"]:enabled.active::-moz-range-thumb {
|
|
background-color: rgba(51, 181, 229, 0.4);
|
|
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
|
border-color: #33B5E5;
|
|
}
|
|
input[type="range"]:active::-ms-thumb, input[type="range"]:enabled.active::-ms-thumb {
|
|
background-color: rgba(51, 181, 229, 0.4);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 3px, rgba(95, 194, 231, 1) 4px, rgba(51, 181, 229, 0.4) 5px);
|
|
border-color: #33B5E5;
|
|
}
|
|
input[type="range"]:disabled::-webkit-slider-thumb {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
background: -webkit-radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
|
}
|
|
input[type="range"]:disabled::-moz-range-thumb {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
background: -moz-radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
|
}
|
|
input[type="range"]:disabled::-ms-thumb {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
background: radial-gradient(rgba(51, 181, 229, 1) 2px, rgba(255, 255, 255, 0.15) 3px);
|
|
}
|
|
|
|
progress::-webkit-progress-bar-value, progress::-webkit-progress-value {
|
|
background-color: #0690BE;
|
|
}
|
|
progress::-moz-progress-bar {
|
|
background-color: #0690BE;
|
|
}
|
|
input[type="range"]::-ms-fill-lower, progress::-ms-fill {
|
|
background-color: #0690BE;
|
|
}
|
|
progress::-webkit-progress-bar-value:after, progress::-webkit-progress-value:after {
|
|
-webkit-box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
|
box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
|
}
|
|
progress::-moz-progress-bar:after {
|
|
-moz-box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
|
box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
|
}
|
|
progress::-ms-fill {
|
|
box-shadow: 0px 0px 3px 0px rgba(51, 181, 229, 0.5);
|
|
}
|