refactoring

web/kvm/index.html

@@ -1188,7 +1188,7 @@
                 </td>
               </tr>
             </table><br>
-            <div class="tabs">
+            <div class="tabs-box">
                   <input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
                   <label for="about-tab-meta-button">Meta</label>
                   <div class="tab">

web/kvm/window-about.pug

@@ -20,7 +20,7 @@ mixin about_tab(name, title, checked=false)
 						tr #[td(colspan="2" class="title") Open Source & Open Hardware IP-KVM]
 						tr #[td(colspan="2" class="copyright") Copyright © 2018 Pi-KVM Developers Team]
 		br
-		div(class="tabs")
+		div(class="tabs-box")
 			+about_tab("meta", "Meta", true)
 			+about_tab("hw", "Hardware")
 			+about_tab("version", "Version")

web/share/css/kvm/about.css

@@ -41,6 +41,6 @@ div#about td.copyright {
 	font-size: 0.8em;
 }
 
-div#about div.tabs div.tab div.code {
+div#about div.tabs-box div.tab div.code {
 	height: 250px;
 }

web/share/css/tabs.css

@@ -20,16 +20,16 @@
 *****************************************************************************/
 
 
-div.tabs {
+div.tabs-box {
 	display: flex;
 	flex-wrap: wrap;
 }
 
-div.tabs input[type="radio"] {
+div.tabs-box input[type="radio"] {
 	display: none;
 }
 
-div.tabs div.tab {
+div.tabs-box div.tab {
 	order: 99;
 	display: none;
 	border: var(--border-default-thin);
@@ -37,7 +37,7 @@ div.tabs div.tab {
 	width: 100%;
 }
 
-div.tabs label {
+div.tabs-box label {
 	order: 1;
 	display: block;
 	text-align: center;
@@ -51,14 +51,14 @@ div.tabs label {
 	top: 1px;
 }
 
-div.tabs label:last-of-type {
+div.tabs-box label:last-of-type {
 	border-right: var(--border-default-thin);
 }
 
-div.tabs input[type="radio"]:checked+label {
+div.tabs-box input[type="radio"]:checked+label {
 	background-color: var(--cs-control-default-bg);
 }
 
-div.tabs input[type="radio"]:checked+label+.tab {
+div.tabs-box input[type="radio"]:checked+label+.tab {
 	display: block;
 }