aboutsummaryrefslogtreecommitdiff
path: root/html/options.html
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2021-09-01 11:45:06 +0200
committerWojtek Kosior <koszko@koszko.org>2021-09-01 11:45:06 +0200
commit453ba03962ececcdff9264bea606b7bc488c1803 (patch)
tree169d81bb94e2c2849d1756c65ad3a528a9d944db /html/options.html
parent544c6df3ab1e331c6b6779b76ad33180a06b0b4d (diff)
downloadbrowser-extension-453ba03962ececcdff9264bea606b7bc488c1803.tar.gz
browser-extension-453ba03962ececcdff9264bea606b7bc488c1803.zip
add styling for popup page\n\nThis does not include styling for contents of the import dialog
Diffstat (limited to 'html/options.html')
-rw-r--r--html/options.html95
1 files changed, 21 insertions, 74 deletions
diff --git a/html/options.html b/html/options.html
index e0c3c23..13a8973 100644
--- a/html/options.html
+++ b/html/options.html
@@ -9,11 +9,9 @@
<title>Hachette options</title>
<link type="text/css" rel="stylesheet" href="reset.css" />
<link type="text/css" rel="stylesheet" href="base.css" />
+ <link type="text/css" rel="stylesheet" href="table.css" />
<style>
body {
- background-color: #f0f0f0;
- color: #555;
- overflow: auto;
width: 100%;
}
@@ -37,6 +35,10 @@
font-size: 130%;
padding: 10px;
display: inline-block;
+ cursor: pointer;
+ }
+
+ #tab_heads {
-moz-user-select: none;
user-select: none;
}
@@ -49,13 +51,6 @@
border-radius: 0;
}
- #tab_heads::after {
- display: block;
- height: 8px;
- content: "";
- background: linear-gradient(#555, transparent);
- }
-
div.tab {
min-width: 50vw;
width: fit-content;
@@ -86,77 +81,36 @@
width: fit-content;
}
- div.ul_container {
- background-color: #f0f0f0;
- width: -moz-fit-content;
- width: fit-content;
- margin: 6px 0;
- }
-
- div.ul_container::after, div.ul_container::before {
- display: block;
- height: 6px;
- content: "";
- background: linear-gradient(transparent, #555);
- }
-
- div.ul_container::after {
- background: linear-gradient(#555, transparent);
- }
-
- .work_li div.ul_container::before {
+ .work_li .table_wrapper::before {
background: linear-gradient(#e0f0f0, #555);
}
- .work_li div.ul_container::after {
+ .work_li .table_wrapper::after {
background: linear-gradient(#555, #e0f0f0);
}
- div.ul_container>.always_scrollbar{
+ .table_wrapper>.always_scrollbar{
border-left: solid #454 8px;
max-height: 80vh;
overflow-y: scroll;
}
- div.ul_container table {
- border-collapse: unset;
- }
-
- div.ul_container, div.ul_container>*, div.ul_container table>tbody {
- width: -moz-min-content;
- width: min-content;
- }
-
- div.ul_container div.ul_container>.always_scrollbar,
- .popup_frame div.ul_container>.always_scrollbar {
+ .table_wrapper .table_wrapper>.always_scrollbar,
+ .popup_frame .table_wrapper>.always_scrollbar {
max-height: 60vh;
}
- .popup_frame div.ul_container table {
+ .popup_frame .table_wrapper table {
min-width: 30vw;
}
- .popup_frame div.ul_container {
+ .popup_frame .table_wrapper {
margin: 0 auto;
}
- tr:nth-child(odd) {
- background-color: #e5e5e5;
- }
-
- td {
- vertical-align: middle;
- min-width: fit-content;
- min-width: -moz-fit-content;
- width: 1%;
- }
-
tr>td:first-child {
- padding: 3px 10px 6px;
max-width: 70vw;
overflow: hidden;
- width: 100%;
- white-space: nowrap;
}
tr.work_li>td:first-child {
@@ -198,14 +152,6 @@
min-width: 70vw;
resize: none;
}
-
- td>div.button {
- margin-right: 4px;
- }
-
- input[type="radio"]:not(:checked)+.import_window_content {
- display: none;
- }
</style>
</head>
<body>
@@ -239,7 +185,7 @@
<input type="radio" name="tabs" id="show_pages" checked></input>
<input type="radio" name="tabs" id="show_bags"></input>
<input type="radio" name="tabs" id="show_scripts"></input>
- <div id="tab_heads">
+ <div id="tab_heads" class="has_bottom_line">
<label for="show_repos" id="repos_lbl"> Repos </label>
<label for="show_pages" id="pages_lbl"> Pages </label>
<label for="show_bags" id="bags_lbl"> Bags </label>
@@ -247,7 +193,7 @@
<button id="import_but" style="margin-left: 40px;"> Import </button>
</div>
<div id="repos" class="tab">
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div>
<table>
<tbody id="repos_ul">
@@ -270,7 +216,7 @@
<button id="add_repo_but" type="button"> Add repository </button>
</div>
<div id="pages" class="tab">
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div>
<table>
<tbody id="pages_ul">
@@ -304,7 +250,7 @@
<button id="add_page_but" type="button"> Add page </button>
</div>
<div id="bags" class="tab">
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div>
<table>
<tbody id="bags_ul">
@@ -313,7 +259,7 @@
<div class="form_grid">
<label for="bag_name_field"> Name: </label>
<input id="bag_name_field"></input>
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div>
<table>
<tbody id="bag_components_ul">
@@ -341,7 +287,7 @@
<button id="add_bag_but" type="button"> Add bag </button>
</div>
<div id="scripts" class="tab">
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div>
<table>
<tbody id="scripts_ul">
@@ -375,7 +321,7 @@
<div id="chbx_components_window" class="hide popup" position="absolute">
<div class="popup_frame">
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div>
<table>
<tbody id="chbx_components_ul">
@@ -390,7 +336,7 @@
<div id="radio_components_window" class="hide popup" position="absolute">
<div class="popup_frame">
- <div class="ul_container">
+ <div class="table_wrapper tight_table has_bottom_line has_upper_line">
<div class="always_scrollbar">
<table>
<tbody id="radio_components_ul">
@@ -411,6 +357,7 @@
<div id="import_window" class="hide popup" position="absolute">
<div class="popup_frame">
+ <h2> Settings import </h2>
<IMPORT html/import_frame.html />
</div>
</div>
generated by cgit