chore(sfc-playground): style improvements (#6000)

packages/sfc-playground/src/Header.vue

@@ -94,7 +94,8 @@ async function fetchVersions(): Promise<string[]> {
     <div class="links">
       <div class="version" @click.stop>
         <span class="active-version" @click="toggle">
-          Version: {{ activeVersion }}
+          Version
+          <span class="number">{{ activeVersion }}</span>
         </span>
         <ul class="versions" :class="{ expanded }">
           <li v-if="!publishedVersions"><a>loading versions...</a></li>
@@ -119,7 +120,7 @@ async function fetchVersions(): Promise<string[]> {
         :class="{ dev }"
         @click="$emit('toggle-dev')"
       >
-        {{ dev ? 'DEV' : 'PROD' }}
+        <span>{{ dev ? 'DEV' : 'PROD' }}</span>
       </button>
       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
@@ -152,6 +153,10 @@ nav {
   --bg: #fff;
   --bg-light: #fff;
   --border: #ddd;
+  --btn: #666;
+  --highlight: #333;
+  --green: #3ca877;
+  --red: #f07178;
 
   color: var(--base);
   height: var(--nav-height);
@@ -170,25 +175,21 @@ nav {
   --bg: #1a1a1a;
   --bg-light: #242424;
   --border: #383838;
+  --highlight: #fff;
 
   box-shadow: none;
   border-bottom: 1px solid var(--border);
 }
 
 h1 {
-  margin: 0;
-  line-height: var(--nav-height);
   font-weight: 500;
-  display: inline-block;
+  display: inline-flex;
-  vertical-align: middle;
+  place-items: center;
 }
 
 h1 img {
   height: 24px;
-  vertical-align: middle;
   margin-right: 10px;
-  position: relative;
-  top: -2px;
 }
 
 @media (max-width: 560px) {
@@ -208,7 +209,6 @@ h1 img {
 }
 
 .version {
-  display: inline-block;
   margin-right: 12px;
   position: relative;
 }
@@ -216,38 +216,40 @@ h1 img {
 .active-version {
   cursor: pointer;
   position: relative;
-  display: inline-block;
+  display: inline-flex;
-  vertical-align: middle;
+  place-items: center;
-  line-height: var(--nav-height);
-  padding-right: 15px;
 }
 
-.active-version:after {
+.active-version .number {
+  color: var(--green);
+  margin-left: 4px;
+}
+
+.active-version::after {
   content: '';
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 6px solid #aaa;
-  position: absolute;
+  margin-left: 8px;
-  right: 0;
-  top: 22px;
 }
 
-.toggle-dev {
+.toggle-dev span {
-  color: #f07178;
   font-size: 12px;
-  line-height: var(--nav-height);
+  background: var(--red);
+  color: #fff;
+  border-radius: 4px;
+  padding: 4px 6px;
 }
 
-.toggle-dev.dev {
+.toggle-dev.dev span {
-  color: #c3e88d;
+  background: var(--green);
 }
 
 .toggle-dark svg {
   width: 18px;
   height: 18px;
-  fill: #666;
 }
 
 .toggle-dark .dark,
@@ -259,12 +261,22 @@ h1 img {
   display: inline-block;
 }
 
-.version:hover .active-version:after {
+.links button,
-  border-top-color: var(--base);
+.links button a {
+  color: var(--btn);
 }
 
-.dark .version:hover .active-version:after {
+.links button:hover,
-  border-top-color: #fff;
+.links button:hover a {
+  color: var(--highlight);
+}
+
+.version:hover .active-version::after {
+  border-top-color: var(--btn);
+}
+
+.dark .version:hover .active-version::after {
+  border-top-color: var(--highlight);
 }
 
 .versions {
@@ -292,16 +304,19 @@ h1 img {
 }
 
 .versions a:hover {
-  color: #3ca877;
+  color: var(--green);
 }
 
 .versions.expanded {
   display: block;
 }
 
-.share,
+.links > * {
-.download,
+  display: flex;
-.github {
+  align-items: center;
-  margin: 0 2px;
+}
+
+.links > * + * {
+  margin-left: 4px;
 }
 </style>

packages/sfc-playground/src/icons/Download.vue

@@ -1,6 +1,6 @@
 <template>
-  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
+  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
-    <g fill="#666">
+    <g>
       <rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
       <rect
         x="3"

packages/sfc-playground/src/icons/GitHub.vue

@@ -1,7 +1,6 @@
 <template>
-  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
+  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
     <path
-        fill="#666"
+        d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/>
-        d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
   </svg>
 </template>

packages/sfc-playground/src/icons/Moon.vue

@@ -1,5 +1,5 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
+    <path fill="currentColor" d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
   </svg>
 </template>

packages/sfc-playground/src/icons/Share.vue

@@ -2,7 +2,7 @@
   <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
     <g
       fill="none"
-      stroke="#666"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"

packages/sfc-playground/src/icons/Sun.vue

@@ -1,13 +1,13 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
+    <path fill="currentColor" d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
-    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
+    <path fill="currentColor" d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
-    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
+    <path fill="currentColor" d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
-    <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
+    <path fill="currentColor" d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
-    <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
+    <path fill="currentColor" d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
-    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
+    <path fill="currentColor" d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
-    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
+    <path fill="currentColor" d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
-    <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
+    <path fill="currentColor" d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
-    <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+    <path fill="currentColor" d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
   </svg>
 </template>