src/api/settings.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { baseName } from './utils'
+import _ from 'lodash'
+
+export async function deleteInstanceDocument(name, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/instance_document/${name}`,
+    method: 'delete',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchDescription(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/v1/pleroma/admin/config/descriptions`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchDescription2(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/v2/pleroma/admin/config/descriptions`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchSettings(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/config`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function getInstanceDocument(name, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/instance_document/${name}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function updateInstanceDocument(name, formData, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/instance_document/${name}`,
+    method: 'patch',
+    data: formData,
+    headers: { ...authHeaders(token), 'Content-Type': 'multipart/form-data' }
+  })
+}
+
+export async function updateSettings(configs, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/config`,
+    method: 'post',
+    headers: authHeaders(token),
+    data: { configs }
+  })
+}
+
+export async function removeSettings(configs, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/config`,
+    method: 'post',
+    headers: authHeaders(token),
+    data: { configs }
+  })
+}
+
+export async function fetchFrontends(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/frontends`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function installFrontend(data, authHost, token) {
+  const filteredData = _.pickBy(data)
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/frontends/install`,
+    method: 'post',
+    headers: authHeaders(token),
+    data: filteredData
+  })
+}
+
+const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/api/status.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { baseName } from './utils'
+
+export async function changeStatusScope(id, sensitive, visibility, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/statuses/${id}`,
+    method: 'put',
+    headers: authHeaders(token),
+    data: { sensitive, visibility }
+  })
+}
+
+export async function deleteStatus(id, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/statuses/${id}`,
+    method: 'delete',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchStatus(id, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/statuses/${id}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchStatuses({ godmode, localOnly, authHost, token, pageSize, page }) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/statuses?godmode=${godmode}&local_only=${localOnly}&page=${page}&page_size=${pageSize}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchStatusesCount(instance, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: instance ? `/api/pleroma/admin/stats?instance=${instance}` : `/api/pleroma/admin/stats`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchStatusesByInstance({ instance, authHost, token, pageSize, page }) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/instances/${instance}/statuses?page=${page}&page_size=${pageSize}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/api/transaction.js

-import request from '@/utils/request'
-
-export function fetchList(query) {
-  return request({
-    url: '/transaction/list',
-    method: 'get',
-    params: query
-  })
-}

src/api/users.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { baseName } from './utils'
+
+export async function activateUsers(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/activate`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function addRight(nicknames, right, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/permission_group/${right}`,
+    method: 'post',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function createNewAccount(nickname, email, password, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users',
+    method: 'post',
+    headers: authHeaders(token),
+    data: { users: [{ nickname, email, password }] }
+  })
+}
+
+export async function deactivateUsers(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/deactivate`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function deleteRight(nicknames, right, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/permission_group/${right}`,
+    method: 'delete',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function deleteUsers(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users`,
+    method: 'delete',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function disableMfa(nickname, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/disable_mfa`,
+    method: 'put',
+    headers: authHeaders(token),
+    data: { nickname }
+  })
+}
+
+export async function fetchUser(id, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${id}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchUserCredentials(nickname, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${nickname}/credentials`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function updateUserCredentials(nickname, credentials, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${nickname}/credentials`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: credentials
+  })
+}
+
+export async function fetchUsers(filters, actorTypeFilters, authHost, token, page = 1) {
+  const url = actorTypeFilters.length === 0
+    ? `/api/pleroma/admin/users?page=${page}&filters=${filters}`
+    : actorTypeFilters.reduce((acc, filter) => {
+      const newAcc = acc.concat(`&actor_types[]=${filter}`)
+      return newAcc
+    }, `/api/pleroma/admin/users?page=${page}&filters=${filters}`)
+
+  return await request({
+    baseURL: baseName(authHost),
+    url,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function getPasswordResetToken(nickname, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${nickname}/password_reset`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function forcePasswordReset(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/force_password_reset`,
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function searchUsers(query, filters, actorTypeFilters, authHost, token, page = 1) {
+  const url = actorTypeFilters.length === 0
+    ? `/api/pleroma/admin/users?query=${query}&page=${page}&filters=${filters}`
+    : actorTypeFilters.reduce((acc, filter) => {
+      const newAcc = acc.concat(`&actor_types[]=${filter}`)
+      return newAcc
+    }, `/api/pleroma/admin/users?query=${query}&page=${page}&filters=${filters}`)
+
+  return await request({
+    baseURL: baseName(authHost),
+    url,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function tagUser(nicknames, tags, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users/tag',
+    method: 'put',
+    headers: authHeaders(token),
+    data: { nicknames, tags }
+  })
+}
+
+export async function untagUser(nicknames, tags, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users/tag',
+    method: 'delete',
+    headers: authHeaders(token),
+    data: { nicknames, tags }
+  })
+}
+
+export async function fetchUserStatuses(id, authHost, godmode, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${id}/statuses?godmode=${godmode}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function fetchUserChats(id, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/users/${id}/chats`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+export async function approveUserAccount(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users/approve',
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function confirmUserEmail(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users/confirm_email',
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+export async function resendConfirmationEmail(nicknames, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: '/api/pleroma/admin/users/resend_confirmation_email',
+    method: 'patch',
+    headers: authHeaders(token),
+    data: { nicknames }
+  })
+}
+
+const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/api/utils.js

+// SPDX-FileCopyrightText: 2019-2022 Pleroma Authors <https://pleroma.social>
+// SPDX-License-Identifier: AGPL-3.0-only
+
+const isLocalhost = (instanceName) =>
+  instanceName.startsWith('localhost:') || instanceName.startsWith('127.0.0.1:')
+
+export const baseName = (instanceName = 'localhost') => {
+  if (instanceName.match(/https?:\/\//)) {
+    return instanceName
+  } else {
+    return isLocalhost(instanceName) ? `http://${instanceName}` : `https://${instanceName}`
+  }
+}

src/assets/echarts-macarons.js

-/* eslint-disable */
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        // AMD. Register as an anonymous module.
-        define(['exports', 'echarts'], factory);
-    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
-        // CommonJS
-        factory(exports, require('echarts'));
-    } else {
-        // Browser globals
-        factory({}, root.echarts);
-    }
-}(this, function (exports, echarts) {
-    var log = function (msg) {
-        if (typeof console !== 'undefined') {
-            console && console.error && console.error(msg);
-        }
-    };
-    if (!echarts) {
-        log('ECharts is not Loaded');
-        return;
-    }
-
-    var colorPalette = [
-        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
-        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
-        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
-        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
-    ];
-
-
-    var theme = {
-        color: colorPalette,
-
-        title: {
-            textStyle: {
-                fontWeight: 'normal',
-                color: '#008acd'
-            }
-        },
-
-        visualMap: {
-            itemWidth: 15,
-            color: ['#5ab1ef','#e0ffff']
-        },
-
-        toolbox: {
-            iconStyle: {
-                normal: {
-                    borderColor: colorPalette[0]
-                }
-            }
-        },
-
-        tooltip: {
-            backgroundColor: 'rgba(50,50,50,0.5)',
-            axisPointer : {
-                type : 'line',
-                lineStyle : {
-                    color: '#008acd'
-                },
-                crossStyle: {
-                    color: '#008acd'
-                },
-                shadowStyle : {
-                    color: 'rgba(200,200,200,0.2)'
-                }
-            }
-        },
-
-        dataZoom: {
-            dataBackgroundColor: '#efefff',
-            fillerColor: 'rgba(182,162,222,0.2)',
-            handleColor: '#008acd'
-        },
-
-        grid: {
-            borderColor: '#eee'
-        },
-
-        categoryAxis: {
-            axisLine: {
-                lineStyle: {
-                    color: '#008acd'
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: ['#eee']
-                }
-            }
-        },
-
-        valueAxis: {
-            axisLine: {
-                lineStyle: {
-                    color: '#008acd'
-                }
-            },
-            splitArea : {
-                show : true,
-                areaStyle : {
-                    color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: ['#eee']
-                }
-            }
-        },
-
-        timeline : {
-            lineStyle : {
-                color : '#008acd'
-            },
-            controlStyle : {
-                normal : { color : '#008acd'},
-                emphasis : { color : '#008acd'}
-            },
-            symbol : 'emptyCircle',
-            symbolSize : 3
-        },
-
-        line: {
-            smooth : true,
-            symbol: 'emptyCircle',
-            symbolSize: 3
-        },
-
-        candlestick: {
-            itemStyle: {
-                normal: {
-                    color: '#d87a80',
-                    color0: '#2ec7c9',
-                    lineStyle: {
-                        color: '#d87a80',
-                        color0: '#2ec7c9'
-                    }
-                }
-            }
-        },
-
-        scatter: {
-            symbol: 'circle',
-            symbolSize: 4
-        },
-
-        map: {
-            label: {
-                normal: {
-                    textStyle: {
-                        color: '#d87a80'
-                    }
-                }
-            },
-            itemStyle: {
-                normal: {
-                    borderColor: '#eee',
-                    areaColor: '#ddd'
-                },
-                emphasis: {
-                    areaColor: '#fe994e'
-                }
-            }
-        },
-
-        graph: {
-            color: colorPalette
-        },
-
-        gauge : {
-            axisLine: {
-                lineStyle: {
-                    color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],
-                    width: 10
-                }
-            },
-            axisTick: {
-                splitNumber: 10,
-                length :15,
-                lineStyle: {
-                    color: 'auto'
-                }
-            },
-            splitLine: {
-                length :22,
-                lineStyle: {
-                    color: 'auto'
-                }
-            },
-            pointer : {
-                width : 5
-            }
-        }
-    };
-
-    echarts.registerTheme('macarons', theme);
-}));

src/components/BackToTop/index.vue

-<template>
-  <transition :name="transitionName">
-    <div class="back-to-ceiling" @click="backToTop" v-show="visible" :style="customStyle">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
-        <title>回到顶部</title>
-        <g>
-          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path>
-        </g>
-      </svg>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'BackToTop',
-  props: {
-    visibilityHeight: {
-      type: Number,
-      default: 400
-    },
-    backPosition: {
-      type: Number,
-      default: 0
-    },
-    customStyle: {
-      type: Object,
-      default: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px',
-        background: '#e7eaf1'
-      }
-    },
-    transitionName: {
-      type: String,
-      default: 'fade'
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      interval: null
-    }
-  },
-  mounted() {
-    window.addEventListener('scroll', this.handleScroll)
-  },
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll)
-    if (this.interval) {
-      clearInterval(this.interval)
-    }
-  },
-  methods: {
-    handleScroll() {
-      this.visible = window.pageYOffset > this.visibilityHeight
-    },
-    backToTop() {
-      const start = window.pageYOffset
-      let i = 0
-      this.interval = setInterval(() => {
-        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
-        if (next <= this.backPosition) {
-          window.scrollTo(0, this.backPosition)
-          clearInterval(this.interval)
-        } else {
-          window.scrollTo(0, next)
-        }
-        i++
-      }, 16.7)
-    },
-    easeInOutQuad(t, b, c, d) {
-      if ((t /= d / 2) < 1) return c / 2 * t * t + b
-      return -c / 2 * (--t * (t - 2) - 1) + b
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .back-to-ceiling {
-    position: fixed;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .back-to-ceiling:hover {
-    background: #d5dbe7;
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity .5s;
-  }
-
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0
-  }
-
-  .back-to-ceiling .Icon {
-    fill: #9aaabf;
-    background: none;
-  }
-</style>

src/components/Breadcrumb/index.vue

-<template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
-        <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
-        <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
-</template>
-
-<script>
-import { generateTitle } from '@/utils/i18n'
-
-export default {
-  created() {
-    this.getBreadcrumb()
-  },
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  },
-  methods: {
-    generateTitle,
-    getBreadcrumb() {
-      let matched = this.$route.matched.filter(item => item.name)
-      const first = matched[0]
-      if (first && first.name !== 'dashboard') {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
-      }
-      this.levelList = matched
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 10px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
-  }
-</style>

src/components/GithubCorner/index.vue

-<template>
-  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
-      aria-hidden="true">
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-        fill="currentColor" class="octo-body"></path>
-    </svg>
-  </a>
-</template>
-
-<style scoped>
-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
-}
-
-@keyframes octocat-wave {
-  0%,
-  100% {
-    transform: rotate(0)
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg)
-  }
-  40%,
-  80% {
-    transform: rotate(10deg)
-  }
-}
-
-@media (max-width:500px) {
-  .github-corner:hover .octo-arm {
-    animation: none
-  }
-  .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
-  }
-}
-</style>