Add files via upload
This commit is contained in:
GitHub
35
src/styles/global.css
Normal file
35
src/styles/global.css
Normal file
@@ -0,0 +1,35 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-collapse: inherit;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
background-color: var(--white);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
210
src/styles/normalize.css
vendored
Normal file
210
src/styles/normalize.css
vendored
Normal file
@@ -0,0 +1,210 @@
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
265
src/styles/pages/homePage.module.css
Normal file
265
src/styles/pages/homePage.module.css
Normal file
@@ -0,0 +1,265 @@
|
||||
.sectionWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 95vh;
|
||||
}
|
||||
|
||||
.sectionContent {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.appTitle {
|
||||
margin-top: 3rem;
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.btn {
|
||||
transition: all 200ms ease-in-out;
|
||||
background-color: var(--redTransparent);
|
||||
width: 12rem;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--red);
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--red);
|
||||
width: 13rem;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.tickerItem {
|
||||
padding: 0 15px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: 'inherit';
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin-bottom: 3.5rem;
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.appImage {
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imagePreview {
|
||||
width: 170px;
|
||||
height: 250px;
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.imagesWrapper {
|
||||
max-width: 900px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.changelogsList {
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.appVersionDescriptionWrapper {
|
||||
padding: 15px;
|
||||
background-color: var(--lightGray);
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.changesListWrapper {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 35px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.changesList {
|
||||
padding: 10px 0px 0px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.changesListItem {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.changesListBottomInfo {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.changesListBottomInfoName {
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
background-color: var(--blue);
|
||||
padding: 5px 10px;
|
||||
color: var(--white);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.changesListBottomInfoSupport {
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
background-color: var(--green);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.downloadApplink {
|
||||
color: var(--black);
|
||||
text-decoration: none;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.downloadApplink:hover {
|
||||
color: var(--red);
|
||||
text-decoration: none;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.appVersionDescription {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status {
|
||||
border-radius: 12px;
|
||||
background-color: var(--lightGray);
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.statusActive {
|
||||
background-color: var(--green);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.statusDev {
|
||||
background-color: #FFF8E1;
|
||||
color: #FFC107;
|
||||
|
||||
}
|
||||
|
||||
.changelogsListItem {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.appInfoButton {
|
||||
border: none;
|
||||
background-color: var(--red);
|
||||
border-radius: 12px;
|
||||
color: var(--white);
|
||||
height: 30px;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.appInfoButton:hover {
|
||||
transition: all 200ms ease;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.appInfoButtonIconWrapper {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.appInfoButtonText {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 0.75rem;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table thead tr th {
|
||||
border-bottom: 1px solid var(--gray);
|
||||
}
|
||||
|
||||
.downloadContent {
|
||||
max-width: 820px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.sectionTitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.appDescription {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sectionTitle {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.appTitle {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.appDescription {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 465px) {
|
||||
.table th {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.appInfoButtonIconWrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.appInfoButton {
|
||||
height: 45px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
15
src/styles/variables.css
Normal file
15
src/styles/variables.css
Normal file
@@ -0,0 +1,15 @@
|
||||
:root {
|
||||
--white: #fff;
|
||||
--black: #0f0f0f;
|
||||
--blackTransparent: rgba(0, 0, 0, 0.300);
|
||||
--lightBlack: rgb(38 38 38);
|
||||
--gray: rgb(112, 112, 112);
|
||||
--lightGray: rgb(240 240 240);
|
||||
--red: rgb(245 65 66);
|
||||
--redTransparent: rgba(245, 65, 66, 0.200);
|
||||
--purple: rgb(145, 107, 227);
|
||||
--purpleTransparent: rgba(145, 107, 227, 0.250);
|
||||
--green: rgb(119 197 153);
|
||||
--blue: rgb(95 200 248);
|
||||
--full-hd-width-screen: 1920px;
|
||||
}
|
||||
Reference in New Issue
Block a user