diff --git a/src/tabs.css b/src/tabs.css index 2ea8c3f..2a66575 100644 --- a/src/tabs.css +++ b/src/tabs.css @@ -1,6 +1,6 @@ .tabs { display: flex; - gap: 20px; + flex-wrap: wrap; } .tabs input { @@ -16,7 +16,7 @@ .tabs div { position: relative; - padding: 10px 0; + padding: 10px 10px; font-weight: 700; transition: color .2s; } @@ -24,11 +24,11 @@ .tabs div::after { content: ""; position: absolute; - width: 70%; + width: 60%; height: var(--synergy-tab-bar-height); background-color: var(--synergy-border-active); bottom: 0; - left: 15%; + left: 20%; transition: all .2s; opacity: 0; transform: scaleX(0); @@ -40,8 +40,8 @@ content: ""; position: absolute; top: 13%; - left: -8px; - width: calc(100% + 16px); + left: 0; + width: 100%; height: 75%; opacity: 0; border-radius: var(--synergy-border-radius); @@ -62,6 +62,25 @@ transform: none; } -.tabs.offset { - margin: 0 8px; +.tabs.tabs-no-padding { + margin: 0 -10px; +} + +.tabs.tabs-full div { + transition: background-color .2s; + border-radius: var(--synergy-border-radius); +} + +.tabs.tabs-full div::after { + left: 0; + width: 100%; + border-radius: 0; +} + +.tabs.tabs-full div::before { + display: none; +} + +.tabs.tabs-full :is(input:focus-visible + div, div:hover) { + background-color: var(--synergy-tab-highlight); } \ No newline at end of file diff --git a/web/App.vue b/web/App.vue index c801f62..80b1fac 100644 --- a/web/App.vue +++ b/web/App.vue @@ -71,7 +71,7 @@ import Settings from "./components/Settings.vue"; Check me! -
+
+
+ + + +
+