{"html":"

\n \n Add favorite\n Remove from favorite\n \n \n \n
\n Edit Name\n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n

\n New Deployment\n \n \n \n \n \n
\n Duplicate\n \n \n \n \n \n \n
\n Analytics\n \n \n \n \n
\n Transfer Project\n \n \n \n \n \n \n
\n Project Settings\n \n \n \n \n

\n Delete Project\n Hold to Confirm\n \n \n \n \n \n \n \n

\n","css":".card {\n background: #222222;\n width: 260px;\n border: 2px solid #313131;\n border-radius: 10px;\n padding: 3px 4px;\n\n .separator {\n width: 100%;\n border: 1px solid #444444;\n border-radius: 10px;\n margin: 5px 0px;\n }\n\n .list {\n color: #e9e9e9;\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: 3px;\n\n .item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.3s ease;\n padding: 6px 8px;\n border-radius: 5px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n\n svg {\n z-index: 1;\n transition: all 0.3s ease;\n }\n &:hover {\n background: #333333;\n }\n\n .label {\n font-weight: 400;\n transition: all 0.2s ease;\n }\n\n &.favorite {\n .fav-label {\n position: absolute;\n transform: translateY(-100%) translateX(-15px) scale(0.8);\n opacity: 0;\n }\n\n .input {\n width: 100%;\n height: 100%;\n position: absolute;\n appearance: none;\n cursor: pointer;\n z-index: 100;\n }\n\n .input:checked ~ .fav-label {\n transform: translateY(0);\n opacity: 1;\n }\n\n .input:checked ~ .label:not(.fav-label) {\n transform: translateY(110%) translateX(-6px) scale(0.8);\n opacity: 0;\n }\n .input:checked ~ svg {\n fill: #fff;\n }\n }\n\n &.delete {\n color: #e3616a;\n position: relative;\n &:hover {\n background: #6b2c2b;\n }\n\n .label {\n transform: translateY(0);\n }\n\n &:active {\n .label {\n opacity: 0;\n visibility: hidden;\n transform: translateY(100%) translateX(-15px) scale(0.8);\n }\n .action {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n\n &:before {\n animation: delete 2.5s ease-in-out forwards 0.2s;\n }\n }\n\n .action {\n position: absolute;\n opacity: 0;\n visibility: hidden;\n transform: translateY(-50%) translateX(-15px) scale(0.8);\n }\n\n &::before {\n content: \"\";\n position: absolute;\n background-color: #89302d;\n left: 0;\n top: 0;\n height: 100%;\n }\n }\n\n &.rename {\n &:has(.toogler:checked:nth-of-type(1)) {\n background-color: #333333;\n overflow: hidden;\n .label {\n opacity: 0;\n transform: translateY(100%);\n }\n > svg {\n transform: translateY(130%);\n }\n\n .input-container {\n transform: translateY(0);\n\n .icons {\n top: 50%;\n }\n }\n }\n\n .toogler {\n position: absolute;\n appearance: none;\n width: 100%;\n height: 100%;\n }\n\n .input-container {\n transform: translateY(-100%);\n width: 100%;\n position: absolute;\n\n .input {\n width: 75%;\n background: transparent;\n border: none;\n outline: none;\n height: 100%;\n color: #fff;\n padding: 8px 8px;\n font-size: 17px;\n z-index: 100;\n }\n\n .icons {\n position: absolute;\n top: -50%;\n right: 0%;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n gap: 8px;\n svg {\n background-color: #565656;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.3s ease;\n &:hover {\n background-color: #757575;\n }\n }\n }\n }\n }\n }\n }\n}\n\n@keyframes delete {\n from {\n width: 0%;\n }\n\n to {\n width: 100%;\n }\n}\n"}

yellow-puma-19

👁 实时预览

📝 源代码