diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index fa1a4bc34..29a6330e9 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -2,7 +2,6 @@ font-size: 15px; line-height: 20px; overflow: hidden; - border-collapse: collapse; margin: 20px -10px -20px; border-bottom: 0; @@ -14,35 +13,36 @@ } } - tr { + dl { border-top: 1px solid lighten($ui-base-color, 8%); - text-align: center; + display: flex; } - th, td { + dt, + dd { + box-sizing: border-box; padding: 14px 20px; - vertical-align: middle; - - & > div { - max-height: 40px; - overflow-y: auto; - white-space: pre-wrap; - text-overflow: ellipsis; - } + text-align: center; + max-height: 48px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - th { + dt { color: $darker-text-color; background: lighten($ui-base-color, 13%); - max-width: 120px; + width: 120px; + flex: 0 0 auto; + font-weight: 500; a { color: $primary-text-color; } } - td { - flex: auto; + dd { + flex: 1 1 auto; color: $primary-text-color; background: $ui-base-color; diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss index b66cce3c1..280848959 100644 --- a/app/javascript/flavours/glitch/styles/metadata.scss +++ b/app/javascript/flavours/glitch/styles/metadata.scss @@ -1,43 +1,56 @@ .account__header__fields { $meta-table-border: lighten($ui-base-color, 8%); - - border-collapse: collapse; padding: 0; margin: 15px -15px -15px -15px; border: 0 none; border-top: 1px solid $meta-table-border; border-bottom: 1px solid $meta-table-border; + font-size: 14px; + line-height: 20px; - td, th { - padding: 15px; - border: 0 none; + dl { + display: flex; border-bottom: 1px solid $meta-table-border; - vertical-align: middle; } - tr:last-child { - td, th { - border-bottom: 0 none; - } - } - - td { - color: $ui-primary-color; + dt, + dd { + box-sizing: border-box; + padding: 14px; text-align: center; - width:100%; - padding-left: 0; + max-height: 48px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - th { + dt { padding-left: 15px; - font-weight: bold; + font-weight: 500; text-align: center; - width: 94px; - color: $ui-secondary-color; + width: 120px; + flex: 0 0 auto; + color: $secondary-text-color; background: darken($ui-base-color, 8%); } + dd { + flex: 1 1 auto; + color: $darker-text-color; + } + a { - color: $classic-highlight-color; + color: $highlight-text-color; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + + dl:last-child { + border-bottom: 0; } }