edpibu
/
nummi
1
Fork 0
Code Issues 4 Releases Activity

Use css nesting

This commit is contained in:
Edgar P. Burkhart 2023-12-31 09:37:29 +01:00
parent ee043d3956
commit e4e0f56be0
Signed by: edpibu
GPG Key ID: 9833D3C5A25BD227
4 changed files with 249 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
nummi/main/static/main/css/form.css
View File

@ -5,56 +5,64 @@ form ul.errorlist {
margin: 0; margin: 0;
} }
form > table > tbody > tr > th { form {
> table > tbody > tr > th {
background: var(--bg-01); background: var(--bg-01);
background-clip: padding-box; background-clip: padding-box;
} }
form tbody :is(input, select, textarea) { tbody :is(input, select, textarea) {
font: inherit; font: inherit;
border: none; border: none;
background: transparent; background: transparent;
width: 100%; width: 100%;
height: 100%; height: 100%;
line-height: 1.5; line-height: 1.5;
} }
form input[type="checkbox"] { input[type="checkbox"] {
width: initial; width: initial;
}
tfoot {
text-align: right;
}
} }
table.file-input tr { table.file-input {
tr {
border: none; border: none;
}
table.file-input th { :first-child {
text-align: left;
}
table.file-input tr :first-child {
padding-left: 0; padding-left: 0;
} }
table.file-input tr :last-child { :last-child {
padding-right: 0; padding-right: 0;
}
}
th {
text-align: left;
}
} }
form tfoot { .buttons {
text-align: right; input {
}
.buttons input {
font: inherit; font: inherit;
line-height: 1.5; line-height: 1.5;
margin-left: var(--gap); margin-left: var(--gap);
border-radius: var(--radius); border-radius: var(--radius);
padding: 0 var(--gap); padding: 0 var(--gap);
cursor: pointer; cursor: pointer;
}
.buttons input:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
.buttons input[type="submit"] { &[type="submit"] {
border: 0.1rem solid var(--green); border: 0.1rem solid var(--green);
background: var(--green-1); background: var(--green-1);
} }
.buttons input[type="reset"] { &[type="reset"] {
border: 0.1rem solid var(--red); border: 0.1rem solid var(--red);
background: var(--red-1); background: var(--red-1);
} }
.buttons a.del { }
a.del {
color: var(--red); color: var(--red);
}
} }

86
nummi/main/static/main/css/main.css
View File

