jam-cloud/web/app/assets/stylesheets/support/react-components/SupportPage.scss

172 lines
2.7 KiB
SCSS

@import "support/constants";
@import "client/common.scss";
[data-react-class="SupportPage"] {
width:100%;
.EventsPage {
width:100%;
}
#header {
display:grid;
justify-content: center;
width:100%;
background-color:$jamkazam-background2;
padding:1.5rem 0;
}
#root {
min-height: 100%;
align-items: center;
//justify-content: center;
min-width: 50%;
display: flex;
flex-direction: column;
}
.logo-holder {
background: url('/assets/logo.png') no-repeat;
height: 47px;
width: 252px;
color:white;
}
.title {
font-size: 2rem;
}
.description {
font-size: 1rem;
margin-top: .2rem;
width:1000px;
margin-bottom:2rem;
color:$copy-color-on-white;
a {
color:darken(#fc0, 20%);
white-space:nowrap;
}
line-height:150%;
}
iframe {
background-color:white;
}
.buffer {
background-color:white;
padding:1rem;
}
.support-warning {
background-color:lightgrey;
font-weight:bold;
font-size: 1rem;
margin-top: 1rem;
width:1000px;
margin-bottom:2.5rem;
padding:1rem;
color:$copy-color-on-white;
a {
color:darken(#fc0, 20%);
white-space:nowrap;
}
line-height:150%;
}
#powered-by, #powered-by-2 {
text-align: center;
vertical-align: middle;
position: absolute;
top: -3rem;
margin: auto;
width: 100%;
display: grid;
align-items: center;
justify-content: center;
span {
font-size: .8rem;
text-align: left;
}
}
.powered-by {
background: url("/assets/shared/jk_logo_small.png") no-repeat center;
height: 26px;
width: 142px;
}
#powered-by-2 {
display: none;
}
#body-content {
background-color:black;
display:grid;
grid-template-columns: 60% 2% 38%;
justify-content:center;
margin-bottom:6rem;
padding:0 1rem;
}
#top-container {
background-color:white;
display: grid;
justify-content:center;
padding:2rem 0 7rem 0;
grid-template-columns: min-content;
}
.logo-holder {
max-width: 300px;
min-width:0;
img {
width: 100%;
}
position:relative;
}
#help-desk {
position:absolute;
bottom: -25px;
left: 134px;
font-size:1.5rem;
}
div.root {
flex-grow: 1;
overflow: auto;
}
.header {
font-size: $large-font-size;
margin-top: 1rem;
min-width: 1000px;
text-align: center;
}
html {
font-size: 100%;
}
@media (min-width:1px) and (max-width: 1199px) {
html {
font-size: 100%;
}
.header {
min-width:90%;
padding-left:1.5rem;
}
.description {
width:90%;
padding-left:1.5rem;
}
}
}