diff --git a/src/App.scss b/src/App.scss index b0888ac7..0945c76b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -32,9 +32,10 @@ a { button{ border: none; border-radius: 5px; + cursor: pointer; &:hover { - background-color: white; + opacity: 0.8; } } @@ -102,11 +103,11 @@ main-router { flex-direction: column; margin: 0.5em; - border-radius: 0.5em; + border-radius: 10px; } .panel-heading { - border-radius: 0.5em 0.5em 0 0; + border-radius: 10px 10px 0 0; background-size: cover; padding: 0.6em 0; text-align: center; @@ -115,7 +116,7 @@ main-router { } .panel-footer { - border-radius: 0 0 0.5em 0.5em; + border-radius: 0 0 10px 10px; } .panel-body > p { @@ -128,7 +129,7 @@ main-router { #content { margin: auto; max-width: 980px; - border-radius: 1em; + border-radius: 10px; padding-bottom: 1em; background-color: rgba(0,0,0,0.1); } @@ -174,7 +175,7 @@ status-text-container { margin-top: 0.2em; float: right; margin-right: 0.3em; - border-radius: 20%; + border-radius: 5px; } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 45cc1929..ad60acf9 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -34,9 +34,10 @@ .attachments { display: flex; flex-wrap: wrap; + margin-right: -0.8em; .attachment { flex: 1 0 30%; - margin: 0.5em 0.8em 0.6em 0.1em; + margin: 0.5em 0.8em 0.6em 0.0em; align-self: flex-start; &.html { @@ -49,14 +50,14 @@ margin: 10px; padding: 5px; background: rgba(230,230,230,0.6); - border-radius: 0.5em; + border-radius: 5px; font-weight: bold; } video { height: 100%; border: 1px solid; - border-radius: 0.5em; + border-radius: 5px; width: 100%; } @@ -69,7 +70,7 @@ height: 100%; flex: 1; border: 1px solid; - border-radius: 0.5em; + border-radius: 5px; } @@ -89,7 +90,7 @@ flex: 1; img { border: 0px; - border-radius: 0; + border-radius: 5px; height: 100%; object-fit: cover; } @@ -113,7 +114,7 @@ width: 100%; border-style: solid; border-width: 1px; - border-radius: 0.5em; + border-radius: 5px; width: 100%; height: 100%; /* If this isn't here, chrome will stretch the images */ } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0169a08..c0ea4313 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -1,11 +1,11 @@ + + diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 517afeaa..5da6d495 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -1,45 +1,65 @@ @import '../../_variables.scss'; -.notification { - padding: 0.4em 0 0 0.7em; - display: flex; - border-bottom: 1px solid silver; - .text { - min-width: 0px; - word-wrap: break-word; - line-height:18px; +.notifications { - .icon-retweet { - color: $green; - } - - .icon-reply { - color: $blue; - } - - h1 { - margin: 0 0 0.3em; - padding: 0; - font-size: 1em; - line-height:20px; - } - - padding: 0.3em 0.8em 0.5em; - p { - margin: 0; - margin-top: 0; - margin-bottom: 0.3em; + .panel-heading { + // force the text to stay centered, while keeping + // the button in the right side of the panel heading + position: relative; + button { + position: absolute; + padding: 0.1em 0.3em 0.25em 0.3em; + right: 0.6em; } } - .avatar { - padding-top: 0.3em; - width: 32px; - height: 32px; - border-radius: 50%; + .unseen { + border-left: 4px solid rgba(255, 48, 16, 0.65); } - &:last-child { - border: none + .notification { + padding: 0.4em 0 0 0.7em; + display: flex; + border-bottom: 1px solid silver; + + + .text { + min-width: 0px; + word-wrap: break-word; + line-height:18px; + + .icon-retweet { + color: $green; + } + + .icon-reply { + color: $blue; + } + + h1 { + margin: 0 0 0.3em; + padding: 0; + font-size: 1em; + line-height:20px; + } + + padding: 0.3em 0.8em 0.5em; + p { + margin: 0; + margin-top: 0; + margin-bottom: 0.3em; + } + } + + .avatar { + padding-top: 0.3em; + width: 32px; + height: 32px; + border-radius: 50%; + } + + &:last-child { + border: none + } } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 785cc019..41c274aa 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,9 +1,12 @@