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

style(modals): add pixelated image rendering for button icons

Browse Source
This commit is contained in:
plebeius.eth
2023-09-29 12:31:05 +02:00
parent e9cfdac18f
commit 631a359edd
6 changed files with 132 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/AdminListModal.jsx
+1 -1
View File
@@ -43,7 +43,7 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
maxHeight: '250px', maxHeight: '250px',
}} }}
> >
<button className='icon' onClick={() => closeModal()} title='close' /> <button className='icon' style={{ imageRendering: 'pixelated', margin: '1px 1px 0 0' }} onClick={() => closeModal()} title='close' />
<div className='modal-header'>   Moderators</div> <div className='modal-header'>   Moderators</div>
<div <div
className='list' className='list'
src/components/styled/modals/CaptchaModal.styled.jsx
+93 -92
View File
@@ -2,94 +2,95 @@ import styled from 'styled-components';
import Modal from 'react-modal'; import Modal from 'react-modal';
export const StyledModal = styled(Modal)` export const StyledModal = styled(Modal)`
.hide-modal-overlay { .hide-modal-overlay {
display: none; display: none;
} }
.modal-content { .modal-content {
position: fixed; position: fixed;
top: calc(50% - 150px); top: calc(50% - 150px);
left: calc(50% - 150px); left: calc(50% - 150px);
display: block; display: block;
padding: 2px; padding: 2px;
font-size: 10pt; font-size: 10pt;
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
.modal-header { .modal-header {
font-size: 10pt; font-size: 10pt;
text-align: center; text-align: center;
margin-bottom: 1px; margin-bottom: 1px;
padding: 0; padding: 0;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
cursor: move; cursor: move;
font-weight: 700; font-weight: 700;
} }
.icon { .icon {
all: unset; all: unset;
float: right; float: right;
cursor: pointer; cursor: pointer;
margin-bottom: -4px; margin-bottom: -4px;
width: 18px; width: 18px;
height: 18px; height: 18px;
border: none; border: none;
} image-rendering: pixelated;
}
#field { #field {
border: 1px solid #aaa; border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 10pt; font-size: 10pt;
outline: medium none; outline: medium none;
width: 298px; width: 298px;
padding: 2px; padding: 2px;
} }
textarea { textarea {
min-width: 296px; min-width: 296px;
float: left; float: left;
font-size: 10pt; font-size: 10pt;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
#captcha-container { #captcha-container {
position: relative; position: relative;
width: 302px; width: 302px;
height: 100px; height: 100px;
overflow: hidden; overflow: hidden;
margin-bottom: 17px; margin-bottom: 17px;
} }
#response { #response {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 11px; font-size: 11px;
height: 18px; height: 18px;
margin: 0px; margin: 0px;
padding: 0px 2px; padding: 0px 2px;
font-family: monospace; font-family: monospace;
vertical-align: middle; vertical-align: middle;
} }
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative; position: relative;
display: block; display: block;
} }
#nav { #nav {
float: right; float: right;
margin: 0; margin: 0;
width: auto; width: auto;
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return ` return `
.modal-content { .modal-content {
background-color: #f0e0d6; background-color: #f0e0d6;
border: 1px solid #d9bfb7; border: 1px solid #d9bfb7;
@@ -109,8 +110,8 @@ export const StyledModal = styled(Modal)`
color: maroon; color: maroon;
}`; }`;
case 'Yotsuba-B': case 'Yotsuba-B':
return ` return `
.modal-content { .modal-content {
background-color: #d6daf0; background-color: #d6daf0;
border: 1px solid #b7c5d9; border: 1px solid #b7c5d9;
@@ -130,8 +131,8 @@ export const StyledModal = styled(Modal)`
color: #000; color: #000;
}`; }`;
case 'Futaba': case 'Futaba':
return ` return `
.modal-content { .modal-content {
background-color: #f0e0d6; background-color: #f0e0d6;
border: 1px solid #d9bfb7; border: 1px solid #d9bfb7;
@@ -151,8 +152,8 @@ export const StyledModal = styled(Modal)`
color: maroon; color: maroon;
}`; }`;
case 'Burichan': case 'Burichan':
return ` return `
.modal-content { .modal-content {
background-color: #d6daf0; background-color: #d6daf0;
border: 1px solid #b7c5d9; border: 1px solid #b7c5d9;
@@ -172,8 +173,8 @@ export const StyledModal = styled(Modal)`
color: #000; color: #000;
}`; }`;
case 'Tomorrow': case 'Tomorrow':
return ` return `
.modal-content { .modal-content {
background-color: #282a2e; background-color: #282a2e;
border: 1px solid #111; border: 1px solid #111;
@@ -216,8 +217,8 @@ export const StyledModal = styled(Modal)`
filter: brightness(80%); filter: brightness(80%);
}`; }`;
case 'Photon': case 'Photon':
return ` return `
.modal-content { .modal-content {
background-color: #ddd; background-color: #ddd;
border: 1px solid #ccc; border: 1px solid #ccc;
@@ -236,8 +237,8 @@ export const StyledModal = styled(Modal)`
color: #333; color: #333;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
src/components/styled/modals/CreateBoardModal.styled.jsx
+14 -12
View File
@@ -1,5 +1,5 @@
import styled from "styled-components"; import styled from 'styled-components';
import Modal from "react-modal"; import Modal from 'react-modal';
export const StyledModal = styled(Modal)` export const StyledModal = styled(Modal)`
.modal-content { .modal-content {
@@ -9,10 +9,10 @@ export const StyledModal = styled(Modal)`
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 450px; width: 450px;
height: auto; height: auto;
max-height: calc(100vh - 2*50px); max-height: calc(100vh - 2 * 50px);
overflow-y: auto; overflow-y: auto;
padding: 5px; padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
} }
.modal-header { .modal-header {
@@ -33,9 +33,12 @@ export const StyledModal = styled(Modal)`
width: 18px; width: 18px;
height: 18px; height: 18px;
border: none; border: none;
image-rendering: pixelated;
} }
#name, #description, #rule { #name,
#description,
#rule {
border: 1px solid #aaa; border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 10pt; font-size: 10pt;
@@ -73,7 +76,6 @@ export const StyledModal = styled(Modal)`
} }
#rule { #rule {
} }
#rule-btn { #rule-btn {
@@ -324,10 +326,10 @@ export const StyledModal = styled(Modal)`
span { span {
color: #000; color: #000;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
src/components/styled/modals/ModerationModal.styled.jsx
+13 -11
View File
@@ -1,4 +1,4 @@
import styled from "styled-components"; import styled from 'styled-components';
import Modal from 'react-modal'; import Modal from 'react-modal';
export const StyledModal = styled(Modal)` export const StyledModal = styled(Modal)`
@@ -13,7 +13,7 @@ export const StyledModal = styled(Modal)`
position: absolute; position: absolute;
padding: 2px 5px 5px; padding: 2px 5px 5px;
font-size: 14px; font-size: 14px;
box-shadow: 0 0 5px rgba(0, 0, 0, .25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
@media (max-width: 480px) { @media (max-width: 480px) {
width: 320px !important; width: 320px !important;
@@ -27,12 +27,12 @@ export const StyledModal = styled(Modal)`
width: 700px; width: 700px;
height: auto; height: auto;
max-height: 80%; max-height: 80%;
left: calc(50% - 350px); left: calc(50% - 350px);
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
padding: 2px 5px 5px; padding: 2px 5px 5px;
font-size: 14px; font-size: 14px;
box-shadow: 0 0 5px rgba(0, 0, 0, .25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
@media (max-width: 800px) { @media (max-width: 800px) {
width: 80%; width: 80%;
@@ -66,6 +66,7 @@ export const StyledModal = styled(Modal)`
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 5px; top: 5px;
image-rendering: pixelated;
} }
h4 { h4 {
@@ -171,7 +172,8 @@ export const StyledModal = styled(Modal)`
margin-bottom: 10px; margin-bottom: 10px;
} }
#save-board-settings, #reset-board-settings { #save-board-settings,
#reset-board-settings {
text-align: center; text-align: center;
} }
@@ -184,7 +186,7 @@ export const StyledModal = styled(Modal)`
} }
.settings-info strong { .settings-info strong {
margin-bottom: 10px; margin-bottom: 10px;
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
@@ -378,9 +380,9 @@ export const StyledModal = styled(Modal)`
color: #f30 !important; color: #f30 !important;
} }
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
src/components/styled/modals/ReplyModal.styled.jsx
+9 -8
View File
@@ -1,5 +1,5 @@
import styled from "styled-components"; import styled from 'styled-components';
import Modal from "react-modal"; import Modal from 'react-modal';
export const StyledModal = styled(Modal)` export const StyledModal = styled(Modal)`
.modal-content { .modal-content {
@@ -32,6 +32,7 @@ export const StyledModal = styled(Modal)`
width: 18px; width: 18px;
height: 18px; height: 18px;
border: none; border: none;
image-rendering: pixelated;
} }
#name { #name {
@@ -249,10 +250,10 @@ export const StyledModal = styled(Modal)`
span { span {
color: #000; color: #000;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
src/components/styled/modals/SettingsModal.styled.jsx
+2
View File
@@ -50,6 +50,7 @@ export const StyledModal = styled(Modal)`
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 5px; top: 5px;
image-rendering: pixelated;
} }
h4 { h4 {
@@ -80,6 +81,7 @@ export const StyledModal = styled(Modal)`
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
display: inline-block; display: inline-block;
image-rendering: pixelated;
} }
.settings-cat { .settings-cat {