From a2fa75e05be3ed0d228daf33142df68e9ec772a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E6=B7=91=E6=9D=B0?= <tianshujie0123@163.com>
Date: Wed, 21 Dec 2022 15:54:42 +0800
Subject: [PATCH] * Finish task #79626.

---
 module/block/view/themeswitch.html.php | 28 +++++++++++++++-----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/module/block/view/themeswitch.html.php b/module/block/view/themeswitch.html.php
index 538617c7ae..8fd355cd65 100644
--- a/module/block/view/themeswitch.html.php
+++ b/module/block/view/themeswitch.html.php
@@ -1,25 +1,28 @@
 <style>
 .themeSwitch .table-row {border-top: 0px !important;}
+.themeSwitch .theme-container:first-child {padding-top: 1%;}
+@media screen and (max-width: 1366px){.themeSwitch .theme-container:first-child {padding-top: 3%;} .theme-container + .theme-container {padding-top: 3%;}}
 .themeSwitch .theme-container {border-collapse:separate; border-spacing:10px; border: none;}
-#theme-default {background: url('/theme/default/images/guide/theme_default.png') no-repeat;}
-#theme-blue {background: url('/theme/default/images/guide/theme_blue.png') no-repeat;}
-#theme-green {background: url('/theme/default/images/guide/theme_green.png') no-repeat;}
-#theme-red {background: url('/theme/default/images/guide/theme_red.png') no-repeat;}
-#theme-pink {background: url('/theme/default/images/guide/theme_pink.png') no-repeat;}
-#theme-blackberry {background: url('/theme/default/images/guide/theme_blackberry.png') no-repeat;}
-#theme-classic {background: url('/theme/default/images/guide/theme_classic.png') no-repeat;}
-#theme-purple {background: url('/theme/default/images/guide/theme_purple.png') no-repeat;}
-.theme {margin-left: 10px; color: #FFF; border: none; height: 103px; background-size: 100% !important; cursor:pointer; border-radius: 4px; position: relative;}
+.theme {margin-left: 10px; color: #FFF; border: none; background-size: 100% !important; cursor:pointer; border-radius: 4px; position: relative;}
 .theme:hover {box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);}
-.theme-text {width: 100px;position: absolute; bottom: 21px; left: 50%; transform: translateX(-50%);}
+.theme-text {width: 100%;position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);}
 .theme-text .icon {padding-right: 10px;}
+.theme-text.active {left: 42%;}
+div.theme-default {background: #3785ff;}
+div.theme-blue {background: #2b80ff;}
+div.theme-green {background: #248f83;}
+div.theme-red {background: #f34a5a;}
+div.theme-pink {background: #f7889c;}
+div.theme-blackberry {background: #304269;}
+div.theme-classic {background: #114f8e;}
+div.theme-purple {background: #9958dc;}
 </style>
 <script>
 $(function()
 {
     var $block        = $('#block<?php echo $blockID;?>');
     var themePosition = "<?php echo 'themePosition-' . $blockID;?>";
-    $block.find('.themeSwitch > .theme').click(function()
+    $block.find('.themeSwitch .theme').click(function()
     {
         var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || $block.find('#guideBody').offset().top;
         localStorage.setItem(themePosition, scrollTop);
@@ -32,7 +35,8 @@ $(function()
 <?php $i = 0;?>
 <?php foreach($lang->block->themes as $themeKey => $themeName):?>
   <?php if($i % 4 == 0) echo "<div class='col-12 table-row theme-container'>"?>
-    <div class='theme col-3' id="<?php echo 'theme-' . $themeKey;?>" data-value="<?php echo $themeKey;?>">
+    <div class="theme col-3 theme-<?php echo $themeKey;?>" data-value="<?php echo $themeKey;?>">
+      <?php echo html::image($config->webRoot . "theme/default/images/guide/theme_{$themeKey}.png");?>
       <?php $hidden = $app->cookie->theme == $themeKey ? '' : 'hidden';?>
       <?php $active = $app->cookie->theme == $themeKey ? 'active' : '';?>
       <div class='theme-text text-center <?php echo $active;?>'><i class="icon icon-check-circle <?php echo $hidden;?>"></i><?php echo $themeName;?></div>