You've already forked SmartisanNote.Remake
完善部分阴影系统；
把所有px单位转换为rem；
This commit is contained in:
User
@@ -18,7 +18,7 @@
|
||||
--primary-light: #f5f0e6; /* Light background tone */
|
||||
|
||||
/* Editor typography - Consistent font size and line height */
|
||||
--editor-font-size: 23px; /* Base font size for editor */
|
||||
--editor-font-size: 1.4375rem; /* Base font size for editor */
|
||||
--editor-line-height: 1.1; /* Line height for editor */
|
||||
|
||||
/* Background colors - Warm paper-like tones */
|
||||
@@ -94,7 +94,8 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background-color: var(--background);
|
||||
background-color: white;
|
||||
background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
|
||||
color: var(--text-primary);
|
||||
/* 适配iPhone X及更新机型的刘海屏 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
|
||||
@@ -76,6 +76,14 @@ const props = defineProps({
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: 'url(/assets/icons/drawable-xxhdpi/action_bar_default.png)',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
})
|
||||
|
||||
const localFolderExpanded = ref(false)
|
||||
@@ -92,7 +100,15 @@ const showFolderIcon = computed(() => {
|
||||
|
||||
const leftIconSource = computed(() => {
|
||||
// 根据leftType属性返回对应的图标路径
|
||||
return props.leftType === 'settings' ? '/assets/icons/drawable-xxhdpi/btn_settings.png' : '/assets/icons/drawable-xxhdpi/btn_back.png'
|
||||
if (props.leftType === 'settings') {
|
||||
return '/assets/icons/drawable-xxhdpi/btn_settings.png'
|
||||
} else {
|
||||
if (props.color !== 'white') {
|
||||
return '/assets/icons/drawable-xxhdpi/btn_back_black.png'
|
||||
} else {
|
||||
return '/assets/icons/drawable-xxhdpi/btn_back.png'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handleFolderToggle = () => {
|
||||
@@ -135,19 +151,18 @@ const handleTitlePress = () => {
|
||||
|
||||
<style scoped lang="less">
|
||||
.component {
|
||||
padding: 4.5rem 0.72rem 0.5rem;
|
||||
background-image: url(/assets/icons/drawable-xxhdpi/title_bar_background.png);
|
||||
padding: 2.5rem 0.72rem 0.5rem;
|
||||
background: v-bind(background);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: -2.8rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2);
|
||||
.inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
transform: translateY(-3.2rem);
|
||||
}
|
||||
.left-icon,
|
||||
.image_4 {
|
||||
@@ -179,7 +194,7 @@ const handleTitlePress = () => {
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #e3dbd4;
|
||||
color: v-bind(color);
|
||||
font-size: 1.01rem;
|
||||
line-height: 1.01rem;
|
||||
}
|
||||
|
||||
@@ -242,7 +242,7 @@ const handleTouchEnd = () => {
|
||||
background: var(--background);
|
||||
z-index: 2;
|
||||
padding: 0.44rem 0.69rem 0.88rem 2.69rem;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.23);
|
||||
transition: transform 0.2s ease-out;
|
||||
.font_2 {
|
||||
font-size: 0.71rem;
|
||||
|
||||
@@ -910,7 +910,7 @@ defineExpose({
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
background-color: var(--background-card);
|
||||
flex-shrink: 0;
|
||||
@@ -926,12 +926,12 @@ defineExpose({
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 6px;
|
||||
margin-right: 6px;
|
||||
padding: 0.375rem;
|
||||
margin-right: 0.375rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -950,8 +950,8 @@ defineExpose({
|
||||
}
|
||||
|
||||
.toolbar-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@@ -961,21 +961,21 @@ defineExpose({
|
||||
|
||||
.editor-content {
|
||||
flex: 1;
|
||||
padding: 0 10px 60px 10px; /* 添加底部内边距，防止内容被工具栏遮挡 */
|
||||
padding: 0 0.625rem 3.75rem 0.625rem; /* 添加底部内边距，防止内容被工具栏遮挡 */
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
font-size: var(--editor-font-size, 16px);
|
||||
font-size: var(--editor-font-size, 1rem);
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
color: var(--note-content);
|
||||
min-height: 200px;
|
||||
min-height: 12.5rem;
|
||||
background-color: var(--background-card);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
position: relative;
|
||||
/* 基准线样式 */
|
||||
background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
|
||||
background-size: 100% calc(var(--editor-font-size, 16px) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
|
||||
background-size: 100% calc(var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
|
||||
background-repeat: repeat-y;
|
||||
background-position: 0 calc((var(--editor-font-size, 16px) * var(--editor-line-height, 1.6) - var(--editor-font-size, 16px)) / 2);
|
||||
background-position: 0 calc((var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6) - var(--editor-font-size, 1rem)) / 2);
|
||||
}
|
||||
|
||||
.editor-content::before {
|
||||
@@ -995,16 +995,16 @@ defineExpose({
|
||||
|
||||
/* 优化段落样式，确保与基准线对齐 */
|
||||
:deep(.editor-content p) {
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 0.75rem 0;
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* 自定义内容样式 - 统一行高和间距 */
|
||||
:deep(.editor-content h2) {
|
||||
font-size: var(--editor-font-size, 16px);
|
||||
font-size: var(--editor-font-size, 1rem);
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--note-title);
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
letter-spacing: 0.3px;
|
||||
@@ -1014,8 +1014,8 @@ defineExpose({
|
||||
|
||||
:deep(.editor-content blockquote) {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding: 0 16px 0 16px;
|
||||
margin: 0 0 12px 0;
|
||||
padding: 0 1rem 0 1rem;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--text-secondary);
|
||||
background-color: var(--background-secondary);
|
||||
font-style: italic;
|
||||
@@ -1024,7 +1024,7 @@ defineExpose({
|
||||
|
||||
:deep(.quote-container) {
|
||||
position: relative;
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 0.75rem 0;
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
}
|
||||
|
||||
@@ -1032,15 +1032,15 @@ defineExpose({
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: var(--editor-font-size, 16px);
|
||||
height: var(--editor-font-size, 16px);
|
||||
margin-top: 3px;
|
||||
width: var(--editor-font-size, 1rem);
|
||||
height: var(--editor-font-size, 1rem);
|
||||
margin-top: 0.1875rem;
|
||||
}
|
||||
|
||||
:deep(.quote-content) {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding: 0 var(--editor-font-size, 16px) 0 32px;
|
||||
margin-left: var(--editor-font-size, 16px);
|
||||
padding: 0 var(--editor-font-size, 1rem) 0 2rem;
|
||||
margin-left: var(--editor-font-size, 1rem);
|
||||
color: var(--text-secondary);
|
||||
background-color: var(--background-secondary);
|
||||
font-style: italic;
|
||||
@@ -1049,8 +1049,8 @@ defineExpose({
|
||||
|
||||
:deep(.editor-content ul),
|
||||
:deep(.editor-content ol) {
|
||||
margin: 0 0 12px 0;
|
||||
padding-left: 32px;
|
||||
margin: 0 0 0.75rem 0;
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
}
|
||||
@@ -1080,7 +1080,7 @@ defineExpose({
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: var(--border);
|
||||
margin: 12px 0;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.editor-content div[style*='text-align: center'] {
|
||||
@@ -1094,7 +1094,7 @@ defineExpose({
|
||||
margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto;
|
||||
object-fit: cover;
|
||||
box-sizing: border-box;
|
||||
border: 10px solid white;
|
||||
border: 0.625rem solid white;
|
||||
border-radius: 0.2rem;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
@@ -1106,12 +1106,12 @@ defineExpose({
|
||||
margin: 0;
|
||||
line-height: var(--editor-line-height, 1.6);
|
||||
position: relative;
|
||||
padding-left: calc(var(--editor-font-size, 16px) * 1.5);
|
||||
padding-left: calc(var(--editor-font-size, 1rem) * 1.5);
|
||||
}
|
||||
|
||||
:deep(.todo-icon) {
|
||||
width: calc(var(--editor-font-size, 16px) * 1.5);
|
||||
height: calc(var(--editor-font-size, 16px) * 1.5);
|
||||
width: calc(var(--editor-font-size, 1rem) * 1.5);
|
||||
height: calc(var(--editor-font-size, 1rem) * 1.5);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
|
||||
@@ -114,7 +114,7 @@ const setSearchQuery = value => {
|
||||
|
||||
<style scoped>
|
||||
.folder-page-container {
|
||||
padding: 10px;
|
||||
padding: 0.625rem;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
@@ -122,31 +122,31 @@ const setSearchQuery = value => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--search-bar-background);
|
||||
border-radius: 8px;
|
||||
padding: 0 10px;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
--padding-start: 10px;
|
||||
--padding-end: 10px;
|
||||
--padding-start: 0.625rem;
|
||||
--padding-end: 0.625rem;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.folder-list {
|
||||
background-color: var(--background);
|
||||
padding: 0 16px;
|
||||
padding: 0 1rem;
|
||||
--ion-item-background: var(--background);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -283,8 +283,8 @@ const setShowAlert = value => {
|
||||
.header-info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
padding: 1rem 16px 0.7rem 16px;
|
||||
gap: 0.625rem;
|
||||
padding: 1rem 1rem 0.7rem 1rem;
|
||||
background-color: var(--background-card);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.7rem;
|
||||
|
||||
@@ -363,13 +363,13 @@ const notes = computed(() => store.notes)
|
||||
|
||||
.folder-list {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
top: 3.125rem;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
z-index: 1000;
|
||||
background-color: var(--background-card);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px var(--shadow);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.125rem 0.25rem var(--shadow);
|
||||
border: 1px solid #f0ece7;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1,69 +1,26 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<Header
|
||||
title="设置"
|
||||
:onBack="handleBackPress"
|
||||
/>
|
||||
|
||||
<ion-content class="settings-content">
|
||||
<Header title="设置" :onBack="handleBackPress" background="#f9f9f9" color="#8e8e8e" />
|
||||
|
||||
<div class="settings-content">
|
||||
<div class="section-header"> 账户 </div>
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
账户
|
||||
</div>
|
||||
<div button @click="handleLogin" class="settings-item settings-item-clickable">
|
||||
<div class="item-text-primary">登录云同步</div>
|
||||
<div class="item-text-tertiary">未登录</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-header"> 偏好设置 </div>
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
偏好设置
|
||||
</div>
|
||||
<div class="settings-item settings-item-border">
|
||||
<div class="item-text-primary">云同步</div>
|
||||
<ion-toggle
|
||||
slot="end"
|
||||
:checked="settings.cloudSync"
|
||||
@ion-change="toggleCloudSync"
|
||||
></ion-toggle>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="item-text-primary">深色模式</div>
|
||||
<ion-toggle
|
||||
slot="end"
|
||||
:checked="settings.darkMode"
|
||||
@ion-change="toggleDarkMode"
|
||||
></ion-toggle>
|
||||
<ion-toggle slot="end" :checked="settings.cloudSync" @ion-change="toggleCloudSync"></ion-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-header"> 关于 </div>
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
数据管理
|
||||
</div>
|
||||
<div button @click="handleBackup" class="settings-item settings-item-clickable settings-item-border">
|
||||
<img :src="'/assets/icons/drawable-xxhdpi/btn_save_pic.png'" class="item-icon" />
|
||||
<div class="item-text-primary">备份便签</div>
|
||||
</div>
|
||||
<div button @click="handleRestore" class="settings-item settings-item-clickable settings-item-border">
|
||||
<img :src="'/assets/icons/drawable-xxhdpi/btn_restore.png'" class="item-icon" />
|
||||
<div class="item-text-primary">恢复便签</div>
|
||||
</div>
|
||||
<div button @click="handleExport" class="settings-item settings-item-clickable settings-item-border">
|
||||
<img :src="'/assets/icons/drawable-xxhdpi/btn_share.png'" class="item-icon" />
|
||||
<div class="item-text-primary">导出便签</div>
|
||||
</div>
|
||||
<div button @click="handleImport" class="settings-item settings-item-clickable">
|
||||
<img :src="'/assets/icons/drawable-xxhdpi/btn_load_error.png'" class="item-icon" />
|
||||
<div class="item-text-primary">导入便签</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
关于
|
||||
</div>
|
||||
<div class="settings-item settings-item-border">
|
||||
<div class="item-text-primary">版本</div>
|
||||
<div class="item-text-tertiary">1.0.0</div>
|
||||
@@ -75,143 +32,127 @@
|
||||
<div class="item-text-primary">服务条款</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAppStore } from '../stores/useAppStore';
|
||||
import Header from '../components/Header.vue';
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAppStore } from '../stores/useAppStore'
|
||||
import Header from '../components/Header.vue'
|
||||
|
||||
const store = useAppStore();
|
||||
const router = useRouter();
|
||||
const store = useAppStore()
|
||||
const router = useRouter()
|
||||
|
||||
// 页面挂载时加载初始数据
|
||||
// 从localStorage加载用户设置和便签数据
|
||||
onMounted(() => {
|
||||
store.loadData();
|
||||
});
|
||||
store.loadData()
|
||||
})
|
||||
|
||||
// 切换云同步设置
|
||||
// 调用store中的方法更新云同步状态
|
||||
const toggleCloudSync = () => {
|
||||
store.toggleCloudSync();
|
||||
};
|
||||
|
||||
// 切换深色模式设置
|
||||
// 调用store中的方法更新深色模式状态
|
||||
const toggleDarkMode = () => {
|
||||
store.toggleDarkMode();
|
||||
};
|
||||
store.toggleCloudSync()
|
||||
}
|
||||
|
||||
// 处理登录云同步按钮点击事件
|
||||
// 在完整实现中，这里会打开登录界面
|
||||
const handleLogin = () => {
|
||||
console.log('Login to cloud');
|
||||
};
|
||||
console.log('Login to cloud')
|
||||
}
|
||||
|
||||
// 处理隐私政策按钮点击事件
|
||||
// 在完整实现中，这里会显示隐私政策内容
|
||||
const handlePrivacyPolicy = () => {
|
||||
console.log('Privacy policy');
|
||||
};
|
||||
console.log('Privacy policy')
|
||||
}
|
||||
|
||||
// 处理服务条款按钮点击事件
|
||||
// 在完整实现中，这里会显示服务条款内容
|
||||
const handleTermsOfService = () => {
|
||||
console.log('Terms of service');
|
||||
};
|
||||
|
||||
// 处理备份便签按钮点击事件
|
||||
// 在完整实现中，这里会执行便签备份操作
|
||||
const handleBackup = () => {
|
||||
console.log('Backup notes');
|
||||
};
|
||||
|
||||
// 处理恢复便签按钮点击事件
|
||||
// 在完整实现中，这里会执行便签恢复操作
|
||||
const handleRestore = () => {
|
||||
console.log('Restore notes');
|
||||
};
|
||||
|
||||
// 处理导出便签按钮点击事件
|
||||
// 在完整实现中，这里会执行便签导出操作
|
||||
const handleExport = () => {
|
||||
console.log('Export notes');
|
||||
};
|
||||
|
||||
// 处理导入便签按钮点击事件
|
||||
// 在完整实现中，这里会执行便签导入操作
|
||||
const handleImport = () => {
|
||||
console.log('Import notes');
|
||||
};
|
||||
console.log('Terms of service')
|
||||
}
|
||||
|
||||
const handleBackPress = () => {
|
||||
router.back();
|
||||
};
|
||||
router.back()
|
||||
}
|
||||
|
||||
const settings = computed(() => store.settings);
|
||||
const settings = computed(() => store.settings)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.settings-content {
|
||||
background-color: var(--background);
|
||||
}
|
||||
background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 12px;
|
||||
background-color: var(--background-card);
|
||||
}
|
||||
.section-header {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-tertiary);
|
||||
padding: 0.3125rem 1rem;
|
||||
width: 95%;
|
||||
margin: 0.75rem auto 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background-color: var(--background-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-tertiary);
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.settings-section {
|
||||
width: 95%;
|
||||
border-radius: 0.625rem;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
border: 1px solid var(--divider);
|
||||
box-shadow: 0 1.25rem 3.125rem 0px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--background-card);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.settings-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
|
||||
.settings-item-border {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.settings-item-border {
|
||||
border-top: 1px solid var(--divider);
|
||||
border-bottom: 1px solid var(--divider);
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-item-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.settings-item-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-text-primary {
|
||||
font-size: 16px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.item-text-primary {
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.item-text-tertiary {
|
||||
font-size: 15px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.item-text-tertiary {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--text-primary);
|
||||
margin-right: 12px;
|
||||
}
|
||||
.item-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--text-primary);
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.settings-item-clickable .item-text-primary {
|
||||
flex: 1;
|
||||
}
|
||||
.settings-item-clickable .item-text-primary {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-item-clickable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.settings-item-clickable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user