Some more minor style tweaks

diff --git a/com.woltlab.wcf/templates/userProfileAbout.tpl b/com.woltlab.wcf/templates/userProfileAbout.tpl
index bf74217605a08fe7cc254808a14ab77b60eaae01..b63e1ca9de31f73a2516093ce9540507cb21a514 100644 (file)
--- a/com.woltlab.wcf/templates/userProfileAbout.tpl
+++ b/com.woltlab.wcf/templates/userProfileAbout.tpl
@@ -1,22 +1,22 @@
-<div class="containerPadding">
-       {hascontent}
-               {content}
-                       {foreach from=$options item=category}
-                               {foreach from=$category[categories] item=optionCategory}
-                                       <fieldset>
-                                               <legend>{lang}wcf.user.option.category.{@$optionCategory[object]->categoryName}{/lang}</legend>
-                                               
-                                               {foreach from=$optionCategory[options] item=userOption}
-                                                       <dl>
-                                                               <dt>{lang}wcf.user.option.{@$userOption[object]->optionName}{/lang}</dt>
-                                                               <dd>{@$userOption[object]->optionValue}</dd>
-                                                       </dl>
-                                               {/foreach}
-                                       </fieldset>
-                               {/foreach}
+{hascontent}
+       {content}
+               {foreach from=$options item=category}
+                       {foreach from=$category[categories] item=optionCategory}
+                               <section class="section">
+                                       <h2 class="sectionTitle">{lang}wcf.user.option.category.{@$optionCategory[object]->categoryName}{/lang}</h2>
+                                       
+                                       {foreach from=$optionCategory[options] item=userOption}
+                                               <dl>
+                                                       <dt>{lang}wcf.user.option.{@$userOption[object]->optionName}{/lang}</dt>
+                                                       <dd>{@$userOption[object]->optionValue}</dd>
+                                               </dl>
+                                       {/foreach}
+                               </section>
                        {/foreach}
-               {/content}
-       {hascontentelse}
-               {lang}wcf.user.profile.content.about.noPublicData{/lang}
-       {/hascontent}
-</div>
\ No newline at end of file
+               {/foreach}
+       {/content}
+{hascontentelse}
+       <div class="section">
+               <p class="info">{lang}wcf.user.profile.content.about.noPublicData{/lang}</p>
+       </div>  
+{/hascontent}

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 2c2428a6847b1f3370ec9b0e72c0914a4171b71b..196545db6d37d97850c5d06bac9e1ea7a65f8ce6 100644 (file)
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -35,10 +35,6 @@
                        top: 5px;
                        right: 0;
                }
