Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improving the style of tabs #347

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Improving the style of tabs #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a6409c
adding stylesheet for tabs
RazinShaikh Jul 29, 2024
c994c0c
custom close button
RazinShaikh Jul 31, 2024
4d353f0
tweaking with the tab size
RazinShaikh Jul 31, 2024
7e32719
adjust the tab hover background that works in both dark and light mode
RazinShaikh Jul 31, 2024
3d928b2
improving tab border
RazinShaikh Jul 31, 2024
35843c0
highlight selected tab
RazinShaikh Jul 31, 2024
506047e
highlight close button hover; make selected tabs slightly lighter
RazinShaikh Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions zxlive/icons/close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions zxlive/mainwindow.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,36 @@ def __init__(self) -> None:
tab_position = self.settings.value("tab-bar-location", QTabWidget.TabPosition.North)
assert isinstance(tab_position, QTabWidget.TabPosition)
tab_widget.setTabPosition(tab_position)
tab_widget.setStyleSheet(
f'''
QTabBar::Tab:hover {{
background-color: rgba(100, 190, 255, 30);
}}
QTabBar::Tab{{
padding: 8px;
min-width: 100px;
max-width: 250px;
border: 0px;
border-right: 1px solid rgba(140, 140, 140, 75);
margin: 1px;
margin-left: 0px;
margin-right: 0px;
}}
QTabBar::tab:selected {{
background-color: rgba(100, 190, 255, 50);
}}
QTabBar::close-button{{
background-image: url("zxlive/icons/close.svg");
background-position: center;
background-repeat: no-repeat;
subcontrol-position: right;
subcontrol-origin: padding;
padding: 10px;
}}
QTabBar::close-button:hover{{
background-color: rgba(140, 140, 140, 90);
}}
''')
self.tab_widget = tab_widget

# Currently the copied part is stored internally, and is not made available to the clipboard.
Expand Down
Loading