Use css nesting
This commit is contained in:
parent
ee043d3956
commit
e4e0f56be0
GPG key ID:
9833D3C5A25BD227
4 changed files with 249 additions and 248 deletions
|
|
@ -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 {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
nav a.cur {
|
||||
&.cur {
|
||||
font-weight: 550;
|
||||
}
|
||||
nav a.cur::after {
|
||||
&::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);
|
||||
}
|
||||
.pagination a {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.plot td.bar div:not(.tot) {
|
||||
&:not(.tot) {
|
||||
width: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
.plot td.bar.p div {
|
||||
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 {
|
||||
&.tot {
|
||||
z-index: 10;
|
||||
height: 0.5rem;
|
||||
}
|
||||
.plot td.bar.m div.tot {
|
||||
background: var(--red);
|
||||
}
|
||||
.plot td.bar.p div.tot {
|
||||
background: var(--green);
|
||||
}
|
||||
.plot td.bar div.tot span {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media (width < 720px) {
|
||||
.plot .bar {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.plot tfoot {
|
||||
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 {
|
||||
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 {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue