redesign new a bit

static/css/main.css

@@ -452,6 +452,8 @@ a[is="th-new"] {
     color: var(--text-color);
     opacity: 50%;
 
+    margin-right: 16px;
+
     &.has-news {
         opacity: 100%;
         text-decoration: none;
@@ -483,6 +485,11 @@ span.badge {
         background-color: #d01243;
     }
 
+    &.blue {
+        color: white;
+        background-color: #058ef0;
+    }
+
     &.before-content {
         margin-right: 6px;
     }
@@ -774,4 +781,4 @@ section[is="th-settings"] {
     /* Don't display settings when JavaScript is disabled.
        JS overrides this value on the element itself. */
     display: none;
-}
+}

static/css/new.css

@@ -7,10 +7,12 @@ section {
 .tree th-bc>p:last-child {
     --transition-duration: 0.2s;
 
-    margin-top: 12px;
+    margin-top: 8px;
     margin-bottom: 4px;
 
     &>a {
+        display: inline-block;
+
         padding: 0.5em 1.5em;
 
         color: var(--text-color);
@@ -33,6 +35,35 @@ section {
     }
 }
 
+.tree li>div:first-child,
+.tree li>details>summary:first-child {
+    --margin: 2.5em;
+
+    border: none;
+    margin-left: var(--tree-indent-width);
+    width: calc(100% - var(--tree-indent-width));
+    margin-top: var(--margin);
+    margin-bottom: var(--margin);
+}
+
+.tree th-bp {
+    display: none;
+}
+
+.tree th-bb {
+    opacity: 100%;
+
+    & .branch-date {
+        display: block !important;
+    }
+}
+
+@media (max-width: 600px) {
+    .tree .branch-container {
+        flex-direction: column-reverse;
+    }
+}
+
 section[is="th-settings"] {
     & h3 {
         display: inline;
@@ -100,4 +131,4 @@ section[is="th-settings"] {
             border-color: white;
         }
     }
-}
+}