Karavel/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Unify table button styling

Browse Source
This commit is contained in:
cryptogopher 2024-01-22 02:02:15 +01:00
parent 0e85a21d2c
commit 917764fd71
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/stylesheets/application.css
View File

@ -71,23 +71,25 @@ textarea {
/* gray - target for interaction with keyboard */ /* gray - target for interaction with keyboard */
/* TODO: remove non-font-size rems from buttons/inputs below */ /* TODO: remove non-font-size rems from buttons/inputs below */
a, a,
button {
white-space: nowrap;
}
a,
button, button,
input[type=submit] { input[type=submit] {
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.button,
button,
input[type=submit],
.tab {
align-items: center; align-items: center;
color: var(--color-gray); color: var(--color-gray);
cursor: pointer; display: flex;
fill: var(--color-gray); fill: var(--color-gray);
font-weight: bold; font-weight: bold;
text-decoration: none;
} }
.button, .button,
button, button,
input[type=submit] { input[type=submit] {
display: flex;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.4em; padding: 0.4em;
width: fit-content; width: fit-content;
@ -183,7 +185,6 @@ input[type=text]:read-only {
} }
.navigation > .tab { .navigation > .tab {
border-bottom: solid 2px var(--color-nav-gray); border-bottom: solid 2px var(--color-nav-gray);
display: flex;
flex: 1; flex: 1;
font-size: 1rem; font-size: 1rem;
justify-content: center; justify-content: center;
@ -406,10 +407,18 @@ table.items input[type=submit] {
font-weight: normal; font-weight: normal;
padding: 0.3em; padding: 0.3em;
} }
table.items select:not(:hover), /* TODO: find a way (layers?) to style inputs differently while making sure
* hover works properly without using :not(:hover) selectors here. */
table.items .button:not(:hover), table.items .button:not(:hover),
table.items button:not(:hover) { table.items button:not(:hover),
table.items input:not(:hover),
table.items select:not(:hover) {
border-color: var(--color-border-gray); border-color: var(--color-border-gray);
}
table.items .button:not(:hover),
table.items button:not(:hover),
table.items input[type=submit]:not(:hover),
table.items select:not(:hover) {
color: var(--color-table-gray); color: var(--color-table-gray);
} }
table.items select:focus-within, table.items select:focus-within,