Difference between revisions of "User:Paxed/vector.css"
Jump to navigation
Jump to search
m (testing simpletabs) |
m (testing simpletabs) |
||
Line 1: | Line 1: | ||
+ | |||
.simpletabs { | .simpletabs { | ||
− | + | //width: 500px; | |
− | + | //min-height: 200px; | |
− | + | overflow-x: hidden; /* so we could easily hide the radio inputs */ | |
− | + | //margin: 1em; | |
+ | //padding-bottom: 0; | ||
+ | //border: 1px solid #ccc; | ||
+ | border-left: 1px solid #ccc; | ||
+ | } | ||
+ | |||
+ | .simpletabs [type="radio"] { | ||
+ | /* hiding the inputs */ | ||
+ | display: none; | ||
} | } | ||
− | . | + | |
− | + | .tabs { | |
+ | display: flex; | ||
+ | align-items: stretch; | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | border-bottom: 1px solid transparent; | ||
+ | margin: 0; | ||
} | } | ||
− | + | .tab > label { | |
− | + | display: block; | |
− | + | margin-bottom: -1px; | |
− | + | margin-left: -1px; | |
− | + | padding: 1em 1em; | |
− | + | border: 1px solid #ccc; | |
− | + | background: #eee; | |
+ | //color: #666; | ||
} | } | ||
− | + | .tab:hover label { | |
− | + | //border-top-color: #333; | |
+ | //color: #333; | ||
} | } | ||
− | . | + | |
− | + | .tabs-content { | |
− | + | // border: 1px solid red; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | .tab-content { | |
− | + | display: none; | |
− | |||
} | } | ||
− | .simpletabs [type=radio]:checked ~ label ~ . | + | |
− | + | /* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */ | |
+ | .simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label, | ||
+ | .simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label, | ||
+ | .simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label, | ||
+ | .simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label, | ||
+ | .simpletabs [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label { | ||
+ | border-bottom: none; | ||
+ | //border-top-color: #B721FF; | ||
+ | background: transparent; | ||
+ | //color: #222; | ||
} | } | ||
+ | .simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs-content .tab-content:nth-of-type(1), | ||
+ | .simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs-content .tab-content:nth-of-type(2), | ||
+ | .simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs-content .tab-content:nth-of-type(3), | ||
+ | .simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs-content .tab-content:nth-of-type(4) { | ||
+ | display: block; | ||
+ | } | ||
Revision as of 15:09, 11 May 2021
.simpletabs {
//width: 500px;
//min-height: 200px;
overflow-x: hidden; /* so we could easily hide the radio inputs */
//margin: 1em;
//padding-bottom: 0;
//border: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.simpletabs [type="radio"] {
/* hiding the inputs */
display: none;
}
.tabs {
display: flex;
align-items: stretch;
list-style: none;
padding: 0;
border-bottom: 1px solid transparent;
margin: 0;
}
.tab > label {
display: block;
margin-bottom: -1px;
margin-left: -1px;
padding: 1em 1em;
border: 1px solid #ccc;
background: #eee;
//color: #666;
}
.tab:hover label {
//border-top-color: #333;
//color: #333;
}
.tabs-content {
// border: 1px solid red;
}
.tab-content {
display: none;
}
/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.simpletabs [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
border-bottom: none;
//border-top-color: #B721FF;
background: transparent;
//color: #222;
}
.simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs-content .tab-content:nth-of-type(1),
.simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs-content .tab-content:nth-of-type(2),
.simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs-content .tab-content:nth-of-type(3),
.simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs-content .tab-content:nth-of-type(4) {
display: block;
}
@media screen and (min-width:1200px) {
#wpTextbox1 {
float:left;
width: 70%;
}
.editOptions,
.mw-editTools,
.templatesUsed {
float: right;
width: 25%;
}
.editOptions {
border: 1px solid #ccc;
}
#editpage-copywarn,
.mw-editTools div:first-child {
display: none;
}
}