| :root { |
| --cn-gradient-bg2: linear-gradient(to right, |
| rgb(255, 0, 0), |
| rgb(255, 0, 25), |
| rgb(255, 0, 50), |
| rgb(255, 0, 75), |
| rgb(255, 0, 100), |
| rgb(255, 0, 125), |
| rgb(255, 0, 150), |
| rgb(255, 0, 175), |
| rgb(255, 0, 200), |
| rgb(255, 0, 225), |
| rgb(255, 0, 255), |
| rgb(225, 0, 255), |
| rgb(200, 0, 255), |
| rgb(175, 0, 255), |
| rgb(150, 0, 255), |
| rgb(125, 0, 255), |
| rgb(100, 0, 255), |
| rgb(75, 0, 255), |
| rgb(50, 0, 255), |
| rgb(25, 0, 255), |
| rgb(0, 0, 255), |
| rgb(0, 25, 255), |
| rgb(0, 50, 255), |
| rgb(0, 75, 255), |
| rgb(0, 100, 255), |
| rgb(0, 125, 255), |
| rgb(0, 150, 255), |
| rgb(0, 175, 255), |
| rgb(0, 200, 255), |
| rgb(0, 225, 255), |
| rgb(0, 255, 255), |
| rgb(0, 255, 225), |
| rgb(0, 255, 200), |
| rgb(0, 255, 175), |
| rgb(0, 255, 150), |
| rgb(0, 255, 125), |
| rgb(0, 255, 100), |
| rgb(0, 255, 75), |
| rgb(0, 255, 50), |
| rgb(0, 255, 25), |
| rgb(0, 255, 0), |
| rgb(25, 255, 0), |
| rgb(50, 255, 0), |
| rgb(75, 255, 0), |
| rgb(100, 255, 0), |
| rgb(125, 255, 0), |
| rgb(150, 255, 0), |
| rgb(175, 255, 0), |
| rgb(200, 255, 0), |
| rgb(225, 255, 0), |
| rgb(255, 255, 0), |
| rgb(255, 225, 0), |
| rgb(255, 200, 0), |
| rgb(255, 175, 0), |
| rgb(255, 150, 0), |
| rgb(255, 125, 0), |
| rgb(255, 100, 0), |
| rgb(255, 75, 0), |
| rgb(255, 50, 0), |
| rgb(255, 25, 0), |
| rgb(255, 0, 0));} |
|
|
| .boks2 { |
| border: 3px solid transparent; |
| border-radius: 15px; |
| padding: 5px; |
| margin: 0; |
| background: url('https://wallpapercave.com/dwp1x/wp5126154.jpg'); |
| background-size: 110% 110%; |
| background-position: 50% 80%; |
| overflow: visible; |
| animation: slide-blur-above 1s, BorderPulse 15s infinite; |
| } |
|
|
| .widget-container { |
| position: relative; |
| width: 630px; |
| height: 0px; |
| margin-top: 0px; |
| margin-right: 0px; |
| margin-bottom: 0px; |
| margin-left: 0px; |
| overflow: visible; |
| } |
| .download-button, .select-all-button, .unselect-all-button { |
| font-family: 'Times New Roman', serif; |
| text-align: center; |
| height: 40px; |
| color: #ab22fe; |
| border: 3px solid #2197f2; |
| background-color: transparent; |
| border-radius: 4px; |
| background-position: left bottom; |
| transition: all 0.5s ease-out; |
| transform: scale(0.8); |
| vertical-align: middle; |
| z-index: 1; |
| } |
| .download-button { |
| margin-top: 380px; |
| margin-right: 30px; |
| margin-bottom: 0px; |
| margin-left: 100px; |
| font-size: 22px; |
| width: 500px; |
| font-weight: bold; |
| } |
|
|
| .select-all-button { |
| margin-top: 380px; |
| margin-right: -30px; |
| margin-bottom: 0px; |
| margin-left: 30px; |
| font-size: 21px; |
| width: 300px; |
| } |
|
|
| .unselect-all-button { |
| margin-top: 380px; |
| margin-right: -30px; |
| margin-bottom: 0px; |
| margin-left: 20px; |
| font-size: 21px; |
| width: 300px; |
| } |
|
|
| .download-button:hover, .select-all-button:hover, .unselect-all-button:hover { |
| font-weight: bold; |
| color: #212121; |
| border-radius: 4px; |
| border: 3px solid transparent; |
| background-image: var(--cn-gradient-bg2); |
| background-size: 800% 500%; |
| background-position: left bottom; |
| transition: border 0s; |
| cursor: pointer; |
| transition: none; |
| vertical-align: middle; |
| transform: scale(0.9); |
| animation: slideBackground 10s linear infinite, BorderPulse 7s infinite; |
| transition: all 0.3s ease-out; |
| } |
|
|
| .border-style { |
| position: absolute; |
| display: block; |
| bottom: -430px; |
| left: 49%; |
| transform: translateX(-50%); |
| width: 600px; |
| height: 55px; |
| border: 3px solid #ab22fe; |
| border-radius: 50px; |
| background-color: #212121; |
| padding: 0px; |
| } |
|
|
| .checkbox-group1 input[type="checkbox"], |
| .checkbox-group2 input[type="checkbox"] { |
| margin-top: -3px; |
| margin-right: 10px; |
| margin-bottom: 0px; |
| margin-left: 0px; |
| vertical-align: middle; |
| } |
|
|
| .checkbox-group1 label { |
| font-size: 12px; |
| color: white; |
| margin-top: 2px; |
| margin-right: -50px; |
| margin-left: 50px; |
| margin-bottom: -5px; |
| } |
|
|
| .checkbox-group2 label { |
| font-size: 12px; |
| color: white; |
| margin-top: 2px; |
| margin-right: -50px; |
| margin-left: 0px; |
| margin-bottom: -5px; |
| vertical-align: middle; |
| } |
|
|
| .checkbox-group1 label:hover { |
| margin-top: -10px; |
| margin-right: -50px; |
| margin-bottom: -50px; |
| margin-left: 40px; |
| transform: translateY(0px) translateX(-3px); |
| border-radius: 10px; |
| padding-left: 10px; |
| padding-right: 10px; |
| padding-bottom: 0px; |
| color: #ab22fe; |
| background-color: #212121; |
| border: 3px solid #2197f2; |
| transition: border 0s; |
| cursor: pointer; |
| transition: none; |
| } |
|
|
| .checkbox-group2 label:hover { |
| margin-top: -10px; |
| margin-right: -50px; |
| margin-bottom: -50px; |
| margin-left: 0px; |
| transform: translateY(0px) translateX(-13px); |
| border-radius: 10px; |
| padding-left: 10px; |
| padding-right: 10px; |
| padding-bottom: 0px; |
| color: #ab22fe; |
| background-color: #212121; |
| border: 3px solid #2197f2; |
| transition: border 0s; |
| cursor: pointer; |
| transition: none; |
| } |
|
|
| .checkbox-group1 label:active, .checkbox-group2 label:active { |
| background-image: var(--cn-gradient-bg2); |
| background-size: 800% 500%; |
| animation: slideBackground 10s linear infinite, BorderPulse 7s infinite; |
| font-weight: bold; |
| color: #212121;} |
|
|
| @keyframes slideBackground { |
| 0% { background-position: 0% 50%; } |
| 100% { background-position: -800% 50%; }} |
|
|
| @keyframes BorderPulse { |
| 0% {border-color: rgba(255, 0, 0, 1);} |
| 1.67% {border-color: rgba(255, 0, 25, 0.75);} |
| 3.33% {border-color: rgba(255, 0, 50, 0.5);} |
| 5.00% {border-color: rgba(255, 0, 75, 0.75);} |
| 6.67% {border-color: rgba(255, 0, 100, 1);} |
| 8.33% {border-color: rgba(255, 0, 125, 0.75);} |
| 10.00% {border-color: rgba(255, 0, 150, 0.5);} |
| 11.67% {border-color: rgba(255, 0, 175, 0.75);} |
| 13.33% {border-color: rgba(255, 0, 200, 1);} |
| 15.00% {border-color: rgba(255, 0, 225, 0.75);} |
| 16.67% {border-color: rgba(255, 0, 255, 0.5);} |
| 18.33% {border-color: rgba(225, 0, 255, 0.75);} |
| 20.00% {border-color: rgba(200, 0, 255, 1);} |
| 21.67% {border-color: rgba(175, 0, 255, 0.75);} |
| 23.33% {border-color: rgba(150, 0, 255, 0.5);} |
| 25.00% {border-color: rgba(125, 0, 255, 0.75);} |
| 26.67% {border-color: rgba(100, 0, 255, 1);} |
| 28.33% {border-color: rgba(75, 0, 255, 0.75);} |
| 30.00% {border-color: rgba(50, 0, 255, 0.5);} |
| 31.67% {border-color: rgba(25, 0, 255, 0.75);} |
| 33.33% {border-color: rgba(0, 0, 255, 1);} |
| 35.00% {border-color: rgba(0, 25, 255, 0.75);} |
| 36.67% {border-color: rgba(0, 50, 255, 0.5);} |
| 38.33% {border-color: rgba(0, 75, 255, 0.75);} |
| 40.00% {border-color: rgba(0, 100, 255, 1);} |
| 41.67% {border-color: rgba(0, 125, 255, 0.75);} |
| 43.33% {border-color: rgba(0, 150, 255, 0.5);} |
| 45.00% {border-color: rgba(0, 175, 255, 0.75);} |
| 46.67% {border-color: rgba(0, 200, 255, 1);} |
| 48.33% {border-color: rgba(0, 225, 255, 0.75);} |
| 50.00% {border-color: rgba(0, 255, 255, 0.5);} |
| 51.67% {border-color: rgba(0, 255, 225, 0.75);} |
| 53.33% {border-color: rgba(0, 255, 200, 1);} |
| 55.00% {border-color: rgba(0, 255, 175, 0.75);} |
| 56.67% {border-color: rgba(0, 255, 150, 0.5);} |
| 58.33% {border-color: rgba(0, 255, 125, 0.75);} |
| 60.00% {border-color: rgba(0, 255, 100, 1);} |
| 61.67% {border-color: rgba(0, 255, 75, 0.75);} |
| 63.33% {border-color: rgba(0, 255, 50, 0.5);} |
| 65.00% {border-color: rgba(0, 255, 25, 0.75);} |
| 66.67% {border-color: rgba(0, 255, 0, 1);} |
| 68.33% {border-color: rgba(25, 255, 0, 0.75);} |
| 70.00% {border-color: rgba(50, 255, 0, 0.5);} |
| 71.67% {border-color: rgba(75, 255, 0, 0.75);} |
| 73.33% {border-color: rgba(100, 255, 0, 1);} |
| 75.00% {border-color: rgba(125, 255, 0, 0.75);} |
| 76.67% {border-color: rgba(150, 255, 0, 0.5);} |
| 78.33% {border-color: rgba(175, 255, 0, 0.75);} |
| 80.00% {border-color: rgba(200, 255, 0, 1);} |
| 81.67% {border-color: rgba(225, 255, 0, 0.75);} |
| 83.33% {border-color: rgba(255, 255, 0, 0.5);} |
| 85.00% {border-color: rgba(255, 225, 0, 0.75);} |
| 86.67% {border-color: rgba(255, 200, 0, 1);} |
| 88.33% {border-color: rgba(255, 175, 0, 0.75);} |
| 90.00% {border-color: rgba(255, 150, 0, 0.5);} |
| 91.67% {border-color: rgba(255, 125, 0, 0.75);} |
| 93.33% {border-color: rgba(255, 100, 0, 1);} |
| 95.00% {border-color: rgba(255, 75, 0, 0.75);} |
| 96.67% {border-color: rgba(255, 50, 0, 0.5);} |
| 98.33% {border-color: rgba(255, 25, 0, 0.75);} |
| 100% {border-color: rgba(255, 0, 0, 1);}} |
|
|
| @keyframes slide-blur-above { |
| from { |
| height: 0px; |
| opacity: 0; |
| filter: blur(100px); |
| } |
| to { |
| height: 455px; |
| opacity: 1; |
| filter: blur(0px);}} |
|
|
| .gradient-cn2 { |
| width: 750px; |
| height: 5px; |
| font-size: 0px; |
| background-image: var(--cn-gradient-bg2); |
| background-size: 800% 500%; |
| color: black; |
| border-radius: 2px; |
| border: 1px solid transparent; |
| display: inline-block; |
| animation: slideBackground 20s linear infinite, BorderPulse 7s infinite; |
| transition: all 0.3s ease-out;} |
|
|