-               
-               + * {
-                       margin-top: 10px;
-               }
        }
        
        .buttonGroupNavigation {

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index 21ba466b1f89f858a4c8e22f92a6565e93e7a0d5..abaf4a80c3fc6e27f5548776b389ad9c7e2c74b0 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -1,19 +1,37 @@
 /* style for content area */
-.content {
-       /* content header */
-       .contentHeader,
-       .boxHeadline { // deprecated
-               color: $wcfContentHeadlineText; // todo: rename variable
-               margin-bottom: 30px;
+/* content header */
+.contentHeader,
+.boxHeadline { // deprecated
+       color: $wcfContentHeadlineText; // todo: rename variable
+       margin-bottom: 30px;
+       
+       .contentTitle,
+       > h1 { // deprecated
+               @extend .wcfFontTitle;
                
-               .contentTitle,
-               > h1 { // deprecated
-                       @extend .wcfFontTitle;
-                       
-                       .badge {
-                               top: -2px;
-                       }
+               .badge {
+                       top: -2px;
                }
+       }
+       
+       a {
+               color: $wcfContentHeadlineLink; // todo: rename variable
+               
+               &:hover {
+                       color: $wcfContentHeadlineLinkActive; // todo: rename variable
+               }
+       }
+}
+
+/* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
+.boxHeadline.boxSubHeadline {
+       margin-top: 30px;
+       margin-bottom: 20px;
+       
+       > h2 {
+               color: $wcfContentHeadlineText; // todo: rename variable
+               
+               @extend .wcfFontHeadline;
                
                a {
                        color: $wcfContentHeadlineLink; // todo: rename variable
@@ -22,133 +40,129 @@
                                color: $wcfContentHeadlineLinkActive; // todo: rename variable
                        }
                }
+               
+               .badge {
+                       top: -2px;
+               }
        }
-       
-       /* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
-       .boxHeadline.boxSubHeadline {
-               margin-top: 30px;
-               margin-bottom: 20px;
+}
+
+/* todo
+.boxHeadline {
+       &.labeledHeadline {
+               font-size: 0;
                
+               > h1,
                > h2 {
-                       color: $wcfContentHeadlineText; // todo: rename variable
-                       
-                       @extend .wcfFontHeadline;
-                       
-                       a {
-                               color: $wcfContentHeadlineLink; // todo: rename variable
-                               
-                               &:hover {
-                                       color: $wcfContentHeadlineLinkActive; // todo: rename variable
-                               }
-                       }
+                       display: inline-block;
+                       margin-right: 10px;
+               }
+               
+               > ul {
+                       display: inline-block;
+                       font-size: 1rem;
                        
-                       .badge {
-                               top: -2px;
+                       &:not(:empty) {
+                               margin-right: 10px;
                        }
                }
        }
+}*/
+
+/* content sections */
+.section {
+       margin-top: 30px;       
        
-       /* todo
-       .boxHeadline {
-               &.labeledHeadline {
-                       font-size: 0;
-                       
-                       > h1,
-                       > h2 {
-                               display: inline-block;
-                               margin-right: 10px;
-                       }
+       .sectionTitle {
+               color: $wcfContentHeadlineText; // todo: rename variable
+               
+               @extend .wcfFontHeadline;
+               
+               a {
+                       color: $wcfContentHeadlineLink; // todo: rename variable
                        
-                       > ul {
-                               display: inline-block;
-                               font-size: 1rem;
-                               
-                               &:not(:empty) {
-                                       margin-right: 10px;
-                               }
+                       &:hover {
+                               color: $wcfContentHeadlineLinkActive; // todo: rename variable
                        }
                }
-       }*/
+               
+               .badge {
+                       top: -2px;
+               }
+       }
        
-       /* content sections */
-       .section {
-               margin-top: 30px;
+       .sectionDescription {
+               color: $wcfContentDimmedText;
+       }
+       
+       > .sectionHeader,
+       > .sectionTitle {
+               margin-bottom: 20px;
+       }
+       
+       &:not(.sectionContainerList) {
+               > .sectionHeader,
+               > .sectionTitle {
+                       border-bottom: 1px solid $wcfContentBorderInner;
+                       padding-bottom: 10px;
+               }
+       }
+}
+
+/* fieldset styling (old sections / deprecated) */
+fieldset {
+       margin-top: 30px;
+       
+       > legend {
+               border-bottom: 1px solid $wcfContentBorderInner;
+               color: $wcfContentHeadlineText; // todo: rename variable
+               float: left;
+               margin-bottom: 20px;
+               padding-bottom: 10px;
+               width: 100%;
                
-               .sectionTitle {
-                       color: $wcfContentHeadlineText; // todo: rename variable
-                       
-                       @extend .wcfFontHeadline;
-                       
-                       a {
-                               color: $wcfContentHeadlineLink; // todo: rename variable
-                               
-                               &:hover {
-                                       color: $wcfContentHeadlineLinkActive; // todo: rename variable
-                               }
-                       }
+               @extend .wcfFontHeadline;
+               
+               a {
+                       color: $wcfContentHeadlineLink; // todo: rename variable
                        
-                       .badge {
-                               top: -2px;
+                       &:hover {
+                               color: $wcfContentHeadlineLinkActive; // todo: rename variable
                        }
                }
                
-               .sectionDescription {
-                       color: $wcfContentDimmedText;
+               .badge {
+                       top: -2px;
                }
                
-               > .sectionHeader,
-               > .sectionTitle {
-                       margin-bottom: 20px;
+               &+ * {
+                       clear: left;
                }
                
-               &:not(.sectionContainerList) {
-                       > .sectionHeader,
-                       > .sectionTitle {
-                               border-bottom: 1px solid $wcfContentBorderInner;
-                               padding-bottom: 10px;
-                       }
+               + small {
+                       color: $wcfContentDimmedText;
+                       position: relative;
+                       top: -12px;
                }
        }
-       
-       /* fieldset styling (old sections / deprecated) */
-       fieldset {
-               margin-top: 30px;
+}
+
+/* styling for container headlines */
+.containerHeadline {
+       > h3 {
+               @extend .wcfFontHeadline;
                
-               > legend {
-                       border-bottom: 1px solid $wcfContentBorderInner;
-                       color: $wcfContentHeadlineText; // todo: rename variable
-                       float: left;
-                       margin-bottom: 20px;
-                       padding-bottom: 10px;
-                       width: 100%;
-                       
-                       @extend .wcfFontHeadline;
-                       
-                       a {
-                               color: $wcfContentHeadlineLink; // todo: rename variable
-                               
-                               &:hover {
-                                       color: $wcfContentHeadlineLinkActive; // todo: rename variable
-                               }
-                       }
-                       
-                       .badge {
-                               top: -2px;
-                       }
-                       
-                       &+ * {
-                               clear: left;
-                       }
-                       
-                       + small {
-                               color: $wcfContentDimmedText;
-                               position: relative;
-                               top: -12px;
-                       }
+               > .badge {
+                       top: -2px;
                }
        }
+       
+       ~ .containerContent {
+               margin-top: 10px;
+       }
 }
 
+/* styling for content navigation area (containing pagination / page buttons) */
 .contentNavigation {
        align-items: center;
        display: flex;
@@ -201,4 +215,4 @@
                        }
                }
        }
-}
\ No newline at end of file
+}

diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index e01c99f6b7442f4d721bddb908b96ed31c558b35..dc13ba8e8b73ab067bcbd621eeabe8975892b161 100644 (file)
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -88,16 +88,3 @@ a {
 .content + .sidebar {
        margin-left: 30px;
 }
-
-/* CONTENT AREA */
-
-
-.containerHeadline {
-       > h3 {
-               @extend .wcfFontHeadline;
-               
-               > .badge {
-                       top: -2px;
-               }
-       }
-}

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 5a73ef1dc28aa0a6a5cff79a41adaba197b69122..5468a00327031d2354b0ecbabf153295facb6ca1 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -153,6 +153,13 @@
                        position: absolute;
                        right: 0;
                }
+               
+               > div {
+                       > .section:first-child,
+                       > fieldset:first-child {
+                               margin-top: 0;
+                       }
+               }
        }
 }
 

diff --git a/wcfsetup/install/files/style/ui/popover.scss b/wcfsetup/install/files/style/ui/popover.scss
index 338a733340599362e4b2f9f76388a51a2b0b55af..2ec66fe9f885cb2cf24408d4a0f6d97b954a1928 100644 (file)
--- a/wcfsetup/install/files/style/ui/popover.scss
+++ b/wcfsetup/install/files/style/ui/popover.scss
@@ -8,7 +8,7 @@
        100% { visibility: hidden;  transform: translateY(-20px); opacity: 0; }
 }
 
-/* outer element containg both the pointer and content element */
+/* outer element containing both the pointer and content element */
 .popover {
        animation: wcfPopoverOut .3s;
        animation-fill-mode: forwards;
@@ -19,7 +19,7 @@
        top: 0;
        vertical-align: middle;
        visibility: hidden;
-       width: 400px !important;
+       width: 500px !important;
        z-index: 500;
        
        &.active {
@@ -69,7 +69,7 @@
        max-height: 320px;
        min-height: 36px;
        overflow: hidden;
-       padding: 10px;
+       padding: 15px;
        
        a {
                color: $wcfContentLink;

diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index 9377b4e8200243322078d58f9de190caa488e961..7479d1d806f4455733e64b20f443a8553101b415 100644 (file)
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -130,8 +130,4 @@
        .box48 {
                align-items: center;
        }
-       
-       li .containerHeadline + *:not(.buttonGroupNavigation) {
-               margin-top: 0;
-       }
 }