From b597d40470c87034fb57b965a1f1988dd9c5d754 Mon Sep 17 00:00:00 2001 From: STEVEN Date: Fri, 11 Mar 2022 04:54:11 +0800 Subject: [PATCH] refactor: use tailwindcss in less (#34) * reduce less --- web/src/components/AboutSiteDialog.tsx | 3 +- web/src/components/ShortcutList.tsx | 14 +- web/src/less/about-site-dialog.less | 40 ++--- web/src/less/app.less | 3 +- web/src/less/change-password-dialog.less | 67 ++------- web/src/less/confirm-reset-openid-dialog.less | 33 ++--- web/src/less/dialog.less | 43 ++---- web/src/less/global.less | 40 ++--- web/src/less/home.less | 24 +-- web/src/less/memo-card-dialog.less | 4 +- web/src/less/memo-content.less | 2 +- web/src/less/memos-header.less | 30 +--- web/src/less/menu-btns-popup.less | 25 +--- web/src/less/setting.less | 40 ++--- web/src/less/shortcut-list.less | 122 +++++----------- web/src/less/siderbar.less | 27 +--- web/src/less/signin.less | 97 ++++--------- web/src/less/star-history-dialog.less | 7 +- web/src/less/tag-list.less | 137 +++--------------- web/src/less/toast.less | 29 +--- web/src/less/usage-heat-map.less | 69 ++------- web/src/less/user-banner.less | 58 ++------ web/tailwind.config.js | 10 +- 23 files changed, 230 insertions(+), 694 deletions(-) diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx index 47a88056..cfb38b63 100644 --- a/web/src/components/AboutSiteDialog.tsx +++ b/web/src/components/AboutSiteDialog.tsx @@ -33,8 +33,7 @@ const AboutSiteDialog: React.FC = ({ destroy }: Props) => { Star History -
-

+

Last updated on 2021/12/12 14:38:15 🎉

diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx index d5f08695..999c75ab 100644 --- a/web/src/components/ShortcutList.tsx +++ b/web/src/components/ShortcutList.tsx @@ -65,7 +65,6 @@ interface ShortcutContainerProps { const ShortcutContainer: React.FC = (props: ShortcutContainerProps) => { const { shortcut, isActive } = props; - const [showActionBtns, toggleShowActionBtns] = useToggle(false); const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false); const handleQueryClick = () => { @@ -79,15 +78,6 @@ const ShortcutContainer: React.FC = (props: ShortcutCont } }; - const handleShowActionBtnClick = (event: React.MouseEvent) => { - event.stopPropagation(); - toggleShowActionBtns(); - }; - - const handleActionBtnContainerMouseLeave = () => { - toggleShowActionBtns(false); - }; - const handleDeleteMemoClick = async (event: React.MouseEvent) => { event.stopPropagation(); @@ -141,10 +131,10 @@ const ShortcutContainer: React.FC = (props: ShortcutCont {shortcut.title}
- + -
+
{shortcut.rowStatus === "ARCHIVED" ? "Unpin" : "Pin"} diff --git a/web/src/less/about-site-dialog.less b/web/src/less/about-site-dialog.less index 3908abb2..d80ee7b6 100644 --- a/web/src/less/about-site-dialog.less +++ b/web/src/less/about-site-dialog.less @@ -2,52 +2,42 @@ .about-site-dialog { > .dialog-container { - width: 420px; + @apply w-128; > .dialog-content-container { - line-height: 1.8; + @apply leading-relaxed; > p { - margin: 2px 0; - } + @apply my-1; - > hr { - margin: 4px 0; - width: 100%; - height: 1px; - background-color: lightgray; - border: none; - } - - .normal-text { - .flex(row, flex-start, center); - font-size: 13px; - color: gray; - white-space: pre-wrap; - .mono-font-family(); + &.updated-time-text { + .flex(row, flex-start, center); + @apply w-full text-sm mt-3 pt-2 border-t-2 border-t-gray-200 text-gray-600 whitespace-pre-wrap font-mono; + } } .pre-text { - .mono-font-family(); + @apply font-mono; } > .btn { - padding: 2px 8px; + @apply px-2 py-1 text-white rounded text-sm; background-color: @text-green; - color: white; - border-radius: 4px; &:hover { - opacity: 0.8; + @apply opacity-80; } } + + a { + @apply cursor-pointer underline-offset-2 underline text-blue-600; + } } } } @media only screen and (max-width: 875px) { .dialog-wrapper.about-site-dialog { - padding: 24px 16px; - padding-top: 64px; + @apply py-6 px-4 pt-16; } } diff --git a/web/src/less/app.less b/web/src/less/app.less index 48dd0a8c..c91938ff 100644 --- a/web/src/less/app.less +++ b/web/src/less/app.less @@ -2,6 +2,5 @@ #root { .flex(row, flex-start, flex-start); - width: 100%; - height: 100%; + @apply w-full h-full; } diff --git a/web/src/less/change-password-dialog.less b/web/src/less/change-password-dialog.less index 542b1420..1725497f 100644 --- a/web/src/less/change-password-dialog.less +++ b/web/src/less/change-password-dialog.less @@ -2,88 +2,54 @@ .change-password-dialog { > .dialog-container { - width: 300px; - border-radius: 8px; + @apply w-72; > .dialog-content-container { .flex(column, flex-start, flex-start); - width: 100%; > .tip-text { - background-color: @bg-gray; - font-size: 12px; - padding: 8px; - border-radius: 8px; + @apply bg-gray-400 text-xs p-2 rounded-lg; } > .form-label { .flex(column, flex-start, flex-start); - position: relative; - width: 100%; - line-height: 1.6; + @apply relative w-full leading-relaxed; > .normal-text { - position: absolute; - left: 8px; - padding-left: 4px; - flex-shrink: 0; - font-size: 13px; - line-height: 38px; - color: gray; - transition: all 0.2s linear; - cursor: text; + @apply absolute left-2 py-px pl-1 shrink-0 text-sm text-gray-400 leading-10 transition-all cursor-text; &.not-null { - top: 2px; - left: 8px; - background-color: white; - font-size: 13px; - line-height: 18px; - padding: 0 4px; - border-radius: 12px; + @apply top-1 bg-white text-xs py-0 px-1 rounded-xl; } } &.input-form-label { - padding: 12px 0; - padding-bottom: 4px; + @apply py-3 pb-1; > input { - width: 100%; - padding: 6px 8px; - font-size: 13px; - line-height: 24px; - border-radius: 4px; - border: 1px solid lightgray; - background-color: transparent; + @apply w-full p-2 text-sm leading-6 rounded border border-gray-400 bg-transparent; } } } > .btns-container { .flex(row, flex-end, center); - margin-top: 8px; - width: 100%; + @apply mt-2 w-full; > .btn { - font-size: 14px; - padding: 6px 12px; - border-radius: 4px; - margin-right: 8px; - background-color: lightgray; + @apply text-sm px-4 py-2 rounded mr-2 bg-gray-400; &:hover { - opacity: 0.8; + @apply opacity-80; + } + + &.confirm-btn { + @apply bg-green-600 text-white shadow-inner; } &.cancel-btn { background-color: unset; } - - &.confirm-btn { - background-color: @text-green; - color: white; - } } } } @@ -92,11 +58,10 @@ @media only screen and (max-width: 875px) { .dialog-wrapper.change-password-dialog { - padding: 24px 16px; - padding-top: 64px; + @apply py-6 px-4 pt-16; > .dialog-container { - width: 100%; + @apply w-full; } } } diff --git a/web/src/less/confirm-reset-openid-dialog.less b/web/src/less/confirm-reset-openid-dialog.less index d99338e1..651f6456 100644 --- a/web/src/less/confirm-reset-openid-dialog.less +++ b/web/src/less/confirm-reset-openid-dialog.less @@ -2,45 +2,31 @@ .confirm-reset-openid-dialog { > .dialog-container { - width: 300px; - border-radius: 8px; + @apply w-80; > .dialog-content-container { .flex(column, flex-start, flex-start); - width: 100%; > .warn-text { - padding: 8px 0; + @apply pt-2; } > .btns-container { .flex(row, flex-end, center); - margin-top: 8px; - width: 100%; + @apply w-full mt-3; > .btn { - font-size: 14px; - padding: 6px 12px; - border-radius: 4px; - margin-right: 8px; - background-color: lightgray; + @apply text-sm py-1 px-3 mr-2 rounded-md; &:hover { - opacity: 0.8; - } - - &.cancel-btn { - background-color: unset; + @apply opacity-80; } &.confirm-btn { - background-color: @bg-red; - border: 1px solid red; - color: red; + @apply bg-red-100 border border-solid border-red-600 text-red-600; &.loading { - opacity: 0.8; - cursor: wait; + @apply opacity-80 cursor-wait; } } } @@ -51,11 +37,10 @@ @media only screen and (max-width: 875px) { .dialog-wrapper.confirm-reset-openid-dialog { - padding: 24px 16px; - padding-top: 64px; + @apply py-6 px-4 pt-16; > .dialog-container { - width: 100%; + @apply w-full; } } } diff --git a/web/src/less/dialog.less b/web/src/less/dialog.less index 500ff3ca..70432e29 100644 --- a/web/src/less/dialog.less +++ b/web/src/less/dialog.less @@ -2,17 +2,7 @@ .dialog-wrapper { .flex(column, flex-start, center); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: transparent; - z-index: 100; - transition: all 0.2s ease; - overflow-x: hidden; - overflow-y: scroll; - padding: 64px 0; + @apply fixed top-0 left-0 w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all; .hide-scroll-bar(); &.showup { @@ -25,59 +15,50 @@ > .dialog-container { .flex(column, flex-start, flex-start); - background-color: white; - padding: 16px; - border-radius: 8px; + @apply bg-white p-4 rounded-lg; > .dialog-header-container { .flex(row, space-between, center); - width: 100%; - margin-bottom: 16px; + @apply w-full mb-4; > .title-text { > .icon-text { - margin-right: 6px; - font-size: 16px; + @apply mr-2 text-base; } } .btn { - width: 24px; - height: 24px; - padding: 2px; - border-radius: 4px; + .flex(column, center, center); + @apply w-6 h-6 rounded; > .icon-img { - width: 20px; - height: 20px; + @apply w-5 h-5; } &:hover { - background-color: lightgray; + @apply bg-gray-200; } } } > .dialog-content-container { .flex(column, flex-start, flex-start); - width: 100%; + @apply w-full; } > .dialog-footer-container { .flex(row, flex-end, center); - width: 100%; - margin-top: 16px; + @apply w-full mt-4; } } } @media only screen and (max-width: 875px) { .dialog-wrapper { - width: 100%; - padding: 0 16px; + @apply w-full px-4; > .dialog-container { - max-width: 100%; + @apply max-w-full; } } } diff --git a/web/src/less/global.less b/web/src/less/global.less index 3d4073a8..f78463c6 100644 --- a/web/src/less/global.less +++ b/web/src/less/global.less @@ -1,53 +1,42 @@ @import "./mixin.less"; * { - margin: 0; - padding: 0; - box-sizing: border-box; + @apply m-0 p-0 box-border; color: @text-black; -webkit-tap-highlight-color: transparent; } body, html { - width: 100%; - height: 100%; - overflow: hidden; - font-size: 15px; + @apply w-full h-full overflow-hidden text-base; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } code { - .mono-font-family(); - background-color: pink; - padding: 2px 4px; - border-radius: 4px; + @apply bg-pink-600 p-1 rounded font-mono; } pre { - .mono-font-family(); + @apply font-mono; * { - .mono-font-family(); + @apply font-mono; } } label, button, img { - background-color: transparent; - user-select: none; + @apply bg-transparent select-none outline-none; -webkit-tap-highlight-color: transparent; - outline: none; } input, textarea { @apply appearance-none outline-none !important; - - background-color: transparent; + @apply bg-transparent; -webkit-tap-highlight-color: transparent; } @@ -55,37 +44,32 @@ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - box-shadow: 0 0 0 30px white inset !important; + @apply shadow-inner; } li { list-style-type: none; &::before { + @apply font-bold mr-1; content: "•"; - font-weight: bold; - margin-right: 4px; } } a { - cursor: pointer; - color: @text-blue; - text-underline-offset: 2px; + @apply cursor-pointer text-blue-600 underline underline-offset-2; &:hover { - background-color: @bg-gray; + @apply opacity-80; } } .btn { + @apply select-none cursor-pointer text-center; border: unset; background-color: unset; text-align: unset; font-size: unset; - user-select: none; - cursor: pointer; - text-align: center; } .hidden { diff --git a/web/src/less/home.less b/web/src/less/home.less index 866a0e37..ef09eb16 100644 --- a/web/src/less/home.less +++ b/web/src/less/home.less @@ -6,17 +6,11 @@ #page-wrapper { .flex(row, flex-start, flex-start); - width: 848px; - max-width: 100%; - height: 100%; - margin: auto; - transform: translateX(-16px); + @apply w-full max-w-4xl h-full m-auto -translate-x-4; > .content-wrapper { .flex(column, flex-start, flex-start); - position: relative; - width: 600px; - height: 100%; + @apply relative flex-grow h-auto; } } @@ -24,25 +18,17 @@ body.mobile-show-sidebar { #page-wrapper { > .content-wrapper { - transform: translateX(320px); + @apply translate-x-80; } } } #page-wrapper { .flex(column, flex-start, flex-start); - width: 100%; - height: 100%; - padding: 0; - transform: translateX(0); + @apply w-full h-full p-0 translate-x-0; > .content-wrapper { - width: 100%; - height: 100%; - margin-left: 0; - padding-top: 0; - transition: all 0.4s ease; - transform: translateX(0); + @apply w-full h-full ml-0 pt-0 transition-all; } } } diff --git a/web/src/less/memo-card-dialog.less b/web/src/less/memo-card-dialog.less index cd490b8b..2fda20bf 100644 --- a/web/src/less/memo-card-dialog.less +++ b/web/src/less/memo-card-dialog.less @@ -35,7 +35,7 @@ > .time-text { font-size: 14px; color: gray; - .mono-font-family(); + @apply font-mono; } > .btns-container { @@ -181,7 +181,7 @@ > .time-text { color: gray; - .mono-font-family(); + @apply font-mono; } } } diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less index faa3052c..01958f6b 100644 --- a/web/src/less/memo-content.less +++ b/web/src/less/memo-content.less @@ -55,7 +55,7 @@ display: inline-block; text-align: center; width: 1.4rem; - .mono-font-family(); + @apply font-mono; } pre { diff --git a/web/src/less/memos-header.less b/web/src/less/memos-header.less index cfe16675..75bb2969 100644 --- a/web/src/less/memos-header.less +++ b/web/src/less/memos-header.less @@ -3,36 +3,20 @@ .section-header-container, .memos-header-container { .flex(row, space-between, center); - width: 100%; - height: 40px; - flex-wrap: nowrap; - margin-top: 16px; - margin-bottom: 8px; - flex-shrink: 0; + @apply w-full h-10 flex-nowrap mt-4 mb-2 shrink-0; > .title-text { .flex(row, flex-start, center); - font-weight: bold; - font-size: 18px; - line-height: 40px; + @apply font-bold text-lg leading-10 mr-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden; color: @text-black; - margin-right: 8px; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 0; - cursor: pointer; > .action-btn { .flex(row, center, center); - width: 24px; - height: 24px; - margin-right: 4px; - flex-shrink: 0; + @apply w-6 h-6 mr-1 shrink-0; background-color: unset; > .icon-img { - width: 18px; - height: 18px; + @apply w-4 h-auto; } } } @@ -45,10 +29,6 @@ @media only screen and (max-width: 875px) { .section-header-container, .memos-header-container { - height: auto; - margin-top: 16px; - margin-bottom: 0; - padding: 0 12px; - padding-bottom: 8px; + @apply h-auto mt-4 mb-0 py-0 px-3 pb-2; } } diff --git a/web/src/less/menu-btns-popup.less b/web/src/less/menu-btns-popup.less index c8856b5c..28b89c25 100644 --- a/web/src/less/menu-btns-popup.less +++ b/web/src/less/menu-btns-popup.less @@ -2,15 +2,7 @@ .menu-btns-popup { .flex(column, flex-start, flex-start); - position: absolute; - margin-top: 4px; - margin-left: 90px; - padding: 4px; - width: 180px; - border-radius: 8px; - z-index: 2; - box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); - background-color: white; + @apply absolute mt-1 ml-24 p-1 w-44 rounded-lg z-10 shadow bg-white; &:hover { display: flex; @@ -18,19 +10,10 @@ > .btn { .flex(row, flex-start, center); - width: 100%; - padding: 8px 16px; - font-size: 14px; - line-height: 1.6; - border-radius: 4px; - text-align: left; + @apply w-full py-2 px-3 text-sm rounded text-left; > .icon { - display: block; - width: 28px; - text-align: center; - margin-right: 4px; - font-size: 14px; + @apply block w-6 text-center mr-2 text-sm; } &:hover { @@ -41,6 +24,6 @@ @media only screen and (max-width: 875px) { .menu-btns-popup { - margin-left: 64px; + @apply ml-16; } } diff --git a/web/src/less/setting.less b/web/src/less/setting.less index 72525122..4de4ac16 100644 --- a/web/src/less/setting.less +++ b/web/src/less/setting.less @@ -3,63 +3,43 @@ .preference-wrapper { .flex(column, flex-start, flex-start); - width: 100%; - height: 100%; - flex-grow: 1; - overflow-y: scroll; + @apply w-full h-full grow overflow-y-scroll; .hide-scroll-bar(); > .section-header-container { - width: 100%; - height: 40px; - margin-bottom: 0; + @apply w-full h-10 mb-0; > .title-text { - font-weight: bold; - font-size: 18px; + @apply font-bold text-lg; color: @text-black; } } > .tip-text-container { - width: 100%; - height: 128px; .flex(column, center, center); + @apply w-full h-32; } > .sections-wrapper { .flex(column, flex-start, flex-start); - flex-grow: 1; - width: 100%; - overflow-y: scroll; - padding-bottom: 64px; + @apply grow w-full overflow-y-scroll pb-16; .hide-scroll-bar(); > .section-container { .flex(column, flex-start, flex-start); - width: 100%; - background-color: white; - margin: 8px 0; - padding: 16px; - padding-bottom: 8px; - border-radius: 8px; + @apply w-full bg-white my-2 mx-0 p-4 pb-2 rounded-lg; > .title-text { - font-size: 15px; + @apply text-base font-bold mb-2; color: @text-black; - font-weight: bold; - margin-bottom: 8px; } > .form-label { .flex(row, flex-start, center); - width: 100%; - font-size: 14px; - line-height: 20px; - margin-bottom: 8px; + @apply w-full text-sm mb-2; > .normal-text { - flex-shrink: 0; + @apply shrink-0; } } } @@ -68,6 +48,6 @@ @media only screen and (max-width: 875px) { .sections-wrapper { - padding: 0 12px; + @apply py-0 px-3; } } diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less index 00fe2dcc..03d4496e 100644 --- a/web/src/less/shortcut-list.less +++ b/web/src/less/shortcut-list.less @@ -2,84 +2,55 @@ .shortcuts-wrapper { .flex(column, flex-start, flex-start); - width: 100%; - padding: 0 8px; - height: auto; - flex-wrap: nowrap; + @apply w-full py-0 px-2 h-auto flex-nowrap; .hide-scroll-bar(); > .title-text { .flex(row, space-between, center); - width: 100%; - padding: 4px 16px; + @apply w-full py-1 px-4; - > * { - font-size: 12px; - line-height: 24px; - color: @text-black; - opacity: 0.5; - font-weight: bold; + > .normal-text { + @apply text-xs leading-6 font-bold text-black opacity-50; } > .btn { - display: none; - padding: 0 4px; - font-size: 18px; + @apply hidden px-1 text-lg leading-6; } &:hover, &:active { > .btn { - display: block; + @apply block; } } } > .create-shortcut-btn-container { .flex(row, center, center); - width: 100%; - margin-top: 8px; - margin-bottom: 12px; + @apply w-full mt-2 mb-3; > .btn { - display: flex; - padding: 4px 8px; - border: 1px dashed @bg-blue; - border-radius: 8px; - font-size: 13px; + @apply flex py-1 px-2 rounded-lg text-xs border border-dashed border-blue-600; &:hover { - background-color: @bg-blue; - color: white; + @apply bg-blue-600 text-white; } } } > .shortcuts-container { .flex(column, flex-start, flex-start); - position: relative; - width: 100%; - height: auto; - flex-wrap: nowrap; - margin-bottom: 8px; + @apply relative w-full h-auto flex-nowrap mb-2; > .shortcut-container { .flex(row, space-between, center); - width: 100%; - height: 40px; - padding: 0 16px; - margin-top: 4px; - border-radius: 8px; - font-size: 14px; - cursor: pointer; - flex-shrink: 0; - user-select: none; + @apply w-full h-10 py-0 px-4 mt-1 rounded-lg text-sm cursor-pointer select-none shrink-0; &:hover { background-color: @bg-gray; > .btns-container { - display: flex; + @apply flex; } } @@ -87,79 +58,60 @@ background-color: @text-green !important; > .shortcut-text-container { - font-weight: bold; + @apply font-bold; > * { - color: white; + @apply text-white; } } } > .shortcut-text-container { .flex(row, flex-start, center); + @apply overflow-hidden text-ellipsis shrink-0 leading-5; max-width: calc(100% - 24px); color: @text-black; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 0; - line-height: 20px; > .icon-text { - display: block; - width: 16px; - flex-shrink: 0; + @apply block w-4 shrink-0; } > .shortcut-text { - flex-shrink: 0; + @apply shrink-0; } } > .btns-container { .flex(row, flex-end, center); - display: none; + @apply hidden; > .action-btn { .flex(row, center, center); - width: 24px; - height: 24px; - flex-shrink: 0; + @apply w-6 h-6 shrink-0; > .icon-img { - width: 18px; - height: auto; + @apply w-4 h-auto; + } + + &.toggle-btn { + &:hover { + & + .action-btns-wrapper { + display: flex; + } + } } } > .action-btns-wrapper { .flex(column, flex-start, flex-start); - position: absolute; - right: 0; - width: auto; - height: auto; - padding: 8px; - transform: translateY(60px); - z-index: 1; + @apply absolute right-0 w-auto h-auto p-2 translate-y-14 hidden z-10; > .action-btns-container { .flex(column, flex-start, flex-start); - width: 86px; - height: auto; - white-space: nowrap; - border-radius: 6px; - padding: 4px; - background-color: white; - box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); + @apply w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow; > .btn { - width: 100%; - padding: 6px 0; - padding-left: 12px; - border-radius: 4px; - font-size: 13px; - height: unset; - line-height: unset; - text-align: left; + @apply w-full py-2 px-2 rounded text-sm text-left; &:hover { background-color: @bg-whitegray; @@ -174,6 +126,10 @@ } } } + + &:hover { + display: flex; + } } } } @@ -182,18 +138,18 @@ @media only screen and (max-width: 875px) { .shortcuts-container { - height: auto; + @apply h-auto; &:last-child { - flex-grow: 1; + @apply flex-grow; } > .title-text { - font-size: 13px; + @apply text-sm; } > .shortcut-container { - font-size: 15px; + @apply text-base; } } } diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less index 33e0c1ee..e3bd002c 100644 --- a/web/src/less/siderbar.less +++ b/web/src/less/siderbar.less @@ -2,16 +2,11 @@ .sidebar-wrapper { .flex(column, flex-start, flex-start); - width: 240px; - height: 100%; - padding: 16px 0; - overflow-x: hidden; - overflow-y: auto; - flex-shrink: 0; + @apply w-60 h-auto py-4 overflow-x-hidden overflow-y-auto shrink-0; .hide-scroll-bar(); > * { - flex-shrink: 0; + @apply shrink-0; } } @@ -19,30 +14,18 @@ body.mobile-show-sidebar { #page-wrapper { > .sidebar-wrapper { - transform: translateX(0); - box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); + @apply translate-x-0 shadow; } } } .sidebar-wrapper { .flex(column, flex-start, center); - z-index: 99; - position: absolute; - top: 0; - left: 0; - width: 320px; - height: 100%; - padding: 0; - background-color: white; - transition: all 0.4s ease; - transform: translateX(-320px); + @apply z-50 absolute top-0 left-0 w-80 h-full p-0 bg-white transition-all -translate-x-80; > * { - width: 320px; + @apply w-80 shrink-0 pl-8; max-width: 95%; - flex-shrink: 0; - padding-left: 32px; } } } diff --git a/web/src/less/signin.less b/web/src/less/signin.less index 6ec6ea8d..4d128543 100644 --- a/web/src/less/signin.less +++ b/web/src/less/signin.less @@ -2,149 +2,104 @@ .page-wrapper.signin { .flex(row, center, center); - width: 100%; - height: 100%; - background-color: white; + @apply w-full h-full bg-white; > .page-container { - width: 360px; - max-width: 100%; - padding: 16px; - margin-top: -64px; + @apply w-80 max-w-full p-4 -mt-16; > .page-header-container { .flex(row, space-between, center); - width: 100%; - margin-bottom: 16px; + @apply w-full mb-4; > .title-text { - font-size: 24px; + @apply text-2xl; } } > .page-content-container { .flex(column, flex-start, flex-start); - flex-wrap: nowrap; + @apply flex-nowrap; > .form-item-container { .flex(column, flex-start, flex-start); - position: relative; - width: 100%; - line-height: 1.6; - margin-top: 8px; + @apply relative w-full text-base m-2; > .normal-text { - position: absolute; - top: 18px; - left: 12px; - flex-shrink: 0; - font-size: 13px; - line-height: 2; - color: gray; - cursor: text; - padding: 0 4px; - background-color: transparent; - border-radius: 50%; - transition: all 0.3s ease; + @apply absolute top-3 left-3 pl-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none; &.not-null { - top: -6px; - left: 12px; - background-color: white; + @apply text-sm top-0 leading-4 bg-white; } } &.input-form-container { - padding: 8px 0; + @apply py-2; > input { - width: 100%; - padding: 8px 12px; - font-size: 15px; - line-height: 2; - border-radius: 8px; - border: 1px solid lightgray; + @apply w-full py-3 px-3 text-base rounded-lg border border-solid border-gray-400; } - } - &:hover { - opacity: 0.8; + &:hover { + @apply opacity-80; + } } } } > .page-footer-container { .flex(row, space-between, center); - width: 100%; - margin: 12px 0; + @apply w-full mt-3; > .btns-container { .flex(row, flex-start, center); > .btn { - padding: 0 4px; - font-size: 13px; - line-height: 32px; - border-radius: 4px; + @apply px-1 py-2 text-sm rounded; &:hover { - opacity: 0.8; + @apply opacity-80; } &.disabled { - color: lightgray; - cursor: not-allowed; + @apply text-gray-400 cursor-not-allowed; } &.signin-btn { - background-color: @text-green; - color: white; - padding: 0 12px; + @apply bg-green-600 text-white px-3; &.requesting { - cursor: wait; - opacity: 0.8; + @apply cursor-wait opacity-80; } } } > .btn-text { - font-size: 13px; + @apply text-sm; } > .split-text { - color: lightgray; - margin: 0 8px; + @apply text-gray-400 mx-2; } } } > .quickly-btns-container { .flex(column, flex-start, flex-start); - width: 100%; - margin-top: 24px; + @apply w-full mt-6; > .btn { - margin-bottom: 24px; - line-height: 40px; - border: 2px solid lightgray; - border-radius: 22px; - padding: 0 16px; - font-size: 15px; + @apply mb-6 text-base leading-10 border border-solid border-gray-400 px-4 rounded-3xl; &:hover { - opacity: 0.8; + @apply opacity-80; } &.guest-signin { - color: @text-green; - border-color: @text-green; - font-weight: bold; + @apply text-green-600 border-2 border-green-600 font-bold; } &.requesting { - cursor: wait; - opacity: 0.8; + @apply cursor-wait opacity-80; } } } diff --git a/web/src/less/star-history-dialog.less b/web/src/less/star-history-dialog.less index 6e11cbe9..a3d6fcd2 100644 --- a/web/src/less/star-history-dialog.less +++ b/web/src/less/star-history-dialog.less @@ -2,17 +2,16 @@ .star-history-dialog { > .dialog-container { - width: auto; + @apply w-auto; > .dialog-content-container { - overflow-x: scroll; + @apply overflow-x-scroll; } } } @media only screen and (max-width: 875px) { .dialog-wrapper.star-history-dialog { - padding: 24px 16px; - padding-top: 64px; + @apply py-6 px-4 pt-16; } } diff --git a/web/src/less/tag-list.less b/web/src/less/tag-list.less index 803d42ba..fe81ea74 100644 --- a/web/src/less/tag-list.less +++ b/web/src/less/tag-list.less @@ -2,59 +2,33 @@ .tags-wrapper { .flex(column, flex-start, flex-start); - width: 100%; - padding: 0 8px; - height: auto; - flex-wrap: nowrap; - padding-bottom: 16px; - flex-grow: 1; + @apply px-2 w-full h-auto flex-nowrap pb-4 grow; .hide-scroll-bar(); > .title-text { - width: 100%; - padding: 4px 16px; - font-size: 12px; - line-height: 24px; + @apply w-full py-1 px-4 text-xs opacity-50; color: @text-black; - opacity: 0.5; } > .tags-container { .flex(column, flex-start, flex-start); - position: relative; - width: 100%; - height: auto; - flex-wrap: nowrap; - margin-bottom: 8px; + @apply relative w-full h-auto flex-nowrap mb-2; .subtags-container { .flex(column, flex-start, flex-start); + @apply h-auto mt-1 ml-4 pl-1; width: calc(100% - 18px); min-width: 80px; - height: auto; - margin-top: 4px; - margin-left: 18px; border-left: 2px solid @bg-gray; - padding-left: 6px; > .tag-item-container { - &:first-child { - margin-top: 0; - } + @apply first:mt-0; } } .tag-item-container { .flex(row, space-between, center); - width: 100%; - height: 40px; - padding: 0 16px; - margin-top: 4px; - border-radius: 8px; - font-size: 14px; - cursor: pointer; - flex-shrink: 0; - user-select: none; + @apply w-full h-10 py-0 px-4 rounded-lg text-sm shrink-0 select-none cursor-pointer; &:hover { background-color: @bg-gray; @@ -63,30 +37,24 @@ &.active { > .tag-text-container { > * { + @apply font-bold; color: @text-green; - font-weight: bold; } } } > .tag-text-container { .flex(row, flex-start, center); + @apply overflow-hidden text-ellipsis shrink-0 leading-5; max-width: calc(100% - 24px); color: @text-black; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 0; - line-height: 20px; > .icon-text { - display: block; - width: 16px; - flex-shrink: 0; - flex-shrink: 0; + @apply block w-4 shrink-0; } > .tag-text { - flex-shrink: 0; + @apply shrink-0; } } @@ -95,90 +63,24 @@ > .action-btn { .flex(row, center, center); - width: 24px; - height: 24px; - flex-shrink: 0; - transition: all 0.1s linear; - transform: rotate(0); + @apply w-6 h-6 shrink-0 transition-all rotate-0; > .icon-img { - width: 18px; - height: 18px; - opacity: 0.8; + @apply w-5 h-5 opacity-80; } &.shown { - transform: rotate(90deg); + @apply rotate-90; } } } } > .tag-tip-container { - width: 100%; - margin-top: 8px; - padding-left: 16px; - font-size: 12px; - line-height: 1.6; - color: gray; + @apply w-full mt-2 pl-4 text-xs text-gray-400; > .code-text { - color: @text-blue; - padding: 4px; - margin: 0 2px; - white-space: pre-line; - background-color: @bg-light-blue; - border-radius: 4px; - } - } - } -} - -.rename-tag-dialog { - > .dialog-container { - width: 320px; - - > .dialog-content-container { - .flex(column, flex-start, flex-start); - - > .tag-text { - margin-bottom: 8px; - font-size: 14px; - } - - > .text-input { - width: 100%; - padding: 8px 12px; - border: 1px solid lightgray; - border-radius: 4px; - font-size: 14px; - margin-bottom: 12px; - } - - > .btns-container { - .flex(row, flex-end, center); - width: 100%; - - > .btn-text { - font-size: 14px; - margin-left: 12px; - cursor: pointer; - - &:hover { - opacity: 0.8; - } - - &.cancel-btn { - color: @text-gray; - } - - &.confirm-btn { - background-color: @text-green; - color: white; - padding: 4px 12px; - border-radius: 4px; - } - } + @apply p-1 mx-1 text-blue-400 whitespace-pre-line bg-blue-100 rounded; } } } @@ -186,18 +88,15 @@ @media only screen and (max-width: 875px) { .tags-wrapper { - background-color: white; + @apply bg-white; > .tags-container { - height: auto; + @apply h-auto; &:last-child { + @apply grow; flex-grow: 1; } } } - - .rename-tag-dialog { - padding-top: 64px; - } } diff --git a/web/src/less/toast.less b/web/src/less/toast.less index c21cbdaf..5e2052cf 100644 --- a/web/src/less/toast.less +++ b/web/src/less/toast.less @@ -2,51 +2,34 @@ .toast-list-container { .flex(column, flex-start, flex-end); - position: fixed; - top: 8px; - right: 16px; - z-index: 1000; - max-height: 100%; + @apply fixed top-2 right-4 z-1000 max-h-full; > .toast-wrapper { .flex(column, flex-start, flex-start); - position: relative; - left: 100%; - visibility: hidden; + @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; - margin-top: 24px; - padding: 8px 16px; - background-color: white; - border-radius: 4px; - box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); - font-size: 13px; - cursor: pointer; transition: all 0.4s ease; &.showup { - left: 0; - visibility: visible; + @apply left-0 visible; } &.destory { + @apply invisible; left: calc(100% + 32px); - visibility: hidden; } > .toast-container { > .content-text { - line-height: 24px; + @apply text-base whitespace-pre-wrap; max-width: 160px; - word-wrap: break-word; } } &::before { content: ""; - position: absolute; - top: 12px; - right: -8px; + @apply absolute top-3 -right-2; border-left: 8px solid white; border-top: 8px solid transparent; border-bottom: 8px solid transparent; diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less index 27437ada..b2708275 100644 --- a/web/src/less/usage-heat-map.less +++ b/web/src/less/usage-heat-map.less @@ -7,56 +7,39 @@ .usage-heat-map-wrapper { .flex(row, flex-start, center); - width: 100%; - height: 122px; - flex-wrap: wrap; - padding-right: 24px; - padding-bottom: 12px; + @apply w-full h-32 flex-wrap pr-6 pb-3; &:hover { > .day-tip-text-container { - visibility: visible; + @apply visible; } } > .day-tip-text-container { .flex(column, space-between, center); - width: 24px; - height: 100%; - padding-bottom: 2px; - flex-wrap: wrap; - visibility: hidden; + @apply w-6 h-full flex-wrap invisible; > .tip-text { + @apply pr-1 w-full text-right font-mono text-gray-400; font-size: 10px; - line-height: 16px; - padding-right: 2px; - width: 100%; - text-align: right; - color: gray; - .mono-font-family(); } } > .usage-heat-map { - width: 192px; - height: 100%; - flex-wrap: wrap; - display: grid; + @apply w-48 h-full grid; grid-template-rows: repeat(7, 1fr); grid-template-columns: repeat(12, 1fr); grid-auto-flow: column; > .stat-container { - display: block; + @apply block rounded-sm; width: 13px; height: 13px; background-color: @bg-lightgray; - border-radius: 2px; margin-bottom: 2px; &.null { - background-color: transparent; + @apply bg-transparent; } &.stat-day-L1-bg { @@ -82,24 +65,12 @@ } > .usage-detail-container { - position: absolute; - left: 0; - top: 0; - margin-left: 9px; - transform: translateX(-50%); - margin-top: -36px; + @apply absolute left-0 top-0 ml-2 -mt-9 p-2 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap; background-color: rgba(0, 0, 0, 0.8); - color: white; - padding: 6px 8px; - border-radius: 4px; - font-size: 12px; - line-height: 1.6; z-index: 2; - user-select: none; - white-space: nowrap; > .date-text { - color: lightgray; + @apply text-gray-300; } &::before { @@ -116,36 +87,26 @@ @media only screen and (max-width: 875px) { .usage-heat-map-wrapper { - height: 160px; - padding: 8px 0 !important; - padding-top: 12px !important; + @apply h-40 py-2 pt-3 pr-0 pl-2 !important; > .day-tip-text-container { - visibility: visible; - width: 48px; - padding-bottom: 4px; + @apply visible w-10 pb-1; > .tip-text { - padding-right: 6px; - font-size: 12px; - line-height: unset !important; + @apply pr-1 text-xs; } } > .usage-heat-map { - width: 240px; + @apply w-60; > .stat-container { - width: 16px; - height: 16px; - margin-bottom: 4px; + @apply w-4 h-4 mb-1; } } > .usage-detail-container { - margin-top: -36px; - margin-left: 8px; - font-size: 12px; + @apply -mt-9 pl-2 text-xs; &::before { left: calc(50% - 4px); diff --git a/web/src/less/user-banner.less b/web/src/less/user-banner.less index ac3962f7..34021f62 100644 --- a/web/src/less/user-banner.less +++ b/web/src/less/user-banner.less @@ -2,45 +2,27 @@ .user-banner-container { .flex(column, flex-start, flex-start); - width: 100%; - height: 128px; + @apply w-full h-auto; > .userinfo-header-container { .flex(row, space-between, center); - width: 100%; - padding: 0 24px; - flex-wrap: nowrap; - margin-bottom: 4px; + @apply w-full px-6 flex-nowrap mb-1; > .username-text { + @apply font-bold text-lg text-slate-800 overflow-hidden cursor-pointer shrink-0 text-ellipsis; max-width: calc(100% - 32px); - font-weight: bold; - font-size: 18px; - line-height: 36px; - color: @text-black; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - margin-right: auto; - flex-shrink: 0; } > .action-btn { - flex-shrink: 0; - user-select: none; - border: none; + @apply flex-shrink-0 select-none border-none; background-color: unset; &.menu-popup-btn { .flex(column, center, center); - width: 36px; - height: 40px; - margin-right: -8px; - cursor: pointer; + @apply w-9 h-10 -mr-2 cursor-pointer; > .icon-img { - width: 20px; - height: auto; + @apply w-5 h-auto; } } } @@ -48,25 +30,18 @@ > .status-text-container { .flex(row, space-between, flex-start); - padding: 0 24px; - width: 100%; - user-select: none; + @apply px-6 w-full select-none mb-3; > .status-text { .flex(column, flex-start, flex-start); > .amount-text { - font-weight: bold; - font-size: 28px; - line-height: 1.8; + @apply font-bold text-2xl opacity-80 leading-10; color: @text-black; - opacity: 0.8; } > .type-text { - color: gray; - font-size: 12px; - .mono-font-family(); + @apply text-gray-400 text-xs font-mono; } } } @@ -74,27 +49,22 @@ @media only screen and (max-width: 875px) { .user-banner-container { - height: 154px; - z-index: 1; - padding-top: 16px !important; + @apply pt-4; > .userinfo-header-container { - padding: 0 16px; + @apply px-4; > .username-text { - font-size: 22px; + @apply text-xl; } } > .status-text-container { - padding: 0 16px; + @apply px-4; > .status-text { - > .amount-text { - font-size: 32px; - } > .type-text { - font-size: 14px; + @apply text-sm; } } } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 0ee4f32f..bb97cd0d 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -2,7 +2,15 @@ module.exports = { content: ["./index.html", "./src/**/*.{js,ts,tsx}"], theme: { - extend: {}, + extend: { + spacing: { + 128: "32rem", + }, + zIndex: { + 100: "100", + 1000: "1000", + }, + }, }, plugins: [], };