diff --git a/src/App.scss b/src/App.scss index 0e89a429b4..944c32b643 100644 --- a/src/App.scss +++ b/src/App.scss @@ -127,6 +127,14 @@ main-router { margin: 0.5em; border-radius: 10px; + box-shadow: 1px 1px 3px rgba(0,0,0,.5); +} + +.panel-body:empty::before { + content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations + display: block; + margin: 20px; + text-align: center; } .panel-heading { diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 98cd97fb56..d4985732b7 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -39,6 +39,16 @@ margin: 0.5em 0.7em 0.6em 0.0em; align-self: flex-start; + border-style: solid; + border-width: 1px; + border-radius: 5px; + overflow: hidden; + + // fixes small gap below video + &.video { + line-height: 0; + } + &.html { flex-basis: 100%; display: flex; @@ -53,7 +63,6 @@ margin: 10px; padding: 5px; background: rgba(230,230,230,0.6); - border-radius: 5px; font-weight: bold; z-index: 4; } @@ -61,8 +70,6 @@ video { max-height: 500px; height: 100%; - border: 1px solid; - border-radius: 5px; width: 100%; z-index: 0; } @@ -75,14 +82,9 @@ width: 100%; height: 100%; flex: 1; - border: 1px solid; - border-radius: 5px; } .oembed { - border: 1px solid; - border-radius: 5px; - border-color: inherit; width: 100%; margin-right: 15px; display: flex; @@ -117,9 +119,6 @@ flex: 1; img { - border-style: solid; - border-width: 1px; - border-radius: 5px; object-fit: contain; width: 100%; height: 100%; /* If this isn't here, chrome will stretch the images */ diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index b430d87540..3dea4985cb 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,5 +1,5 @@