768 lines
18 KiB
Vue
768 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from "vue";
|
|
import { browser } from "wxt/browser";
|
|
|
|
import { getExtensionState, resetPlatformStates, updatePlatformState } from "../../src/storage";
|
|
import type { StoredPlatformState } from "../../src/platforms";
|
|
|
|
const loading = ref(true);
|
|
const refreshing = ref(false);
|
|
const resetting = ref(false);
|
|
const savingId = ref<string | null>(null);
|
|
const expandedId = ref<string | null>(null);
|
|
|
|
const installationKey = ref("");
|
|
const installationId = ref<number | null>(null);
|
|
const apiBaseUrl = ref<string | null>(null);
|
|
const platforms = ref<StoredPlatformState[]>([]);
|
|
|
|
const connectedCount = computed(() => platforms.value.filter((item) => item.connected).length);
|
|
|
|
const statusText = computed(() => {
|
|
if (loading.value || refreshing.value) {
|
|
return "正在检测平台状态...";
|
|
}
|
|
return `已连接 ${connectedCount.value}/${platforms.value.length} 个平台`;
|
|
});
|
|
|
|
onMounted(() => {
|
|
void initializePopup();
|
|
});
|
|
|
|
function clonePlatforms(items: StoredPlatformState[]): StoredPlatformState[] {
|
|
return items.map((platform) => ({ ...platform }));
|
|
}
|
|
|
|
async function loadState(): Promise<void> {
|
|
loading.value = true;
|
|
try {
|
|
const state = await getExtensionState();
|
|
installationKey.value = state.installation_key;
|
|
installationId.value = state.plugin_installation_id;
|
|
apiBaseUrl.value = state.api_base_url;
|
|
platforms.value = clonePlatforms(state.platforms);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function initializePopup(): Promise<void> {
|
|
try {
|
|
await loadState();
|
|
await refreshDetectedPlatforms();
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function titleFor(platform: StoredPlatformState): string {
|
|
return platform.nickname?.trim() || platform.platform_name;
|
|
}
|
|
|
|
function uidFor(platform: StoredPlatformState): string {
|
|
return platform.platform_uid != null ? String(platform.platform_uid).trim() : "未检测到平台账号";
|
|
}
|
|
|
|
function avatarFor(platform: StoredPlatformState): string | null {
|
|
if (platform.avatar_url?.trim()) {
|
|
return platform.avatar_url.trim();
|
|
}
|
|
if (platform.connected) {
|
|
return `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(titleFor(platform))}`;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function statusLabel(platform: StoredPlatformState): string {
|
|
if (refreshing.value || loading.value) {
|
|
return "检测中...";
|
|
}
|
|
return platform.connected ? "已登录" : "未登录";
|
|
}
|
|
|
|
function statusTone(platform: StoredPlatformState): "success" | "danger" | "pending" {
|
|
if (refreshing.value || loading.value) {
|
|
return "pending";
|
|
}
|
|
return platform.connected ? "success" : "danger";
|
|
}
|
|
|
|
function fillDemo(platform: StoredPlatformState): void {
|
|
platform.connected = true;
|
|
platform.nickname = platform.nickname?.trim() || `${platform.platform_name} Demo`;
|
|
platform.platform_uid = (platform.platform_uid != null ? String(platform.platform_uid).trim() : "") || `${platform.platform_id}-demo`;
|
|
platform.avatar_url =
|
|
platform.avatar_url?.trim() ||
|
|
`https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(platform.nickname || platform.platform_name)}`;
|
|
platform.message = null;
|
|
}
|
|
|
|
function toggleExpanded(platformId: string): void {
|
|
expandedId.value = expandedId.value === platformId ? null : platformId;
|
|
}
|
|
|
|
async function savePlatform(platform: StoredPlatformState): Promise<void> {
|
|
savingId.value = platform.platform_id;
|
|
try {
|
|
const state = await updatePlatformState(platform.platform_id, {
|
|
connected: platform.connected,
|
|
nickname: platform.nickname?.trim() || null,
|
|
platform_uid: platform.platform_uid != null ? String(platform.platform_uid).trim() || null : null,
|
|
avatar_url: platform.avatar_url?.trim() || null,
|
|
message: platform.connected ? null : "Sign in required",
|
|
});
|
|
installationId.value = state.plugin_installation_id;
|
|
apiBaseUrl.value = state.api_base_url;
|
|
platforms.value = clonePlatforms(state.platforms);
|
|
} finally {
|
|
savingId.value = null;
|
|
}
|
|
}
|
|
|
|
async function simulateDetect(): Promise<void> {
|
|
await refreshDetectedPlatforms();
|
|
}
|
|
|
|
async function refreshDetectedPlatforms(): Promise<void> {
|
|
refreshing.value = true;
|
|
try {
|
|
await browser.runtime.sendMessage({
|
|
type: "geo.publisher.request",
|
|
action: "detectPlatforms",
|
|
});
|
|
const state = await getExtensionState();
|
|
installationId.value = state.plugin_installation_id;
|
|
apiBaseUrl.value = state.api_base_url;
|
|
platforms.value = clonePlatforms(state.platforms);
|
|
} finally {
|
|
refreshing.value = false;
|
|
}
|
|
}
|
|
|
|
async function handleReset(): Promise<void> {
|
|
resetting.value = true;
|
|
try {
|
|
const state = await resetPlatformStates();
|
|
platforms.value = clonePlatforms(state.platforms);
|
|
expandedId.value = null;
|
|
} finally {
|
|
resetting.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="popup-shell">
|
|
<header class="popup-header">
|
|
<p class="popup-brand">My GEO</p>
|
|
<p class="popup-subtitle">{{ loading || refreshing ? "正在检测平台状态..." : "管理您的媒体平台账号" }}</p>
|
|
</header>
|
|
|
|
<section v-if="loading" class="popup-loading">
|
|
<div class="popup-spinner" />
|
|
<p>正在读取插件状态...</p>
|
|
</section>
|
|
|
|
<template v-else>
|
|
<section class="popup-list">
|
|
<article
|
|
v-for="platform in platforms"
|
|
:key="platform.platform_id"
|
|
class="platform-card"
|
|
:class="[`is-${statusTone(platform)}`, { 'is-expanded': expandedId === platform.platform_id }]"
|
|
:style="{ '--platform-accent': platform.accent_color }"
|
|
@click="toggleExpanded(platform.platform_id)"
|
|
>
|
|
<div class="platform-card__accent" />
|
|
|
|
<div class="platform-card__body">
|
|
<div class="platform-card__identity">
|
|
<div class="platform-card__logo">
|
|
<img v-if="platform.logo_path" :src="platform.logo_path" :alt="platform.platform_name" />
|
|
<span v-else>{{ platform.short_name }}</span>
|
|
<i />
|
|
</div>
|
|
|
|
<div class="platform-card__meta">
|
|
<h2>{{ platform.platform_name }}</h2>
|
|
<p
|
|
v-if="!platform.connected && !loading && !refreshing && platform.message"
|
|
class="platform-card__hint"
|
|
:title="platform.message"
|
|
>
|
|
{{ platform.message }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="platform.connected && !refreshing" class="platform-card__account">
|
|
<img v-if="avatarFor(platform)" :src="avatarFor(platform)!" :alt="titleFor(platform)" class="platform-card__avatar" />
|
|
<div class="platform-card__account-copy">
|
|
<strong>{{ titleFor(platform) }}</strong>
|
|
<span>{{ uidFor(platform) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="platform-card__status-chip" :class="`is-${statusTone(platform)}`">
|
|
{{ statusLabel(platform) }}
|
|
</div>
|
|
</div>
|
|
|
|
<section v-if="expandedId === platform.platform_id" class="platform-editor" @click.stop>
|
|
<div class="platform-editor__grid">
|
|
<label>
|
|
<span>昵称</span>
|
|
<input v-model="platform.nickname" type="text" placeholder="比如 CharmingGeeker" />
|
|
</label>
|
|
<label>
|
|
<span>UID</span>
|
|
<input v-model="platform.platform_uid" type="text" placeholder="平台账号 UID" />
|
|
</label>
|
|
<label class="platform-editor__full">
|
|
<span>头像 URL</span>
|
|
<input v-model="platform.avatar_url" type="text" placeholder="可选" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="platform-editor__actions">
|
|
<label class="platform-editor__toggle">
|
|
<input v-model="platform.connected" type="checkbox" />
|
|
<span>{{ platform.connected ? "已登录" : "未登录" }}</span>
|
|
</label>
|
|
|
|
<div class="platform-editor__buttons">
|
|
<button type="button" class="ghost" @click="fillDemo(platform)">填充示例</button>
|
|
<button type="button" class="ghost" @click="platform.connected = false">设为未登录</button>
|
|
<button
|
|
type="button"
|
|
class="primary"
|
|
:disabled="savingId === platform.platform_id"
|
|
@click="savePlatform(platform)"
|
|
>
|
|
{{ savingId === platform.platform_id ? "保存中..." : "保存本地状态" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<p class="popup-status">{{ statusText }}</p>
|
|
|
|
<details class="popup-debug">
|
|
<summary>调试信息</summary>
|
|
<dl>
|
|
<div>
|
|
<dt>安装实例 ID</dt>
|
|
<dd>{{ installationId ?? "--" }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>SaaS 地址</dt>
|
|
<dd>{{ apiBaseUrl || "--" }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Installation Key</dt>
|
|
<dd>{{ installationKey }}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<button type="button" class="popup-reset" :disabled="resetting" @click="handleReset">
|
|
{{ resetting ? "重置中..." : "重置全部平台" }}
|
|
</button>
|
|
</details>
|
|
</section>
|
|
|
|
<footer class="popup-footer">
|
|
<button type="button" class="popup-detect" :disabled="refreshing || resetting" @click="simulateDetect">
|
|
<span class="popup-detect__icon" :class="{ 'is-spinning': refreshing }">↻</span>
|
|
<span>{{ refreshing ? "检测中..." : "重新检测" }}</span>
|
|
</button>
|
|
</footer>
|
|
</template>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:global(html) {
|
|
width: 360px;
|
|
height: 600px;
|
|
}
|
|
|
|
:global(body) {
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: #516173;
|
|
font-family: "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
background:
|
|
radial-gradient(circle at top, rgba(140, 179, 255, 0.32), transparent 42%),
|
|
linear-gradient(180deg, #edf4ff 0%, #f8fbff 100%);
|
|
}
|
|
|
|
:global(#app) {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:global(*) {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popup-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.popup-header {
|
|
flex-shrink: 0;
|
|
padding: 24px 24px 14px;
|
|
text-align: center;
|
|
background: rgba(248, 251, 255, 0.92);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(216, 225, 238, 0.5);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
|
z-index: 10;
|
|
}
|
|
|
|
.popup-brand {
|
|
margin: 0;
|
|
color: #18263a;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.popup-subtitle {
|
|
margin: 6px 0 0;
|
|
color: #6c7b90;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.popup-loading {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
color: #7a8698;
|
|
padding: 16px 14px;
|
|
}
|
|
|
|
.popup-spinner {
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 3px solid rgba(71, 122, 255, 0.18);
|
|
border-top-color: #4f7dff;
|
|
border-radius: 999px;
|
|
animation: spin 0.9s linear infinite;
|
|
}
|
|
|
|
.popup-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px 14px;
|
|
}
|
|
|
|
.popup-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.popup-list::-webkit-scrollbar-thumb {
|
|
border-radius: 999px;
|
|
background: rgba(122, 144, 179, 0.28);
|
|
}
|
|
|
|
.platform-card {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
|
transition:
|
|
transform 180ms ease,
|
|
box-shadow 180ms ease,
|
|
border-color 180ms ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.platform-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.platform-card.is-expanded {
|
|
border-color: rgba(128, 156, 213, 0.6);
|
|
}
|
|
|
|
.platform-card__accent {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 4px;
|
|
background: #ff7f86;
|
|
}
|
|
|
|
.platform-card.is-success .platform-card__accent {
|
|
background: linear-gradient(180deg, #55d7b7, #47b69f);
|
|
}
|
|
|
|
.platform-card.is-danger .platform-card__accent {
|
|
background: linear-gradient(180deg, #ff8b91, #ff6c74);
|
|
}
|
|
|
|
.platform-card.is-pending .platform-card__accent {
|
|
background: linear-gradient(180deg, #ff8b91, #ff6c74);
|
|
}
|
|
|
|
.platform-card__body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.platform-card__identity {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.platform-card__logo {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
color: var(--platform-accent);
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.platform-card__logo img {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.platform-card__logo i {
|
|
position: absolute;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 2px solid #ffffff;
|
|
border-radius: 999px;
|
|
background: #f7bf4b;
|
|
}
|
|
|
|
.platform-card__meta h2 {
|
|
margin: 0;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.platform-card__hint {
|
|
margin: 4px 0 0;
|
|
overflow: hidden;
|
|
color: #9aa5b5;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platform-card__account {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.platform-card__avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 999px;
|
|
object-fit: cover;
|
|
background: #f3f6fb;
|
|
}
|
|
|
|
.platform-card__account-copy {
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.platform-card__account-copy strong,
|
|
.platform-card__account-copy span {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platform-card__account-copy strong {
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.platform-card__account-copy span {
|
|
margin-top: 2px;
|
|
color: #999999;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.platform-card__status-chip {
|
|
min-width: 72px;
|
|
padding: 6px 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.platform-card__status-chip.is-danger,
|
|
.platform-card__status-chip.is-pending {
|
|
color: #ff6b6b;
|
|
border-color: rgba(255, 107, 107, 0.3);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.platform-card__status-chip.is-success {
|
|
color: #4ab79f;
|
|
border-color: rgba(74, 183, 159, 0.3);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.platform-editor {
|
|
padding: 0 18px 18px 20px;
|
|
}
|
|
|
|
.platform-editor__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.platform-editor__full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.platform-editor label {
|
|
display: block;
|
|
}
|
|
|
|
.platform-editor span {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: #8793a4;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.platform-editor input {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
border: 1px solid rgba(216, 224, 238, 1);
|
|
border-radius: 14px;
|
|
outline: none;
|
|
background: rgba(248, 251, 255, 0.92);
|
|
color: #516173;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.platform-editor input:focus {
|
|
border-color: rgba(90, 124, 255, 0.6);
|
|
box-shadow: 0 0 0 4px rgba(91, 126, 255, 0.08);
|
|
}
|
|
|
|
.platform-editor__actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.platform-editor__toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #6a788b;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.platform-editor__toggle input {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.platform-editor__buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.platform-editor__buttons button,
|
|
.popup-detect,
|
|
.popup-reset {
|
|
appearance: none;
|
|
border: none;
|
|
border-radius: 14px;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
transition:
|
|
transform 150ms ease,
|
|
opacity 150ms ease,
|
|
box-shadow 150ms ease;
|
|
}
|
|
|
|
.platform-editor__buttons button:hover,
|
|
.popup-detect:hover,
|
|
.popup-reset:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.platform-editor__buttons button:disabled,
|
|
.popup-detect:disabled,
|
|
.popup-reset:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.68;
|
|
transform: none;
|
|
}
|
|
|
|
.ghost {
|
|
padding: 10px 14px;
|
|
background: rgba(242, 246, 252, 0.98);
|
|
color: #65758a;
|
|
}
|
|
|
|
.primary {
|
|
padding: 10px 16px;
|
|
background: linear-gradient(135deg, #4f7dff, #6a83ff);
|
|
color: #ffffff;
|
|
box-shadow: 0 10px 20px rgba(79, 125, 255, 0.2);
|
|
}
|
|
|
|
.popup-footer {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
padding: 12px 14px;
|
|
padding-bottom: max(12px, env(safe-area-inset-bottom));
|
|
background: rgba(248, 251, 255, 0.92);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-top: 1px solid rgba(216, 225, 238, 0.5);
|
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
|
|
z-index: 10;
|
|
}
|
|
|
|
.popup-detect {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-height: 48px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, #a5aab7, #9197a5);
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
}
|
|
|
|
.popup-detect__icon {
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.popup-detect__icon.is-spinning {
|
|
animation: spin 0.9s linear infinite;
|
|
}
|
|
|
|
.popup-status {
|
|
margin: 4px 0 0;
|
|
padding: 0;
|
|
color: #7f8b9d;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup-debug {
|
|
margin-top: 12px;
|
|
border: 1px solid rgba(216, 225, 238, 0.95);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.popup-debug summary {
|
|
padding: 12px 14px;
|
|
color: #76859a;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popup-debug dl {
|
|
margin: 0;
|
|
padding: 0 14px 14px;
|
|
}
|
|
|
|
.popup-debug dl div + div {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.popup-debug dt {
|
|
color: #8b97a8;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.popup-debug dd {
|
|
margin: 6px 0 0;
|
|
color: #526275;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.popup-reset {
|
|
width: calc(100% - 28px);
|
|
margin: 0 14px 14px;
|
|
padding: 10px 14px;
|
|
background: rgba(244, 114, 118, 0.12);
|
|
color: #df5e6d;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|