Download Style Update
This commit is contained in:
Dzejkobik007
204
app/public/css/style-light.css
Normal file
204
app/public/css/style-light.css
Normal file
@@ -0,0 +1,204 @@
|
||||
* {
|
||||
font-family: OpenSans;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url("/fonts/OpenSans-Medium.ttf");
|
||||
}
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-container {
|
||||
height: 95vh;
|
||||
width: 95%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border: 1px solid #091202;
|
||||
}
|
||||
|
||||
.view-nav {
|
||||
padding-top: 20px;
|
||||
gap: 20px;
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: 50px;
|
||||
}
|
||||
.view-nav .button-primary {
|
||||
flex-basis: 15%;
|
||||
}
|
||||
.view-nav .button-secondary {
|
||||
flex-basis: 15%;
|
||||
}
|
||||
.view-nav .spacer {
|
||||
flex-basis: 30%;
|
||||
}
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.file .icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.file .filename p {
|
||||
font-size: 50px;
|
||||
margin: 0;
|
||||
flex-wrap: 80%;
|
||||
}
|
||||
|
||||
.file-view {
|
||||
flex-basis: 90%;
|
||||
width: 98%;
|
||||
border: 1px dotted #091202;
|
||||
}
|
||||
.file-view .file-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.file-view .file-container .file {
|
||||
height: 40px;
|
||||
flex: 0 0 200px;
|
||||
row-gap: 2px;
|
||||
}
|
||||
.file-view .file-container .file .icon {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
}
|
||||
.file-view .file-container .file .filename p {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
flex-wrap: 80%;
|
||||
}
|
||||
.file-view .file-container .file:hover {
|
||||
transform: scale(1.05);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
background-color: #e42200;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-family: OpenSans;
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
width: 200px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: #fd9700;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: #114388;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.link-box {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
flex-direction: row;
|
||||
flex-basis: 40%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.link-box .button-copy {
|
||||
display: flex;
|
||||
background-color: #114388;
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
border: 3px solid #091202;
|
||||
border-left: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.link-box .text-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 3px solid #091202;
|
||||
}
|
||||
.link-box .text-link input[type=text] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
padding: 12px 20px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background-color: #114388;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
height: 30px;
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
animation-iteration-count: 1;
|
||||
stroke-dashoffset: 0;
|
||||
animation: checkmark 0.3s linear;
|
||||
}
|
||||
|
||||
@keyframes checkmark {
|
||||
from {
|
||||
stroke-dashoffset: -500;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}/*# sourceMappingURL=style-light.css.map */
|
||||
1
app/public/css/style-light.css.map
Normal file
1
app/public/css/style-light.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style-light.scss","style-light.css"],"names":[],"mappings":"AASA;EACI,qBAAA;ACRJ;;ADWA;EACI,qBAAA;EACA,sCAAA;ACRJ;ADWA;;EAEE,UAAA;EACA,SAAA;ACTF;;ADaA;EACI,yBArBe;ACWnB;;ADcA;EAAS,qBAAA;ACVT;;ADYA;EAAY,qBAAA;ACRZ;;ADUA;EAAU,qBAAA;ACNV;;ADQA;EAAW,qBAAA;ACJX;;ADMA;EACI,aAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACHJ;;ADOA;EACI,YAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,yBAAA;ACJJ;;ADQA;EACI,iBAAA;EACA,SAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;ACLJ;ADMI;EACI,eAAA;ACJR;ADMI;EACI,eAAA;ACJR;ADMI;EACI,eAAA;ACJR;;ADQA;EACI,aAAA;EACA,mBAAA;EACA,mBAAA;ACLJ;ADMI;EACI,WAAA;EACA,YAAA;ACJR;ADOQ;EACI,eAAA;EACA,SAAA;EACA,cAAA;ACLZ;;ADUA;EACI,eAAA;EACA,UAAA;EACA,0BAAA;ACPJ;ADQI;EACI,aAAA;EACA,eAAA;ACNR;ADOQ;EACI,YAAA;EACA,eAAA;EACA,YAAA;ACLZ;ADMY;EACI,WAAA;EACA,YAAA;ACJhB;ADOgB;EACI,eAAA;EACA,SAAA;EACA,cAAA;ACLpB;ADSQ;EACI,sBAAA;EACA,oBAAA;ACPZ;;ADYA;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;ACTJ;ADUI;EACI,SAAA;ACRR;;ADYA;EACI,sBAAA;ACTJ;;ADYA;EACI,yBAlJY;ACyIhB;;ADYA;EACI,yBApJc;EAqJd,cApJmB;AC2IvB;;ADYA;EACI,aAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;EACA,mBAAA;EACA,uBAAA;ACTJ;ADUI;EACI,aAAA;EACA,yBAjKU;EAkKV,cAjKe;EAkKf,YAAA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,uBAAA;ACRR;ADUI;EACI,YAAA;EACA,WAAA;EACA,yBAAA;ACRR;ADSQ;EACI,WAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;EACA,YAAA;EACA,yBApLM;EAqLN,cApLW;AC6KvB;;ADYA;EACI,aAAA;ACTJ;;ADYA;EACI,YAAA;ACTJ;;ADYA;EACI,YAAA;EACA,sBAAA;EACA,uBAAA;EACA,4BAAA;EACA,oBAAA;EACA,gCAAA;ACTJ;;ADYA;EAEI;IACI,uBAAA;ECVN;EDYE;IACI,oBAAA;ECVN;AACF","file":"style-light.css"}
|
||||
215
app/public/css/style-light.scss
Normal file
215
app/public/css/style-light.scss
Normal file
@@ -0,0 +1,215 @@
|
||||
|
||||
$color-primary: #fd9700;
|
||||
$color-primary-text: #ffffff;
|
||||
$color-secondary: #114388;
|
||||
$color-secondary-text: #ffffff;
|
||||
$color-background: #ffffff;
|
||||
$color-text: #091202;
|
||||
|
||||
|
||||
* {
|
||||
font-family: OpenSans;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
src: url("/fonts/OpenSans-Medium.ttf");
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: $color-background;
|
||||
|
||||
}
|
||||
|
||||
a:link { text-decoration: none; }
|
||||
|
||||
a:visited { text-decoration: none; }
|
||||
|
||||
a:hover { text-decoration: none; }
|
||||
|
||||
a:active { text-decoration: none; }
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.view-container {
|
||||
height: 95vh;
|
||||
width: 95%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border: 1px solid $color-text;
|
||||
}
|
||||
|
||||
|
||||
.view-nav {
|
||||
padding-top: 20px;
|
||||
gap: 20px;
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: 50px;
|
||||
.button-primary {
|
||||
flex-basis: 15%;
|
||||
}
|
||||
.button-secondary {
|
||||
flex-basis: 15%;
|
||||
}
|
||||
.spacer {
|
||||
flex-basis: 30%
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.filename {
|
||||
p {
|
||||
font-size: 50px;
|
||||
margin: 0;
|
||||
flex-wrap: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-view {
|
||||
flex-basis: 90%;
|
||||
width: 98%;
|
||||
border: 1px dotted $color-text;
|
||||
.file-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.file {
|
||||
height: 40px;
|
||||
flex: 0 0 200px;
|
||||
row-gap: 2px;
|
||||
.icon {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
}
|
||||
.filename {
|
||||
p {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
flex-wrap: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.file:hover {
|
||||
transform: scale(1.05);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
background-color: #e42200;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-family: OpenSans;
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
width: 200px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: $color-secondary;
|
||||
color: $color-secondary-text;
|
||||
}
|
||||
|
||||
.link-box {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
flex-direction: row;
|
||||
flex-basis: 40%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.button-copy {
|
||||
display: flex;
|
||||
background-color: $color-secondary;
|
||||
color: $color-secondary-text;
|
||||
height: 100%;
|
||||
border: 3px solid $color-text;
|
||||
border-left: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.text-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 3px solid $color-text;
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
padding: 12px 20px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background-color: $color-secondary;
|
||||
color: $color-secondary-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
height: 30px;
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
animation-iteration-count: 1;
|
||||
stroke-dashoffset: 0;
|
||||
animation: checkmark 0.3s linear;
|
||||
}
|
||||
|
||||
@keyframes checkmark {
|
||||
|
||||
from {
|
||||
stroke-dashoffset: -500;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user