mirror of
https://github.com/usememos/memos.git
synced 2025-03-18 11:40:09 +01:00
STEVEN
GitHub
parent
7b882ebff3
commit
b597d40470
@ -33,8 +33,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
|
||||
<span className="btn" onClick={showStarHistoryDialog}>
|
||||
Star History
|
||||
</span>
|
||||
<hr />
|
||||
<p className="normal-text">
|
||||
<p className="updated-time-text">
|
||||
Last updated on <span className="pre-text">2021/12/12 14:38:15</span> 🎉
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -65,7 +65,6 @@ interface ShortcutContainerProps {
|
||||
|
||||
const ShortcutContainer: React.FC<ShortcutContainerProps> = (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<ShortcutContainerProps> = (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<ShortcutContainerProps> = (props: ShortcutCont
|
||||
<span className="shortcut-text">{shortcut.title}</span>
|
||||
</div>
|
||||
<div className="btns-container">
|
||||
<span className="action-btn toggle-btn" onClick={handleShowActionBtnClick}>
|
||||
<span className="action-btn toggle-btn">
|
||||
<img className="icon-img" src={`/icons/more${isActive ? "-white" : ""}.svg`} />
|
||||
</span>
|
||||
<div className={`action-btns-wrapper ${showActionBtns ? "" : "hidden"}`} onMouseLeave={handleActionBtnContainerMouseLeave}>
|
||||
<div className="action-btns-wrapper">
|
||||
<div className="action-btns-container">
|
||||
<span className="btn" onClick={handlePinQueryBtnClick}>
|
||||
{shortcut.rowStatus === "ARCHIVED" ? "Unpin" : "Pin"}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,5 @@
|
||||
|
||||
#root {
|
||||
.flex(row, flex-start, flex-start);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 1.4rem;
|
||||
.mono-font-family();
|
||||
@apply font-mono;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: [],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user