You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

272 lines
4.4 KiB
SCSS

/**
* The page base.
*/
body {
background-color: #eee9d9;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.flexpage {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
/**
* First section of the main page, containing the logo, login/registration buttons, and a down arrow.
*/
.intro-page {
@extend .flexpage;
background: linear-gradient(#070a15, #252b46);
min-height: 100vh;
flex-direction: column;
-webkit-flex-direction: column;
}
/**
* Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver).
*/
.info-page {
@extend .flexpage;
background: linear-gradient(#F1D4AF, #eee9d9);
flex-direction: row;
-webkit-flex-direction: row;
min-height: 65vh;
@include break-small {
flex-direction: column;
-webkit-flex-direction: column;
}
}
.info-page-item {
margin: 100px 50px 50px;
}
/**
* Page with the technical details.
*/
.technical-page {
background: #24242f;
min-height: 30vh;
}
.flex-table {
display: flex;
margin: 50px auto;
max-width: 800px;
flex-wrap: wrap;
padding: 0 10px;
@include break-small {
max-width: 400px;
flex-direction: column;
}
}
.flex-table-header, .flex-table-value {
width: 200px;
float: left;
box-sizing: border-box;
}
.flex-table-row {
max-width: 400px;
}
/**
* Third section of the main page, containing the link to the Github page.
*/
.footer-page {
@extend .flexpage;
flex: 1;
background-color: #e2f2f0;
flex-direction: column;
-webkit-flex-direction: column;
min-height: 20vh;
@include break-small {
height: 100%;
}
}
/**
* Login and register pages.
*/
.login-page {
@extend .flexpage;
background: linear-gradient(#070a15, #252b46);
flex-direction: column;
-webkit-flex-direction: column;
}
.login-page-form {
background-color: #fff;
box-sizing: border-box;
border-radius: 5px;
border-top: 0;
border-bottom: 3px solid #d2d5e7;
border-right: 3px solid #d2d5e7;
border-left: 0;
padding: 50px;
}
/**
* The panel pages
*/
.panel-page {
margin: auto;
width: 800px;
position: relative;
@include break-small {
width: 100%;
}
}
.panel-content {
background: #fff;
color: black;
box-sizing: border-box;
border-bottom: 3px solid #d2d5e7;
border-right: 3px solid #d2d5e7;
padding: 15px;
margin-top: 20px;
.buttons {
float: right;
background-color: #53257e;
button {
padding: 10px;
font-size: 15px;
}
}
&::after {
content: "";
display: table;
clear: both;
}
}
.invite-create {
float:right;
}
.certificate-create,
.invite-create button {
font-size: 16px;
font-weight: normal;
background: hsl(271, 55%, 32%);
color: white;
padding: 5px;
float: right;
text-decoration:none;
cursor: pointer;
font-family: 'Karla', sans-serif;
}
.panel-content > h1,
.panel-content > .title > h1 {
margin: 0 0 25px;
}
.panel-content > h1 + .undertone,
.panel-content > .title > h1 + .undertone {
margin-top: -25px;
color: #999999;
margin-bottom: 25px;
}
.certificate-list,
.servers,
.invites {
margin: 0;
list-style: none;
padding: 0;
li {
border-left: 3px #e3b2a6 solid;
padding-left: 5px;
margin-bottom: 10px;
position: relative;
.text {
.expiry {
font-size: 14px;
color: hsl(0, 0%, 60%);
}
}
.revoke-q {
display: none;
}
.actions, .revoke-q {
position: absolute;
right: 0;
bottom: 0;
span {
transition: .2s;
cursor: pointer;
padding: 5px;
float: left;
display: block;
a,
button {
background: none;
font-size: 100%;
font-family: 'Karla', sans-serif;
color: black;
text-decoration: none;
display: block;
margin: -5px;
padding: 5px;
cursor: pointer;
}
}
.certificate-delete,
.yes,
.delete {
&:hover {
background: hsl(0, 62%, 64%);
}
}
.certificate-download,
.certificate-download-key,
.no,
.copy,
.edit,
.details {
&:hover {
background: #aca4bc;
}
}
.no {
width: 65px;
text-align: center;
}
}
}
}