f4e2b7319a
* no selecting tooltip text With a double click on button, you can get selection on tooltip text. That may be distracting a little bit. * Update web/src/less/memo.less Co-authored-by: Stephen Zhou <hi@hyoban.cc> Co-authored-by: Stephen Zhou <hi@hyoban.cc> Co-authored-by: boojack <stevenlgtm@gmail.com>
148 lines
3.5 KiB
Plaintext
148 lines
3.5 KiB
Plaintext
.memo-wrapper {
|
|
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
|
|
|
|
&.archived-memo {
|
|
@apply border-gray-200;
|
|
}
|
|
|
|
&.pinned {
|
|
@apply border-gray-200 border-2;
|
|
}
|
|
|
|
> .corner-container {
|
|
@apply absolute top-0 right-0 z-1;
|
|
|
|
&::after {
|
|
@apply rounded-tr-md absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600;
|
|
content: "";
|
|
border-width: 6px;
|
|
}
|
|
}
|
|
|
|
> .memo-top-wrapper {
|
|
@apply flex flex-row justify-between items-center w-full h-6 mb-1;
|
|
|
|
> .status-text-container {
|
|
@apply flex flex-row justify-start items-center;
|
|
|
|
> .time-text {
|
|
@apply text-xs text-gray-400;
|
|
font-size: 13px;
|
|
}
|
|
|
|
> .status-text {
|
|
@apply text-xs cursor-pointer ml-2 rounded border px-1;
|
|
|
|
&.public {
|
|
@apply border-green-600 text-green-600;
|
|
}
|
|
|
|
&.protected {
|
|
@apply border-gray-400 text-gray-400;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .time-text {
|
|
@apply text-xs text-gray-400 cursor-pointer;
|
|
}
|
|
|
|
> .btns-container {
|
|
@apply flex flex-row justify-end items-center relative flex-shrink-0;
|
|
|
|
> .more-action-btns-wrapper {
|
|
@apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
|
|
|
|
> .more-action-btns-container {
|
|
@apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white;
|
|
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
|
|
|
> .btns-container {
|
|
@apply w-full flex flex-row justify-around items-center border-b border-gray-100 p-1 mb-1;
|
|
|
|
> .btn {
|
|
@apply relative w-6 h-6 p-1 text-gray-600 cursor-pointer select-none;
|
|
|
|
&:hover > .tip-text {
|
|
@apply block;
|
|
}
|
|
|
|
> .icon-img {
|
|
@apply w-5 h-auto;
|
|
}
|
|
|
|
> .tip-text {
|
|
@apply hidden absolute top-0 p-1 px-2 rounded text-xs leading-6 -mt-9 bg-black text-white shadow opacity-70;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .btn {
|
|
@apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer;
|
|
|
|
&.archive-btn {
|
|
@apply text-orange-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
@apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200;
|
|
|
|
&.more-action-btn {
|
|
@apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
|
|
|
|
> .icon-img {
|
|
@apply w-4 h-auto;
|
|
}
|
|
|
|
&:hover {
|
|
& + .more-action-btns-wrapper {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .memo-content-wrapper {
|
|
> .memo-content-text {
|
|
.tag-span {
|
|
@apply cursor-pointer hover:opacity-80;
|
|
}
|
|
|
|
.img {
|
|
@apply max-w-xs;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .expand-btn-container {
|
|
@apply w-full relative flex flex-row justify-start items-center;
|
|
|
|
> .btn {
|
|
@apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60;
|
|
|
|
&.expand-btn {
|
|
@apply mt-2;
|
|
|
|
> .icon-img {
|
|
@apply rotate-90;
|
|
}
|
|
}
|
|
|
|
&.fold-btn {
|
|
> .icon-img {
|
|
@apply -rotate-90;
|
|
}
|
|
}
|
|
|
|
> .icon-img {
|
|
@apply w-4 h-auto ml-1 transition-all;
|
|
}
|
|
}
|
|
}
|
|
}
|