Difference between revisions of "User:Paxed/vector.css"

From NetHackWiki
Jump to navigation Jump to search
m (testing simpletabs)
m (testing simpletabs)
Line 1: Line 1:
 +
  
  
 
.simpletabs {
 
.simpletabs {
  position: relative;  
+
//width: 500px;
  min-height: 200px; /* This part sucks */
+
//min-height: 200px;
  clear: both;
+
overflow-x: hidden; /* so we could easily hide the radio inputs */
  margin: 25px 0;
+
//margin: 1em;
 +
//padding-bottom: 0;
 +
//border: 1px solid #ccc;
 +
border-left: 1px solid #ccc;
 +
}
 +
 
 +
.simpletabs [type="radio"] {
 +
/* hiding the inputs */
 +
display: none;
 
}
 
}
.simpletabs .tab {
+
 
  float: left;
+
.tabs {
 +
display: flex;
 +
align-items: stretch;
 +
list-style: none;
 +
padding: 0;
 +
border-bottom: 1px solid transparent;
 +
margin: 0;
 
}
 
}
.simpletabs .tab label {
+
.tab > label {
  background: #eee;  
+
display: block;
  padding: 10px;
+
margin-bottom: -1px;
  border: 1px solid #ccc;  
+
margin-left: -1px;
  margin-left: -1px;  
+
padding: 1em 1em;
  position: relative;
+
border: 1px solid #ccc;
  left: 1px;  
+
background: #eee;
 +
//color: #666;
 
}
 
}
.simpletabs .tab [type=radio] {
+
.tab:hover label {
  display: none;  
+
//border-top-color: #333;
 +
//color: #333;
 
}
 
}
.simpletabs .content {
+
 
  display: flex;
+
.tabs-content {
  position: absolute;
+
// border: 1px solid red;
  top: 28px;
 
  left: 0;
 
  background: white;
 
  right: 0;
 
  bottom: 0;
 
  padding: 20px;
 
  border: 1px solid #ccc;  
 
 
}
 
}
.simpletabs [type=radio]:checked ~ label {
+
 
   background: white;
+
.tab-content {
  border-bottom: 1px solid white;
+
   display: none;
  z-index: 2;
 
 
}
 
}
.simpletabs [type=radio]:checked ~ label ~ .content {
+
 
  z-index: 1;
+
/* 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;
}

}