summaryrefslogtreecommitdiff
path: root/ext/bg/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-09-12 11:22:17 -0400
committerGitHub <noreply@github.com>2020-09-12 11:22:17 -0400
commit41db9ec89b8eb76009f0cf8894aa0f6e2cc2f8bd (patch)
treeaa58d7b8b7a004c1cd35b43c73c61a654608b400 /ext/bg/css
parent568775c6dc9ff4acc2386b8983cda037b87655e0 (diff)
Use a grid layout for scanning inputs (#814)
Diffstat (limited to 'ext/bg/css')
-rw-r--r--ext/bg/css/settings.css62
1 files changed, 45 insertions, 17 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 0bf15f01..a66a0455 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -131,20 +131,19 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
.scan-input-list {
counter-reset: scan-input-id;
}
-.scan-input-table {
+.scan-input-grid {
+ display: grid;
+ grid-template-columns: auto auto 1fr auto;
+ grid-template-rows: auto;
width: 100%;
margin-bottom: 8px;
}
.scan-input-index-cell {
- position: relative;
- min-width: 40px;
+ grid-area: 1/1/4/1;
}
.scan-input-index {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ height: 100%;
+ width: 40px;
font-size: 14px;
color: #555;
background-color: #eee;
@@ -168,17 +167,42 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
background-color: #eee;
border: 1px solid #ccc;
width: 100%;
+ height: 100%;
}
.scan-input-input-cell {
width: 100%;
}
+.scan-input-content-cell .form-control,
+.scan-input-content-cell button {
+ border-radius: 0;
+}
+.scan-input-prefix-cell[data-property=include] {
+ grid-area: 1/2/1/2;
+}
+.scan-input-prefix-cell[data-property=exclude] {
+ grid-area: 2/2/2/2;
+}
+.scan-input-prefix-cell[data-property=types] {
+ grid-area: 3/2/3/2;
+}
+.scan-input-content-cell[data-property=include] {
+ grid-area: 1/3/1/3;
+}
+.scan-input-content-cell[data-property=exclude] {
+ grid-area: 2/3/2/3;
+}
+.scan-input-content-cell[data-property=types] {
+ grid-area: 3/3/3/3;
+}
+.scan-input-suffix-cell {
+ grid-area: 1/4/1/4;
+}
+.scan-input-suffix-cell>button {
+ height: 100%;
+}
.scan-input-input-cell-inner {
display: flex;
}
-.scan-input-input-cell-inner .form-control,
-.scan-input-input-cell-inner button {
- border-radius: 0;
-}
.scan-input-input-cell-inner button {
padding-left: 10px;
padding-right: 10px;
@@ -186,22 +210,26 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
.scan-input-input-cell-inner button>span {
width: 20px;
}
-.scan-input-remove-button-cell>button {
+.scan-input-suffix-cell>button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
-.scan-input tr:last-of-type .scan-input-input-cell-inner button:last-of-type,
-.scan-input tr:last-of-type .scan-input-input-cell-inner .form-control:last-of-type {
+.scan-input-input-cell-inner>.scan-input-type-list-container {
+ height: auto;
+ min-height: 34px;
border-bottom-right-radius: 4px;
+ padding-top: 5px;
+ padding-bottom: 5px;
}
.scan-input-type-list {
display: flex;
+ flex-flow: row wrap;
+ margin-left: -1em;
}
.scan-input-type {
font-weight: normal;
margin: 0;
-}
-.scan-input-type+.scan-input-type {
+ white-space: nowrap;
margin-left: 1em;
}
.scan-input-type>input[type=checkbox] {