diff options
| -rw-r--r-- | html/item_list.html | 5 | ||||
| -rw-r--r-- | html/scrollbars.css | 63 | ||||
| -rw-r--r-- | html/text_entry_list.html | 4 |
3 files changed, 69 insertions, 3 deletions
diff --git a/html/item_list.html b/html/item_list.html index cae783a..7192f0f 100644 --- a/html/item_list.html +++ b/html/item_list.html @@ -40,6 +40,7 @@ #LOADCSS html/reset.css #LOADCSS html/base.css #LOADCSS html/grid.css +#LOADCSS html/scrollbars.css <style> .item_list, .preview_scroll_box { overflow-y: auto; @@ -79,8 +80,8 @@ </style> <template> <div id="item_list" data-template="main_div" class="grid_2 list_main_view"> - <ul data-template="ul" class="item_list"></ul> - <div class="preview_scroll_box"> + <ul data-template="ul" class="item_list scrollbar_visible"></ul> + <div class="preview_scroll_box scrollbar_visible"> <div data-template="preview_container" class="hide item_preview_container"> <!-- preview div will be dynamically inserted here --> diff --git a/html/scrollbars.css b/html/scrollbars.css new file mode 100644 index 0000000..df12877 --- /dev/null +++ b/html/scrollbars.css @@ -0,0 +1,63 @@ +/* + * SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 + * + * Scrollbars styling for Haketilo internal HTML pages + * + * This file is part of Haketilo. + * + * Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org> + * + * File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + * + * I, Wojtek Kosior, thereby promise not to sue for violation of this file's + * licenses. Although I request that you do not make use of this code in a + * proprietary program, I am not going to enforce this in court. + */ + +/* + * Style scrollbar to have its background always colored. When possible, try to + * imitate the default scrollbar coloring from IceCat 60 and shape from + * Firefox's GTK scrollbar style. + */ + +/* for Chromium */ +.scrollbar_visible::-webkit-scrollbar { + width:12px; +} + +.scrollbar_visible::-webkit-scrollbar-track { + background: #cecece; +} + +.scrollbar_visible::-webkit-scrollbar-thumb { + background-color: #7e8182; + border-radius: 10px; + width: 6px; + border: 3px solid #cecece; +} + +.scrollbar_visible::-webkit-scrollbar-thumb:hover { + background-color: #565b5c; +} + +.scrollbar_visible::-webkit-scrollbar-thumb:active { + background-color: #1b6acb; +} + +/* for Firefox 64+ (WebKit support might appear at some point). */ +.scrollbar_visible { + scrollbar-color: #7e8182 #cecece; +} diff --git a/html/text_entry_list.html b/html/text_entry_list.html index 77be5cb..4a15a07 100644 --- a/html/text_entry_list.html +++ b/html/text_entry_list.html @@ -38,6 +38,7 @@ #LOADCSS html/reset.css #LOADCSS html/base.css #LOADCSS html/grid.css +#LOADCSS html/scrollbars.css <style> .text_entry { padding: 0.1em 0.2em; @@ -61,6 +62,7 @@ margin: 0.2em 0; height: calc(var(--content-height) - 5em); } + .text_entries>:nth-child(2n) { background-color:#dadada; } @@ -82,7 +84,7 @@ </div> </div> <div id="text_entry_list" data-template="main_div" class="grid_1"> - <div data-template="list_div" class="text_entries"> + <div data-template="list_div" class="text_entries scrollbar_visible"> </div> <button data-template="new_but">New</button> </div> |