From d560f56d86c58cb70d8cc35366b11fc78b401cb0 Mon Sep 17 00:00:00 2001
From: Patrick Mayr <patrick@fet.at>
Date: Wed, 17 Jan 2024 17:38:28 +0000
Subject: [PATCH] update css

---
 fet2020/static/css/styles.css | 485 +++++++++++++++++++++++++++++++---
 1 file changed, 455 insertions(+), 30 deletions(-)

diff --git a/fet2020/static/css/styles.css b/fet2020/static/css/styles.css
index 83645911..32d379e1 100644
--- a/fet2020/static/css/styles.css
+++ b/fet2020/static/css/styles.css
@@ -655,6 +655,7 @@ label > span {
 	[type='tel'],
 	[type='time'],
 	[type='week'],
+	[type='file'],
 	textarea,
 	select,
 	select[multiple] {
@@ -672,6 +673,26 @@ label > span {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+[type='text']::file-selector-button,
+	[type='email']::file-selector-button,
+	[type='url']::file-selector-button,
+	[type='password']::file-selector-button,
+	[type='number']::file-selector-button,
+	[type='date']::file-selector-button,
+	[type='datetime-local']::file-selector-button,
+	[type='month']::file-selector-button,
+	[type='search']::file-selector-button,
+	[type='tel']::file-selector-button,
+	[type='time']::file-selector-button,
+	[type='week']::file-selector-button,
+	[type='file']::file-selector-button,
+	textarea::file-selector-button,
+	select::file-selector-button,
+	select[multiple]::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 [type='text']:focus,
 	[type='email']:focus,
 	[type='url']:focus,
@@ -684,6 +705,7 @@ label > span {
 	[type='tel']:focus,
 	[type='time']:focus,
 	[type='week']:focus,
+	[type='file']:focus,
 	textarea:focus,
 	select:focus,
 	select[multiple]:focus {
@@ -705,6 +727,7 @@ label > span {
 	[type='tel']:disabled,
 	[type='time']:disabled,
 	[type='week']:disabled,
+	[type='file']:disabled,
 	textarea:disabled,
 	select:disabled,
 	select[multiple]:disabled {
@@ -724,6 +747,7 @@ label > span {
 	[type='tel']),:is(.dark 
 	[type='time']),:is(.dark 
 	[type='week']),:is(.dark 
+	[type='file']),:is(.dark 
 	textarea),:is(.dark 
 	select),:is(.dark 
 	select[multiple]) {
@@ -747,6 +771,7 @@ label > span {
 	[type='tel'])::-moz-placeholder, :is(.dark 
 	[type='time'])::-moz-placeholder, :is(.dark 
 	[type='week'])::-moz-placeholder, :is(.dark 
+	[type='file'])::-moz-placeholder, :is(.dark 
 	textarea)::-moz-placeholder, :is(.dark 
 	select)::-moz-placeholder, :is(.dark 
 	select[multiple])::-moz-placeholder {
@@ -766,6 +791,7 @@ label > span {
 	[type='tel'])::placeholder,:is(.dark 
 	[type='time'])::placeholder,:is(.dark 
 	[type='week'])::placeholder,:is(.dark 
+	[type='file'])::placeholder,:is(.dark 
 	textarea)::placeholder,:is(.dark 
 	select)::placeholder,:is(.dark 
 	select[multiple])::placeholder {
@@ -785,6 +811,7 @@ label > span {
 	[type='tel']):focus,:is(.dark 
 	[type='time']):focus,:is(.dark 
 	[type='week']):focus,:is(.dark 
+	[type='file']):focus,:is(.dark 
 	textarea):focus,:is(.dark 
 	select):focus,:is(.dark 
 	select[multiple]):focus {
@@ -835,10 +862,125 @@ label > span {
   border-radius: 9999px;
 }
 
+[type='file']::file-selector-button {
+  margin: 0.25rem;
+  border-radius: 0.25rem;
+  border-width: 0px;
+  border-style: solid;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 85 128 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
+[type='file']:hover:enabled::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 68 102 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity));
+}
+
+:is(.dark [type='file'])::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 68 102 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+:is(.dark [type='file']:hover:enabled)::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 51 77 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
+[type='file'] {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+:is(.dark [type='file']) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 [x-cloak] {
   display: none !important;
 }
 
+table {
+  overflow: hidden;
+  border-radius: 0.25rem;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+thead {
+  border-bottom-width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+:is(.dark thead) {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+tbody tr {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+:is(.dark tbody tr) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+:is(.dark tbody tr:nth-child(even)) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+th,
+	td {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+th {
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+:is(.dark th) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+td {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+:is(.dark td) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1093,7 +1235,7 @@ label > span {
 }
 
 .navbar-content li > a,
-.navbar-content li > button {
+	.navbar-content li > button {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   display: block;
@@ -1738,6 +1880,28 @@ ul#mobileThemeSwitcher {
   color: rgb(14 165 233 / var(--tw-text-opacity));
 }
 
+.btn-tertiary {
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.btn-tertiary:hover {
+  --tw-bg-opacity: 0.1;
+}
+
+:is(.dark .btn-tertiary) {
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0;
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+:is(.dark .btn-tertiary:hover) {
+  --tw-bg-opacity: 0.1;
+}
+
 /***** SECTION *****/
 
 .section-title {
@@ -2002,24 +2166,24 @@ ul.sideBarNav > ul > li.active > a:first-child {
   border-radius: 0.25rem;
   padding: 0.5rem;
   background-image: linear-gradient(
-		to top,
-		hsl(217, 33%, 17%) 0%,
-		hsla(217, 33%, 17%, 0.987) 4.8%,
-		hsla(217, 33%, 17%, 0.951) 10.1%,
-		hsla(217, 33%, 17%, 0.896) 15.7%,
-		hsla(217, 33%, 17%, 0.825) 21.6%,
-		hsla(217, 33%, 17%, 0.741) 27.9%,
-		hsla(217, 33%, 17%, 0.648) 34.5%,
-		hsla(217, 33%, 17%, 0.55) 41.3%,
-		hsla(217, 33%, 17%, 0.45) 48.3%,
-		hsla(217, 33%, 17%, 0.352) 55.4%,
-		hsla(217, 33%, 17%, 0.259) 62.7%,
-		hsla(217, 33%, 17%, 0.175) 70.1%,
-		hsla(217, 33%, 17%, 0.104) 77.6%,
-		hsla(217, 33%, 17%, 0.049) 85.1%,
-		hsla(217, 33%, 17%, 0.013) 92.6%,
-		hsla(217, 33%, 17%, 0) 100%
-	);
+			to top,
+			hsl(217, 33%, 17%) 0%,
+			hsla(217, 33%, 17%, 0.987) 4.8%,
+			hsla(217, 33%, 17%, 0.951) 10.1%,
+			hsla(217, 33%, 17%, 0.896) 15.7%,
+			hsla(217, 33%, 17%, 0.825) 21.6%,
+			hsla(217, 33%, 17%, 0.741) 27.9%,
+			hsla(217, 33%, 17%, 0.648) 34.5%,
+			hsla(217, 33%, 17%, 0.55) 41.3%,
+			hsla(217, 33%, 17%, 0.45) 48.3%,
+			hsla(217, 33%, 17%, 0.352) 55.4%,
+			hsla(217, 33%, 17%, 0.259) 62.7%,
+			hsla(217, 33%, 17%, 0.175) 70.1%,
+			hsla(217, 33%, 17%, 0.104) 77.6%,
+			hsla(217, 33%, 17%, 0.049) 85.1%,
+			hsla(217, 33%, 17%, 0.013) 92.6%,
+			hsla(217, 33%, 17%, 0) 100%
+		);
 }
 
 .article-cover-desc .pinnedPost {
@@ -2109,11 +2273,11 @@ ul.sideBarNav > ul > li.active > a:first-child {
 }
 
 [class^=db-page-content] h1,
-[class^=db-page-content] h2,
-[class^=db-page-content] h3,
-[class^=db-page-content] h4,
-[class^=db-page-content] h5,
-[class^=db-page-content] h6 {
+	[class^=db-page-content] h2,
+	[class^=db-page-content] h3,
+	[class^=db-page-content] h4,
+	[class^=db-page-content] h5,
+	[class^=db-page-content] h6 {
   margin-top: 0.5rem;
   line-height: 1;
   --tw-text-opacity: 1;
@@ -2121,11 +2285,11 @@ ul.sideBarNav > ul > li.active > a:first-child {
 }
 
 :is(.dark [class^=db-page-content] h1),:is(.dark 
-[class^=db-page-content] h2),:is(.dark 
-[class^=db-page-content] h3),:is(.dark 
-[class^=db-page-content] h4),:is(.dark 
-[class^=db-page-content] h5),:is(.dark 
-[class^=db-page-content] h6) {
+	[class^=db-page-content] h2),:is(.dark 
+	[class^=db-page-content] h3),:is(.dark 
+	[class^=db-page-content] h4),:is(.dark 
+	[class^=db-page-content] h5),:is(.dark 
+	[class^=db-page-content] h6) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
@@ -2157,7 +2321,7 @@ ul.sideBarNav > ul > li.active > a:first-child {
 }
 
 [class^=db-page-content] b,
-[class^=db-page-content] strong {
+	[class^=db-page-content] strong {
   font-weight: 600;
 }
 
@@ -2441,6 +2605,172 @@ ul.sideBarNav > ul > li.active > a:first-child {
   color: rgb(254 202 202 / var(--tw-text-opacity));
 }
 
+/***** BADGE *****/
+
+.badge {
+  border-radius: 0.75rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+:is(.dark .badge) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.badge.badge-info {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
+:is(.dark .badge.badge-info) {
+  border-width: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
+.badge.badge-success {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
+:is(.dark .badge.badge-success) {
+  border-width: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(134 239 172 / var(--tw-text-opacity));
+}
+
+.badge.badge-warning {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(133 77 14 / var(--tw-text-opacity));
+}
+
+:is(.dark .badge.badge-warning) {
+  border-width: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(253 224 71 / var(--tw-text-opacity));
+}
+
+.badge.badge-danger {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
+:is(.dark .badge.badge-danger) {
+  border-width: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+/***** PAGINATION *****/
+
+.pagination-container {
+  display: flex;
+}
+
+.pagination-container > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
+.pagination-container {
+  border-radius: 0.25rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+:is(.dark .pagination-container) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
+}
+
+:is(.dark .pagination-container) {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.pagination-container a {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 1024px) {
+  .pagination-container a {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+.pagination-container a.active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+:is(.dark .pagination-container a.active) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 /***** JOBSLIST *****/
 
 .jobsList hr {
@@ -2748,6 +3078,69 @@ ul.sideBarNav > ul > li.active > a:first-child {
   }
 }
 
+/***** MULTI SECTION FORM *****/
+
+.multiSectionForm {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.multiSectionForm > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
+:is(.dark .multiSectionForm) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
+}
+
+.multiSectionForm section {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.multiSectionForm section:first-child {
+  padding-top: 0px;
+}
+
+.multiSectionForm section:last-child {
+  padding-bottom: 0px;
+}
+
+.multiSectionForm section > h2 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+:is(.dark .multiSectionForm section > h2) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.multiSectionForm section > small {
+  margin-bottom: 1rem;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+:is(.dark .multiSectionForm section > small) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 /***** FOOTER *****/
 
 footer {
@@ -2890,6 +3283,10 @@ footer .copyright {
   z-index: 30;
 }
 
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
 .float-right {
   float: right;
 }
@@ -3226,6 +3623,10 @@ footer .copyright {
   width: 100vw;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-4xl {
   max-width: 56rem;
 }
@@ -3533,6 +3934,10 @@ footer .copyright {
   row-gap: 1rem;
 }
 
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
 .gap-y-8 {
   row-gap: 2rem;
 }
@@ -3589,6 +3994,10 @@ footer .copyright {
   overflow-y: hidden;
 }
 
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -4716,6 +5125,18 @@ footer .copyright {
     top: 1rem;
   }
 
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .sm\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .sm\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
   .sm\:m-2 {
     margin: 0.5rem;
   }
@@ -4854,6 +5275,10 @@ footer .copyright {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }