diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
6 files changed, 70 insertions, 22 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 84d3f6ade..dadfa6d57 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -32,7 +32,8 @@ .account__avatar-wrapper { float: left; - margin: 6px 16px 6px 6px; + margin-left: 12px; + margin-right: 12px; } .account__avatar { @@ -509,3 +510,9 @@ margin-bottom: 0; } } + +.account__header .roles { + margin-top: 20px; + margin-bottom: 20px; + padding: 0 15px; +} diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index df239dba7..0432b233a 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -266,6 +266,40 @@ & > section { background: $ui-base-color; + margin-bottom: 20px; + + h5 { + position: relative; + + &::before { + content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + top: 50%; + width: 100%; + height: 0; + border-top: 1px solid lighten($ui-base-color, 8%); + } + + span { + display: inline-block; + background: $ui-base-color; + color: $darker-text-color; + font-size: 14px; + font-weight: 500; + padding: 10px; + position: relative; + z-index: 1; + cursor: default; + } + } + + .account:last-child, + & > div:last-child .status { + border-bottom: 0; + } & > .hashtag { display: block; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 6f3338605..0fa940766 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -848,6 +848,10 @@ } } +.load-gap { + border-bottom: 1px solid lighten($ui-base-color, 8%); +} + .missing-indicator { padding-top: 20px + 48px; @@ -894,7 +898,7 @@ width: 30px; height: 30px; font-size: 20px; - color: $inverted-text-color; + color: $darker-text-color; text-shadow: 0 0 5px black; display: flex; justify-content: center; diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss index 9e1606e99..9cd4e1fbe 100644 --- a/app/javascript/flavours/glitch/styles/components/local_settings.scss +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -35,8 +35,8 @@ display: block; padding: 15px 20px; color: inherit; - background: $primary-text-color; - border-bottom: 1px $ui-primary-color solid; + background: lighten($ui-secondary-color, 8%); + border-bottom: 1px $ui-secondary-color solid; cursor: pointer; text-decoration: none; outline: none; @@ -58,8 +58,7 @@ } .glitch.local-settings__navigation { - background: $simple-background-color; - color: $inverted-text-color; + background: lighten($ui-secondary-color, 8%); width: 200px; font-size: 15px; line-height: 20px; diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 90674612d..5a49c07fa 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -279,6 +279,10 @@ background: $base-shadow-color; max-width: 100%; + &:focus { + outline: 0; + } + .detailed-status & { width: 100%; height: 100%; 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; |