{"html":"

\n \n

\n 5.0 GB of 5 GB used (100%)\n You cannot transfer new files or send and receive email messages for this account.\n \n

\n \n Bin\n

\n \n Search the Internet\n

\n \n Settings\n

","css":".card {\n width: 300px;\n height: 330px;\n background: #333333;\n border-radius: 6px;\n color: white;\n}\n\n.header,\n.info,\n.progress-line\n.bottom {\n width: 100%;\n}\n\n.header {\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-bottom: 1px solid #2E2E2E\n}\n\n.info {\n height: 230px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.bottom {\n height: 50px;\n background-color: #2C2C2C;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n display: flex;\n flex-direction: row;\n justify-content: right;\n align-items: center;\n gap: 5px;\n}\n\n.header-button {\n width: 94%;\n height: 72%;\n border-radius: 6px;\n border: none;\n outline: none;\n background-color: #333333;\n color: white;\n font-size: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.header-button:hover {\n background-color: #3F3F3F;\n}\n\n.header-button svg {\n width: 20px;\n}\n\n.header-button svg:first-child {\n position: relative;\n left: 5px;\n}\n\n.header-button svg:last-child {\n position: relative;\n right: 15px;\n}\n\n.header-button a {\n position: relative;\n right: 35px;\n}\n\n.info-border {\n width: 90%;\n height: 80%;\n display: flex;\n flex-direction: column;\n gap: 6px\n}\n\n.info-border a:first-child {\n font-weight: 600;\n}\n\n.info-border a:nth-child(3) {\n font-size: 15px;\n}\n\n.info-border a:nth-child(4) {\n width: 200px;\n font-size: 13px;\n position: relative;\n top: 10px;\n align-self: center;\n text-align: center;\n}\n\n.progress-line {\n height: 4px;\n border-radius: 666px;\n background-color: #FF99A4;\n}\n\n.update-button {\n width: 120px;\n height: 35px;\n position: relative;\n top: 25px;\n align-self: center;\n outline: none;\n border: none;\n background-color: #4CC2FF;\n border-radius: 6px;\n font-size: 15px;\n font-weight: 600;\n color: #33333;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.update-button:hover {\n background-color: #49B3EA;\n}\n\n.square {\n width: 30px;\n height: 30px;\n right: 10px;\n position: relative;\n border-radius: 3px;\n transition: background-color 0.2s ease;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.square:hover {\n background-color: #3A3A3A;\n}\n\n.tooltip {\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n background-color: #2E2E2E;\n color: #fff;\n padding: 5px;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n transition-delay: 1.5s;\n white-space: nowrap;\n font-size: 12px;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.square:hover .tooltip {\n opacity: 1;\n}\n\n.square:not(:hover) .tooltip {\n opacity: 0;\n transition-delay: 0s;\n}\n\n.square svg {\n width: 20px;\n}"}

horrible-rat-35

👁 实时预览

📝 源代码