themes: style the scrollbar in CSS

This commit is contained in:
Le Tan 2017-12-12 21:04:51 +08:00
parent ae16b547e6
commit aeb3dc8df6
4 changed files with 148 additions and 0 deletions

View File

@ -235,3 +235,72 @@ table.hljs-ln tr td.hljs-ln-numbers {
table.hljs-ln tr td.hljs-ln-code {
padding-left: 10px;
}
::-webkit-scrollbar {
background-color: #EAEAEA;
width: 14px;
height: 14px;
border: none;
}
::-webkit-scrollbar-corner {
background-color: #EAEAEA;
}
::-webkit-scrollbar-button {
/* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
height: 14px;
width: 14px;
background-color: #EAEAEA;
}
::-webkit-scrollbar-button:hover {
background-color: #D0D0D0;
}
::-webkit-scrollbar-button:active {
background-color: #B2B2B2;
}
::-webkit-scrollbar-track {
/* This selector affects the styling of the area in the scrollbar between the two buttons */
background-color: #EAEAEA;
}
::-webkit-scrollbar-thumb {
/* This selector affects the styling of draggable element of the scollbar */
border: none;
background-color: #DADADA;
}
::-webkit-scrollbar-thumb:hover {
background-color: #D0D0D0;
}
::-webkit-scrollbar-thumb:active {
background-color: #B2B2B2;
}
::-webkit-scrollbar-button:horizontal:increment {
background-image: url(right.svg);
background-repeat: no-repeat;
background-size: contain;
}
::-webkit-scrollbar-button:horizontal:decrement {
background-image: url(left.svg);
background-repeat: no-repeat;
background-size: contain;
}
::-webkit-scrollbar-button:vertical:increment {
background-image: url(down.svg);
background-repeat: no-repeat;
background-size: contain;
}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(up.svg);
background-repeat: no-repeat;
background-size: contain;
}

View File

@ -1224,3 +1224,8 @@ QWidget#FindReplaceTitleWidget {
QWidget[ToolBoxTitle="true"] {
border-bottom: 2px solid @toolbox_title_border;
}
QAbstractScrollArea::corner {
background: @scrollbar_bg;
border: none;
}

View File

@ -234,3 +234,72 @@ table.hljs-ln tr td.hljs-ln-numbers {
table.hljs-ln tr td.hljs-ln-code {
padding-left: 10px;
}
::-webkit-scrollbar {
background-color: #EEEEEE;
width: 14px;
height: 14px;
border: none;
}
::-webkit-scrollbar-corner {
background-color: #EEEEEE;
}
::-webkit-scrollbar-button {
/* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
height: 14px;
width: 14px;
background-color: #EEEEEE;
}
::-webkit-scrollbar-button:hover {
background-color: #C0C0C0;
}
::-webkit-scrollbar-button:active {
background-color: #808080;
}
::-webkit-scrollbar-track {
/* This selector affects the styling of the area in the scrollbar between the two buttons */
background-color: #EEEEEE;
}
::-webkit-scrollbar-thumb {
/* This selector affects the styling of draggable element of the scollbar */
border: none;
background-color: #D0D0D0;
}
::-webkit-scrollbar-thumb:hover {
background-color: #C0C0C0;
}
::-webkit-scrollbar-thumb:active {
background-color: #808080;
}
::-webkit-scrollbar-button:horizontal:increment {
background-image: url(right.svg);
background-repeat: no-repeat;
background-size: contain;
}
::-webkit-scrollbar-button:horizontal:decrement {
background-image: url(left.svg);
background-repeat: no-repeat;
background-size: contain;
}
::-webkit-scrollbar-button:vertical:increment {
background-image: url(down.svg);
background-repeat: no-repeat;
background-size: contain;
}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(up.svg);
background-repeat: no-repeat;
background-size: contain;
}

View File

@ -1119,3 +1119,8 @@ QHeaderView::up-arrow {
QWidget#FindReplaceTitleWidget {
background: @title_bg;
}
QAbstractScrollArea::corner {
background: @scrollbar_bg;
border: none;
}