Moving core CSS to the plugin

Improve compatibility with both wintercms and octobercms
chkilel · Aug 24, 2021 · 5f2cef5 · 5f2cef5
1 parent 6c11acf
commit 5f2cef5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git a/controllers/Settings.php b/controllers/Settings.php
@@ -20,7 +20,6 @@ public function __construct()
 
         parent::__construct();
 
-        $this->addCss('/modules/cms/assets/css/october.theme-selector.css', 'core');
         $this->addCss('/plugins/chkilel/icones/controllers/settings/assets/settings.css', 'Chkilel.Icones');
 
         $this->pageTitle = 'chkilel.icones::lang.settings.title';

diff --git a/controllers/settings/assets/settings.css b/controllers/settings/assets/settings.css
@@ -1,22 +1,49 @@
-.layout-row.active .layout-cell.theme-thumbnail{
-background: #f4f5ff;
-border-left: 5px solid #e67e22;
+.theme-selector-layout .layout-cell {padding:24px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+.theme-selector-layout .theme-thumbnail {width:288px;background:#ecf0f1;border-top:1px solid #e3e7e9}
+.theme-selector-layout .theme-thumbnail img {opacity:0.6;filter:alpha(opacity=60);width:240px}
+.theme-selector-layout .theme-description {border-top:1px solid #f2f3f4}
+.theme-selector-layout .theme-description h3,
+.theme-selector-layout .theme-description p {opacity:0.6;filter:alpha(opacity=60)}
+.theme-selector-layout .theme-description h3 {margin:0 0 25px 0;font-size:28px;color:#2b3e50;display:inline-block}
+.theme-selector-layout .theme-description p.author {font-size:13px;display:inline-block;color:#808c8d}
+.theme-selector-layout .theme-description p.description {color:#2b3e50;font-size:14px;line-height:180%;margin-bottom:30px}
+.theme-selector-layout .theme-description .controls .btn >i {margin-right:5px;font-size:16px;position:relative;top:1px}
+.theme-selector-layout .theme-description .controls .btn >i.icon-star {color:#f1a84e}
+.theme-selector-layout .theme-description .controls .dropdown {display:inline-block}
+.theme-selector-layout .layout-row.active .theme-thumbnail {background:#bdc3c7;border-top-color:#bdc3c7}
+.theme-selector-layout .layout-row.active .thumbnail-container {position:relative}
+.theme-selector-layout .layout-row.active .thumbnail-container:after {content:'';display:block;width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:15px solid #bdc3c7;position:absolute;right:-35px;top:50%;margin-top:-14px}
+.theme-selector-layout .layout-row.active .theme-description h3,
+.theme-selector-layout .layout-row:hover .theme-description h3,
+.theme-selector-layout .layout-row.active .theme-description p,
+.theme-selector-layout .layout-row:hover .theme-description p {opacity:1;filter:alpha(opacity=100)}
+.theme-selector-layout .layout-row.active .theme-thumbnail img,
+.theme-selector-layout .layout-row:hover .theme-thumbnail img {opacity:1;filter:alpha(opacity=100)}
+.theme-selector-layout .layout-row:first-child .theme-description,
+.theme-selector-layout .layout-row.links .theme-description,
+.theme-selector-layout .layout-row:first-child .theme-thumbnail,
+.theme-selector-layout .layout-row.links .theme-thumbnail {border-top:none}
+.theme-selector-layout .layout-row.links .theme-thumbnail {border-bottom:1px solid #e3e7e9}
+.theme-selector-layout .layout-row.links .theme-description {border-bottom:1px solid #f2f3f4}
+.theme-selector-layout .create-new-theme {margin-bottom:10px}
+.theme-selector-layout .create-new-theme,
+.theme-selector-layout .find-more-themes {background:#ecf0f1;color:#2b3e50;text-decoration:none;display:block;padding:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
+.theme-selector-layout .create-new-theme:hover,
+.theme-selector-layout .find-more-themes:hover {background:#0181b9;color:white}
+@media (max-width:768px) {.theme-selector-layout .layout-cell,.theme-selector-layout .layout-row {display:block !important;width:auto !important;height:auto !important }.theme-selector-layout .theme-thumbnail img {width:100% }.theme-selector-layout .layout-row.links .theme-thumbnail {background:transparent;padding:0 }}
 
+.layout-row.active .layout-cell.theme-thumbnail {
+    background: #f4f5ff;
+    border-left: 5px solid #e67e22;
 }
 
-.layout-row.installed .layout-cell.theme-thumbnail{
-background: #fdfdfd;
-border-left: 5px solid #1991d1;
-
+.layout-row.installed .layout-cell.theme-thumbnail {
+    background: #fdfdfd;
+    border-left: 5px solid #1991d1;
 }
 
-.theme-selector-layout .layout-cell.theme-thumbnail{
+.theme-selector-layout .layout-cell.theme-thumbnail {
     padding: 36px;
-
-}
-
-
-.layout-cell.min-height.theme-thumbnail {
 }
 
 .theme-selector-layout .layout-row.active .thumbnail-container:after {
@@ -33,7 +60,6 @@ border-left: 5px solid #1991d1;
     margin-top: -14px;
 }
 
-
 .icon-grid {
     display: grid;
     grid-template-columns:
@@ -51,10 +77,10 @@ border-left: 5px solid #1991d1;
 
 }
 .title-value .license {
-font-size: 2rem;
+    font-size: 2rem;
 }
 .license a {
-text-decoration: none;
+    text-decoration: none;
 }
 
 .number-icon,

diff --git a/updates/version.yaml b/updates/version.yaml
@@ -8,3 +8,5 @@
     - 'Fix translation to show why the error occurred'
 1.0.2:
     - 'Fix a typo in version.yaml preventing installation'
+1.0.3:
+    - 'Move core CSS to the plugin for better compatibility'