70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
CSS
body {
|
|
font-family: Cambria, Arial;
|
|
background: #f4f2f2;
|
|
}
|
|
|
|
.tabs {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 5px auto;
|
|
}
|
|
|
|
input {
|
|
opacity: 0;
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
background: #aea9a9;
|
|
background: -webkit-linear-gradient(#666, #555);
|
|
color: #eee;
|
|
border-radius: 5px 5px 0 0;
|
|
padding: 1.5% 1.5%;
|
|
float: left;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
label:hover {
|
|
background: -webkit-linear-gradient(#777, #666);
|
|
}
|
|
|
|
input:checked + label {
|
|
background: #f4f2f2;
|
|
color: #333;
|
|
}
|
|
|
|
/*
|
|
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
|
|
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
|
|
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
|
|
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
|
|
opacity: 1;
|
|
-webkit-transition: .3s;
|
|
}
|
|
*/
|
|
|
|
.panels {
|
|
float: left;
|
|
clear: both;
|
|
position: relative;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 0 10px 10px 10px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.panel {
|
|
display:none;
|
|
width: 100%;
|
|
/*opacity: 0;*/
|
|
position: absolute;
|
|
background: #f4f2f2;
|
|
border-radius: 0 10px 10px 10px;
|
|
padding: 4%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.panel h2 {
|
|
margin: 0;
|
|
font-family: Arial;
|
|
} |