From 2cf0c36545adffe5ec2a6a0d5876e5e3d5d948fa Mon Sep 17 00:00:00 2001
From: Helena Rasche <hexylena@galaxians.org>
Date: Fri, 24 May 2024 15:15:03 +0200
Subject: [PATCH] style tabs using event logic

---
 _includes/slides-youtube-selector.html |  2 +-
 assets/css/main.scss                   | 39 +++++++++++++++-----------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/_includes/slides-youtube-selector.html b/_includes/slides-youtube-selector.html
index 407aaa2425b1c4..54fd3f2512cee3 100644
--- a/_includes/slides-youtube-selector.html
+++ b/_includes/slides-youtube-selector.html
@@ -1,7 +1,7 @@
 <blockquote class="agenda">
 	<div class="box-title hands-on-title" id="slides-{{ include.slides }}">{{ include.title }}</div>
 	<p class="text-muted">This content is available in multiple, equivalent formats. Choose your preferred format below.</p>
-<ul class="nav nav-pills mb-3" id="{{include.id}}-pills-tab" role="tablist">
+<ul class="nav nav-tabs" id="{{include.id}}-pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
     <button class="nav-link active" id="{{include.id}}-pills-home-tab" data-toggle="pill" data-target="#{{include.id}}-pills-home" type="button" role="tab" aria-controls="{{include.id}}-pills-home" aria-selected="true">Teacher Recording</button>
   </li>
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 0bd7088139a75e..272e5f922e8f3c 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1855,27 +1855,32 @@ section.event {
 	}
 
 	.nav-tabs {
-		.nav-item {
-			margin-bottom: 0;
-			padding-bottom: 0;
+		button.nav-link {
+			font-weight: 800;
 		}
+	}
 
-		button.nav-link{
-			border: none;
-			background: none;
-			font-size: 1.2rem;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			font-weight: 800;
+}
+.nav-tabs {
+	.nav-item {
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	button.nav-link{
+		border: none;
+		background: none;
+		font-size: 1.2rem;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 
-			&:hover {
-				color: var(--hyperlink-hover);
-			}
+		&:hover {
+			color: var(--hyperlink-hover);
+		}
 
-			&.active {
-				background: var(--overview-color);
-				color: white;
-			}
+		&.active {
+			background: var(--overview-color);
+			color: white;
 		}
 	}
 }