Merge pull request #1205 from Patolord/StarCss

css improvements and star icon
pcottle · Nov 19, 2024 · 023082e · 023082e
2 parents b3d0004 + 7772304
commit 023082e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src/style/main.css b/src/style/main.css
@@ -1011,8 +1011,22 @@ a.levelIcon.solved:active {
 }
 
 a.levelIcon.best {
-  border-color: gold;
-  background: gold;
+  background: -webkit-linear-gradient(top, #FFD700, #FFA500);
+  background: -moz-linear-gradient(top, #FFD700, #FFA500);
+  background: -o-linear-gradient(top, #FFD700, #FFA500);
+  background: -ms-linear-gradient(top, #FFD700, #FFA500);
+  background: linear-gradient(top, #FFD700, #FFA500);
+  border-top: 1px solid #FFE750;
+}
+
+a.levelIcon.best:hover {
+  border-top-color: #FFD700;
+  background: #FFD700;
+}
+
+a.levelIcon.best:active {
+  border-top-color: #FFA500;
+  background: #FFA500;
 }
 
 a.levelIcon div.index {
@@ -1023,21 +1037,22 @@ a.levelIcon div.index {
   -webkit-text-stroke: 1px #111;
 }
 
+/* Icon states */
 a.levelIcon div.index i {
   display: none;
-}
-
-a.levelIcon.solved div.index i {
-  display: block;
   color: white;
-  -webkit-text-stroke: 0;
-  text-shadow: none;
   font-size: 2em;
+  -webkit-text-stroke: 0;
 }
 
-a.levelIcon.solved div.index div.indexNum {
-  display: none;
-}
+/* Show appropriate icon based on state */
+a.levelIcon.solved .icon-ok-circle { display: block; }
+a.levelIcon.best .icon-ok-circle { display: none; }
+a.levelIcon.best .icon-star { display: block; }
+
+/* Hide number when icons are shown */
+a.levelIcon.solved div.index div.indexNum,
+a.levelIcon.best div.index div.indexNum { display: none; }
 
 /* MultiView Builder */
 .multiViewBuilder div.view {

diff --git a/src/template.index.html b/src/template.index.html
@@ -129,6 +129,7 @@ <h3> <%= displayName %> </h3>
         <a href="javascript:void(0)" class="levelIcon box center centerAlign vertical" id="levelIcon-<%=ids[i]%>" data-id="<%=ids[i]%>">
           <div class="index box" data-id="<%=ids[i]%>">
             <i class="icon-ok-circle" data-id="<%=ids[i]%>"></i>
+            <i class="icon-star" data-id="<%=ids[i]%>"></i>
             <div class="indexNum" data-id="<%=ids[i]%>">
               <%= i + 1 %>
             </div>