YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update some styles

Browse Source
This commit is contained in:
Steven
2023-10-14 01:12:41 +08:00
parent d95a6ce898
commit dd83358850
10 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/FloatingNavButton.tsx
View File

@@ -31,14 +31,14 @@ const FloatingNavButton = () => {
</div>
<Menu placement="top-end">
<button
className="w-full text-left text-sm flex flex-row justify-center items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={handleScrollToTop}
>
<Icon.ArrowUpToLine className="w-4 h-auto mr-1 opacity-70" />
{t("router.back-to-top")}
</button>
<button
className="w-full text-left text-sm flex flex-row justify-center items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => navigateTo("/")}
>
<Icon.Home className="w-4 h-auto mr-1 opacity-70" />

4
web/src/components/Header.tsx
View File

@@ -107,8 +107,8 @@ const Header = () => {
id={navLink.id}
className={({ isActive }) =>
classNames(
"px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
"px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
)
}
>

2
web/src/components/UserBanner.tsx
View File

@@ -35,7 +35,7 @@ const UserBanner = () => {
<Dropdown
className="w-auto"
trigger={
<div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
<span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
{user?.role === User_Role.HOST ? (

2
web/src/layouts/Root.tsx
View File

@@ -10,7 +10,7 @@ function Root() {
</div>
<div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
<Header />
<main className="w-auto max-w-full sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
<main className="w-full sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
<Outlet />
</main>
</div>

2
web/src/less/base-dialog.less
View File

@@ -10,7 +10,7 @@
}
> .dialog-container {
@apply max-w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
@apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
> .dialog-header-container {
@apply flex flex-row justify-between items-center w-full mb-4;

8
web/src/less/memo-editor.less
View File

@@ -37,7 +37,7 @@
@apply h-8;
> .current-value-container {
@apply rounded-full px-3;
@apply rounded-xl px-3;
> .value-text {
@apply text-sm w-full mr-1;
@@ -48,12 +48,8 @@
> .buttons-container {
@apply grow-0 shrink-0 flex flex-row justify-end items-center;
> .cancel-btn {
@apply mr-4 text-sm text-gray-500 hover:opacity-80 dark:text-gray-300;
}
> .confirm-btn {
@apply border-none select-none rounded-full flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
@apply border-none select-none rounded-xl flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
}
}
}

2
web/src/less/setting.less
View File

@@ -1,5 +1,5 @@
.setting-page-wrapper {
@apply flex flex-row justify-start items-start relative w-full h-full p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
@apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
> .section-selector-container {
@apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;

2
web/src/pages/DailyReview.tsx
View File

@@ -96,7 +96,7 @@ const DailyReview = () => {
return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
<div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p
className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"

2
web/src/pages/Home.tsx
View File

@@ -7,7 +7,7 @@ import MobileHeader from "@/components/MobileHeader";
const Home = () => {
return (
<div className="w-full flex flex-row justify-start items-start">
<div className="grow shrink w-auto max-w-full px-4 lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
<div className="w-full px-4 lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
<MobileHeader />
<div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />

8
web/src/pages/Resources.tsx
View File

@@ -63,9 +63,9 @@ const Resources = () => {
return (
<section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
<MobileHeader showSearch={false} />
<div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none rounded opacity-80">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
<Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}
</p>
</div>
@@ -95,7 +95,7 @@ const Resources = () => {
{resources.map((resource) => {
return (
<div key={resource.id} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded cursor-pointer hover:shadow hover:opacity-80">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
<ResourceIcon resource={resource} strokeWidth={0.5} />
</div>
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
@@ -134,7 +134,7 @@ const Resources = () => {
{unusedResources.map((resource) => {
return (
<div key={resource.id} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded cursor-pointer hover:shadow hover:opacity-80">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
<ResourceIcon resource={resource} strokeWidth={0.5} />
</div>
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">