添加AMGG身份认证配置帮助提示

Signed-off-by: Chenyang Gao <gps949@outlook.com>

cockpit_web/index.html

@@ -7,8 +7,8 @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="mobile-web-app-capable" content="yes" />
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-  <link rel="shortcut icon" href="/img/favicon.ico" type="img/x-icon">
-  <link rel="apple-touch-icon" href="/img/mlogo.png">
+  <link rel="shortcut icon" href="/cockpit/img/favicon.ico" type="img/x-icon">
+  <link rel="apple-touch-icon" href="/cockpit/img/mlogo.png">
   <title>蜃境系统管理</title>
 </head>
  

cockpit_web/src/setpart/Authority.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { onMounted, ref, watch, computed } from "vue";
 import Toast from "../components/Toast.vue";
+import MicrosoftHelp from "./help/Microsoft.vue";
+import GithubHelp from "./help/Github.vue";
+import GoogleHelp from "./help/Google.vue";
+import AppleHelp from "./help/Apple.vue";
 
 const devMode = ref(true);
 
@@ -14,6 +18,11 @@ watch(toastShow, () => {
   }
 });
 
+const microsoftHelpShow = ref(false);
+const githubHelpShow = ref(false);
+const googleHelpShow = ref(false);
+const appleHelpShow = ref(false);
+
 const ESURL = ref("");
 const ESKey = ref("");
 const WXScanURL = ref("");
