diff --git a/client/src/components/Collection.vue b/client/src/components/Collection.vue index 77e796659..d36730647 100644 --- a/client/src/components/Collection.vue +++ b/client/src/components/Collection.vue @@ -253,16 +253,16 @@ export default defineComponent({ background: #444; padding: 1em; - h3 { + & h3 { margin: 0; } - table { + & table { margin: 0.25em; text-align: right; } - tr { + & tr { margin: 0.1em; } } @@ -270,24 +270,24 @@ export default defineComponent({ .set-stats { margin: 0.5em; - table { + & table { margin: auto; } - caption { + & caption { font-size: 1.25em; } - tr:nth-child(odd) { + & tr:nth-child(odd) { background-color: rgba(0, 0, 0, 0.2); } - th, - td { + & th, + & td { padding: 0.25em; } - td:not(:first-child) { + & td:not(:first-child) { text-align: center; } } diff --git a/client/src/css/app.css b/client/src/css/app.css index e715c3c9f..037e072dd 100644 --- a/client/src/css/app.css +++ b/client/src/css/app.css @@ -1023,7 +1023,7 @@ ul.player-list { position: relative; min-width: 14px; - img { + & img { width: 1em; position: absolute; top: 50%; @@ -1032,7 +1032,7 @@ ul.player-list { transform: translate(-50%, -50%); filter: drop-shadow(0 0 2px #00000080); } - div { + & div { position: absolute; top: 50%; left: 50%; @@ -1240,7 +1240,7 @@ ul.player-list { margin-left: 1em; margin-right: 1em; min-height: 35px; - h2 { + & h2 { display: inline-block; margin: 0; font-variant: small-caps; @@ -1299,7 +1299,7 @@ ul.player-list { justify-content: center; align-items: center; - img { + & img { width: 16px; height: 16px; object-fit: contain; @@ -1322,7 +1322,7 @@ ul.player-list { margin-left: 1em; box-sizing: border-box; - h2 { + & h2 { font-size: 20px; line-height: 28px; } @@ -1581,8 +1581,8 @@ Can't be applied to .card-filtered directly as it creates a bug with the rotatio See: https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning */ .card-filtered .card-image { - i, - img { + & i, + & img { filter: brightness(35%) saturate(50%); } }