first commit 2

theme/rd.laser/skin/board/youtube_pc/css/magic-check.css

@@ -0,0 +1,187 @@
+@keyframes hover-color {
+    from {
+        background-color: #eee;
+    }
+
+    to {
+        background-color: #ddd;
+    }
+}
+
+.magic-radio,
+.magic-checkbox {
+    position: absolute;
+    display: none;
+}
+
+.magic-radio[disabled],
+.magic-checkbox[disabled] {
+    cursor: not-allowed;
+}
+
+.magic-radio + label {
+    position: relative;
+    padding-left: 30px;
+    margin-right: 0px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.magic-checkbox + label {
+    position: relative;
+    padding-left: 27px;
+    margin-right: 0px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+
+.magic-radio + label:hover:before,
+.magic-checkbox + label:hover:before {
+    animation-duration: 0.4s;
+    animation-fill-mode: both;
+    animation-name: hover-color;
+}
+
+.magic-radio + label:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    content: '';
+    border: 0px solid #c0c0c0;
+    background-color: #eee;
+}
+
+.magic-checkbox + label:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    content: '';
+    border: 0px solid #c0c0c0;
+    background-color: #eee;
+}
+
+
+.magic-radio + label:after,
+.magic-checkbox + label:after {
+    position: absolute;
+    display: none;
+    content: '';
+}
+
+.magic-radio[disabled] + label,
+.magic-checkbox[disabled] + label {
+    cursor: not-allowed;
+    color: #ccc;
+}
+
+.magic-radio[disabled] + label:hover,
+.magic-radio[disabled] + label:before,
+.magic-radio[disabled] + label:after,
+.magic-checkbox[disabled] + label:hover,
+.magic-checkbox[disabled] + label:before,
+.magic-checkbox[disabled] + label:after {
+    cursor: not-allowed;
+}
+
+.magic-radio[disabled] + label:hover:before,
+.magic-checkbox[disabled] + label:hover:before {
+    border: 0px solid #ddd;
+    animation-name: none;
+}
+
+.magic-radio[disabled] + label:before,
+.magic-checkbox[disabled] + label:before {
+    border-color: #ddd;
+}
+
+.magic-radio:checked + label:before,
+.magic-checkbox:checked + label:before {
+    animation-name: none;
+}
+
+.magic-radio:checked + label:after,
+.magic-checkbox:checked + label:after {
+    display: block;
+}
+
+.magic-radio + label:before {
+    border-radius: 50%;
+}
+
+.magic-radio + label:after {
+    top: 5px;
+    left: 5px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #000;
+}
+
+.magic-radio:checked + label:before {
+    border: 0px solid #000;
+}
+
+.magic-radio:checked[disabled] + label:before {
+    border: 0px solid #000;
+}
+
+.magic-radio:checked[disabled] + label:after {
+    background: #000;
+    color:#ccc;
+}
+
+.magic-checkbox + label:before {
+    border-radius: 3px;
+}
+
+.magic-checkbox + label:after {
+    top: 4px;
+    left: 7px;
+    box-sizing: border-box;
+    width: 6px;
+    height: 9px;
+    transform: rotate(45deg);
+    border-width: 2px;
+    border-style: solid;
+    border-color: #000;
+    border-top: 0;
+    border-left: 0;
+}
+
+.magic-checkbox2 + label:after {
+    top: 4px;
+    left: 7px;
+    box-sizing: border-box;
+    width: 6px;
+    height: 9px;
+    transform: rotate(45deg);
+    border-width: 2px;
+    border-style: solid;
+    border-color: #000;
+    border-top: 0;
+    border-left: 0;
+}
+
+
+.magic-checkbox:checked + label:before {
+    border: #ddd;
+    background: #ddd;
+}
+
+.magic-radio:checked + label:before {
+    border: #ddd;
+    background: #ddd;
+}
+
+
+.magic-checkbox:checked[disabled] + label:before {
+    border: #ddd;
+    background: #ddd;
+}