@ -60,9 +60,17 @@ a {
color: var(--text-link); color: var(--text-link);
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
}
a:is(:hover, :focus) { &:is(:hover, :focus) {
text-decoration: underline; text-decoration: underline;
}
&.big-link {
margin-right: 1em;
}
&.big-link [class^="ri-"] {
margin-right: 0.5em;
}
} }
.red { .red {
@ -83,6 +91,9 @@ main {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
overflow-x: hidden; overflow-x: hidden;
h2.new {
opacity: 0.8;
}
} }
nav { nav {
grid-column: 1; grid-column: 1;
@ -95,32 +106,34 @@ nav {
background: var(--bg-01); background: var(--bg-01);
line-height: 2rem; line-height: 2rem;
}
nav h1 img { h1 img {
height: 1cap; height: 1cap;
} }
nav ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative; position: relative;
} }
nav .skip-link { a {
&.skip-link {
font-weight: 300; font-weight: 300;
}
nav .skip-link:is(:active, :focus) { &:is(:active, :focus) {
font-weight: 500; font-weight: 500;
} }
nav a { }
display: block; display: block;
} &.cur {
nav a.cur {
font-weight: 550; font-weight: 550;
} &::after {
nav a.cur::after {
content: "◎"; content: "◎";
position: absolute; position: absolute;
right: 0; right: 0;
}
}
}
} }
:is(nav, main) > :first-child { :is(nav, main) > :first-child {
margin-top: 0; margin-top: 0;
@ -134,17 +147,19 @@ footer {
.pagination { .pagination {
text-align: center; text-align: center;
font-feature-settings: var(--num); font-feature-settings: var(--num);
} a {
.pagination a {
min-width: 1rem; min-width: 1rem;
padding: 0 0.5rem; padding: 0 0.5rem;
}
.pagination a.cur { &.cur {
font-weight: 650; font-weight: 650;
text-decoration: underline dotted; text-decoration: underline dotted;
}
.pagination a.cur:is(:hover, :focus) { &:is(:hover, :focus) {
text-decoration: underline; text-decoration: underline;
}
}
}
} }
@media (width < 1024px) { @media (width < 1024px) {
@ -160,13 +175,6 @@ footer {
height: initial; height: initial;
} }
} }
a.big-link {
margin-right: 1em;
}
a.big-link [class^="ri-"] {
margin-right: 0.5em;
}
[class^="ri-"] { [class^="ri-"] {
font-weight: normal; font-weight: normal;
} }
@ -188,9 +196,6 @@ h2 {
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
main h2.new {
opacity: 0.8;
}
p { p {
margin: 0.5em 0; margin: 0.5em 0;
} }
@ -201,18 +206,19 @@ ul.messages {
margin: 0; margin: 0;
background: var(--bg-01); background: var(--bg-01);
padding: 0; padding: 0;
}
ul.messages li { li {
padding: calc(var(--gap) / 2) var(--gap); padding: calc(var(--gap) / 2) var(--gap);
border-left: var(--border) solid var(--gray); border-left: var(--border) solid var(--gray);
}
ul.messages li.msg-level-25 { &.msg-level-25 {
border-left-color: var(--green-1); border-left-color: var(--green-1);
} }
ul.messages li.msg-level-30 { &.msg-level-30 {
border-left-color: var(--red-1); border-left-color: var(--red-1);
} }
ul.messages li.msg-level-40 { &.msg-level-40 {
border-left-color: var(--red); border-left-color: var(--red);
}
}
} }

139
nummi/main/static/main/css/plot.css
View File

@ -1,52 +1,33 @@
table.full-width col.bar { table.full-width col.bar {
width: auto; width: auto;
} }
.plot { .plot {
overflow-x: auto; overflow-x: auto;
}
.plot td.bar { td.bar {
position: relative; position: relative;
padding: 0; padding: 0;
} @media (width < 720px) {
.plot td.bar div { width: 0;
overflow: hidden;
}
div {
position: absolute; position: absolute;
height: 0.5rem; height: 0.5rem;
top: 0; top: 0;
} &:not(.tot) {
.plot td.bar div:not(.tot) {
width: 0; width: 0;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
display: inline-block; display: inline-block;
} }
.plot td.bar.p div { &.tot {
left: 0;
border-radius: 0 var(--radius) var(--radius) 0;
}
.plot td.bar.m div {
right: 0;
border-radius: var(--radius) 0 0 var(--radius);
}
.plot td.bar.m div {
background: var(--red-1);
}
.plot td.bar.p div {
background: var(--green-1);
}
.plot td.bar div.tot {
z-index: 10; z-index: 10;
height: 0.5rem; height: 0.5rem;
}
.plot td.bar.m div.tot { span {
background: var(--red);
}
.plot td.bar.p div.tot {
background: var(--green);
}
.plot td.bar div.tot span {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
@ -56,61 +37,63 @@ table.full-width col.bar {
line-height: 1.5rem; line-height: 1.5rem;
height: 1.5rem; height: 1.5rem;
font-feature-settings: var(--num); font-feature-settings: var(--num);
} }
.plot td.bar.p div.tot span { }
}
&.p div {
left: 0; left: 0;
} border-radius: 0 var(--radius) var(--radius) 0;
.plot td.bar.m div.tot span { background: var(--green-1);
right: 0; &.tot {
} background: var(--green);
.plot tr.empty {
height: 0.5rem;
}
.plot tr.even {
background: #eeeeff;
}
@media (width < 720px) { span {
.plot .bar { left: 0;
width: 0; }
overflow: hidden; }
}
&.m div {
right: 0;
border-radius: var(--radius) 0 0 var(--radius);
background: var(--red-1);
&.tot {
background: var(--red);
span {
right: 0;
}
}
}
}
tr.empty {
height: 0.5rem;
}
tr.even {
background: #eeeeff;
}
tfoot {
background: var(--bg-01);
} }
} }
.plot tfoot {
background: var(--bg-01);
}
.calendar tbody tr {
background: initial;
}
.calendar { .calendar {
margin-top: var(--gap); margin-top: var(--gap);
}
.calendar .p { tbody tr {
background: initial;
}
.p {
background: var(--green); background: var(--green);
} }
.calendar .o-0 { .m {
opacity: 0.1;
}
.calendar .o-1 {
opacity: 0.5;
}
.calendar .o-2 {
opacity: 0.75;
}
.calendar .o-3 {
opacity: 0.9;
}
.calendar .o-4 {
opacity: 1;
}
.calendar .m {
background: var(--red); background: var(--red);
} }
.calendar tbody tr:not(:last-child) { tbody tr {
&:not(:last-child) {
border-bottom: none; border-bottom: none;
} }
.calendar tbody tr:not(:first-child) { &:not(:first-child) {
border-top: none; border-top: none;
}
}
} }

50
nummi/main/static/main/css/table.css
View File

@ -4,37 +4,46 @@ form {
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
}
table.more tbody:last-child tr:last-child { &.more tbody:last-child tr:last-child {
border-bottom: 1px dashed var(--gray); border-bottom: 1px dashed var(--gray);
} }
table.full-width { &.full-width {
width: 100%; width: 100%;
}
thead { col {
background: var(--bg-01);
}
table.full-width col {
width: 8rem; width: 8rem;
} }
table col.icon { }
col.icon {
width: 1ch; width: 1ch;
} }
tr { thead {
background: var(--bg-01);
}
tr {
border: 1px solid var(--gray); border: 1px solid var(--gray);
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
}
.table tbody tr:nth-of-type(even) { tbody &:nth-of-type(even) {
background: #eeeeff; background: #eeeeff;
} }
td, }
th { td,
th {
padding: 0 var(--gap); padding: 0 var(--gap);
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
&.empty {
text-align: center;
opacity: 0.8;
font-weight: 300;
}
}
} }
.date, .date,
.value { .value {
font-feature-settings: var(--num); font-feature-settings: var(--num);
@ -50,8 +59,3 @@ th {
.date { .date {
text-align: center; text-align: center;
} }
td.empty {
text-align: center;
opacity: 0.8;
font-weight: 300;
}