fox-send/app/base.css

306 lines
4.7 KiB
CSS

:root {
--pageBGColor: #fff;
--lightControlBGColor: #e6e6e6;
--primaryControlBGColor: #0a84ff;
--primaryControlFGColor: #fff;
--primaryControlHoverColor: #0473e2;
--inputTextColor: #737373;
--errorColor: #d70022;
--linkColor: #0094fb;
--textColor: #0c0c0d;
--lightBorderColor: rgba(12, 12, 12, 0.2);
--lightTextColor: #737373;
--successControlBGColor: #12bc00;
--successControlFGColor: #fff;
}
html {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
font-weight: 200;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}
input,
select,
textarea,
button {
font-family: inherit;
margin: 0;
}
a {
text-decoration: none;
}
.main {
display: flex;
flex: auto;
padding: 0 25px;
box-sizing: border-box;
min-height: 500px;
max-height: 800px;
height: 100%;
}
.stripedBox {
flex: none;
position: relative;
width: 400px;
margin-top: 32px;
background-color: white;
border-radius: 6px;
border: 3px solid rgba(12, 12, 12, 0.2);
background-clip: padding-box;
background-image: repeating-linear-gradient(
45deg,
white,
white 5px,
#ea000e 5px,
#ea000e 25px,
white 25px,
white 30px,
#0083ff 30px,
#0083ff 50px
);
}
.mainContent {
height: 100%;
background-color: white;
box-sizing: border-box;
margin: 0 10px;
padding: 10px 10px 28px;
display: flex;
flex-direction: column;
}
.spacer {
flex: auto;
}
.uploads {
flex: 0 0 262px;
box-sizing: border-box;
padding-top: 180px;
display: flex;
}
.noscript {
text-align: center;
border: 3px solid var(--errorColor);
border-radius: 6px;
}
.btn {
display: flex;
width: 100%;
height: 70px;
line-height: 1.2;
align-items: center;
justify-content: center;
padding: 0 10px;
box-sizing: border-box;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.56px;
color: var(--primaryControlFGColor);
background: var(--primaryControlBGColor);
cursor: pointer;
border: 0;
border-radius: 5px;
}
.btn:hover {
background-color: var(--primaryControlHoverColor);
}
.btn--stripes {
background: repeating-linear-gradient(
-65deg,
#7c7c7c 0,
#7c7c7c 17px,
#737373 17px,
#737373 30px
);
background-size: 300% 300%;
animation: barberpole 12s linear infinite;
}
@keyframes barberpole {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
.btn--cancel {
font-size: 13px;
font-weight: 700;
background: none;
color: var(--errorColor);
border: none;
}
.input {
border: 1px solid var(--lightBorderColor);
font-size: 20px;
color: var(--inputTextColor);
font-family: 'SF Pro Text', sans-serif;
font-weight: 300;
padding-left: 10px;
padding-right: 10px;
}
.input--error {
border-color: var(--errorColor);
}
.link {
color: var(--linkColor);
text-decoration: none;
}
.link:focus,
.link:active,
.link:hover {
color: var(--primaryControlHoverColor);
}
.link--action {
font-weight: 500;
font-size: 14px;
text-align: center;
}
.page {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
text-align: center;
}
.effect--fadeOut {
opacity: 0;
animation: fadeout 200ms linear;
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.effect--fadeIn {
opacity: 1;
animation: fadein 200ms linear;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.goBackButton {
position: absolute;
top: 0;
left: 0;
margin: 18px;
}
.error {
color: var(--errorColor);
font-weight: 600;
}
.title {
color: var(--lightTextColor);
font-size: 18px;
line-height: 40px;
margin: 20px auto;
max-width: 520px;
font-family: 'SF Pro Text', sans-serif;
font-weight: 700;
word-wrap: break-word;
}
.description {
font-size: 13px;
text-align: left;
margin: 14px auto;
color: var(--lightTextColor);
width: 95%;
}
.visible {
visibility: visible !important;
}
.noDisplay {
display: none !important;
}
.flexible {
flex: 1;
}
@media (max-device-width: 750px), (max-width: 750px) {
.description {
margin: 0 auto 25px;
}
.main {
flex-direction: column;
height: 100%;
}
.spacer {
flex: none;
height: 0;
}
.stripedBox {
margin-top: 72px;
min-height: 400px;
flex: 1;
}
.uploads {
flex: none;
padding-top: 6px;
}
.footer {
margin: 15px;
}
}
@media (max-device-width: 700px), (max-width: 700px) {
.stripedBox {
margin-top: 72px;
}
}