diff options
Diffstat (limited to 'html/options.html')
| -rw-r--r-- | html/options.html | 95 |
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> |