External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(CaptchaModal): improve captcha visibility by fixing margin

Browse Source
This commit is contained in:
plebeius.eth
2023-09-22 12:32:25 +02:00
parent 51b50c1cfa
commit a312c64bb0
1 changed files with 96 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/modals/CaptchaModal.styled.jsx
+96 -98
View File
@@ -1,97 +1,95 @@
import styled from "styled-components";
import styled from 'styled-components';
import Modal from 'react-modal';
export const StyledModal = styled(Modal)`
.hide-modal-overlay {
display: none;
}
.hide-modal-overlay {
display: none;
}
.modal-content {
position: fixed;
top: calc(50% - 150px);
left: calc(50% - 150px);
display: block;
padding: 2px;
font-size: 10pt;
border-left: none;
border-top: none;
}
.modal-content {
position: fixed;
top: calc(50% - 150px);
left: calc(50% - 150px);
display: block;
padding: 2px;
font-size: 10pt;
border-left: none;
border-top: none;
}
.modal-header {
font-size: 10pt;
text-align: center;
margin-bottom: 1px;
padding: 0;
height: 18px;
line-height: 18px;
cursor: move;
font-weight: 700;
}
.modal-header {
font-size: 10pt;
text-align: center;
margin-bottom: 1px;
padding: 0;
height: 18px;
line-height: 18px;
cursor: move;
font-weight: 700;
}
.icon {
all: unset;
float: right;
cursor: pointer;
margin-bottom: -4px;
width: 18px;
height: 18px;
border: none;
}
.icon {
all: unset;
float: right;
cursor: pointer;
margin-bottom: -4px;
width: 18px;
height: 18px;
border: none;
}
#field {
border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
outline: medium none;
width: 298px;
padding: 2px;
}
#field {
border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
outline: medium none;
width: 298px;
padding: 2px;
}
textarea {
min-width: 296px;
float: left;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
}
textarea {
min-width: 296px;
float: left;
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
}
#captcha-container {
position: relative;
clear: both;
width: 302px;
height: 100px;
overflow: hidden;
margin-bottom: 3px;
}
#captcha-container {
position: relative;
width: 302px;
height: 100px;
overflow: hidden;
margin-bottom: 17px;
}
#response {
width: 100%;
box-sizing: border-box;
font-size: 11px;
height: 18px;
margin: 0px;
padding: 0px 2px;
font-family: monospace;
vertical-align: middle;
}
#response {
width: 100%;
box-sizing: border-box;
font-size: 11px;
height: 18px;
margin: 0px;
padding: 0px 2px;
font-family: monospace;
vertical-align: middle;
}
img {
height: 100%;
width: 100%;
margin-top: 2px;
position: relative;
display: block;
}
img {
height: 100%;
width: 100%;
position: relative;
display: block;
}
#nav {
float: right;
margin: 0;
width: auto;
}
#nav {
float: right;
margin: 0;
width: auto;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `
.modal-content {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
@@ -111,8 +109,8 @@ export const StyledModal = styled(Modal)`
color: maroon;
}`;
case 'Yotsuba-B':
return `
case 'Yotsuba-B':
return `
.modal-content {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
@@ -132,8 +130,8 @@ export const StyledModal = styled(Modal)`
color: #000;
}`;
case 'Futaba':
return `
case 'Futaba':
return `
.modal-content {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
@@ -153,8 +151,8 @@ export const StyledModal = styled(Modal)`
color: maroon;
}`;
case 'Burichan':
return `
case 'Burichan':
return `
.modal-content {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
@@ -174,8 +172,8 @@ export const StyledModal = styled(Modal)`
color: #000;
}`;
case 'Tomorrow':
return `
case 'Tomorrow':
return `
.modal-content {
background-color: #282a2e;
border: 1px solid #111;
@@ -218,8 +216,8 @@ export const StyledModal = styled(Modal)`
filter: brightness(80%);
}`;
case 'Photon':
return `
case 'Photon':
return `
.modal-content {
background-color: #ddd;
border: 1px solid #ccc;
@@ -236,10 +234,10 @@ export const StyledModal = styled(Modal)`
span {
color: #333;
}`;
default:
return '';
}
}}
`;
}`;
default:
return '';
}
}}
`;