{"html":"

\n O\n N\n L\n Y\n C\n S\n S\n

\n \n

Activity

\n \n

AirPlay

\n \n

Alert

\n \n

Alert

\n \n

Text Center

\n \n

Text Justify

\n \n

Text Left

\n \n

Text Right

\n \n

Left Arrow

\n \n

Right Arrow

\n \n

Bottom Arrow

\n \n

Top Arrow

\n \n

Battery

\n \n

Battery C.

\n \n

Battery 50%

\n \n

Battery Full

\n","css":".text {\n font-size: 5px;\n position: absolute;\n top: 3px;\n color: #2f363d;\n opacity: 0;\n}\n.icons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n place-content: center;\n gap: 5px;\n}\n.title {\n grid-column-start: 1;\n grid-column-end: 5;\n text-align: center;\n font-weight: 100;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.title span {\n text-shadow: 1px 1px #ffffff;\n}\n.icon-box:hover {\n transform: scale(2);\n z-index: 9;\n}\n.icon-box {\n background-color: #ffffff;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n border-radius: 5px;\n transition: all 0.2s ease;\n position: relative;\n}\n.icon-box:hover .text {\n opacity: 1;\n}\n.icon-box:hover button {\n margin-top: 5px;\n}\nbutton {\n background-color: transparent;\n z-index: 0;\n margin-top: 0px;\n}\n.activity {\n position: relative;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n}\n.activity .line-1 {\n display: inline-flex;\n width: 8px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n}\n.activity .line-2 {\n display: inline-flex;\n width: 9px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n transform: rotate(-75deg);\n margin-top: -8px;\n margin-left: -4px;\n}\n.activity .line-3 {\n display: inline-flex;\n width: 16px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n transform: rotate(70deg);\n margin-top: -3px;\n margin-left: -9px;\n}\n.activity .line-4 {\n display: inline-flex;\n width: 8px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n transform: rotate(-70deg);\n margin-top: 6px;\n margin-left: -8px;\n}\n.activity .line-5 {\n display: inline-flex;\n width: 8px;\n height: 2px;\n border-radius: 50px;\n background-color: #2f363d;\n margin-top: 0px;\n margin-left: -3px;\n}\n/* ----- */\n.airplay {\n position: relative;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n}\n.airplay .line-1 {\n width: 20px;\n height: 14px;\n background-color: white;\n border-radius: 2px;\n box-shadow: 0px 0px 0px 2px #2f363d;\n}\n.airplay .line-2 {\n width: 0;\n height: 0;\n border: 6px solid transparent;\n border-top: 0;\n border-bottom: 6px solid #2f363d;\n position: absolute;\n margin-top: 16px;\n background-color: #ffffff;\n border-radius: 100% 100% 0 0;\n}\n/* ----- */\n.alert-circle {\n width: 20px;\n height: 20px;\n background-color: #ffffff;\n border-radius: 100%;\n border: solid 2px #2f363d;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1px;\n cursor: pointer;\n}\n.alert-circle .line-1 {\n width: 2px;\n height: 6px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n.alert-circle .line-2 {\n width: 2px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n/* ----- */\n.alert-triangle {\n width: 20px;\n height: 20px;\n background-color: #ffffff;\n border-radius: 100%;\n border: solid 2px #2f363d;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1px;\n cursor: pointer;\n}\n.alert-triangle .line-1 {\n width: 2px;\n height: 6px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n.alert-triangle .line-2 {\n width: 2px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n/* ----- */\n.alert-octagon {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n position: relative;\n cursor: pointer;\n}\n.alert-octagon .line-1 {\n width: 20px;\n height: 8px;\n background-color: #fff;\n border-left: solid 2px #2f363d;\n border-right: solid 2px #2f363d;\n}\n.alert-octagon .line-2 {\n width: 8px;\n height: 20px;\n position: absolute;\n transform: rotate(0deg);\n background-color: #fff;\n border-top: solid 2px #2f363d;\n border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .line-3 {\n width: 8px;\n height: 20px;\n position: absolute;\n transform: rotate(45deg);\n background-color: #fff;\n border-top: solid 2px #2f363d;\n border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .line-4 {\n width: 8px;\n height: 20px;\n position: absolute;\n transform: rotate(-45deg);\n background-color: #fff;\n border-top: solid 2px #2f363d;\n border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .center {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1px;\n}\n.alert-octagon .center .line-5 {\n display: flex;\n width: 2px;\n height: 6px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n.alert-octagon .center .line-6 {\n display: flex;\n width: 2px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n}\n/* ----- */\n.center-text {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.center-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.center-text .line-2 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.center-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.center-text .line-4 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ------ */\n.justify-text {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.justify-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.justify-text .line-2 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.justify-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.justify-text .line-4 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ----- */\n.left-text {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.left-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.left-text .line-2 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.left-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.left-text .line-4 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ----- */\n.right-text {\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: column;\n gap: 2px;\n width: 18px;\n height: 24px;\n border: none;\n cursor: pointer;\n}\n.right-text .line-1 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.right-text .line-2 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.right-text .line-3 {\n width: 18px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n.right-text .line-4 {\n width: 12px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n}\n/* ----- */\n.left-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(-135deg);\n cursor: pointer;\n margin-left: -2px;\n}\n.left-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.left-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.left-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.left-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.right-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(45deg);\n cursor: pointer;\n margin-left: 2px;\n}\n.right-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.right-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.right-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.right-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.bottom-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(135deg);\n cursor: pointer;\n margin-top: 2px;\n}\n.bottom-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.bottom-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.bottom-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.bottom-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.top-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n width: 10px;\n height: 10px;\n border: none;\n position: relative;\n transform: rotate(-45deg);\n cursor: pointer;\n margin-top: -2px;\n}\n.top-arrow .line-1 {\n width: 100%;\n height: 100%;\n background-color: #fff;\n}\n.top-arrow .line-1:before {\n content: \"\";\n width: 100%;\n height: 2px;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n left: 0;\n top: 0;\n}\n.top-arrow .line-1:after {\n content: \"\";\n width: 2px;\n height: 100%;\n background-color: #2f363d;\n border-radius: 50px;\n position: absolute;\n right: 0;\n top: 0;\n}\n.top-arrow .line-2 {\n width: 14px;\n height: 2px;\n background-color: #2f363d;\n border-radius: 5px;\n position: absolute;\n transform: translate(-27%, -110%) rotate(-45deg);\n left: 0;\n bottom: 0;\n}\n/* ----- */\n.battery-empty {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery-empty .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery-empty .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n/* ----- */\n.battery-charge {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery-charge .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery-charge .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n.battery-charge .line-3 {\n position: absolute;\n display: flex;\n box-sizing: border-box;\n width: 0;\n height: 0;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n border-bottom: 4px solid #2f363d;\n left: 9px;\n top: 2px;\n transform: rotate(30deg);\n}\n.battery-charge .line-4 {\n position: absolute;\n display: flex;\n box-sizing: border-box;\n width: 0;\n height: 0;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n border-top: 5px solid #2f363d;\n right: 10px;\n bottom: 2px;\n transform: rotate(30deg);\n}\n/* ----- */\n.battery {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n.battery .line-3 {\n background-color: #2f363d;\n position: absolute;\n display: flex;\n box-sizing: border-box;\n height: 6px;\n width: 40%;\n border-radius: 1px;\n top: 3px;\n left: 3px;\n}\n/* ----- */\n.battery-full {\n position: relative;\n display: flex;\n border: none;\n cursor: pointer;\n}\n.battery-full .line-1 {\n box-sizing: border-box;\n width: 20px;\n height: 12px;\n border: 2px solid #2f363d;\n border-radius: 3px;\n}\n.battery-full .line-2 {\n position: absolute;\n box-sizing: border-box;\n border-radius: 3px;\n width: 4px;\n height: 6px;\n right: -2px;\n top: 3px;\n background-color: #2f363d;\n}\n.battery-full .line-3 {\n background-color: #2f363d;\n position: absolute;\n display: flex;\n box-sizing: border-box;\n height: 6px;\n width: calc(100% - 6px);\n border-radius: 1px;\n top: 3px;\n left: 3px;\n}\n"}

quiet-mayfly-12

👁 实时预览

📝 源代码