Difference between revisions of "User:Paxed/vector.css"
Jump to navigation
Jump to search
m (testing simpletabs) |
m (minor fix) |
||
Line 15: | Line 15: | ||
list-style: none; | list-style: none; | ||
padding: 0; | padding: 0; | ||
− | |||
margin: 0; | margin: 0; | ||
background-color: #aaa; | background-color: #aaa; |
Revision as of 17:18, 11 May 2021
.simpletabs {
overflow-x: hidden; /* so we could easily hide the radio inputs */
border: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.simpletabs [type="radio"] {
display: none;
}
.simpletabs .tabs {
display: flex;
align-items: stretch;
list-style: none;
padding: 0;
margin: 0;
background-color: #aaa;
}
.simpletabs .tab > label {
display: block;
margin-bottom: -1px;
margin-right: 1px;
padding: 1em 1em;
background: #eee;
}
.simpletabs .tab:hover label {
cursor: pointer;
}
.simpletabs .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;
background: transparent;
background-color: white;
cursor: default;
}
.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;
padding: 0.5em;
}
@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;
}
}