@@ -802,8 +811,30 @@ onMounted(() => {
             ></path>
           </svg>
           <h3 class="text-xl font-semibold tracking-tight ml-4 min-w-fit">
-            Microsoft身份认证服务设置
+            Microsoft 认证设置
           </h3>
+          <div
+            @click="microsoftHelpShow = true"
+            class="tooltip flex items-center text-stone-300"
+            data-tip="点击查看帮助"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.35"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="ml-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+          </div>
           <div class="w-full flex justify-end">
             <button
               :disabled="Microsoft.client_id == '' || Microsoft.client_secret == ''"
@@ -860,8 +891,30 @@ onMounted(() => {
             ></path>
           </svg>
           <h3 class="text-xl font-semibold tracking-tight ml-4 min-w-fit">
-            GitHub身份认证服务设置
+            GitHub 认证设置
           </h3>
+          <div
+            @click="githubHelpShow = true"
+            class="tooltip flex items-center text-stone-300"
+            data-tip="点击查看帮助"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.35"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="ml-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+          </div>
           <div class="w-full flex justify-end">
             <button
               :disabled="Github.client_id == '' || Github.client_secret == ''"
@@ -933,8 +986,30 @@ onMounted(() => {
             ></path>
           </svg>
           <h3 class="text-xl font-semibold tracking-tight ml-4 min-w-fit">
-            Google身份认证服务设置
+            Google 认证设置
           </h3>
+          <div
+            @click="googleHelpShow = true"
+            class="tooltip flex items-center text-stone-300"
+            data-tip="点击查看帮助"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.35"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="ml-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+          </div>
           <div class="w-full flex justify-end">
             <button
               :disabled="Google.client_id == '' || Google.client_secret == ''"
@@ -991,8 +1066,30 @@ onMounted(() => {
             ></path>
           </svg>
           <h3 class="text-xl font-semibold tracking-tight ml-4 min-w-fit">
-            Apple身份认证服务设置
+            Apple 认证设置
           </h3>
+          <div
+            @click="appleHelpShow = true"
+            class="tooltip flex items-center text-stone-300"
+            data-tip="点击查看帮助"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.35"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="ml-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+          </div>
           <div class="w-full flex justify-end">
             <button
               :disabled="
@@ -1065,6 +1162,16 @@ onMounted(() => {
     </div>
   </div>
 
+  <!-- 菜单弹出提示框显示 -->
+  <Teleport to="body">
+    <MicrosoftHelp
+      v-if="microsoftHelpShow"
+      @close="microsoftHelpShow = false"
+    ></MicrosoftHelp>
+    <GithubHelp v-if="githubHelpShow" @close="githubHelpShow = false"></GithubHelp>
+    <GoogleHelp v-if="googleHelpShow" @close="googleHelpShow = false"></GoogleHelp>
+    <AppleHelp v-if="appleHelpShow" @close="appleHelpShow = false"></AppleHelp>
+  </Teleport>
   <!-- 提示框显示 -->
   <Teleport to=".toast-container">
     <Toast :show="toastShow" :msg="toastMsg" @close="toastShow = false"></Toast>
@@ -1098,14 +1205,14 @@ onMounted(() => {
 
 .tooltip:before {
   max-width: 16rem;
-  font-size: small;
+  font-size: x-small;
   font-weight: 300;
   border-radius: 0.375rem;
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
   border-width: 1px;
   border-color: #e1dfde;
 }

cockpit_web/src/setpart/help/Apple.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { watch, ref, onMounted, onBeforeUpdate, computed } from "vue";
+import { useDisScroll } from "/src/utils.js";
+
+useDisScroll();
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    @click.self="$emit('close')"
+    class="fixed overflow-y-auto inset-0 py-8 z-30 bg-gray-900 bg-opacity-[0.07]"
+    style="pointer-events: auto"
+  >
+    <div
+      class="bg-white rounded-lg relative p-4 md:p-6 text-gray-700 max-w-lg min-w-[19rem] my-8 mx-auto w-[97%] shadow-2xl"
+      style="pointer-events: auto"
+    >
+      <header class="flex items-center justify-between space-x-4 mb-4 mr-8">
+        <div class="font-semibold text-lg truncate">如何获取 Apple 认证配置信息</div>
+      </header>
+      <div class="mb-6">
+        <h3 class="font-semibold text-gray-800 mb-2">第一步：创建App ID及获取Team ID</h3>
+        <p class="text-gray-700 mb-2">
+          使用Apple开发者账号登录并<a
+            class="text-blue-400"
+            href="https://developer.apple.com/account/resources/identifiers/add/bundleId"
+            >创建一个App ID</a
+          >
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/apple/createAppID.jpg" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-semibold flex items-center text-gray-800 mb-2">
+          第二步：创建并配置Service ID
+        </h3>
+        <p class="text-gray-700 mb-2">
+          和前一步类似创建Service ID（前一步同链接选择Service
+          IDs），然后进入新创建的Service ID，勾选Sign In with Apple，然后点击Configure
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center mb-2">
+            <img class="w-full max-w-xl" src="/img/help/apple/createServiceID.jpg" />
+          </div>
+        </div>
+        <p class="text-gray-700 mb-2">
+          在ServiceID的配置中选择前面的AppID并填入受信域和回调地址
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center mb-2">
+            <img class="w-full max-w-xl" src="/img/help/apple/editServiceID.jpg" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-semibold flex items-center text-gray-800 mb-2">
+          第三步：创建Private Key
+        </h3>
+        <p class="text-gray-700 mb-2">
+          进入<a
+            class="text-blue-400"
+            href="https://developer.apple.com/account/resources/authkeys/add"
+            >添加key页面</a
+          >，设置key名称勾选Sign In with Apple，并点击Edit选择前面的AppID
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center mb-2">
+            <img class="w-full max-w-xl" src="/img/help/apple/createKey.jpg" />
+          </div>
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/apple/getKey.jpg" />
+          </div>
+        </div>
+      </div>
+
+      <button
+        @click="$emit('close')"
+        class="btn btn-sm btn-ghost absolute top-5 right-5 px-2 py-2 border-0 bg-base-0 focus:bg-base-200 hover:bg-base-200"
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.25em"
+          height="1.25em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  --tooltip-color: #faf9f8;
+  --tooltip-text-color: #3a3939;
+  text-align: start;
+  white-space: normal;
+}
+
+.tooltip:before {
+  max-width: 16rem;
+  font-size: small;
+  font-weight: 300;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-width: 1px;
+  border-color: #e1dfde;
+}
+</style>

cockpit_web/src/setpart/help/Github.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { watch, ref, onMounted, onBeforeUpdate, computed } from "vue";
+import { useDisScroll } from "/src/utils.js";
+
+useDisScroll();
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    @click.self="$emit('close')"
+    class="fixed overflow-y-auto inset-0 py-8 z-30 bg-gray-900 bg-opacity-[0.07]"
+    style="pointer-events: auto"
+  >
+    <div
+      class="bg-white rounded-lg relative p-4 md:p-6 text-gray-700 max-w-lg min-w-[19rem] my-8 mx-auto w-[97%] shadow-2xl"
+      style="pointer-events: auto"
+    >
+      <header class="flex items-center justify-between space-x-4 mb-4 mr-8">
+        <div class="font-semibold text-lg truncate">如何获取 GitHub 认证配置信息</div>
+      </header>
+      <div class="mb-4">
+        <h3 class="font-semibold text-gray-800 mb-2">第一步：创建GitHub OAuth App</h3>
+        <p class="text-gray-700 mb-2">
+          首先登录GitHub点击右上角选择<a
+            class="text-blue-400"
+            href="https://github.com/settings/developers"
+            >Settings->Developer settings</a
+          >，并点击选择创建OAuth Apps
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/github/createApp.jpg" />
+          </div>
+        </div>
+        <p class="text-gray-700 mb-2">填写信息创建OAuth App</p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/github/createApp2.jpg" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-semibold flex items-center text-gray-800 mb-2">
+          第二步：得到Client ID并创建Client Secret
+        </h3>
+        <p class="text-gray-700 mb-2">
+          创建成功后即可得到Client ID，再按图示创建Client Secret
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/github/getClientInfo.jpg" />
+          </div>
+        </div>
+      </div>
+
+      <button
+        @click="$emit('close')"
+        class="btn btn-sm btn-ghost absolute top-5 right-5 px-2 py-2 border-0 bg-base-0 focus:bg-base-200 hover:bg-base-200"
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.25em"
+          height="1.25em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  --tooltip-color: #faf9f8;
+  --tooltip-text-color: #3a3939;
+  text-align: start;
+  white-space: normal;
+}
+
+.tooltip:before {
+  max-width: 16rem;
+  font-size: small;
+  font-weight: 300;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-width: 1px;
+  border-color: #e1dfde;
+}
+</style>

cockpit_web/src/setpart/help/Google.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { watch, ref, onMounted, onBeforeUpdate, computed } from "vue";
+import { useDisScroll } from "/src/utils.js";
+
+useDisScroll();
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    @click.self="$emit('close')"
+    class="fixed overflow-y-auto inset-0 py-8 z-30 bg-gray-900 bg-opacity-[0.07]"
+    style="pointer-events: auto"
+  >
+    <div
+      class="bg-white rounded-lg relative p-4 md:p-6 text-gray-700 max-w-lg min-w-[19rem] my-8 mx-auto w-[97%] shadow-2xl"
+      style="pointer-events: auto"
+    >
+      <header class="flex items-center justify-between space-x-4 mb-4 mr-8">
+        <div class="font-semibold text-lg truncate">如何获取 Google 认证配置信息</div>
+      </header>
+      <div class="mb-4">
+        <h3 class="font-semibold text-gray-800 mb-2">第一步：创建OAuth 2.0 客户端 ID</h3>
+        <p class="text-gray-700 mb-3">
+          首先访问<a
+            class="text-blue-400"
+            href="https://console.cloud.google.com/apis/credentials"
+            >Google Cloud Console->API和服务->凭据</a
+          >（需要选择或创建项目Project），点击创建凭据新建一个OAuth客户端ID
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center mb-2">
+            <img class="w-full max-w-xl" src="/img/help/google/createCred.jpg" />
+          </div>
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/google/createCred2.jpg" />
+          </div>
+        </div>
+        <p class="text-gray-700 mb-2">
+          创建完成即得到Cllent ID和Client secret，可以下载JSON文件保存到本地
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center mb-2">
+            <img class="w-full max-w-xl" src="/img/help/google/getClientInfo.jpg" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-semibold flex items-center text-gray-800 mb-2">
+          第二步：修改同意屏幕和添加测试用户或发布应用
+        </h3>
+        <p class="text-gray-700 mb-2">
+          需要注意的是，只是创建了OAuth Clinet ID并不能使用，需要配置同意屏幕
+        </p>
+        <p class="text-gray-700 mb-2">
+          在这个过程中需要配置权限范围Scope并进行测试用户添加（或者发布应用），其他根据自己情况配置即可，重点需勾选下图所示范围
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center mb-2">
+            <img class="w-full max-w-xl" src="/img/help/google/setScopes.jpg" />
+          </div>
+        </div>
+      </div>
+
+      <button
+        @click="$emit('close')"
+        class="btn btn-sm btn-ghost absolute top-5 right-5 px-2 py-2 border-0 bg-base-0 focus:bg-base-200 hover:bg-base-200"
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.25em"
+          height="1.25em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  --tooltip-color: #faf9f8;
+  --tooltip-text-color: #3a3939;
+  text-align: start;
+  white-space: normal;
+}
+
+.tooltip:before {
+  max-width: 16rem;
+  font-size: small;
+  font-weight: 300;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-width: 1px;
+  border-color: #e1dfde;
+}
+</style>

cockpit_web/src/setpart/help/Microsoft.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { watch, ref, onMounted, onBeforeUpdate, computed } from "vue";
+import { useDisScroll } from "/src/utils.js";
+
+useDisScroll();
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    @click.self="$emit('close')"
+    class="fixed overflow-y-auto inset-0 py-8 z-30 bg-gray-900 bg-opacity-[0.07]"
+    style="pointer-events: auto"
+  >
+    <div
+      class="bg-white rounded-lg relative p-4 md:p-6 text-gray-700 max-w-lg min-w-[19rem] my-8 mx-auto w-[97%] shadow-2xl"
+      style="pointer-events: auto"
+    >
+      <header class="flex items-center justify-between space-x-4 mb-4 mr-8">
+        <div class="font-semibold text-lg truncate">如何获取 Microsoft 认证配置信息</div>
+      </header>
+      <div class="mb-4">
+        <h3 class="font-semibold text-gray-800 mb-2">
+          第一步：在Azure Active Directory注册应用
+        </h3>
+        <p class="text-gray-700">首先你应该已经注册并拥有能访问Azure的账户</p>
+        <p class="text-gray-700 mb-2">
+          在Azure<a
+            class="text-blue-400"
+            href="https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps"
+            >应用注册</a
+          >页面点击新注册
+        </p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2 mb-2">
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/microsoft/createApp.jpg" />
+          </div>
+        </div>
+        <p class="text-gray-700 mb-2">注册应用完成后的页面即显示了Client ID信息</p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2">
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/microsoft/getClientID.jpg" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-semibold flex items-center text-gray-800 mb-2">
+          第二步：创建Client Secret
+        </h3>
+        <p class="text-gray-700 mb-2">注册应用完成后页面右半部分点击进入创建客户端机密</p>
+        <div class="rounded-md border bg-stone-100 border-stone-300 p-2">
+          <div class="flex justify-center mb-2">
+            <img
+              class="w-full max-w-xl"
+              src="/img/help/microsoft/createClientSecret.jpg"
+            />
+          </div>
+          <div class="flex justify-center">
+            <img class="w-full max-w-xl" src="/img/help/microsoft/getClientSecret.jpg" />
+          </div>
+        </div>
+      </div>
+
+      <button
+        @click="$emit('close')"
+        class="btn btn-sm btn-ghost absolute top-5 right-5 px-2 py-2 border-0 bg-base-0 focus:bg-base-200 hover:bg-base-200"
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.25em"
+          height="1.25em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  --tooltip-color: #faf9f8;
+  --tooltip-text-color: #3a3939;
+  text-align: start;
+  white-space: normal;
+}
+
+.tooltip:before {
+  max-width: 16rem;
+  font-size: small;
+  font-weight: 300;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-width: 1px;
+  border-color: #e1dfde;
+}
+</style>