mirror of
https://github.com/usememos/memos.git
synced 2024-12-26 23:22:47 +08:00
chore: update styles
This commit is contained in:
email
parent
b6e78a1c2d
commit
0fea2a86da
8 changed files with 34 additions and 65 deletions
|
|
@ -53,23 +53,16 @@ const DeletedMemo: React.FC<Props> = (props: Props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={`memo-wrapper ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
|
||||
<div className={`memo-wrapper deleted-memo ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
|
||||
<div className="memo-top-wrapper">
|
||||
<span className="time-text">Deleted at {memo.deletedAtStr}</span>
|
||||
<div className="btns-container">
|
||||
<span className="btn more-action-btn">
|
||||
<img className="icon-img" src="/icons/more.svg" />
|
||||
<span className="btn restore-btn" onClick={handleRestoreMemoClick}>
|
||||
Restore
|
||||
</span>
|
||||
<span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
|
||||
{showConfirmDeleteBtn ? "Delete!" : "Delete"}
|
||||
</span>
|
||||
<div className="more-action-btns-wrapper">
|
||||
<div className="more-action-btns-container">
|
||||
<span className="btn restore-btn" onClick={handleRestoreMemoClick}>
|
||||
Restore
|
||||
</span>
|
||||
<span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
|
||||
{showConfirmDeleteBtn ? "Delete!" : "Delete"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
|
||||
|
|
|
|||
|
|
@ -82,11 +82,11 @@ const MyAccountSection: React.FC<Props> = () => {
|
|||
<>
|
||||
<div className="section-container account-section-container">
|
||||
<p className="title-text">Account Information</p>
|
||||
<label className="form-label input-form-label">
|
||||
<label className="form-label">
|
||||
<span className="normal-text">ID:</span>
|
||||
<span className="normal-text">{user.id}</span>
|
||||
</label>
|
||||
<label className="form-label input-form-label">
|
||||
<label className="form-label">
|
||||
<span className="normal-text">Created at:</span>
|
||||
<span className="normal-text">{utils.getDateString(user.createdAt)}</span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -3,29 +3,27 @@
|
|||
|
||||
.memo-wrapper {
|
||||
.flex(column, flex-start, flex-start);
|
||||
@apply w-full p-4 px-6 mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
|
||||
@apply w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
|
||||
|
||||
&.deleted-memo {
|
||||
@apply border-gray-200;
|
||||
}
|
||||
|
||||
> .memo-top-wrapper {
|
||||
.flex(row, space-between, center);
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
margin-bottom: 4px;
|
||||
@apply w-full h-6 mb-1;
|
||||
|
||||
> .time-text {
|
||||
@apply text-xs;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
@apply text-xs text-gray-400 cursor-pointer;
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
.flex(row, flex-end, center);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
@apply relative flex-shrink-0;
|
||||
|
||||
> .more-action-btns-wrapper {
|
||||
.flex(column, flex-start, center);
|
||||
position: absolute;
|
||||
flex-wrap: nowrap;
|
||||
@apply absolute flex-nowrap;
|
||||
top: calc(100% - 8px);
|
||||
right: -16px;
|
||||
width: auto;
|
||||
|
|
@ -49,10 +47,7 @@
|
|||
z-index: 1;
|
||||
|
||||
> .btn {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
padding-left: 24px;
|
||||
border-radius: 4px;
|
||||
@apply w-full py-2 px-3 rounded;
|
||||
height: unset;
|
||||
line-height: unset;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -70,24 +65,14 @@
|
|||
|
||||
.btn {
|
||||
.flex(row, center, center);
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: @bg-whitegray;
|
||||
}
|
||||
@apply px-2 leading-6 text-sm rounded hover:bg-gray-100;
|
||||
|
||||
&.more-action-btn {
|
||||
width: 28px;
|
||||
@apply w-8 -mr-2 opacity-60;
|
||||
cursor: unset;
|
||||
margin-right: -6px;
|
||||
opacity: 0.8;
|
||||
|
||||
> .icon-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@apply w-4 h-auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
> .form-label {
|
||||
min-height: 28px;
|
||||
|
||||
> .normal-text {
|
||||
@apply first:mr-2;
|
||||
}
|
||||
|
||||
&.username-label {
|
||||
> input {
|
||||
flex-grow: 0;
|
||||
|
|
@ -92,19 +96,14 @@
|
|||
|
||||
> .usage-guide-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
margin-top: 8px;
|
||||
@apply mt-2 w-full;
|
||||
|
||||
> .title-text {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
> pre {
|
||||
background-color: @bg-whitegray;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
@apply w-full bg-gray-50 py-2 px-3 text-sm rounded whitespace-pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
|
||||
.setting-dialog {
|
||||
> .dialog-container {
|
||||
@apply w-3/5 max-w-full mb-8;
|
||||
@apply w-168 max-w-full mb-8;
|
||||
|
||||
> .dialog-content-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
@apply w-full overflow-y-scroll;
|
||||
@apply w-full overflow-y-scroll px-3;
|
||||
.hide-scroll-bar();
|
||||
|
||||
> .section-container {
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@
|
|||
|
||||
> .create-shortcut-btn-container {
|
||||
.flex(row, center, center);
|
||||
@apply w-full mt-2 mb-3;
|
||||
@apply w-full mt-4 mb-2;
|
||||
|
||||
> .btn {
|
||||
@apply flex py-1 px-2 rounded-lg text-xs border border-dashed border-blue-600;
|
||||
@apply flex p-2 px-4 rounded-lg text-sm border border-dashed border-blue-600;
|
||||
|
||||
&:hover {
|
||||
@apply bg-blue-600 text-white;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
.flex(column, flex-start, flex-start);
|
||||
@apply relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
|
||||
min-width: 6em;
|
||||
min-height: 40px;
|
||||
transition: all 0.4s ease;
|
||||
|
||||
&.showup {
|
||||
|
|
@ -22,17 +21,9 @@
|
|||
|
||||
> .toast-container {
|
||||
> .content-text {
|
||||
@apply text-base whitespace-pre-wrap;
|
||||
max-width: 160px;
|
||||
@apply text-sm whitespace-pre-wrap leading-6;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
@apply absolute top-3 -right-2;
|
||||
border-left: 8px solid white;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ module.exports = {
|
|||
extend: {
|
||||
spacing: {
|
||||
128: "32rem",
|
||||
168: "42rem",
|
||||
},
|
||||
zIndex: {
|
||||
100: "100",
|
||||
|
|
|
|||
Loading…
Reference in a new issue