Revision 453ba039
Added by koszko about 2 years ago
| html/options.html | ||
|---|---|---|
| 9 | 9 |
<title>Hachette options</title> |
| 10 | 10 |
<link type="text/css" rel="stylesheet" href="reset.css" /> |
| 11 | 11 |
<link type="text/css" rel="stylesheet" href="base.css" /> |
| 12 |
<link type="text/css" rel="stylesheet" href="table.css" /> |
|
| 12 | 13 |
<style> |
| 13 | 14 |
body {
|
| 14 |
background-color: #f0f0f0; |
|
| 15 |
color: #555; |
|
| 16 |
overflow: auto; |
|
| 17 | 15 |
width: 100%; |
| 18 | 16 |
} |
| 19 | 17 |
|
| ... | ... | |
| 37 | 35 |
font-size: 130%; |
| 38 | 36 |
padding: 10px; |
| 39 | 37 |
display: inline-block; |
| 38 |
cursor: pointer; |
|
| 39 |
} |
|
| 40 |
|
|
| 41 |
#tab_heads {
|
|
| 40 | 42 |
-moz-user-select: none; |
| 41 | 43 |
user-select: none; |
| 42 | 44 |
} |
| ... | ... | |
| 49 | 51 |
border-radius: 0; |
| 50 | 52 |
} |
| 51 | 53 |
|
| 52 |
#tab_heads::after {
|
|
| 53 |
display: block; |
|
| 54 |
height: 8px; |
|
| 55 |
content: ""; |
|
| 56 |
background: linear-gradient(#555, transparent); |
|
| 57 |
} |
|
| 58 |
|
|
| 59 | 54 |
div.tab {
|
| 60 | 55 |
min-width: 50vw; |
| 61 | 56 |
width: fit-content; |
| ... | ... | |
| 86 | 81 |
width: fit-content; |
| 87 | 82 |
} |
| 88 | 83 |
|
| 89 |
div.ul_container {
|
|
| 90 |
background-color: #f0f0f0; |
|
| 91 |
width: -moz-fit-content; |
|
| 92 |
width: fit-content; |
|
| 93 |
margin: 6px 0; |
|
| 94 |
} |
|
| 95 |
|
|
| 96 |
div.ul_container::after, div.ul_container::before {
|
|
| 97 |
display: block; |
|
| 98 |
height: 6px; |
|
| 99 |
content: ""; |
|
| 100 |
background: linear-gradient(transparent, #555); |
|
| 101 |
} |
|
| 102 |
|
|
| 103 |
div.ul_container::after {
|
|
| 104 |
background: linear-gradient(#555, transparent); |
|
| 105 |
} |
|
| 106 |
|
|
| 107 |
.work_li div.ul_container::before {
|
|
| 84 |
.work_li .table_wrapper::before {
|
|
| 108 | 85 |
background: linear-gradient(#e0f0f0, #555); |
| 109 | 86 |
} |
| 110 | 87 |
|
| 111 |
.work_li div.ul_container::after {
|
|
| 88 |
.work_li .table_wrapper::after {
|
|
| 112 | 89 |
background: linear-gradient(#555, #e0f0f0); |
| 113 | 90 |
} |
| 114 | 91 |
|
| 115 |
div.ul_container>.always_scrollbar{
|
|
| 92 |
.table_wrapper>.always_scrollbar{
|
|
| 116 | 93 |
border-left: solid #454 8px; |
| 117 | 94 |
max-height: 80vh; |
| 118 | 95 |
overflow-y: scroll; |
| 119 | 96 |
} |
| 120 | 97 |
|
| 121 |
div.ul_container table {
|
|
| 122 |
border-collapse: unset; |
|
| 123 |
} |
|
| 124 |
|
|
| 125 |
div.ul_container, div.ul_container>*, div.ul_container table>tbody {
|
|
| 126 |
width: -moz-min-content; |
|
| 127 |
width: min-content; |
|
| 128 |
} |
|
| 129 |
|
|
| 130 |
div.ul_container div.ul_container>.always_scrollbar, |
|
| 131 |
.popup_frame div.ul_container>.always_scrollbar {
|
|
| 98 |
.table_wrapper .table_wrapper>.always_scrollbar, |
|
| 99 |
.popup_frame .table_wrapper>.always_scrollbar {
|
|
| 132 | 100 |
max-height: 60vh; |
| 133 | 101 |
} |
| 134 | 102 |
|
| 135 |
.popup_frame div.ul_container table {
|
|
| 103 |
.popup_frame .table_wrapper table {
|
|
| 136 | 104 |
min-width: 30vw; |
| 137 | 105 |
} |
| 138 | 106 |
|
| 139 |
.popup_frame div.ul_container {
|
|
| 107 |
.popup_frame .table_wrapper {
|
|
| 140 | 108 |
margin: 0 auto; |
| 141 | 109 |
} |
| 142 | 110 |
|
| 143 |
tr:nth-child(odd) {
|
|
| 144 |
background-color: #e5e5e5; |
|
| 145 |
} |
|
| 146 |
|
|
| 147 |
td {
|
|
| 148 |
vertical-align: middle; |
|
| 149 |
min-width: fit-content; |
|
| 150 |
min-width: -moz-fit-content; |
|
| 151 |
width: 1%; |
|
| 152 |
} |
|
| 153 |
|
|
| 154 | 111 |
tr>td:first-child {
|
| 155 |
padding: 3px 10px 6px; |
|
| 156 | 112 |
max-width: 70vw; |
| 157 | 113 |
overflow: hidden; |
| 158 |
width: 100%; |
|
| 159 |
white-space: nowrap; |
|
| 160 | 114 |
} |
| 161 | 115 |
|
| 162 | 116 |
tr.work_li>td:first-child {
|
| ... | ... | |
| 198 | 152 |
min-width: 70vw; |
| 199 | 153 |
resize: none; |
| 200 | 154 |
} |
| 201 |
|
|
| 202 |
td>div.button {
|
|
| 203 |
margin-right: 4px; |
|
| 204 |
} |
|
| 205 |
|
|
| 206 |
input[type="radio"]:not(:checked)+.import_window_content {
|
|
| 207 |
display: none; |
|
| 208 |
} |
|
| 209 | 155 |
</style> |
| 210 | 156 |
</head> |
| 211 | 157 |
<body> |
| ... | ... | |
| 239 | 185 |
<input type="radio" name="tabs" id="show_pages" checked></input> |
| 240 | 186 |
<input type="radio" name="tabs" id="show_bags"></input> |
| 241 | 187 |
<input type="radio" name="tabs" id="show_scripts"></input> |
| 242 |
<div id="tab_heads"> |
|
| 188 |
<div id="tab_heads" class="has_bottom_line">
|
|
| 243 | 189 |
<label for="show_repos" id="repos_lbl"> Repos </label> |
| 244 | 190 |
<label for="show_pages" id="pages_lbl"> Pages </label> |
| 245 | 191 |
<label for="show_bags" id="bags_lbl"> Bags </label> |
| ... | ... | |
| 247 | 193 |
<button id="import_but" style="margin-left: 40px;"> Import </button> |
| 248 | 194 |
</div> |
| 249 | 195 |
<div id="repos" class="tab"> |
| 250 |
<div class="ul_container">
|
|
| 196 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 251 | 197 |
<div> |
| 252 | 198 |
<table> |
| 253 | 199 |
<tbody id="repos_ul"> |
| ... | ... | |
| 270 | 216 |
<button id="add_repo_but" type="button"> Add repository </button> |
| 271 | 217 |
</div> |
| 272 | 218 |
<div id="pages" class="tab"> |
| 273 |
<div class="ul_container">
|
|
| 219 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 274 | 220 |
<div> |
| 275 | 221 |
<table> |
| 276 | 222 |
<tbody id="pages_ul"> |
| ... | ... | |
| 304 | 250 |
<button id="add_page_but" type="button"> Add page </button> |
| 305 | 251 |
</div> |
| 306 | 252 |
<div id="bags" class="tab"> |
| 307 |
<div class="ul_container">
|
|
| 253 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 308 | 254 |
<div> |
| 309 | 255 |
<table> |
| 310 | 256 |
<tbody id="bags_ul"> |
| ... | ... | |
| 313 | 259 |
<div class="form_grid"> |
| 314 | 260 |
<label for="bag_name_field"> Name: </label> |
| 315 | 261 |
<input id="bag_name_field"></input> |
| 316 |
<div class="ul_container">
|
|
| 262 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 317 | 263 |
<div> |
| 318 | 264 |
<table> |
| 319 | 265 |
<tbody id="bag_components_ul"> |
| ... | ... | |
| 341 | 287 |
<button id="add_bag_but" type="button"> Add bag </button> |
| 342 | 288 |
</div> |
| 343 | 289 |
<div id="scripts" class="tab"> |
| 344 |
<div class="ul_container">
|
|
| 290 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 345 | 291 |
<div> |
| 346 | 292 |
<table> |
| 347 | 293 |
<tbody id="scripts_ul"> |
| ... | ... | |
| 375 | 321 |
|
| 376 | 322 |
<div id="chbx_components_window" class="hide popup" position="absolute"> |
| 377 | 323 |
<div class="popup_frame"> |
| 378 |
<div class="ul_container">
|
|
| 324 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 379 | 325 |
<div> |
| 380 | 326 |
<table> |
| 381 | 327 |
<tbody id="chbx_components_ul"> |
| ... | ... | |
| 390 | 336 |
|
| 391 | 337 |
<div id="radio_components_window" class="hide popup" position="absolute"> |
| 392 | 338 |
<div class="popup_frame"> |
| 393 |
<div class="ul_container">
|
|
| 339 |
<div class="table_wrapper tight_table has_bottom_line has_upper_line">
|
|
| 394 | 340 |
<div class="always_scrollbar"> |
| 395 | 341 |
<table> |
| 396 | 342 |
<tbody id="radio_components_ul"> |
| ... | ... | |
| 411 | 357 |
|
| 412 | 358 |
<div id="import_window" class="hide popup" position="absolute"> |
| 413 | 359 |
<div class="popup_frame"> |
| 360 |
<h2> Settings import </h2> |
|
| 414 | 361 |
<IMPORT html/import_frame.html /> |
| 415 | 362 |
</div> |
| 416 | 363 |
</div> |
Also available in: Unified diff
add styling for popup page\n\nThis does not include styling for contents of the import dialog