Added style api version 3.1 / compatibility mode for 3.0
authorAlexander Ebert <ebert@woltlab.com>
Thu, 31 Aug 2017 11:17:54 +0000 (13:17 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Thu, 31 Aug 2017 11:18:02 +0000 (13:18 +0200)
Closes #2406

16 files changed:
com.woltlab.wcf/defaultStyle.tar
wcfsetup/install/files/acp/style/acpStyleEditor.css
wcfsetup/install/files/acp/templates/styleAdd.tpl
wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
wcfsetup/install/files/lib/acp/form/StyleEditForm.class.php
wcfsetup/install/files/lib/data/style/Style.class.php
wcfsetup/install/files/lib/data/style/StyleEditor.class.php
wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
wcfsetup/install/files/style/bootstrap/mixin/apiVersion.scss [new file with mode: 0644]
wcfsetup/install/files/style/layout/pageNavigation.scss
wcfsetup/install/files/style/ui/message.scss
wcfsetup/install/files/style/ui/redactor.scss
wcfsetup/install/files/style/ui/wsc31.scss [new file with mode: 0644]
wcfsetup/install/lang/de.xml
wcfsetup/install/lang/en.xml
wcfsetup/setup/db/install.sql

index dd11a3d6c4956fd8c1b26876ce88c7057ec8aebf..7e13802b7afdc6c87886c41a17c92b881da1c75d 100644 (file)
Binary files a/com.woltlab.wcf/defaultStyle.tar and b/com.woltlab.wcf/defaultStyle.tar differ
index 8f9347d754f26f05927da1e32806241555f98b54..50cb7fa254331a87007388eaa6ae7d45727df4ca 100644 (file)
@@ -41,6 +41,7 @@ html[dir="rtl"] #spNavigation li:first-child::after { margin-right: 5px; }
 .spHeadline:first-child { margin-top: 10px; }
 #spContentBorder { border-bottom: 1px solid #000; margin: 10px 0; }
 #spContentBorderInner { border-bottom: 1px solid #000; margin: 10px 0; }
+.spContentContainer { background-color: #fff; border: 1px solid #000; margin: 10px 0; padding: 10px; }
 
 /* ### tabular box ### */
 #spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
@@ -101,6 +102,7 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
 .spColorBox > span { display: block; height: 24px; width: 24px; }
 .spVariable, .spDescription { display: block; font-size: 12px; }
 .spVariable { font-family: Consolas, Courier, monospace; }
+.spApiVersion { color: #E65100; font-family: Consolas, Courier, monospace; font-size: 12px; }
 #spSidebar .button { display: block; }
 @media (min-width: 769px) {
        #spVariablesWrapper { position: sticky; top: 60px; }
@@ -157,6 +159,7 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
        }
        
        #spWindow.spShowRegions [data-region="wcfHeader"]::after { left: 20px; transform: translateY(-50%); }
+       #spWindow.spShowRegions [data-region="wcfContent"]::after { top: 20px; transform: translateX(-50%); }
        
        #spWindow.spShowRegions [data-region] [data-region] { z-index: 20; }
        #spWindow.spShowRegions [data-region] [data-region]::before { z-index: 30; }
index 0dcf3036bc4fd9ad0be186b4e9474dd8d4ee3571..faf10f700598f4620462425b0fc0ceb2beb0d186 100644 (file)
                                                {/if}
                                        </dd>
                                </dl>
+                               <dl{if $errorField == 'apiVersion'} class="formError"{/if}>
+                                       <dt><label for="apiVersion">{lang}wcf.acp.style.apiVersion{/lang}</label></dt>
+                                       <dd>
+                                               <select name="apiVersion" id="apiVersion"{if !$isTainted} disabled{/if}>
+                                                       {foreach from=$supportedApiVersions item=supportedApiVersion}
+                                                               <option value="{$supportedApiVersion}"{if $supportedApiVersion === $apiVersion} selected{/if}>{$supportedApiVersion} ({lang}wcf.acp.style.apiVersion.{if $supportedApiVersion === $recommendedApiVersion}recommended{else}deprecated{/if}{/lang})</option>
+                                                       {/foreach}
+                                               </select>
+                                               <small>{lang}wcf.acp.style.apiVersion.description{/lang}</small>
+                                       </dd>
+                               </dl>
                                <dl{if $errorField == 'styleDate'} class="formError"{/if}>
                                        <dt><label for="styleDate">{lang}wcf.acp.style.styleDate{/lang}</label></dt>
                                        <dd>
                                                                        <div data-region="wcfContent">
                                                                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                                                        
-                                                                               <div id="spContentBorderInner"></div>
-                                                                               
-                                                                               Stet clita kasd gubergren, no sea <a>takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <a>invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                                                                               <div data-region="wcfContentContainer">
+                                                                                       <div class="spContentContainer">
+                                                                                               Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+                                                                                               
+                                                                                               <div id="spContentBorderInner"></div>
+                                                                                               
+                                                                                               Stet clita kasd gubergren, no sea <a>takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <a>invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                                                                                       </div>
+                                                                               </div>
                                                                                
                                                                                <div id="spContentBorder"></div>
                                                                                
                                                        </div>
                                                        
                                                        <div class="spSidebarBox" data-category="none">
-                                                               {lang}wcf.acp.style.colors.description{/lang}
+                                                               <p>{lang}wcf.acp.style.colors.description{/lang}</p>
+                                                               <p><br></p>
+                                                               <p><sup class="spApiVersion">3.1</sup> <small>{lang version='3.1'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
                                                        </div>
                                                        
                                                        {foreach from=$colors key=spCategory item=spColors}
                                                                                                        <input type="hidden" id="{$spColor}_value" name="{$spColor}" value="{$variables[$spColor]}">
                                                                                                </div>
                                                                                                <div>
-                                                                                                       <span class="spVariable">${$spColor}</span>
+                                                                                                       <span class="spVariable">${$spColor}{if $newVariables[$spColor]|isset} <sup class="spApiVersion">{$newVariables[$spColor]}</sup>{/if}</span>
                                                                                                        <span class="spDescription">{$spType}</span>
                                                                                                </div>
                                                                                        </li>
                                'wcfContentBackground': '#spContent { background-color: VALUE; }',
                                'wcfContentBorder': '#spContentBorder { border-color: VALUE; }',
                                'wcfContentBorderInner': '#spContentBorderInner { border-color: VALUE; }',
+                               'wcfContentContainerBackground': '.spContentContainer { background-color: VALUE; }',
+                               'wcfContentContainerBorder': '.spContentContainer { border-color: VALUE; }',
                                'wcfContentText': '#spContent { color: VALUE; }',
                                'wcfContentLink': '#spContent a { color: VALUE; }',
                                'wcfContentLinkActive': '#spContent a:hover { color: VALUE; }',
index dd8129c8607f20a58e474d36e91c4019b6fbb0cc..afdecdad5c4620146487c582c35c51a5b1dadbce 100644 (file)
@@ -1,6 +1,7 @@
 <?php
 namespace wcf\acp\form;
 use wcf\data\package\Package;
+use wcf\data\style\Style;
 use wcf\data\style\StyleAction;
 use wcf\data\style\StyleEditor;
 use wcf\data\template\group\TemplateGroup;
@@ -42,6 +43,12 @@ class StyleAddForm extends AbstractForm {
         */
        public $authorURL = '';
        
+       /**
+        * style api version
+        * @var string
+        */
+       public $apiVersion = Style::API_VERSION;
+       
        /**
         * list of available font families
         * @var string[]
@@ -121,6 +128,21 @@ class StyleAddForm extends AbstractForm {
         */
        public $neededPermissions = ['admin.style.canManageStyle'];
        
+       /**
+        * list of variables that were added after 3.0
+        * @var string[]
+        */
+       public $newVariables = [
+               // 3.1
+               'wcfContentContainerBackground' => '3.1',
+               'wcfContentContainerBorder' => '3.1',
+               'wcfEditorButtonBackground' => '3.1',
+               'wcfEditorButtonBackgroundActive' => '3.1',
+               'wcfEditorButtonText' => '3.1',
+               'wcfEditorButtonTextActive' => '3.1',
+               'wcfEditorButtonTextDisabled' => '3.1'
+       ];
+       
        /**
         * style package name
         * @var string
@@ -260,6 +282,7 @@ class StyleAddForm extends AbstractForm {
                if (isset($_POST['styleName'])) $this->styleName = StringUtil::trim($_POST['styleName']);
                if (isset($_POST['styleVersion'])) $this->styleVersion = StringUtil::trim($_POST['styleVersion']);
                if (isset($_POST['templateGroupID'])) $this->templateGroupID = intval($_POST['templateGroupID']);
+               if (isset($_POST['apiVersion']) && in_array($_POST['apiVersion'], Style::$supportedApiVersions)) $this->apiVersion = $_POST['apiVersion'];
        }
        
        /**
@@ -324,10 +347,12 @@ class StyleAddForm extends AbstractForm {
                if (!empty($this->variables['overrideScss'])) {
                        $this->parseOverrides();
                }
+               
+               $this->validateApiVersion();
        }
        
        /**
-        * Disallow the use of `com.woltlab.*` for package names to avoid accidential collisions.
+        * Disallow the use of `com.woltlab.*` for package names to avoid accidental collisions.
         * 
         * @throws      UserInputException
         */
@@ -338,6 +363,18 @@ class StyleAddForm extends AbstractForm {
                }
        }
        
+       /**
+        * Validates the style API version.
+        * 
+        * @throws      UserInputException
+        * @since       3.1
+        */
+       protected function validateApiVersion() {
+               if (!in_array($this->apiVersion, Style::$supportedApiVersions)) {
+                       throw new UserInputException('apiVersion', 'invalid');
+               }
+       }
+       
        /**
         * Validates LESS-variable overrides.
         * 
@@ -443,7 +480,7 @@ class StyleAddForm extends AbstractForm {
                        'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu', 'wcfHeaderMenuDropdown'],
                        'wcfNavigation' => 'wcfNavigation',
                        'wcfSidebar' => ['wcfSidebar', 'wcfSidebarDimmed', 'wcfSidebarHeadline'],
-                       'wcfContent' => ['wcfContent', 'wcfContentDimmed', 'wcfContentHeadline'],
+                       'wcfContent' => ['wcfContent', 'wcfContentContainer', 'wcfContentDimmed', 'wcfContentHeadline'],
                        'wcfTabularBox' => 'wcfTabularBox',
                        'wcfInput' => ['wcfInput', 'wcfInputDisabled'],
                        'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'],
@@ -464,6 +501,7 @@ class StyleAddForm extends AbstractForm {
                        'wcfSidebarDimmed' => ['text', 'link', 'linkActive'],
                        'wcfSidebarHeadline' => ['text', 'link', 'linkActive'],
                        'wcfContent' => ['background', 'border', 'borderInner', 'text', 'link', 'linkActive'],
+                       'wcfContentContainer' => ['background', 'border'],
                        'wcfContentDimmed' => ['text', 'link', 'linkActive'],
                        'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
                        'wcfTabularBox' => ['borderInner', 'headline', 'backgroundActive', 'headlineActive'],
@@ -546,7 +584,8 @@ class StyleAddForm extends AbstractForm {
                                'copyright' => $this->copyright,
                                'license' => $this->license,
                                'authorName' => $this->authorName,
-                               'authorURL' => $this->authorURL
+                               'authorURL' => $this->authorURL,
+                               'apiVersion' => $this->apiVersion
                        ]),
                        'tmpHash' => $this->tmpHash,
                        'variables' => $this->variables
@@ -591,6 +630,7 @@ class StyleAddForm extends AbstractForm {
                
                WCF::getTPL()->assign([
                        'action' => 'add',
+                       'apiVersion' => $this->apiVersion,
                        'authorName' => $this->authorName,
                        'authorURL' => $this->authorURL,
                        'availableFontFamilies' => $this->availableFontFamilies,
@@ -603,13 +643,16 @@ class StyleAddForm extends AbstractForm {
                        'isTainted' => $this->isTainted,
                        'license' => $this->license,
                        'packageName' => $this->packageName,
+                       'recommendedApiVersion' => Style::API_VERSION,
                        'styleDate' => $this->styleDate,
                        'styleDescription' => $this->styleDescription,
                        'styleName' => $this->styleName,
                        'styleVersion' => $this->styleVersion,
                        'templateGroupID' => $this->templateGroupID,
                        'tmpHash' => $this->tmpHash,
-                       'variables' => $this->variables
+                       'variables' => $this->variables,
+                       'supportedApiVersions' => Style::$supportedApiVersions,
+                       'newVariables' => $this->newVariables
                ]);
        }
 }
index 1b1d6444701ff7fd89f73335e0e09350680f4ff5..9e8c98f85eec987424d7857efc2fa7e0b8406547 100644 (file)
@@ -4,6 +4,7 @@ use wcf\data\style\Style;
 use wcf\data\style\StyleAction;
 use wcf\form\AbstractForm;
 use wcf\system\exception\IllegalLinkException;
+use wcf\system\exception\UserInputException;
 use wcf\system\language\I18nHandler;
 use wcf\system\WCF;
 
@@ -66,6 +67,18 @@ class StyleEditForm extends StyleAddForm {
                }
        }
        
+       /**
+        * @inheritDoc
+        */
+       protected function validateApiVersion() {
+               if ($this->style->isTainted) {
+                       parent::validateApiVersion();
+               }
+               else {
+                       $this->apiVersion = $this->style->apiVersion;
+               }
+       }
+       
        /**
         * @inheritDoc
         */
@@ -112,6 +125,7 @@ class StyleEditForm extends StyleAddForm {
                I18nHandler::getInstance()->setOptions('styleDescription', PACKAGE_ID, $this->style->styleDescription, 'wcf.style.styleDescription\d+');
                
                if (empty($_POST)) {
+                       $this->apiVersion = $this->style->apiVersion;
                        $this->authorName = $this->style->authorName;
                        $this->authorURL = $this->style->authorURL;
                        $this->copyright = $this->style->copyright;
@@ -152,7 +166,8 @@ class StyleEditForm extends StyleAddForm {
                                'packageName' => $this->packageName,
                                'license' => $this->license,
                                'authorName' => $this->authorName,
-                               'authorURL' => $this->authorURL
+                               'authorURL' => $this->authorURL,
+                               'apiVersion' => $this->apiVersion
                        ]),
                        'tmpHash' => $this->tmpHash,
                        'variables' => $this->variables
index a2870f8cf2ba440d4a980c2a877d454dd5ad297e..ea485f0f321c21b2a8077f50de7bd5bd440b248d 100644 (file)
@@ -29,6 +29,7 @@ use wcf\system\WCF;
  * @property-read      string          $packageName            package identifier used to export the style as a package or empty (thus style cannot be exported as package)
  * @property-read      integer         $isTainted              is `0` if the original declarations of an imported or installed style are not and cannot be altered, otherwise `1`
  * @property-read      integer         $hasFavicon             is `0` if the default favicon data should be used
+ * @property-read       string          $apiVersion             the style's compatibility version, possible values: '3.0' or '3.1'
  */
 class Style extends DatabaseObject {
        /**
@@ -37,6 +38,14 @@ class Style extends DatabaseObject {
         */
        protected $variables = [];
        
+       /**
+        * list of supported API versions
+        * @var string[]
+        */
+       public static $supportedApiVersions = ['3.0', '3.1'];
+       
+       const API_VERSION = '3.1';
+       
        const PREVIEW_IMAGE_MAX_HEIGHT = 64;
        const PREVIEW_IMAGE_MAX_WIDTH = 102;
        
index c0523053bd49dcf35fea03c41f1fb636272bd5df..a8bd2a2d833f1c5fbc774c70b4816cc897239baa 100644 (file)
@@ -146,7 +146,7 @@ class StyleEditor extends DatabaseObjectEditor implements IEditableCachedObject
                $data = [
                        'name' => '', 'description' => [], 'version' => '', 'image' => '', 'copyright' => '', 'default' => false,
                        'license' => '', 'authorName' => '', 'authorURL' => '', 'templates' => '', 'images' => '',
-                       'variables' => '', 'date' => '0000-00-00', 'imagesPath' => '', 'packageName' => ''
+                       'variables' => '', 'date' => '0000-00-00', 'imagesPath' => '', 'packageName' => '', 'apiVersion' => '3.0'
                ];
                
                $categories = $xpath->query('/ns:style/*');
@@ -220,6 +220,14 @@ class StyleEditor extends DatabaseObjectEditor implements IEditableCachedObject
                                                        case 'license':
                                                                $data[$element->tagName] = $element->nodeValue;
                                                        break;
+                                                       
+                                                       case 'apiVersion':
+                                                               if (!in_array($element->nodeValue, Style::$supportedApiVersions)) {
+                                                                       throw new SystemException("Unknown api version '".$element->nodeValue."'");
+                                                               }
+                                                               
+                                                               $data['apiVersion'] = $element->nodeValue;
+                                                               break;
                                                }
                                        }
                                break;
@@ -320,7 +328,8 @@ class StyleEditor extends DatabaseObjectEditor implements IEditableCachedObject
                        'license' => $data['license'],
                        'authorName' => $data['authorName'],
                        'authorURL' => $data['authorURL'],
-                       'packageName' => $data['packageName']
+                       'packageName' => $data['packageName'],
+                       'apiVersion' => $data['apiVersion']
                ];
                
                // check if there is an untainted style with the same package name
@@ -669,6 +678,7 @@ class StyleEditor extends DatabaseObjectEditor implements IEditableCachedObject
                
                $xml->writeElement('date', $this->styleDate);
                $xml->writeElement('version', $this->styleVersion);
+               $xml->writeElement('apiVersion', $this->apiVersion);
                if ($this->image) $xml->writeElement('image', $this->image);
                if ($this->copyright) $xml->writeElement('copyright', $this->copyright);
                if ($this->license) $xml->writeElement('license', $this->license);
index bd584a451b172de1907cabada5ed79f04a0b5d8c..fa16b6cc4c8876f4200afc7af6cf59e53511f21c 100644 (file)
@@ -93,6 +93,9 @@ class StyleCompiler extends SingletonFactory {
                        unset($variables['overrideScss']);
                }
                
+               // api version
+               $variables['apiVersion'] = $style->apiVersion;
+               
                $parameters = ['scss' => ''];
                EventHandler::getInstance()->fireAction($this, 'compile', $parameters);
                
@@ -293,14 +296,22 @@ class StyleCompiler extends SingletonFactory {
                                        $variables['wcf_option_'.mb_strtolower($constantName)] = is_int($option->optionValue) ? $option->optionValue : '"'.$option->optionValue.'"';
                                }
                        }
+                       
+                       // api version
+                       if (!isset($variables['apiVersion'])) $variables['apiVersion'] = Style::API_VERSION;
                }
                else {
                        // workaround during setup
                        $variables['wcf_option_attachment_thumbnail_height'] = '~"210"';
                        $variables['wcf_option_attachment_thumbnail_width'] = '~"280"';
                        $variables['wcf_option_signature_max_image_height'] = '~"150"';
+                       
+                       $variables['apiVersion'] = Style::API_VERSION;
                }
                
+               // convert into numeric value for comparison, e.g. `3.1` -> `31`
+               $variables['apiVersion'] = str_replace('.', '', $variables['apiVersion']);
+               
                // build SCSS bootstrap
                $scss = $this->bootstrap($variables);
                foreach ($files as $file) {
diff --git a/wcfsetup/install/files/style/bootstrap/mixin/apiVersion.scss b/wcfsetup/install/files/style/bootstrap/mixin/apiVersion.scss
new file mode 100644 (file)
index 0000000..3dfea45
--- /dev/null
@@ -0,0 +1,5 @@
+@mixin requireApiVersion($requiredVersion) {
+       @if $apiVersion >= $requiredVersion {
+               @content;
+       }
+}
index c17b283743c659a37174843e1fa7f0aed5f003e6..1d06eea64b02424ffd3452d01ef61692a401b4c1 100644 (file)
 }
 
 @include screen-sm-down {
+       .breadcrumbs {
+               margin-bottom: -5px;
+               margin-top: 5px;
+       }
+       
        .breadcrumbs > ol > li {
                display: none;
                
index 6a6f49d15e4f6097914c99b7611ac9b351838ee2..ad50ca40dfe219d5ff662a40409ac0dc95cca5fd 100644 (file)
                > .messageContentLoadingOverlay {
                        align-items: center;
                        background-color: $wcfContentBackground;
-                       bottom: 0;
+                       bottom: -1px;
                        display: flex;
                        justify-content: center;
                        left: 0;
index 9c31c213e1a9e35388279a9efd44321130c48216..dd630a1a4650c8999ddd8bf51d52df9feea76352 100644 (file)
@@ -19,7 +19,7 @@
        }
        
        > .innerError {
-               margin: -1px;
+               margin: -1px 0;
        }
 }
 
 }
 
 .redactor-toolbar {
-       background-color: $wcfEditorButtonBackground;
+       background-color: $wcfHeaderBackground;
        display: flex;
        flex-wrap: wrap;
        
                flex: 0 0 auto;
                
                > a {
-                       color: $wcfEditorButtonText;
+                       color: $wcfHeaderMenuLink;
                        display: block;
                        outline: none;
                        padding: 10px;
                        
                        &.redactor-button-disabled {
                                background-color: transparent !important;
-                               color: $wcfEditorButtonTextDisabled !important;
+                               color: $wcfButtonDisabledText !important;
                                cursor: default;
                                pointer-events: none;
                        }
                        
                        &.redactor-act,
                        &.dropact {
-                               background-color: $wcfEditorButtonBackgroundActive;
-                               color: $wcfEditorButtonTextActive;
+                               background-color: $wcfHeaderMenuLinkBackgroundActive;
+                               color: $wcfHeaderMenuLinkActive;
                        }
                        
                        .icon {
                                // hover-styles on mobile are misleading as they stay much longer
                                // due to the click-like behavior
                                &:hover {
-                                       background-color: $wcfEditorButtonBackgroundActive;
-                                       color: $wcfEditorButtonTextActive;
+                                       background-color: $wcfHeaderMenuLinkBackgroundActive;
+                                       color: $wcfHeaderMenuLinkActive;
                                }
                        }
                }
                                
                                &::before {
                                        bottom: 7px;
-                                       border-left: 1px solid $wcfEditorButtonText;
+                                       border-left: 1px solid $wcfHeaderMenuLink;
                                        content: "";
                                        left: -6px;
                                        opacity: .6;
                        
                        &::before {
                                bottom: 7px;
-                               border-left: 1px solid $wcfEditorButtonText;
+                               border-left: 1px solid $wcfHeaderMenuLink;
                                content: "";
                                left: 0;
                                opacity: .6;
                        
                        &::before {
                                bottom: 7px;
-                               border-left: 1px solid $wcfEditorButtonText;
+                               border-left: 1px solid $wcfHeaderMenuLink;
                                content: "";
                                left: 0;
                                opacity: .6;
diff --git a/wcfsetup/install/files/style/ui/wsc31.scss b/wcfsetup/install/files/style/ui/wsc31.scss
new file mode 100644 (file)
index 0000000..a01f91c
--- /dev/null
@@ -0,0 +1,146 @@
+/*
+ * Special styles for changes introduced in WoltLab Suite 3.1 that
+ * are not compatible with styles created for earlier versions.
+ */
+@include requireApiVersion(31) {
+       .main {
+               @include screen-lg {
+                       padding: 30px 0;
+               }
+       }
+       
+       // reduced margin-top
+       .paginationTop {
+               margin-top: 30px;
+       }
+       
+       // sheet-like presentation of content containers
+       .content > .section,
+       .content > form {
+               border: 1px solid $wcfContentContainerBorder;
+               background-color: $wcfContentContainerBackground;
+               padding: 20px;
+               
+               @include screen-sm-down {
+                       border-left-width: 0;
+                       border-right-width: 0;
+                       margin-left: -10px;
+                       margin-right: -10px;
+                       padding: 10px;
+               }
+               
+               .section {
+                       margin-top: 0;
+                       
+                       & + .section {
+                               margin-top: 40px;
+                       }
+               }
+       }
+       
+       .content > form {
+               margin-top: 40px;
+       }
+       
+       .contentHeader + .section,
+       .contentHeader + form {
+               margin-top: 30px;
+       }
+       
+       // borders used to visually separate lists from adjacent containers
+       .content > .section {
+               > .messageList {
+                       border-top-width: 0;
+                       
+                       @include screen-sm-down {
+                               &:first-child {
+                                       margin-top: -11px;
+                               }
+                       }
+                       
+                       > :first-child {
+                               padding-top: 0;
+                       }
+                       
+                       > :last-child {
+                               border-bottom-width: 0;
+                               padding-bottom: 0;
+                       }
+               }
+               
+               > .tabularList:last-child {
+                       border-bottom-width: 0;
+               }
+               
+               > .containerList {
+                       > :first-child {
+                               border-top-width: 0
+                       }
+                       
+                       > :last-child {
+                               border-bottom-width: 0;
+                       }
+               }
+       }
+       
+       // drop-shadow for submenu lists
+       .mainMenu .boxMenu .boxMenuDepth1 {
+               box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.23);
+       }
+       
+       // individual variables for the editor toolbar
+       .redactor-toolbar {
+               background-color: $wcfEditorButtonBackground;
+               
+               > li {
+                       > a {
+                               color: $wcfEditorButtonText;
+                               
+                               &.redactor-button-disabled {
+                                       color: $wcfEditorButtonTextDisabled !important;
+                               }
+                               
+                               &.redactor-act,
+                               &.dropact {
+                                       background-color: $wcfEditorButtonBackgroundActive;
+                                       color: $wcfEditorButtonTextActive;
+                               }
+                               
+                               @include screen-lg {
+                                       &:hover {
+                                               background-color: $wcfEditorButtonBackgroundActive;
+                                               color: $wcfEditorButtonTextActive;
+                                       }
+                               }
+                       }
+                       
+                       @include screen-sm-up {
+                               &.redactor-toolbar-separator::before {
+                                       border-left: 1px solid $wcfEditorButtonText;
+                               }
+                       }
+               }
+               
+               @include screen-xs {
+                       &.redactorToolbarOverride > .redactor-toolbar-separator::before {
+                               border-left: 1px solid $wcfEditorButtonText;
+                       }
+                       
+                       .redactorToolbarToggle::before {
+                               border-left: 1px solid $wcfEditorButtonText;
+                       }
+               }
+       }
+       
+       // adjust editor and message tab menu background color
+       .redactor-box,
+       .messageTabMenuNavigation > ul,
+       .messageTabMenu > .messageTabMenuContent.active,
+       .messageContent.loading > .messageContentLoadingOverlay {
+               background-color: $wcfContentContainerBackground;
+       }
+       
+       .messageTabMenuNavigation > ul > li.active > a::after {
+               border-bottom-color: $wcfContentContainerBackground;
+       }
+}
index eefe1039b50be2c9f201ae23946bd461ce779da4..f3f947bbeb2f3defe61d51b675c5754524728ca6 100644 (file)
@@ -1868,6 +1868,10 @@ Als Benachrichtigungs-URL in der Konfiguration der sofortigen Zahlungsbestätigu
                <item name="wcf.acp.style.advanced.overrideScss.error.invalid"><![CDATA[Eingabe „{$error[text]}“ ungültig]]></item>
                <item name="wcf.acp.style.advanced.overrideScss.error.predefined"><![CDATA[Variable „{$error[text]}“ wird bereits durch den Stil-Editor gesetzt]]></item>
                <item name="wcf.acp.style.advanced.overrideScss.error.unknown"><![CDATA[Variable „{$error[text]}“ unbekannt]]></item>
+               <item name="wcf.acp.style.apiVersion"><![CDATA[Kompatibilität mit WoltLab Suite in Version]]></item>
+               <item name="wcf.acp.style.apiVersion.deprecated"><![CDATA[veraltet]]></item>
+               <item name="wcf.acp.style.apiVersion.description"><![CDATA[Deaktiviert ausgewählte Stil-Verbesserungen, um die Kompatibilität mit Stilen für eine ältere Version von WoltLab Suite zu gewährleisten.]]></item>
+               <item name="wcf.acp.style.apiVersion.recommended"><![CDATA[aktuelle Version, empfohlen]]></item>
                <item name="wcf.acp.style.authorName"><![CDATA[Autor]]></item>
                <item name="wcf.acp.style.authorURL"><![CDATA[Website]]></item>
                <item name="wcf.acp.style.button.exportStyle"><![CDATA[Export starten]]></item>
@@ -1881,6 +1885,7 @@ Als Benachrichtigungs-URL in der Konfiguration der sofortigen Zahlungsbestätigu
                <item name="wcf.acp.style.colors.content"><![CDATA[Inhaltsbereich]]></item>
                <item name="wcf.acp.style.colors.color"><![CDATA[Schriftfarbe]]></item>
                <item name="wcf.acp.style.colors.description"><![CDATA[Wählen Sie eine Kategorie aus, um die Farbpalette zu bearbeiten.]]></item>
+               <item name="wcf.acp.style.colors.description.apiVersion"><![CDATA[Erfordert WoltLab Suite {$version} oder höher]]></item>
                <item name="wcf.acp.style.colors.dimmedColor"><![CDATA[Schriftfarbe (abgeschwächt)]]></item>
                <item name="wcf.acp.style.colors.formInput"><![CDATA[Eingabeelemente in Formularen]]></item>
                <item name="wcf.acp.style.colors.hoverBackgroundColor"><![CDATA[Hintergrundfarbe (Hover)]]></item>
index ec55753d359b202096483351f8c5cb90ccc57327..9b8397b7033da2b5898414ee085319cf225d98d6 100644 (file)
@@ -1811,6 +1811,10 @@ When prompted for the notification URL for the instant payment notifications, pl
                <item name="wcf.acp.style.advanced.overrideScss.error.invalid"><![CDATA[The input for “{$error[text]}” invalid.]]></item>
                <item name="wcf.acp.style.advanced.overrideScss.error.predefined"><![CDATA[The variable “{$error[text]}” is already defined by the style editor.]]></item>
                <item name="wcf.acp.style.advanced.overrideScss.error.unknown"><![CDATA[The variable “{$error[text]}” is not recognized.]]></item>
+               <item name="wcf.acp.style.apiVersion"><![CDATA[Enable Compatibility Mode with WoltLab Suite]]></item>
+               <item name="wcf.acp.style.apiVersion.deprecated"><![CDATA[deprecated]]></item>
+               <item name="wcf.acp.style.apiVersion.description"><![CDATA[Disables selected style improvements in order to maximize compatibility with styles for earlier versions of WoltLab Suite.]]></item>
+               <item name="wcf.acp.style.apiVersion.recommended"><![CDATA[current version, recommended]]></item>
                <item name="wcf.acp.style.authorName"><![CDATA[Author]]></item>
                <item name="wcf.acp.style.authorURL"><![CDATA[Website]]></item>
                <item name="wcf.acp.style.button.exportStyle"><![CDATA[Start Export]]></item>
@@ -1824,6 +1828,7 @@ When prompted for the notification URL for the instant payment notifications, pl
                <item name="wcf.acp.style.colors.content"><![CDATA[Content Area]]></item>
                <item name="wcf.acp.style.colors.color"><![CDATA[Font Color]]></item>
                <item name="wcf.acp.style.colors.description"><![CDATA[Select a category to start editing the color palette.]]></item>
+               <item name="wcf.acp.style.colors.description.apiVersion"><![CDATA[Requires WoltLab Suite {$version} or newer]]></item>
                <item name="wcf.acp.style.colors.dimmedColor"><![CDATA[Font Color (weakened)]]></item>
                <item name="wcf.acp.style.colors.formInput"><![CDATA[Input Elements in Forms]]></item>
                <item name="wcf.acp.style.colors.hoverBackgroundColor"><![CDATA[Background Color (hover)]]></item>
index a752dd6f5d2ecef294926c1d92bab1a047f5addb..5eab3a60bbd51ef972dc8f9824233aaa3b5f0cdb 100644 (file)
@@ -1245,7 +1245,8 @@ CREATE TABLE wcf1_style (
        imagePath VARCHAR(255) NOT NULL DEFAULT '',
        packageName VARCHAR(255) NOT NULL DEFAULT '',
        isTainted TINYINT(1) NOT NULL DEFAULT 0,
-       hasFavicon TINYINT(1) NOT NULL DEFAULT 0
+       hasFavicon TINYINT(1) NOT NULL DEFAULT 0,
+       apiVersion ENUM('3.0', '3.1') NOT NULL DEFAULT '3.1' 
 );
 
 DROP TABLE IF EXISTS wcf1_style_variable;
@@ -2160,6 +2161,8 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonT
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBackground', 'rgba(250, 250, 250, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorder', 'rgba(65, 121, 173, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorderInner', 'rgba(224, 224, 224, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentContainerBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentContainerBorder', 'rgba(236, 241, 247, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLink', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLinkActive', 'rgba(52, 73, 94, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedText', 'rgba(125, 130, 135, 1)');