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',
}}
>
<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='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';
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;
image-rendering: pixelated;
}
#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;
width: 302px;
height: 100px;
overflow: hidden;
margin-bottom: 17px;
}
#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%;
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;
@@ -109,8 +110,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;
@@ -130,8 +131,8 @@ export const StyledModal = styled(Modal)`
color: #000;
}`;
case 'Futaba':
return `
case 'Futaba':
return `
.modal-content {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
@@ -151,8 +152,8 @@ export const StyledModal = styled(Modal)`
color: maroon;
}`;
case 'Burichan':
return `
case 'Burichan':
return `
.modal-content {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
@@ -172,8 +173,8 @@ export const StyledModal = styled(Modal)`
color: #000;
}`;
case 'Tomorrow':
return `
case 'Tomorrow':
return `
.modal-content {
background-color: #282a2e;
border: 1px solid #111;
@@ -216,8 +217,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,8 +237,8 @@ export const StyledModal = styled(Modal)`
color: #333;
}`;
default:
return '';
}
}}
default:
return '';
}
}}
`;
src/components/styled/modals/CreateBoardModal.styled.jsx
+14 -12
View File
@@ -1,5 +1,5 @@
import styled from "styled-components";
import Modal from "react-modal";
import styled from 'styled-components';
import Modal from 'react-modal';
export const StyledModal = styled(Modal)`
.modal-content {
@@ -9,10 +9,10 @@ export const StyledModal = styled(Modal)`
transform: translate(-50%, -50%);
width: 450px;
height: auto;
max-height: calc(100vh - 2*50px);
max-height: calc(100vh - 2 * 50px);
overflow-y: auto;
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 {
@@ -33,9 +33,12 @@ export const StyledModal = styled(Modal)`
width: 18px;
height: 18px;
border: none;
image-rendering: pixelated;
}
#name, #description, #rule {
#name,
#description,
#rule {
border: 1px solid #aaa;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
@@ -73,7 +76,6 @@ export const StyledModal = styled(Modal)`
}
#rule {
}
#rule-btn {
@@ -324,10 +326,10 @@ export const StyledModal = styled(Modal)`
span {
color: #000;
}`;
default:
return '';
}
}`;
default:
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';
export const StyledModal = styled(Modal)`
@@ -13,7 +13,7 @@ export const StyledModal = styled(Modal)`
position: absolute;
padding: 2px 5px 5px;
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) {
width: 320px !important;
@@ -27,12 +27,12 @@ export const StyledModal = styled(Modal)`
width: 700px;
height: auto;
max-height: 80%;
left: calc(50% - 350px);
left: calc(50% - 350px);
overflow-y: auto;
position: absolute;
padding: 2px 5px 5px;
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) {
width: 80%;
@@ -66,6 +66,7 @@ export const StyledModal = styled(Modal)`
cursor: pointer;
position: absolute;
top: 5px;
image-rendering: pixelated;
}
h4 {
@@ -171,7 +172,8 @@ export const StyledModal = styled(Modal)`
margin-bottom: 10px;
}
#save-board-settings, #reset-board-settings {
#save-board-settings,
#reset-board-settings {
text-align: center;
}
@@ -184,7 +186,7 @@ export const StyledModal = styled(Modal)`
}
.settings-info strong {
margin-bottom: 10px;
margin-bottom: 10px;
}
${({ selectedStyle }) => {
@@ -378,9 +380,9 @@ export const StyledModal = styled(Modal)`
color: #f30 !important;
}
}`;
default:
return '';
}
default:
return '';
}
}}
`;
`;
src/components/styled/modals/ReplyModal.styled.jsx
+9 -8
View File
@@ -1,5 +1,5 @@
import styled from "styled-components";
import Modal from "react-modal";
import styled from 'styled-components';
import Modal from 'react-modal';
export const StyledModal = styled(Modal)`
.modal-content {
@@ -32,6 +32,7 @@ export const StyledModal = styled(Modal)`
width: 18px;
height: 18px;
border: none;
image-rendering: pixelated;
}
#name {
@@ -249,10 +250,10 @@ export const StyledModal = styled(Modal)`
span {
color: #000;
}`;
default:
return '';
}
}`;
default:
return '';
}
}}
`;
`;
src/components/styled/modals/SettingsModal.styled.jsx
+2
View File
@@ -50,6 +50,7 @@ export const StyledModal = styled(Modal)`
cursor: pointer;
position: absolute;
top: 5px;
image-rendering: pixelated;
}
h4 {
@@ -80,6 +81,7 @@ export const StyledModal = styled(Modal)`
background-repeat: no-repeat;
background-position: center;
display: inline-block;
image-rendering: pixelated;
}
.settings-cat {