Use css nesting

nummi/main/static/main/css/form.css

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

nummi/main/static/main/css/main.css

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

nummi/main/static/main/css/plot.css

@@ -1,52 +1,33 @@
 table.full-width col.bar {
   width: auto;
 }
+
 .plot {
   overflow-x: auto;
-}
 
-.plot td.bar {
+  td.bar {
     position: relative;
     padding: 0;
+    @media (width < 720px) {
+      width: 0;
+      overflow: hidden;
     }
-.plot td.bar div {
+
+    div {
       position: absolute;
       height: 0.5rem;
       top: 0;
-}
+      &:not(.tot) {
-
-.plot td.bar div:not(.tot) {
         width: 0;
         box-sizing: border-box;
         z-index: 1;
         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;
         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;
           display: inline-block;
           white-space: nowrap;
@@ -57,60 +38,62 @@ table.full-width col.bar {
           height: 1.5rem;
           font-feature-settings: var(--num);
         }
-.plot td.bar.p div.tot span {
+      }
+    }
+    &.p div {
+      left: 0;
+      border-radius: 0 var(--radius) var(--radius) 0;
+      background: var(--green-1);
+      &.tot {
+        background: var(--green);
+
+        span {
           left: 0;
         }
-.plot td.bar.m div.tot span {
+      }
+    }
+    &.m div {
+      right: 0;
+      border-radius: var(--radius) 0 0 var(--radius);
+      background: var(--red-1);
+      &.tot {
+        background: var(--red);
+
+        span {
           right: 0;
         }
-.plot tr.empty {
+      }
+    }
+  }
+  tr.empty {
     height: 0.5rem;
   }
-.plot tr.even {
+  tr.even {
     background: #eeeeff;
   }
-
+  tfoot {
-@media (width < 720px) {
-  .plot .bar {
-    width: 0;
-    overflow: hidden;
-  }
-}
-
-.plot tfoot {
     background: var(--bg-01);
   }
-
-.calendar tbody tr {
-  background: initial;
 }
+
 .calendar {
   margin-top: var(--gap);
+
+  tbody tr {
+    background: initial;
   }
-.calendar .p {
+  .p {
     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);
   }
-.calendar tbody tr:not(:last-child) {
+  tbody tr {
+    &:not(:last-child) {
       border-bottom: none;
     }
-.calendar tbody tr:not(:first-child) {
+    &:not(:first-child) {
       border-top: none;
     }
+  }
+}

nummi/main/static/main/css/table.css

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