mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-06-16 18:29:08 +00:00
fix a load of linting issues
This commit is contained in:
parent
928c9cf07c
commit
057e9f96b4
31 changed files with 375 additions and 411 deletions
|
|
@ -16,6 +16,7 @@ const Chat = styled.div`
|
|||
padding: 10px 0;
|
||||
font-size: 0.8em;
|
||||
${() => MediaQuery({ sm: 'font-size: 1em;' })}
|
||||
|
||||
& span {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
|
@ -23,21 +24,19 @@ const Chat = styled.div`
|
|||
`
|
||||
|
||||
const TextArea = styled.div`
|
||||
background-color: hsla(218,5%,47%,.3);
|
||||
background-color: hsla(218, 5%, 47%, 0.3);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
${() => MediaQuery({ sm: 'font-size: 1em;' })}
|
||||
|
||||
& .Typist .Cursor {
|
||||
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
border-left: 1px solid var(--c-white);
|
||||
user-select: none;
|
||||
|
||||
&--blinking {
|
||||
|
||||
opacity: 1;
|
||||
animation: blink 2s ease-in-out infinite;
|
||||
|
||||
|
|
@ -45,9 +44,11 @@ const TextArea = styled.div`
|
|||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -58,7 +59,7 @@ const TextArea = styled.div`
|
|||
|
||||
const Timestamp = styled.span`
|
||||
font-size: 0.7em;
|
||||
color: hsla(0,0%,100%,.2);
|
||||
color: hsla(0, 0%, 100%, 0.2);
|
||||
`
|
||||
|
||||
const Username = styled.span`
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ const Button = styled.a`
|
|||
color: var(--c-white);
|
||||
padding: 0.4em 1em;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0);
|
||||
transition: all 0.3s ease-in-out;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -28,22 +28,23 @@ const Button = styled.a`
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
transition: all 0.35s ease-in-out;
|
||||
background-color: hsla(0,0%,100%,0.1);
|
||||
background-color: hsla(0, 0%, 100%, 0.1);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.75);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
|
||||
transform: translateY(-1px);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ const Fallback = styled.div`
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--fallback-color);
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -23,69 +23,67 @@ const getColors = () => {
|
|||
}
|
||||
|
||||
export default createGlobalStyle`
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* prevent FOUC */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
color: var(--c-white);
|
||||
background-color: var(--c-1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.font-sans-serif {
|
||||
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
.font-sans-serif {
|
||||
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
:root {
|
||||
${() => getColors()}
|
||||
--not-quite-black: #23272A;
|
||||
--dark-but-not-black: #2C2F33;
|
||||
--greyple: #99AAB5;
|
||||
--blurple: var(--c-discord);
|
||||
}
|
||||
::selection {
|
||||
background: var(--c-9);
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--c-9);
|
||||
color: var(--c-1);
|
||||
}
|
||||
::-moz-selection {
|
||||
background: var(--c-9);
|
||||
color: var(--c-1);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--c-9);
|
||||
color: var(--c-1);
|
||||
}
|
||||
:root {
|
||||
${() => getColors()}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
--not-quite-black: #23272a;
|
||||
--dark-but-not-black: #2c2f33;
|
||||
--greyple: #99aab5;
|
||||
--blurple: var(--c-discord);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
color: var(--c-white);
|
||||
background-color: var(--c-1);
|
||||
/* overflow-y: hidden; */
|
||||
}
|
||||
html {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: var(--c-9);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--c-9);
|
||||
}
|
||||
|
||||
.fade-element {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-element {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ const LogoBox = styled.a`
|
|||
|
||||
const StyledServerPic = styled(DiscordIcon)`
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 1px rgba(0,0,0,0.1);
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ export type CommonProps = {
|
|||
}
|
||||
|
||||
const Header = styled.div`
|
||||
background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark);' : 'var(--c-1);'}
|
||||
position: relative;
|
||||
background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark)' : 'var(--c-1)'};
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@ const LoginButton = styled.a`
|
|||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.75);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
|
||||
background-color: var(--c-green);
|
||||
border-color: rgba(0,0,0,0.25);
|
||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
|
||||
border-color: rgba(0, 0, 0, 0.25);
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ import { type User } from '../stores/user'
|
|||
import styled from 'styled-components'
|
||||
|
||||
const LayoutWrapper = styled.div`
|
||||
transition: opacity: 0.1s ease-out;
|
||||
transition: opacity 0.1s ease-out;
|
||||
opacity: 0;
|
||||
.wf-active &, .force-active & {
|
||||
|
||||
.wf-active &,
|
||||
.force-active & {
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
|
@ -20,7 +22,6 @@ const ContentBox = styled.div`
|
|||
max-width: 100vw;
|
||||
padding: 5px;
|
||||
padding-top: 50px;
|
||||
/* max-height: calc(100vh - 50px); */
|
||||
`
|
||||
|
||||
const Layout = ({ children, user, noBackground, router }: {children: React.Element<any>, user: User, noBackground: boolean, router: * }) => <>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,8 @@ import MediaQuery from '../../kit/media'
|
|||
export default styled.div`
|
||||
border: solid 1px var(--role-color-outline);
|
||||
border-radius: 1.2em;
|
||||
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
|
@ -15,24 +13,18 @@ export default styled.div`
|
|||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
|
||||
font-size: 1.2em;
|
||||
line-height: 20px;
|
||||
|
||||
margin: 0.3em;
|
||||
padding: 4px 0.5em;
|
||||
|
||||
min-height: 32px;
|
||||
max-width: 90vw;
|
||||
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
transform: rotateZ(0);
|
||||
|
||||
${(props: any) => (props.active) ? `
|
||||
box-shadow: inset 0 0 0 3em var(--role-color-outline-alt);
|
||||
` : `
|
||||
|
|
@ -42,39 +34,44 @@ export default styled.div`
|
|||
/* padding-top: 4px; */
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border-color: hsl(0, 0%, 40%);
|
||||
color: hsla(0, 0%, 40%, 0.7);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
${(props: any) => (props.active)
|
||||
? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
|
||||
background-color: hsl(0,0%,40%);`
|
||||
: ``}
|
||||
|
||||
&::after {
|
||||
border-color: hsl(0, 0%, 40%);
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
border-color: hsl(0, 0%, 40%);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: translateY(-1px) rotateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0,0,0,0.75);
|
||||
border-color: var(--role-color-active);
|
||||
clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: 2px;
|
||||
top: 4px;
|
||||
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
border: 1px solid var(--role-color-base);
|
||||
border-radius: 100%;
|
||||
|
||||
clip-path: border-box circle(50.2% at 50% 50%); /* this is just for you, firefox. */
|
||||
|
||||
transform: rotateZ(0);
|
||||
${(props: any) => (props.active) ? `
|
||||
transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 1ms ease-in-out 0.29s;
|
||||
|
|
@ -84,6 +81,17 @@ export default styled.div`
|
|||
`}
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: translateY(-1px) rotateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
|
||||
border-color: var(--role-color-active);
|
||||
clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
${(props: any) => MediaQuery({
|
||||
md: `
|
||||
font-size: 1em;
|
||||
|
|
@ -100,25 +108,4 @@ export default styled.div`
|
|||
}
|
||||
`
|
||||
})}
|
||||
|
||||
&[disabled] {
|
||||
border-color: hsl(0,0%,40%);
|
||||
color: hsla(0,0%,40%,0.7);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
${(props: any) => (props.active) ? `
|
||||
box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
|
||||
background-color: hsl(0,0%,40%);`
|
||||
: ``};
|
||||
|
||||
&::after {
|
||||
border-color: hsl(0,0%,40%);
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
border-color: hsl(0,0%,40%);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default styled.div`
|
|||
position: absolute;
|
||||
bottom: 35px;
|
||||
font-size: 0.9em;
|
||||
background-color: rgba(0,0,0,0.50);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 5px;
|
||||
color: var(--c-red);
|
||||
border-radius: 3px;
|
||||
|
|
@ -14,7 +14,6 @@ export default styled.div`
|
|||
opacity: 0.99;
|
||||
overflow: auto;
|
||||
pointer-events: none;
|
||||
/* max-width: 50vw; */
|
||||
white-space: normal;
|
||||
${() => MediaQuery({ md: `
|
||||
white-space: nowrap; `
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue