diff options
| author | Wojtek Kosior <koszko@koszko.org> | 2022-01-14 22:48:01 +0100 |
|---|---|---|
| committer | Wojtek Kosior <koszko@koszko.org> | 2022-01-14 22:48:01 +0100 |
| commit | e7d11c7c1173d07db741301053db78b835a73ab3 (patch) | |
| tree | 2f7e5b3e494f896855a2417694df7338745f0770 /html/settings.html | |
| parent | 299864ee0901df8db2314cc7c07d6c481927c8aa (diff) | |
| download | browser-extension-e7d11c7c1173d07db741301053db78b835a73ab3.tar.gz browser-extension-e7d11c7c1173d07db741301053db78b835a73ab3.zip | |
add settings page with styling
Diffstat (limited to 'html/settings.html')
| -rw-r--r-- | html/settings.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/html/settings.html b/html/settings.html new file mode 100644 index 0000000..0bba5e3 --- /dev/null +++ b/html/settings.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<!-- + SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 + + Haketilo's settings page + + 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. + --> +<html> + <head> + <meta charset="utf-8"/> + <title>Haketilo options</title> +#LOADCSS html/reset.css +#LOADCSS html/base.css +#LOADCSS html/table.css +#LOADCSS html/grid.css + <style> + /* Style top menu items. */ + #tab_heads>* { + background-color: #70AF70; + font-size: 115%; + padding: 0.6em; + display: inline-block; + cursor: pointer; + margin: 0.25em 0 0 0; + } + body { + /* 0.25em margin + 1em height + 2*0.6em padding, multiple font size */ + --heading-height: calc(2.45em * 1.15); + --tab-content-height: calc(100vh - var(--heading-height)); + } + #tab_heads>:hover { + box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); + } + #tab_heads>.active_head { + background-color: #65A065; + color: #222; + box-shadow: none; + cursor: default; + } + + /* Style the top menu itself. */ + #tab_heads { + -moz-user-select: none; + user-select: none; + background-color: #e0e0e0; + } + #top_menu_line { + position: absolute; + width: 100vw; + z-index: 1; + } + + /* Style content */ + body { + --content-max-width: 1000px; + height: 100vh; + overflow-x: hidden; + overflow-y: hidden; + } + div.tab { + display: none; + } + div.tab.active_tab { + display: block; + } + + /* Style the Script blocking and Repositories tabs. */ + #blocking_list_container, #allowing_list_container, + #default_policy_dialog, #blocking_dialog_container, + #repos_list_container, #repos_dialog_container { + padding: 0.8em 0.4em 0.4em 0.4em; + } + #default_policy_dialog { + text-align: center; + } + #blocking_editable_container, #blocking_dialog_container, + #repos_list_container, #repos_dialog_container { + max-width: var(--content-max-width); + margin: 0 auto; + } + #blocking_editable_container { + /* Leave space for default policy dialog and headings. */ + --content-height: calc(var(--tab-content-height) - 3em); + } + + /* Pass height information to html in all tabs. */ + .tab { + --content-height: var(--tab-content-height); + } + </style> + </head> + <body> + <!-- Those contain just templates, we can include them at the top --> +#INCLUDE html/dialog.html +#INCLUDE html/item_list.html +#INCLUDE html/item_preview.html +#INCLUDE html/text_entry_list.html +#INCLUDE html/payload_create.html + <ul id="tab_heads" class="has_bottom_line"> + <li id="blocking_head"> Blocking </li> + <li id="mappings_head"> Mappings </li> + <li id="resources_head"> Resources </li> + <li id="new_payload_head" class="active_head"> New payload </li> + <li id="repos_head"> Repositories </li> + </ul> + <div id="top_menu_line" class="bottom_line"></div> + <div id="blocking_tab" class="tab"> + <div id="blocking_editable_container" class="grid_2"> + <div id="blocking_list_container"> + <h3>Block scripts on</h3> + </div> + <div id="allowing_list_container"> + <h3>Allow scripts on</h3> + </div> + <div id="default_policy_dialog" class="grid_col_both"> +#INCLUDE html/default_blocking_policy.html + </div> + </div> + <div id="blocking_dialog_container" class="hide"></div> + </div> + <div id="mappings_tab" class="tab"></div> + <div id="resources_tab" class="tab"></div> + <div id="new_payload_tab" class="tab active_tab"></div> + <div id="repos_tab" class="tab"> + <div id="repos_list_container"></div> + <div id="repos_dialog_container" class="hide"></div> + </div> +#LOADJS html/settings.js + </body> +</html> |