427 lines
7.1 KiB
CSS
427 lines
7.1 KiB
CSS
@font-face {
|
|
font-family: 'Figtree';
|
|
src: url("fonts/Figtree.woff2") format("woff2");
|
|
font-style: normal;
|
|
}
|
|
|
|
html {
|
|
background: linear-gradient(to top left, rgb(217, 236, 255), rgb(228, 249, 255), rgb(221, 255, 238), rgb(249,255,253)) no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
:root {
|
|
--invertdm: 0%;
|
|
--text-color: #000000;
|
|
--editor: #ffffff;
|
|
--border-color: #dadada;
|
|
--theme-color: #1c71d8;
|
|
--hover-theme-color: #4990e7;
|
|
--nonimporant-theme-color: #EBEBEB;
|
|
--hover-nonimportant-theme-color: #dbdbdb;
|
|
--nonimportant-text-color: #000;
|
|
--inOutDiv: #fafafa;
|
|
--disabled: lightgray;
|
|
--disabled-hover: #a2a0a0;
|
|
--disabled-text-color: gray;
|
|
}
|
|
|
|
/* dark mode */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--invertdm: 100%;
|
|
--inOutDiv: #2d2f31;
|
|
--text-color: #ffffff;
|
|
--editor: #1E1E1E;
|
|
--nonimporant-theme-color: #8E8E8E;
|
|
--nonimportant-text-color: #fff;
|
|
--border-color: #393b3d;
|
|
--disabled: #606060;
|
|
--disabled-hover: #737373;
|
|
}
|
|
|
|
.inOutDiv p {
|
|
color: white !important;
|
|
}
|
|
|
|
.inOutDiv a {
|
|
color: #969696 !important;
|
|
}
|
|
|
|
.inOutDiv input {
|
|
color: white;
|
|
background-color: var(--editor);
|
|
}
|
|
}
|
|
|
|
p,
|
|
li,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
span,
|
|
text,
|
|
h6 {
|
|
color: var(--text-color);
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
p#statusBox {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Figtree", sans-serif;
|
|
}
|
|
|
|
/* Sign up/log in div */
|
|
|
|
.inOutDiv {
|
|
border-radius: 25px;
|
|
margin: 10%;
|
|
background-color: var(--inOutDiv);
|
|
padding: 35px 35px 50px;
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
input {
|
|
width: calc(100% - 35px);
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
height: 35px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
border: solid;
|
|
border-color: var(--border-color);
|
|
border-width: 1px;
|
|
border-radius: 5px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.inputBox .captchaDiv {
|
|
background-color: var(--editor);
|
|
height: 32px;
|
|
width: calc(100% - 15px);
|
|
margin: 0 5px 0 5px;
|
|
border-radius: 8px;
|
|
border: 1px var(--border-color) solid;
|
|
display: flex;
|
|
}
|
|
|
|
.inputBox .captchaDiv button {
|
|
background-color: var(--editor);
|
|
color: var(--text-color);
|
|
border-right: 1px solid var(--border-color);
|
|
border-radius: 0;
|
|
padding: 0 10px 0 0;
|
|
margin: 0 0 0 10px;
|
|
}
|
|
|
|
.inputBox .captchaDiv .vAlign {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.inputBox .captchaDiv .vAlign span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.inputBox input {
|
|
margin-left: 5px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.inputBox input:disabled {
|
|
background-color: var(--disabled);
|
|
color: var(--disabled-text-color);
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
body {
|
|
background-color: var(--inOutDiv);
|
|
}
|
|
.inOutDiv {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-radius: 0;
|
|
min-width: calc(100% - 20px);
|
|
min-height: 100%;
|
|
transform: none;
|
|
padding: 5px 10px;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
.inOutDiv p {
|
|
font-size: 14px;
|
|
}
|
|
.background {
|
|
display: none;
|
|
}
|
|
.inOutDiv input {
|
|
width: calc(100% - 32px);
|
|
}
|
|
}
|
|
|
|
.inOutDiv img {
|
|
min-width: 200px;
|
|
max-width: 100%;
|
|
border-radius: 20px;
|
|
background-color: white;
|
|
}
|
|
|
|
.iframe {
|
|
position: fixed;
|
|
right: 5px;
|
|
top: 47px;
|
|
border: none;
|
|
height: 278px;
|
|
width: 400px;
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.spacer {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.credit {
|
|
position: fixed;
|
|
left: 5px;
|
|
color: white;
|
|
z-index: -1;
|
|
margin: 0;
|
|
bottom: 5px;
|
|
text-shadow: black 1px 1px 5px;
|
|
}
|
|
|
|
.newOauth, .oauthList, .sessionEntry, .oauthEntry {
|
|
text-align: center;
|
|
margin-top: 7vh;
|
|
margin-left: 7vh;
|
|
margin-right: 7vh;
|
|
padding: 15px 10px 30px;
|
|
border-image: none;
|
|
border-radius: 25px;
|
|
font-size: 17px;
|
|
background-color: var(--inOutDiv);
|
|
}
|
|
|
|
.oauthEntry, .sessionEntry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
border: 3px dotted var(--border-color);
|
|
}
|
|
|
|
.oauthEntry button, .sessionEntry button {
|
|
padding: 10px;
|
|
background-color: red;
|
|
color: white
|
|
}
|
|
|
|
.oauthEntry button:hover, .sessionEntry button:hover {
|
|
background-color: black;
|
|
}
|
|
|
|
.oauthEntry img, .sessionEntry img {
|
|
max-height: 64px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
button {
|
|
background-color: var(--theme-color);
|
|
color: white;
|
|
margin-right: 5px;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
transition: 0.125s;
|
|
}
|
|
|
|
button:disabled {
|
|
background-color: var(--disabled);
|
|
color: var(--disabled-text-color);
|
|
}
|
|
|
|
button:disabled:hover {
|
|
background-color: var(--disabled-hover);
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--hover-theme-color);
|
|
transition: all 0.3s ease 0s;
|
|
}
|
|
|
|
.inOutDiv .inputContainer {
|
|
margin-bottom: 20px;
|
|
margin-right: 20px;
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.inOutDiv .inputBox {
|
|
width: 100%;
|
|
}
|
|
|
|
.unimportant {
|
|
background-color: var(--nonimporant-theme-color);
|
|
color: var(--nonimportant-text-color) !important;
|
|
}
|
|
|
|
.unimportant:hover {
|
|
background-color: var(--hover-nonimportant-theme-color);
|
|
transition: all 0.3s ease 0s;
|
|
}
|
|
|
|
h2 {
|
|
display: block;
|
|
margin-top: 10px;
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.inOutDiv a {
|
|
color: grey;
|
|
text-align: center;
|
|
}
|
|
|
|
.vAlign {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.w100 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.w200 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.w300 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.w400 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.w500 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.w600 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.w700 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.w800 {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.w900 {
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* swipe animation */
|
|
.swipe {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
animation: swipe 0.2s forwards;
|
|
display: none;
|
|
}
|
|
|
|
.swipe-animate {
|
|
display: initial;
|
|
}
|
|
|
|
|
|
/* swipe-out animation */
|
|
.swipe-out {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.swipe-out-animate {
|
|
animation: swipe-out 0.2s forwards;
|
|
}
|
|
|
|
@keyframes swipe {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes swipe-out {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes swipe-reduced {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes swipe-out-reduced {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.swipe {
|
|
animation: swipe-reduced 0.5s forwards;
|
|
}
|
|
|
|
.swipe-out {
|
|
animation: swipe-out-reduced 0.5s forwards;
|
|
}
|
|
} |