Beautify

src/static/riot/competitions/detail/_header.tag

@@ -430,6 +430,7 @@
             cursor pointer
 
         .competition-image
+            padding: 1rem
             box-shadow 3px 3px 5px darkgrey
 
         .underline
@@ -458,8 +459,8 @@
             background linear-gradient(to right, #ff9966, #ff5e62)
             color #fff
             border 1px solid #E6E9EB
-            border-radius 5px
-            padding 10px
+            border-radius 2rem
+            padding 1rem
             display flex
             align-items center
             margin-left 1rem

src/static/riot/competitions/detail/_tabs.tag

@@ -457,7 +457,7 @@
             font-size 1.3em
 
         .details-menu .active.item, .details-menu .item
-            margin -2px auto !important
+            // margin -2px auto !important
             cursor pointer
 
         .home-tab

src/static/riot/competitions/detail/leaderboards.tag

@@ -256,10 +256,12 @@
             color #8c8c8c
         .index-column
             min-width 55px
+        // .leaderboard-table>table>thead>tr>th:hover
+        //     transform: none !important;
         .leaderboard-title
             position absolute
             left 50%
-            transform translate(-50%, 50%)
+            transform translateX(-50%)
         .ui.table > thead > tr.task-row > th
             background-color: #e8f6ff !important
         .eye-icon-link

src/static/stylus/home.styl

@@ -368,10 +368,17 @@ body
     // background: #EEC1A450
     // backdrop-filter: blur(3px)
 
-.ui.header.announce
-	@extends.bg-primary
-	padding: 0.5rem 1rem!important
-	min-width: 60%
-	>p
-		font-size: 1.8rem
-		font-weight: 700
+.ui.segment-container.announce
+	>div.header
+    @extends.bg-primary
+    padding: 0.5rem 1rem!important
+    min-width: 60%
+    >p
+      font-size: 1.8rem
+      font-weight: 700
+  >div.container-content
+    height: fit-content
+    padding: 0 3rem
+    color black !important
+    text-align: start !important
+    white-space: break-spaces !important

src/static/stylus/inject.styl

@@ -1,4 +1,6 @@
 @import "src/static/stylus/components.styl"
+.ui.image>img, .ui.segment, .ui.message, .ui.submission-container, .ui.submission-form, .ui.dropdown.selection
+	@extends.round-md
 .ui.button
 	@extends .btn-scale-xs
 	@extends.round-md
@@ -30,8 +32,6 @@
 			color: var(--color-primary-purple)!important
 		input:focus
 			border-color: var(--color-primary-purple)!important
-.ui.segment
-	@extends.round-md
 
 .ui.menu.tabular
 	@extends.round-md
@@ -52,21 +52,31 @@ table.ui.table
 	overflow: hidden
 	>thead>tr>th
 		@extends.round-sm
-		@extends.transition-all
-		&:hover
-			// @extends.round-sm
-			transform: scale(1.02)
-			// background: var(--color-primary)!important
-			// color: white!important
-competition-tile .tile-wrapper
+		// @extends.transition-all
+		// &:hover
+		// 	// @extends.round-sm
+		// 	transform: scale(1.02)
+		// 	// background: var(--color-primary)!important
+		// 	// color: white!important
+.tile-wrapper
 	@extends.round-md
-	@extends.btn-scale-sm
+	@extends.btn-scale-xs
 	@extends.transition-all
 	&:hover
 		@extends.round-md
 		// background: var(--color-primary)!important
 	div.comp-stats
 		@extends.round-md
 		@extends.bg-primary
-.ui.image>img
+.ui.tab
 	@extends.round-md
+	margin-left: 0 !important
+	margin-right: 0 !important
+.ui.comp-tabs>.ui.tab
+	min-height: 100vh
+.ui.accordion
+	@extends.round-md
+	.ui.title
+		@extends.round-md
+	.ui.content
+		@extends.round-md

src/templates/pages/home.html

@@ -19,8 +19,8 @@
     <!-- 公告  -->
     {% if announcement %}
     <div style="margin: 0 auto; overflow: hidden;min-width: 60%;height: fit-content;"
-        class="segment-container ui segment full-width">
-        <div class="ui header announce">
+        class="segment-container ui segment full-width announce">
+        <div class="ui header">
             <p>📣公告📣</p>
         </div>
         <div class="container-content">