diff --git a/src/components/styled/modals/CaptchaModal.styled.jsx b/src/components/styled/modals/CaptchaModal.styled.jsx index 04f21ca6..aa22844e 100644 --- a/src/components/styled/modals/CaptchaModal.styled.jsx +++ b/src/components/styled/modals/CaptchaModal.styled.jsx @@ -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 ''; - } - }} -`; \ No newline at end of file + }`; + + default: + return ''; + } + }} +`;