fix: fixed style of go to top button

Author: berezinant

dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css

@@ -29,7 +29,7 @@
     --background-color: var(--default-white);
     --dark-mode-and-search-icon-color: var(--default-white);
     --color-dark: #27282c;
-    --default-font-family: JetBrains Sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,Roboto, Oxygen, Ubuntu,Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
+    --default-font-family: JetBrains Sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
     --default-monospace-font-family: JetBrains Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
     --default-font-size: 15px;
     --average-color: var(--color-dark);
@@ -85,6 +85,7 @@ html, body {
     height: 100%;
     width: 100%;
 }
+
 /* /--- root styles --- */
 
 /* --- global tags styles --- */
@@ -179,6 +180,7 @@ tbody > tr {
 td:first-child {
     width: 20vw;
 }
+
 /* /---  global tags styles --- */
 
 /* ---  utils classes --- */
@@ -210,6 +212,7 @@ td:first-child {
     clear: both;
     height: 0;
 }
+
 /* /---  utils classes --- */
 
 /* ---dark theme --- */
@@ -237,6 +240,7 @@ td:first-child {
 
     --sidemenu-section-active-color: var(--color-dark);
 }
+
 /* /---dark theme --- */
 
 .root {
@@ -313,14 +317,15 @@ td:first-child {
     height: 28px;
     width: 28px;
 }
+
 /* /--- Navigation MENU --- */
 
 .library-version {
     position: relative;
     top: -4px;
     margin-left: 3px;
 
-    color: rgba(255,255,255,.7);
+    color: rgba(255, 255, 255, .7);
     font-size: 13px;
     font-weight: normal;
     line-height: 16px;
@@ -339,6 +344,7 @@ td:first-child {
         padding: 5px 0 5px;
     }
 }
+
 /* --- Navigation controls --- */
 .navigation-controls {
     display: flex;
@@ -392,6 +398,7 @@ td:first-child {
         display: none;
     }
 }
+
 /* /--- Navigation THEME --- */
 
 /* --- Navigation HOMEPAGE --- */
@@ -422,11 +429,13 @@ td:first-child {
         display: none;
     }
 }
+
 /* /--- Navigation HOMEPAGE --- */
 
 .navigation .platform-selector:not([data-active]) {
     color: #fff;
 }
+
 /* /--- Navigation controls --- */
 /* /--- Navigation styles --- */
 
@@ -496,6 +505,7 @@ td:first-child {
     padding-top: 22px;
     padding-bottom: 16px;
 }
+
 /* /--- Layout styles --- */
 
 /* --- Main Content styles --- */
@@ -521,6 +531,7 @@ td:first-child {
 .main-content :is(h1, h2) {
     font-weight: 530;
 }
+
 /* /--- Main Content styles --- */
 
 /* /--- Breadcrumbs styles --- */
@@ -537,6 +548,7 @@ td:first-child {
 .breadcrumbs .current {
     color: var(--default-font-color);
 }
+
 /* /--- Breadcrumbs styles --- */
 
 .tabs-section,
@@ -1010,7 +1022,7 @@ h1.cover {
     .UnderCoverText table {
         display: block;
         word-break: normal;
-        overflow:  auto;
+        overflow: auto;
     }
 }
 
@@ -1042,7 +1054,7 @@ p.paragraph img {
 
 .deprecation-content {
     margin: 20px 10px;
-    border:1px solid var(--border-color);
+    border: 1px solid var(--border-color);
     padding: 13px 15px 16px 15px;
 }
 
@@ -1361,6 +1373,7 @@ Just in case of possible performance degradation it excluding tabs with briefs o
     .keyValue {
         grid-template-columns: 20% 80%;
     }
+
     .keyValue > div:first-child {
         word-break: break-word;
     }
@@ -1432,46 +1445,51 @@ div.runnablesample {
     background-color: var(--footer-background);
 }
 
-.footer span.go-to-top-icon {
-    border-radius: 2em;
-    padding: 11px 10px !important;
+.footer--button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
     background-color: var(--footer-go-to-top-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    font-size: 0;
+    line-height: 0;
+    transition: background-color 200ms ease-in-out;
+    will-change: background-color;
 }
 
-.footer span.go-to-top-icon > a::before {
-    content: url("../images/go-to-top-icon.svg");
+.footer--button:hover {
+    opacity: 0.9;
 }
 
-.footer > span:first-child {
+.footer--button_go-to-top {
+    background-image: url("../images/go-to-top-icon.svg");
     margin-left: var(--horizontal-spacing-for-content);
-    padding-left: 0;
-}
-
-.footer > span:last-child {
-    margin-right: var(--horizontal-spacing-for-content);
-    padding-right: 0;
-}
-
-.footer > span {
-    padding: 0 16px;
+    margin-right: 8px;
 }
 
-.footer a {
+.footer--link {
+    display: inline-flex;
+    align-items: center; ;
     color: var(--breadcrumb-font-color);
 }
 
-.footer span.go-to-top-icon > #go-to-top-link {
-    padding: 0;
-    border: none;
-}
-
-.footer .padded-icon {
-    padding-left: 0.5em;
+.footer--external-link-icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 4px;
+    margin-right: var(--horizontal-spacing-for-content);
+    background-image: url("../images/footer-go-to-link.svg");
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
 }
 
-.footer .padded-icon::before {
-    content: url("../images/footer-go-to-link.svg");
-}
 /* /--- footer --- */
 
 /* Logo styles */
@@ -1502,6 +1520,7 @@ div.runnablesample {
         display: none;
     }
 }
+
 /* / Logo styles */
 
 /*

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/footer.ftl

@@ -1,7 +1,13 @@
 <#macro display>
-      <div class="footer">
-        <span class="go-to-top-icon"><a href="#content" id="go-to-top-link"></a></span><span>${footerMessage}</span><span
-                class="pull-right"><span>Generated by </span><a
-                href="https://github.com/Kotlin/dokka"><span>dokka</span><span class="padded-icon"></span></a></span>
-      </div>
+    <div class="footer">
+        <a href="#content" id="go-to-top-link" class="footer--button footer--button_go-to-top"></a>
+        <span>${footerMessage}</span>
+        <span class="pull-right">
+        <span>Generated by </span>
+        <a class="footer--link" href="https://github.com/Kotlin/dokka">
+            <span>dokka</span>
+            <span class="footer--external-link-icon"></span>
+        </a>
+    </span>
+    </div>
 </#macro>