Project

General

Profile

« Previous | Next » 

Revision b47de554

Added by koszko over 1 year ago

give certain scrollbars static background color, make scrollbars' look less browser-dependent

View differences:

html/item_list.html
40 40 
#LOADCSS html/reset.css
41 41 
#LOADCSS html/base.css
42 42 
#LOADCSS html/grid.css
43 
#LOADCSS html/scrollbars.css
43 44 
<style>
44 45 
  .item_list, .preview_scroll_box {
45 46 
      overflow-y: auto;
......
79 80 
</style>
80 81 
<template>
81 82 
  <div id="item_list" data-template="main_div" class="grid_2 list_main_view">
82 
    <ul data-template="ul" class="item_list"></ul>
83 
    <div class="preview_scroll_box">
83 
    <ul data-template="ul" class="item_list scrollbar_visible"></ul>
84 
    <div class="preview_scroll_box scrollbar_visible">
84 85 
      <div data-template="preview_container"
85 86 
	   class="hide item_preview_container">
86 87 
	<!-- preview div will be dynamically inserted here -->
html/scrollbars.css
1 
/*
2 
 * SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
3 
 *
4 
 * Scrollbars styling for Haketilo internal HTML pages
5 
 *
6 
 * This file is part of Haketilo.
7 
 *
8 
 * Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>
9 
 *
10 
 * File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both.
11 
 *
12 
 * This program is free software: you can redistribute it and/or modify
13 
 * it under the terms of the GNU General Public License as published by
14 
 * the Free Software Foundation, either version 3 of the License, or
15 
 * (at your option) any later version.
16 
 *
17 
 * This program is distributed in the hope that it will be useful,
18 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
19 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
20 
 * GNU General Public License for more details.
21 
 *
22 
 * You should have received a copy of the GNU General Public License
23 
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
24 
 *
25 
 * I, Wojtek Kosior, thereby promise not to sue for violation of this file's
26 
 * licenses. Although I request that you do not make use of this code in a
27 
 * proprietary program, I am not going to enforce this in court.
28 
 */
29 

  		




  
  30
  
    
/*


  		




  
  31
  
    
 * Style scrollbar to have its background always colored. When possible, try to


  		




  
  32
  
    
 * imitate the default scrollbar coloring from IceCat 60 and shape from


  		




  
  33
  
    
 * Firefox's GTK scrollbar style.


  		




  
  34
  
    
 */


  		




  
  35
  
    

  		




  
  36
  
    
/* for Chromium */


  		




  
  37
  
    
.scrollbar_visible::-webkit-scrollbar {


  		




  
  38
  
    
    width:12px;


  		




  
  39
  
    
}


  		




  
  40
  
    

  		




  
  41
  
    
.scrollbar_visible::-webkit-scrollbar-track {


  		




  
  42
  
    
    background: #cecece;


  		




  
  43
  
    
}


  		




  
  44
  
    

  		




  
  45
  
    
.scrollbar_visible::-webkit-scrollbar-thumb {


  		




  
  46
  
    
    background-color: #7e8182;


  		




  
  47
  
    
    border-radius: 10px;


  		




  
  48
  
    
    width: 6px;


  		




  
  49
  
    
    border: 3px solid #cecece;


  		




  
  50
  
    
}


  		




  
  51
  
    

  		




  
  52
  
    
.scrollbar_visible::-webkit-scrollbar-thumb:hover {


  		




  
  53
  
    
    background-color: #565b5c;


  		




  
  54
  
    
}


  		




  
  55
  
    

  		




  
  56
  
    
.scrollbar_visible::-webkit-scrollbar-thumb:active {


  		




  
  57
  
    
    background-color: #1b6acb;


  		




  
  58
  
    
}


  		




  
  59
  
    

  		




  
  60
  
    
/* for Firefox 64+ (WebKit support might appear at some point). */


  		




  
  61
  
    
.scrollbar_visible {


  		




  
  62
  
    
      scrollbar-color: #7e8182 #cecece;


  		




  
  63
  
    
}


  		












  

    
      html/text_entry_list.html
    
  





  38
  38
  
    
#LOADCSS html/reset.css


  		




  39
  39
  
    
#LOADCSS html/base.css


  		




  40
  40
  
    
#LOADCSS html/grid.css


  		




  
  41
  
    
#LOADCSS html/scrollbars.css


  		




  41
  42
  
    
<style>


  		




  42
  43
  
    
  .text_entry {


  		




  43
  44
  
    
      padding: 0.1em 0.2em;


  		




  ......




  61
  62
  
    
      margin: 0.2em 0;


  		




  62
  63
  
    
      height: calc(var(--content-height) - 5em);


  		




  63
  64
  
    
  }


  		




  
  65
  
    

  		




  64
  66
  
    
  .text_entries>:nth-child(2n) {


  		




  65
  67
  
    
      background-color:#dadada;


  		




  66
  68
  
    
  }


  		




  ......




  82
  84
  
    
    </div>


  		




  83
  85
  
    
  </div>


  		




  84
  86
  
    
  <div id="text_entry_list" data-template="main_div" class="grid_1">


  		




  85
  
  
    
    <div data-template="list_div" class="text_entries">


  		




  
  87
  
    
    <div data-template="list_div" class="text_entries scrollbar_visible">


  		




  86
  88
  
    
    </div>


  		




  87
  89
  
    
    <button data-template="new_but">New</button>


  		




  88
  90
  
    
  </div>


  		












Also available in:  Unified diff