joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: joe:53205ab661700bdf7adb4552a443d2043264d5b0
Branches Tags
joe:main
...
compare: joe:03f6406e186e6629d4720532ff94a3b4b197d293
Branches Tags
joe:main

2 commits
53205ab661 ... 03f6406e18

Author SHA1 Message Date
Joe Lothan
03f6406e18 added windows styling 2026-05-26 00:04:01 -04:00
Joe Lothan
54ea6a662c added safari on mac 2026-05-26 00:01:33 -04:00
1 changed files with 89 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

90
frontend/index.html
View file

@ -94,7 +94,7 @@
box-shadow: 0 1px 0 0 var(--tab-bg); box-shadow: 0 1px 0 0 var(--tab-bg);
} }
/* ── Linux Chrome ── */ /* ── Chrome (Linux + Mac) ── */
/* Inactive: always inset dimensions, separator via ::before */ /* Inactive: always inset dimensions, separator via ::before */
.browser-chrome .tab { .browser-chrome .tab {
border-radius: 8px; border-radius: 8px;
@ -134,6 +134,84 @@
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
} }
/* ── Windows Chrome / Edge — rounded top only, more angular ── */
.os-windows.browser-chrome .tab,
.os-windows.browser-edge .tab {
border-radius: 0;
margin: 3px 2px;
padding: 3px 12px;
height: 30px;
position: relative;
}
.os-windows.browser-chrome .tab::before,
.os-windows.browser-edge .tab::before {
content: "";
position: absolute;
left: -2px;
top: 25%;
height: 50%;
width: 1px;
background: var(--tab-border);
}
.os-windows.browser-chrome .tab:hover::before,
.os-windows.browser-chrome .tab-active::before,
.os-windows.browser-chrome .tab:hover + .tab::before,
.os-windows.browser-chrome .tab-active + .tab::before,
.os-windows.browser-edge .tab:hover::before,
.os-windows.browser-edge .tab-active::before,
.os-windows.browser-edge .tab:hover + .tab::before,
.os-windows.browser-edge .tab-active + .tab::before {
background: transparent;
}
.os-windows.browser-chrome .tab:hover,
.os-windows.browser-edge .tab:hover {
background: var(--tab-hover);
border-radius: 8px 8px 0 0;
}
.os-windows.browser-chrome .tab-active,
.os-windows.browser-chrome .tab-active:hover,
.os-windows.browser-edge .tab-active,
.os-windows.browser-edge .tab-active:hover {
background: var(--tab-bg);
border-radius: 8px 8px 0 0;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
/* ── Safari (Mac only) ── */
/* Compact, flat, evenly spaced, no icons on inactive tabs */
.browser-safari .tab {
border-radius: 6px;
margin: 0 1px;
height: 28px;
padding: 4px 10px;
min-width: 80px;
}
.browser-safari .tab .tab-icon {
display: none;
}
.browser-safari .tab:hover {
background: var(--tab-hover);
border-radius: 6px;
}
/* Selected: subtle white pill, show icon */
.browser-safari .tab-active,
.browser-safari .tab-active:hover {
background: var(--tab-bg);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.browser-safari .tab-active .tab-icon {
display: inline;
}
.tab-about .tab-title { .tab-about .tab-title {
font-weight: 600; font-weight: 600;
} }
@ -219,6 +297,16 @@
border-radius: 8px; border-radius: 8px;
} }
/* Safari: centered URL bar, more minimal */
.browser-safari .iframe-urlbar {
justify-content: center;
border-radius: 8px;
}
.browser-safari .iframe-urlbar .url-title {
display: none;
}
.iframe-urlbar .tab-icon { .iframe-urlbar .tab-icon {
flex-shrink: 0; flex-shrink: 0;
} }