.Tab, .TabCurrent, .TabDisabled { height: 100%; display: flex; align-items: center; cursor: pointer; border-top: 3px solid transparent; border-bottom: 3px solid transparent; user-select: none; color: var(--color-text); /* Electron drag area */ -webkit-app-region: no-drag; } .Tab:hover, .TabCurrent:hover { background-color: var(--color-background-hover); } .Tab:focus-within, .TabCurrent:focus-within { background-color: var(--color-background-hover); } .TabCurrent { border-bottom: 3px solid var(--color-tab-selected-border); } .TabDisabled { color: var(--color-dim); cursor: default; } .TabSizeNavigation { font-size: var(--font-size-sans-large); padding: 0.5rem 1rem; } .TabSizeProfiler { font-size: var(--font-size-sans-normal); padding: 0.25rem 0.5rem; } .TabSizeSettings { font-size: var(--font-size-sans-normal); padding: 0.25rem 0.5rem; } .Input { width: 0; margin: 0; opacity: 0; } .IconSizeNavigation, .IconSizeProfiler, .IconSizeSettings { margin-right: 0.5rem; color: var(--color-button-active); } .IconDisabled { color: var(--color-dim); } .IconSizeNavigation { width: 1.5rem; height: 1.5rem; } .IconSizeProfiler { width: 1rem; height: 1rem; } .IconSizeSettings { width: 1rem; height: 1rem; } .TabLabelNavigation, .TabLabelProfiler, .TabLabelSettings { } @media screen and (max-width: 525px) { .IconSizeNavigation { margin-right: 0; } .TabLabelNavigation { display: none; } } @media screen and (max-width: 900px) { .TabLabelProfiler { display: none; } .IconSizeProfiler { margin-right: 0; } } @media screen and (max-width: 400px) { .TabLabelSettings { display: none; } .IconSizeSettings { margin-right: 0; } }