diff --git a/src/components/wiki-captcha-js/wiki-captcha-js.css b/src/components/wiki-captcha-js/wiki-captcha-js.css
index 773df83..bce5bb0 100644
--- a/src/components/wiki-captcha-js/wiki-captcha-js.css
+++ b/src/components/wiki-captcha-js/wiki-captcha-js.css
@@ -1,126 +1,129 @@
:host {
font-family: sans-serif;
- border: 2px solid var(--color-primary, black);
+ /*border: 2px solid var(--color-primary, black);*/
margin: 2rem;
padding: 1rem;
display: block;
max-width: 100%;
+ min-height: 26rem;
box-shadow: 0 2px 8px rgba(0,0,0,.26);
border-radius: 3px;
width: 20rem;
overflow: hidden;
}
.wiki-captcha-box {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
+ justify-content: center;
max-width: 100%;
+ min-height: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
.wiki-captcha-error {
color: red;
margin-bottom: 0;
}
.wiki-captcha-img-container {
display: flex;
flex-wrap: wrap;
width: 15rem;
max-width: 100%;
justify-content: center;
border-radius: 3px;
overflow: hidden;
align-self: center;
- border: 2px solid var(--color-primary, black);
- box-shadow: 0 2px 8px rgba(0,0,0,.26);
+ /*border: 2px solid var(--color-primary, black);*/
+ box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.wiki-captcha-img,
.wiki-captcha-img-selected {
width: 100%;
height: 6rem;
flex: 1 0 30%; /* 3 images per row */
}
.wiki-captcha-img-overlay {
display: inline-block;
position: relative;
width: 33.3%;
height: 6rem;
z-index: 1;
cursor: pointer;
}
.wiki-captcha-img-overlay-on:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(117, 1, 117, 0.5);
}
.wiki-captcha-img-overlay-off:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(117, 1, 117, 0.0);
}
.wiki-captcha-footer {
display: flex;
align-items: center;
padding-top: .5rem;
}
.wiki-captcha-powered-by {
display: flex;
justify-content: flex-end;
padding-top: .5rem;
}
.wiki-captcha-powered-by-icon {
max-width: 20%;
}
.wiki-captcha-submit {
}
button,
button:focus {
outline: none;
}
button {
font: inherit;
padding: 0.25rem 0.5rem;
border: 1px solid var(--color-primary, black);
background: var(--color-primary, black);
color: var(--color-primary-inverse, white);
cursor: pointer;
}
button:hover,
button:active {
background: var(--color-primary-highlight, grey);
border-color: var(--color-primary-highlight, grey);
}
button:disabled {
background: #ccc;
border-color: #ccc;
color: white;
cursor: not-allowed;
}
p {
align-self: center;
}
diff --git a/src/index.html b/src/index.html
index 21752d1..08733b4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,48 +1,54 @@
Stencil Component Starter
+
+