94 lines
2.2 KiB
CSS
94 lines
2.2 KiB
CSS
|
/*
|
||
|
|
Author: Kashif Raza
|
||
|
|
Author URI: http://www.kashifraza.tech
|
||
|
|
Description: This is the main css file for the Captcha file.
|
||
|
|
Version: 1.0
|
||
|
|
*/
|
||
|
|
/* Styling for form-container */
|
||
|
|
/* Style Font for Captcha */
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');
|
||
|
|
|
||
|
|
input:focus, textarea:focus, select:focus{
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.form-with-captcha{
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
background: inherit;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.captcha-enabled-form{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.captcha-container{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
min-width: 198.5px;
|
||
|
|
max-width: 400px;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
margin-top: 8px;
|
||
|
|
/* Border for removal after upload */
|
||
|
|
/* border: 1px solid #000; */
|
||
|
|
box-shadow: 0px 0px 5px #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.captcha-input{
|
||
|
|
padding: 2px;
|
||
|
|
margin-right: 5px;
|
||
|
|
border: 1px solid grey;
|
||
|
|
min-height: 25px;
|
||
|
|
border-radius: 1px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.captcha-input:focus{
|
||
|
|
border: 1px solid #0099ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.captcha-verify{
|
||
|
|
padding: 4px;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 2px;
|
||
|
|
min-height: 31px;
|
||
|
|
width: 70px;
|
||
|
|
text-align: center;
|
||
|
|
background: #0099ff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.captcha-verify:hover{
|
||
|
|
background: #0099ff;
|
||
|
|
color: white;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.captcha-image{
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 40px;
|
||
|
|
font-size: 1.2em;
|
||
|
|
align-items: center;
|
||
|
|
font-family: 'Coming Soon', cursive;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
text-align: center;
|
||
|
|
background-image: linear-gradient(30deg, #f74324, #d2dfd3, #25e098, #d2dfd3, #f74324, #d2dfd3, #25e098, #d2dfd3, #f74324, #d2dfd3, #25e098, #d2dfd3, #f74324, #d2dfd3, #25e098, #d2dfd3, #f74324, #d2dfd3, #25e098, #d2dfd3, #f74324, #d2dfd3, #25e098, #d2dfd3, #25e098, #d2dfd3, #f74324, #d2dfd3, #25e098, #d2dfd3);
|
||
|
|
}
|
||
|
|
.captcha-refresh{
|
||
|
|
padding: 4px;
|
||
|
|
border: 1px solid grey;
|
||
|
|
border-radius: 2px;
|
||
|
|
min-height: 31px;
|
||
|
|
margin-top: 2px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
width: 70px;
|
||
|
|
text-align: center;
|
||
|
|
background: #20b340;
|
||
|
|
color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|