Adjust styling

diff --git a/com.woltlab.wcf/templates/contentNotVisible.tpl b/com.woltlab.wcf/templates/contentNotVisible.tpl
index d9ce2958b43a4bdda380e1db7094e4237c098d8f..0d07cb0222648586029d3464369cbfdb53cfee75 100644 (file)
--- a/com.woltlab.wcf/templates/contentNotVisible.tpl
+++ b/com.woltlab.wcf/templates/contentNotVisible.tpl
@@ -1,3 +1,8 @@
 <div class="contentNotVisible">
-       <span class="contentNotVisibleTitle">{if $message|isset}{@$message}{else}{lang}wcf.message.content.not.available.title{/lang}{/if}</span>
+       <span class="contentNotVisible__icon">
+               {icon name='face-frown' size=32}
+       </span>
+       <span class="contentNotVisible__title">
+               {if $message|isset}{@$message}{else}{lang}wcf.message.content.not.available.title{/lang}{/if}
+       </span>
 </div>

diff --git a/wcfsetup/install/files/style/ui/contentNotVisible.scss b/wcfsetup/install/files/style/ui/contentNotVisible.scss
index f4a9be9a96726976be0f300543099b265038abbb..feb0bc0c864bbc2689b6c302f1eddce44666dccb 100644 (file)
--- a/wcfsetup/install/files/style/ui/contentNotVisible.scss
+++ b/wcfsetup/install/files/style/ui/contentNotVisible.scss
@@ -1,18 +1,20 @@
 .contentNotVisible {
-  display: block;
-  background-color: var(--wcfContentBackground);
-  border-radius: 2px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  margin: 10px 0;
-  padding: 20px;
+       background-color: var(--wcfContentBackground);
+       box-shadow: var(--wcfBoxShadowCard);
+       border: 1px solid var(--wcfContentBorderInner);
+       border-radius: var(--wcfBorderRadius);
+       padding: 20px;
+       max-width: 400px;
+       text-align: center;
+       display: flex;
+       flex-direction: column;
+       gap: 10px;
 
-  @include screen-sm-down {
-    padding: 10px;
-  }
+       @include screen-xs {
+               padding: 10px;
+       }
 }
 
-.contentNotVisibleTitle {
-  font-weight: 600;
-  line-height: 1.05;
-  margin-bottom: 10px;
+.contentNotVisible__title {
+       @include wcfFontBold;
 }