CSS
语言：
CSSSCSS
确定
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
/*
****************************
====== Set variables =======
****************************
*/
:root {
--white: white;
--bg: #ff8000;
--boxWidth: 100%;
--ht: 100px;
--font: 'Raleway', sans-serif;
}
body {
background: #005C97;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #005C97, #363795);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #005C97, #363795);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: var(--font);
text-align: center;
color: var(--white);
}
.wrapper {
padding: 10vh 20%;
max-width: 700px;
display: inline-block;
}
h1 {
text-align: center;
font-weight: 300;
font-size: 36px;
}
h1 small {
display: block;
font-size: 14px;
font-weight: 500;
margin-top: 5px;
}
#block {
height: var(--ht);
text-align: center;
line-height: var(--ht);
color: var(--white);
display: inline-block;
width: var(--boxWidth);
border: 5px solid rgba(255, 255, 255, 0.4);
background: var(--bg);
margin-bottom: calc(var(--ht)/4);
}
.color-picker {
border: none;
width: 30px;
height: 30px;
vertical-align: middle;
}
.btn-option {
background-color: rgba(255, 255, 255, 0.1);
margin-top: calc(var(--ht)/4);
padding: calc(var(--ht)/4);
}
button {
border: none;
padding: calc(var(--ht)/6);
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
}