montylee
11th September 2009, 00:38
I want to get the tab look and feel provided by the latest version of Opera i.e. Opera 10. Here's a screenshot of Opera 10 tabs (it may be same in Opera 9 too):
http://img134.imageshack.us/img134/7109/operatabs.png (http://img134.imageshack.us/i/operatabs.png/)
As you can see, there is some space between the tabs and the corners of tabs are rounded. In addition the rounded corners at the bottom left and bottom right of the tabs are reverse i.e. they are inclined out.
I modified the tabdialog example of Qt and came up with this:
http://img134.imageshack.us/img134/652/tabsv.png (http://img134.imageshack.us/i/tabsv.png/)
I am using the following style sheet for the above look:
QTabWidget::pane { /* The tab widget frame */
border-top: 6px solid qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #FFE085, stop: 0.8 #CC9900); /* Width of the line below the tab panel */
}
QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
}
/* Tab properties */
QTabBar::tab {
border: 1px solid #000000;
border-top-left-radius: 4px; /* For rounded corners */
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px; /* Padding inside each tab */
margin-left: 4px; /* Margins among the tabs */
margin-right: 4px;
}
/* Properties for selected tab */
QTabBar::tab:selected {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085);
border-color: #000000;
border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
}
/* Properties for unselected tabs */
QTabBar::tab:!selected {
background: #C2C7CB; /* Gray color for unselected tabs */
border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
margin-top: 4px; /* make non-selected tabs look smaller */
}
QTabBar::tab:first:selected {
margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}
QTabBar::tab:last:selected {
margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}
As you can see, i was able to put some space between the tabs and also got rounded corners. Now, i don't know how to get the reverse rounded corners at the bottom left and bottom right like the Opera tabs.
Anybody has a clue?
http://img134.imageshack.us/img134/7109/operatabs.png (http://img134.imageshack.us/i/operatabs.png/)
As you can see, there is some space between the tabs and the corners of tabs are rounded. In addition the rounded corners at the bottom left and bottom right of the tabs are reverse i.e. they are inclined out.
I modified the tabdialog example of Qt and came up with this:
http://img134.imageshack.us/img134/652/tabsv.png (http://img134.imageshack.us/i/tabsv.png/)
I am using the following style sheet for the above look:
QTabWidget::pane { /* The tab widget frame */
border-top: 6px solid qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #FFE085, stop: 0.8 #CC9900); /* Width of the line below the tab panel */
}
QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
}
/* Tab properties */
QTabBar::tab {
border: 1px solid #000000;
border-top-left-radius: 4px; /* For rounded corners */
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px; /* Padding inside each tab */
margin-left: 4px; /* Margins among the tabs */
margin-right: 4px;
}
/* Properties for selected tab */
QTabBar::tab:selected {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085);
border-color: #000000;
border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
}
/* Properties for unselected tabs */
QTabBar::tab:!selected {
background: #C2C7CB; /* Gray color for unselected tabs */
border-bottom-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #CC9900, stop: 0.8 #FFE085); /* same as pane color */
margin-top: 4px; /* make non-selected tabs look smaller */
}
QTabBar::tab:first:selected {
margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}
QTabBar::tab:last:selected {
margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}
As you can see, i was able to put some space between the tabs and also got rounded corners. Now, i don't know how to get the reverse rounded corners at the bottom left and bottom right like the Opera tabs.
Anybody has a clue?