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,56 +5,64 @@ form ul.errorlist {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
form > table > tbody > tr > th {
|
form {
|
||||||
background: var(--bg-01);
|
> table > tbody > tr > th {
|
||||||
background-clip: padding-box;
|
background: var(--bg-01);
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
tbody :is(input, select, textarea) {
|
||||||
|
font: inherit;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: initial;
|
||||||
|
}
|
||||||
|
tfoot {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
form tbody :is(input, select, textarea) {
|
table.file-input {
|
||||||
font: inherit;
|
tr {
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
|
||||||
width: 100%;
|
:first-child {
|
||||||
height: 100%;
|
padding-left: 0;
|
||||||
line-height: 1.5;
|
}
|
||||||
}
|
:last-child {
|
||||||
form input[type="checkbox"] {
|
padding-right: 0;
|
||||||
width: initial;
|
}
|
||||||
}
|
}
|
||||||
table.file-input tr {
|
th {
|
||||||
border: none;
|
text-align: left;
|
||||||
}
|
}
|
||||||
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 {
|
.buttons {
|
||||||
text-align: right;
|
input {
|
||||||
}
|
font: inherit;
|
||||||
.buttons input {
|
line-height: 1.5;
|
||||||
font: inherit;
|
margin-left: var(--gap);
|
||||||
line-height: 1.5;
|
border-radius: var(--radius);
|
||||||
margin-left: var(--gap);
|
padding: 0 var(--gap);
|
||||||
border-radius: var(--radius);
|
cursor: pointer;
|
||||||
padding: 0 var(--gap);
|
|
||||||
cursor: pointer;
|
&:hover {
|
||||||
}
|
text-decoration: underline;
|
||||||
.buttons input:hover {
|
}
|
||||||
text-decoration: underline;
|
&[type="submit"] {
|
||||||
}
|
border: 0.1rem solid var(--green);
|
||||||
.buttons input[type="submit"] {
|
background: var(--green-1);
|
||||||
border: 0.1rem solid var(--green);
|
}
|
||||||
background: var(--green-1);
|
&[type="reset"] {
|
||||||
}
|
border: 0.1rem solid var(--red);
|
||||||
.buttons input[type="reset"] {
|
background: var(--red-1);
|
||||||
border: 0.1rem solid var(--red);
|
}
|
||||||
background: var(--red-1);
|
}
|
||||||
}
|
a.del {
|
||||||
.buttons a.del {
|
color: var(--red);
|
||||||
color: var(--red);
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
font-weight: 300;
|
&.skip-link {
|
||||||
}
|
font-weight: 300;
|
||||||
nav .skip-link:is(:active, :focus) {
|
|
||||||
font-weight: 500;
|
&:is(:active, :focus) {
|
||||||
}
|
font-weight: 500;
|
||||||
nav a {
|
}
|
||||||
display: block;
|
}
|
||||||
}
|
display: block;
|
||||||
nav a.cur {
|
&.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;
|
|
||||||
}
|
&.cur {
|
||||||
.pagination a.cur {
|
font-weight: 650;
|
||||||
font-weight: 650;
|
text-decoration: underline dotted;
|
||||||
text-decoration: underline dotted;
|
|
||||||
}
|
&:is(:hover, :focus) {
|
||||||
.pagination a.cur: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 {
|
|
||||||
padding: calc(var(--gap) / 2) var(--gap);
|
|
||||||
border-left: var(--border) solid var(--gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.messages li.msg-level-25 {
|
li {
|
||||||
border-left-color: var(--green-1);
|
padding: calc(var(--gap) / 2) var(--gap);
|
||||||
}
|
border-left: var(--border) solid var(--gray);
|
||||||
ul.messages li.msg-level-30 {
|
|
||||||
border-left-color: var(--red-1);
|
&.msg-level-25 {
|
||||||
}
|
border-left-color: var(--green-1);
|
||||||
ul.messages li.msg-level-40 {
|
}
|
||||||
border-left-color: var(--red);
|
&.msg-level-30 {
|
||||||
|
border-left-color: var(--red-1);
|
||||||
|
}
|
||||||
|
&.msg-level-40 {
|
||||||
|
border-left-color: var(--red);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,116 +1,99 @@
|
||||||
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;
|
||||||
position: absolute;
|
overflow: hidden;
|
||||||
height: 0.5rem;
|
}
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plot td.bar div:not(.tot) {
|
div {
|
||||||
width: 0;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
height: 0.5rem;
|
||||||
z-index: 1;
|
top: 0;
|
||||||
display: inline-block;
|
&:not(.tot) {
|
||||||
}
|
width: 0;
|
||||||
.plot td.bar.p div {
|
box-sizing: border-box;
|
||||||
left: 0;
|
z-index: 1;
|
||||||
border-radius: 0 var(--radius) var(--radius) 0;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.plot td.bar.m div {
|
&.tot {
|
||||||
right: 0;
|
z-index: 10;
|
||||||
border-radius: var(--radius) 0 0 var(--radius);
|
height: 0.5rem;
|
||||||
}
|
|
||||||
.plot td.bar.m div {
|
|
||||||
background: var(--red-1);
|
|
||||||
}
|
|
||||||
.plot td.bar.p div {
|
|
||||||
background: var(--green-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.plot td.bar div.tot {
|
span {
|
||||||
z-index: 10;
|
position: absolute;
|
||||||
height: 0.5rem;
|
display: inline-block;
|
||||||
}
|
white-space: nowrap;
|
||||||
.plot td.bar.m div.tot {
|
margin: 0 var(--gap);
|
||||||
background: var(--red);
|
font-weight: 650;
|
||||||
}
|
top: 0.5rem;
|
||||||
.plot td.bar.p div.tot {
|
line-height: 1.5rem;
|
||||||
background: var(--green);
|
height: 1.5rem;
|
||||||
}
|
font-feature-settings: var(--num);
|
||||||
.plot td.bar div.tot span {
|
}
|
||||||
position: absolute;
|
}
|
||||||
display: inline-block;
|
}
|
||||||
white-space: nowrap;
|
&.p div {
|
||||||
margin: 0 var(--gap);
|
left: 0;
|
||||||
font-weight: 650;
|
border-radius: 0 var(--radius) var(--radius) 0;
|
||||||
top: 0.5rem;
|
background: var(--green-1);
|
||||||
line-height: 1.5rem;
|
&.tot {
|
||||||
height: 1.5rem;
|
background: var(--green);
|
||||||
font-feature-settings: var(--num);
|
|
||||||
}
|
|
||||||
.plot td.bar.p div.tot span {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.plot td.bar.m div.tot span {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.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: var(--green);
|
background: initial;
|
||||||
}
|
}
|
||||||
.calendar .o-0 {
|
.p {
|
||||||
opacity: 0.1;
|
background: var(--green);
|
||||||
}
|
}
|
||||||
.calendar .o-1 {
|
.m {
|
||||||
opacity: 0.5;
|
background: var(--red);
|
||||||
}
|
}
|
||||||
.calendar .o-2 {
|
tbody tr {
|
||||||
opacity: 0.75;
|
&:not(:last-child) {
|
||||||
}
|
border-bottom: none;
|
||||||
.calendar .o-3 {
|
}
|
||||||
opacity: 0.9;
|
&:not(:first-child) {
|
||||||
}
|
border-top: none;
|
||||||
.calendar .o-4 {
|
}
|
||||||
opacity: 1;
|
}
|
||||||
}
|
|
||||||
.calendar .m {
|
|
||||||
background: var(--red);
|
|
||||||
}
|
|
||||||
.calendar tbody tr:not(:last-child) {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
.calendar tbody tr:not(:first-child) {
|
|
||||||
border-top: none;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,37 +4,46 @@ form {
|
||||||
}
|
}
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
&.more tbody:last-child tr:last-child {
|
||||||
|
border-bottom: 1px dashed var(--gray);
|
||||||
|
}
|
||||||
|
&.full-width {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
col {
|
||||||
|
width: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
col.icon {
|
||||||
|
width: 1ch;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
background: var(--bg-01);
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
border: 1px solid var(--gray);
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
table.more tbody:last-child tr:last-child {
|
|
||||||
border-bottom: 1px dashed var(--gray);
|
|
||||||
}
|
|
||||||
table.full-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
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) {
|
|
||||||
background: #eeeeff;
|
|
||||||
}
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: 0 var(--gap);
|
|
||||||
position: relative;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue