359 lines
6.8 KiB
CSS
359 lines
6.8 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: monospace;
|
|
font-weight: 400;
|
|
color: #333;
|
|
background-image: linear-gradient(to top left, #c1d830 0%, #0ebbfe 100%);
|
|
/* background: #0f2137; */
|
|
}
|
|
|
|
/* LAYOUT */
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
font-family: 'Source Code Pro', monospace;
|
|
font-size: 15px;
|
|
display: grid;
|
|
|
|
/* Responsive Mobile Layout */
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
/* grid-template-rows: 0.4fr 1.2fr 2.2fr 1.2fr 1.2fr 1fr; */
|
|
grid-template-areas:
|
|
'header'
|
|
'sidebar'
|
|
'app'
|
|
/* 'left-ad' */
|
|
'right-ad'
|
|
'right-ad2'
|
|
'footer';
|
|
gap: 8px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container div {
|
|
padding: 10px;
|
|
/* border: 1px solid #000000; */
|
|
}
|
|
|
|
/* ELEMENTS */
|
|
|
|
.ad {
|
|
/* border: 1px solid #000000; */
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
justify-self: center;
|
|
}
|
|
|
|
.ad-left {
|
|
/* grid-row-start: 2; */
|
|
/* grid-row-end: span 2; */
|
|
align-self: center;
|
|
grid-area: left-ad;
|
|
display: none;
|
|
}
|
|
|
|
.ad-right {
|
|
/* grid-column-start: 4;
|
|
grid-row-start: 2; */
|
|
grid-area: right-ad;
|
|
align-self: center;
|
|
}
|
|
|
|
.ad-right2 {
|
|
grid-area: right-ad2;
|
|
align-self: center;
|
|
}
|
|
|
|
.appcontainer {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 0.5fr 50px 1fr;
|
|
gap: 10px;
|
|
display: inline-grid;
|
|
position: relative;
|
|
background-color: #696b7267;
|
|
backdrop-filter: blur(200px);
|
|
filter: blur();
|
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
grid-area: app;
|
|
grid-template-areas:
|
|
'main'
|
|
'photo'
|
|
'ddselect'
|
|
'results';
|
|
}
|
|
|
|
button {
|
|
display: inline-block;
|
|
padding: 0.3em 1.2em;
|
|
margin: 0 0.3em 0.3em 0;
|
|
border-radius: 2em;
|
|
box-sizing: border-box;
|
|
text-decoration: none;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 300;
|
|
color: #ffffff;
|
|
background-color: #0ebbfe;
|
|
text-align: center;
|
|
transition: all 0.2s ease-in;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #c1d830;
|
|
}
|
|
|
|
#device-image {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border: 2px solid #0ebbfe;
|
|
border-radius: 3em;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
/* width: 250px; */
|
|
}
|
|
|
|
.device-select {
|
|
/* display: inline; */
|
|
align-self: center;
|
|
justify-self: center;
|
|
grid-area: ddselect;
|
|
/* border: 1px solid black; */
|
|
}
|
|
|
|
.devices {
|
|
grid-area: device-select;
|
|
}
|
|
|
|
.footer {
|
|
/* grid-row-start: 4;
|
|
grid-column-start: 2;
|
|
grid-column-end: span 2; */
|
|
font-size: 15px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
align-self: center;
|
|
justify-self: center;
|
|
grid-area: footer;
|
|
display: flex;
|
|
align-items: center;
|
|
float: right;
|
|
/* border: 1px solid #000000; */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
/* background: -webkit-linear-gradient(left, #0ebbfe, #c1d830);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent; */
|
|
overflow: hidden;
|
|
}
|
|
|
|
h2 {
|
|
/* margin-bottom: 20px; */
|
|
padding-bottom: 20px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.header {
|
|
/* grid-column: 1 / 6; */
|
|
align-self: center;
|
|
grid-area: header;
|
|
/* border: 1px solid #000000; */
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
/* float: left; */
|
|
height: 25px;
|
|
/* margin-left: 10px; */
|
|
/* margin-top: 30px; */
|
|
overflow: hidden;
|
|
content: url('images/logo.png');
|
|
}
|
|
|
|
.main-content {
|
|
/* grid-column-end: span 2;
|
|
grid-row-end: span 2; */
|
|
display: flex;
|
|
/* align-items: center; */
|
|
justify-content: center;
|
|
grid-area: main;
|
|
/* border: 1px solid #000000; */
|
|
}
|
|
|
|
.main-gradient {
|
|
background-color: #0ebbfe;
|
|
background-image: linear-gradient(to right, #0ebbfe, #c1d830);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.photo {
|
|
display: flex;
|
|
float: right;
|
|
width: 300px;
|
|
overflow: hidden;
|
|
grid-area: photo;
|
|
/* content: url('images/blank.jpg'); */
|
|
}
|
|
|
|
.results {
|
|
color: cornflowerblue;
|
|
margin-top: 10px;
|
|
/* padding-top: 10px; */
|
|
background-color: rgba(255, 248, 220, 0.2);
|
|
/* font-family: 'Courier New', Courier, monospace; */
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 15px;
|
|
border-radius: 9px;
|
|
grid-area: results;
|
|
}
|
|
|
|
/* select {
|
|
width: 30%;
|
|
padding: 16px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: cadetblue;
|
|
} */
|
|
|
|
.sidebar {
|
|
/* grid-column-start: 5;
|
|
grid-row-start: 2;
|
|
grid-row-end: span 3; */
|
|
position: relative;
|
|
background-color: rgba(255, 255, 255, 0.151);
|
|
backdrop-filter: blur(200px);
|
|
filter: blur();
|
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
grid-area: sidebar;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border-collapse: collapse;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
td {
|
|
padding-top: 3px;
|
|
}
|
|
|
|
td.tbl-param {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
td.tbl-result {
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
td.tbl-code {
|
|
color: black;
|
|
text-align: center;
|
|
}
|
|
|
|
th.tbl-code,
|
|
tr.tbl-code {
|
|
width: 7%;
|
|
}
|
|
|
|
th.tbl-param {
|
|
width: 23%;
|
|
}
|
|
|
|
th.tbl-result {
|
|
width: 70%;
|
|
}
|
|
|
|
th {
|
|
color: white;
|
|
background-color: #696b72;
|
|
text-align: center;
|
|
}
|
|
|
|
tr:nth-child(odd) {
|
|
background-color: rgba(211, 211, 211, 0.353);
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #696b7248;
|
|
color: white;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* MOBILE RESPONSIVE - DESKTOP VIEW */
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.container {
|
|
font-size: 20px;
|
|
/* grid-template-columns: repeat(5, 1fr); */
|
|
/* grid-template-columns: 250px 1fr 1fr 300px 300px; */
|
|
grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr 0.7fr;
|
|
grid-template-rows: 50px 1fr 1fr 25px;
|
|
grid-template-areas:
|
|
'header header header header header'
|
|
'left-ad app app right-ad sidebar'
|
|
'left-ad app app right-ad2 sidebar'
|
|
'left-ad footer footer right-ad2 sidebar';
|
|
}
|
|
|
|
.appcontainer {
|
|
grid-template-columns: 1fr 0.25fr;
|
|
grid-template-rows: 0.5fr 50px 1fr;
|
|
gap: 10px;
|
|
display: grid;
|
|
position: relative;
|
|
background-color: #696b7267;
|
|
backdrop-filter: blur(200px);
|
|
filter: blur();
|
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
grid-area: app;
|
|
grid-template-areas:
|
|
'main photo'
|
|
'ddselect photo'
|
|
'results results';
|
|
}
|
|
|
|
.ad-left {
|
|
display: inline;
|
|
/* align-self: center; */
|
|
/* justify-self: center; */
|
|
}
|
|
}
|