{"html":"

\n Uiverse\n

\n\n

\n \n \n \n

\n\n

\n \n \n\n \n\n \n\n \n

\n","css":".browser {\n width: 300px;\n height: 250px;\n background: lightgrey;\n border-radius: 7px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n box-shadow: 5px 5px 10px rgba(31, 31, 31, 0.245);\n}\n\n/* tabs-head */\n.tabs-head {\n background-color: #353535;\n height: 40px;\n display: flex;\n justify-content: space-between;\n align-items: end;\n padding-left: 20px;\n}\n\n.tabs-head .tab-open {\n width: 100px;\n height: 34px;\n border-radius: 7px 7px 0 0;\n background-color: #515151;\n display: flex;\n gap: 5px;\n align-items: start;\n justify-content: space-between;\n padding: 4px 8px;\n position: relative;\n}\n\n.tabs-head .tab-open .close-tab {\n color: #fff;\n font-size: 9px;\n padding: 1px 4px 1px 4px;\n border-radius: 50%;\n cursor: default;\n}\n.tabs-head .tab-open .close-tab:hover {\n background-color: #5d5d5d;\n}\n\n.tabs-head .tab-open .rounded-l {\n position: absolute;\n background-color: #515151;\n width: 20px;\n height: 24px;\n top: 0;\n right: 0;\n transform: translate(100%);\n overflow: hidden;\n}\n.tabs-head .tab-open .rounded-l .mask-round {\n width: 100%;\n height: 100%;\n background-color: #353535;\n border-radius: 0 0 0 7px;\n}\n\n.tabs-head .tab-open .rounded-r {\n position: absolute;\n background-color: #515151;\n width: 20px;\n height: 24px;\n top: 0;\n left: 0;\n transform: translate(-100%);\n overflow: hidden;\n}\n\n.tabs-head .tab-open .rounded-r .mask-round {\n width: 100%;\n height: 100%;\n background-color: #353535;\n border-radius: 0 0 7px 0;\n}\n\n.tabs-head .tab-open span {\n color: #fff;\n font-size: 10px;\n}\n\n.tabs-head .window-opt {\n display: flex;\n}\n\n.tabs-head .window-opt button {\n height: 30px;\n width: 30px;\n border: none;\n background-color: transparent;\n transition: 0.1s ease-out;\n color: #fff;\n margin-bottom: 10px;\n}\n\n.tabs-head .window-opt button:hover {\n background-color: #515151c8;\n}\n\n.tabs-head .window-opt .window-close:hover {\n background-color: rgb(255, 52, 52);\n}\n\n/* head-browser */\n.head-browser {\n position: absolute;\n top: 30px;\n width: 100%;\n height: 40px;\n background-color: #515151;\n padding: 7px;\n display: flex;\n border-radius: 7px 7px 0 0;\n gap: 5px;\n}\n\n.head-browser input {\n background-color: #3b3b3b;\n border: 2px solid transparent;\n height: 100%;\n border-radius: 20px;\n outline: none;\n color: #fff;\n padding: 0 15px;\n flex: 1;\n transition: 0.2s ease-in-out;\n}\n\n.head-browser input:hover {\n background-color: #5d5d5d;\n}\n\n.head-browser input:focus {\n border-color: rgb(173, 214, 255);\n background-color: #3b3b3b;\n transition: none;\n}\n\n.head-browser input::placeholder {\n color: #fff;\n}\n\n.head-browser button {\n width: 27px;\n height: 25px;\n border: none;\n background-color: transparent;\n color: #fff;\n border-radius: 50%;\n transition: 0.2s ease-in-out;\n}\n\n.head-browser button:disabled {\n opacity: 0.4;\n}\n\n.head-browser button:hover {\n background-color: #5d5d5d;\n}\n\n.head-browser button:disabled:hover {\n background-color: transparent;\n}\n\n.head-browser .star {\n color: #fff;\n position: absolute;\n right: 45px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 15px;\n opacity: 0.7;\n height: 18px;\n width: 19px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-bottom: 3px;\n}\n"}

grumpy-pug-86

👁 实时预览

📝 源代码