.layui-layer-win10 { border: 1px solid #aaa; box-shadow: 1px 1px 6px rgba(0, 0, 0, .3); border-radius: none } .layui-layer-win10 .layui-layer-title { height: 32px; line-height: 32px; padding-left: 8px; border-bottom: none; font-size: 12px } .layui-layer-win10 .layui-layer-setwin { right: 0; top: 0 } .layui-layer-win10 .layui-layer-setwin span { margin-left: 0; width: 32px; height: 32px; padding: 8px } .layui-layer-win10.layui-layer-page .layui-layer-setwin span { width: 38px } .layui-layer-win10 .layui-layer-setwin span:hover { background-color: #e5e5e5 } .layui-layer-win10 .layui-layer-setwin span.layui-icon-close:hover { background-color: #e81123; color: #fff } .layui-layer-win10.layui-layer-dialog .layui-layer-content { padding: 8px 16px 32px; color: #0033bc } .layui-layer-win10.layui-layer-dialog .layui-layer-padding { padding-top: 18px; padding-left: 58px } .layui-layer-win10 .layui-layer-btn { padding: 5px 5px 10px; border-top: 1px solid #dfdfdf; background-color: #f0f0f0 } .layui-layer-win10 .layui-layer-btn a { height: 20px; line-height: 18px; background-color: #e1e1e1; border-color: #adadad; color: #000; font-size: 12px; transition: all .3s } .layui-layer-win10 .layui-layer-btn a:hover { border-color: #2a8edd; background-color: #e5f1fb } .layui-layer-win10 .layui-layer-btn .layui-layer-btn0 { border-color: #0078d7 } :root { --primary-color: #ff2a2a; /* Changed to demonic red */ --secondary-color: #c91a1a; --text-color: #2b2d42; --light-text: #8d99ae; --bg-color: #f0f0f0; --card-bg: #ffffff; /*--border-radius: 0;*/ --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Heavier shadow */ --transition: all 0.3s ease; } /* Demon-themed layer style */ .layui-layer.class-layer-radio-ui-custom { background: var(--card-bg); border-radius: var(--border-radius) !important; box-shadow: var(--box-shadow) !important; overflow: hidden; transition: var(--transition); padding: 0 !important; border: 1px solid #333; } .layui-layer.class-layer-radio-ui-custom .layui-layer-title { background-color: #222 !important; font-weight: bold; color: #ff2a2a !important; border-bottom: 2px solid #ff2a2a; border-radius: var(--border-radius) !important; height: 40px; line-height: 40px; text-align: center; position: relative; text-shadow: 0 0 5px rgba(255, 42, 42, 0.7); } /* Demon horns */ .layui-layer.class-layer-radio-ui-custom .layui-layer-title:before, .layui-layer.class-layer-radio-ui-custom .layui-layer-title:after { content: ""; position: absolute; top: -10px; width: 0; height: 0; border-style: solid; } .layui-layer.class-layer-radio-ui-custom .layui-layer-title:before { left: 15px; border-width: 0 10px 20px 10px; border-color: transparent transparent #222 transparent; } .layui-layer.class-layer-radio-ui-custom .layui-layer-title:after { right: 15px; border-width: 0 10px 20px 10px; border-color: transparent transparent #222 transparent; } /* Demon eyes */ .layui-layer.class-layer-radio-ui-custom .layui-layer-title:before, .layui-layer.class-layer-radio-ui-custom .layui-layer-title:after { content: ""; position: absolute; top: 10px; width: 12px; height: 12px; background: #ff2a2a; border-radius: 50%; box-shadow: 0 0 10px #ff2a2a; animation: demon-eyes 2s infinite alternate; } .layui-layer.class-layer-radio-ui-custom .layui-layer-title:before { left: 30px; } .layui-layer.class-layer-radio-ui-custom .layui-layer-title:after { right: 30px; } @keyframes demon-eyes { 0% { opacity: 0.7; } 100% { opacity: 1; } } .layui-layer.class-layer-radio-ui-custom .layui-layer-content { color: var(--text-color); background: var(--card-bg); } /* Button container styles */ .layui-layer.class-layer-radio-ui-custom .layui-form-item { margin-top: 20px; display: flex; gap: 10px; padding: 0; background: #f5f5f5; padding: 10px; border-top: 1px solid #ddd; } .layui-layer.class-layer-radio-ui-custom .layui-form-item-right { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; padding: 0; } .layui-layer.class-layer-radio-ui-custom .layui-input-block { margin-left: 0px !important; min-height: 36px; } /* Custom button styles */ .layui-layer.class-layer-radio-ui-custom .custom-btn { outline: none; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; border: 1px solid #333; border-radius: 0 !important; cursor: pointer; padding: 0px 12px; text-align: center; min-width: 80px; height: 32px; line-height: 30px; background-color: #222; color: #ccc; transition: var(--transition); margin: 0 !important; } .layui-layer.class-layer-radio-ui-custom .custom-btn-confirm { background-color: var(--primary-color) !important; color: black !important; border-color: #000 !important; } .layui-layer.class-layer-radio-ui-custom .custom-btn:hover { background-color: #333; color: #fff; transform: none; box-shadow: 0 0 10px rgba(255, 42, 42, 0.5); } .layui-layer.class-layer-radio-ui-custom .custom-btn-confirm:hover { background-color: #ff5555 !important; box-shadow: 0 0 15px rgba(255, 42, 42, 0.8); }