project files
This commit is contained in:
rahuldkjain
@@ -0,0 +1,256 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
|
||||
:root {
|
||||
--grey-05: #f5f6f7;
|
||||
--grey-10: #dfdfe2;
|
||||
--grey-15: #d0d0d5;
|
||||
--grey-75: #3b3b4f;
|
||||
--grey-80: #2a2a40;
|
||||
--grey-85: #1b1b32;
|
||||
--grey-90: #0a0a23;
|
||||
--purple: #dbb8ff;
|
||||
--yellow: #f1be32;
|
||||
--blue: #99c9ff;
|
||||
--red: #e71837;
|
||||
--light-green: #acd157;
|
||||
--dark-purple: #5a01a7;
|
||||
--dark-yellow: #4d3800;
|
||||
--dark-blue: #002ead;
|
||||
--dark-green: #00471b;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 1%;
|
||||
padding: 1%;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: var(--grey-90);
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0 !important;
|
||||
font-family: 'Lato', sans-serif;
|
||||
padding-left: 2%;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
[type=checkbox] {
|
||||
-webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
|
||||
-moz-box-shadow: 0 1px 1px var(--grey-90) !important;
|
||||
box-shadow: 0 1px 1px var(--grey-90) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
.section {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 2% 0%;
|
||||
}
|
||||
|
||||
.inputField {
|
||||
border: 0px solid;
|
||||
border-bottom: 1px solid grey;
|
||||
margin: 2%;
|
||||
padding: 1% 2% 1% 1%;
|
||||
font-size: 18px;
|
||||
height: 25px;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* justify-content: flex-start; */
|
||||
}
|
||||
.inputField:focus {
|
||||
border-bottom: 1px solid var(--dark-blue);
|
||||
color: var(--grey-90);
|
||||
}
|
||||
.sm {
|
||||
width: 15%;
|
||||
}
|
||||
.md {
|
||||
width: 35%;
|
||||
}
|
||||
.lg {
|
||||
width: 50%;
|
||||
}
|
||||
.prefix {
|
||||
color: var(--grey-80);
|
||||
}
|
||||
.button {
|
||||
padding: 1% 0%;
|
||||
background: var(--grey-05);
|
||||
border: 2px solid var(--grey-85);
|
||||
color: var(--grey-90);
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container {
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-left: 2%;
|
||||
margin: 1% 0%;
|
||||
}
|
||||
.checkboxLabel {
|
||||
font-weight: 500;
|
||||
}
|
||||
.submit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.warning {
|
||||
color: var(--red);
|
||||
background: var(--grey-05);
|
||||
margin-left: 2%;
|
||||
padding: 1%;
|
||||
}
|
||||
.preview {
|
||||
border: 2px solid var(--grey-75);
|
||||
-webkit-box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75);
|
||||
-moz-box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75);
|
||||
box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75);
|
||||
padding: 0% 2%;
|
||||
}
|
||||
.markdown {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2%;
|
||||
}
|
||||
.markdown-box {
|
||||
width: 80%;
|
||||
font-size: 12px;
|
||||
color: var(--grey-85);
|
||||
border: 2px solid var(--grey-75);
|
||||
-webkit-box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75);
|
||||
-moz-box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75);
|
||||
box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75);
|
||||
padding: 1% 2% 0.5% 2%;
|
||||
}
|
||||
.copy-button {
|
||||
border: 2px solid var(--grey-15);
|
||||
padding: 1%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.markdown-util {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.preview-button {
|
||||
justify-self: flex-end;
|
||||
border: 2px solid var(--grey-15);
|
||||
padding: 1%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.loader {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: var(--grey-75);
|
||||
width: 14%;
|
||||
font-size: 20px;
|
||||
margin-left: 10%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
}
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
.social-icon {
|
||||
margin: 1%
|
||||
}
|
||||
.badge {
|
||||
text-align: left;
|
||||
}
|
||||
.card {
|
||||
text-align: center;
|
||||
}
|
||||
.social {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 1%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.heading {
|
||||
color: var(--dark-blue);
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
.footer {
|
||||
margin: 2% 0%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
h1, h2, h3, h4 {
|
||||
margin: 2% 0% !important;
|
||||
}
|
||||
.inputField {
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
font-size: 12px;
|
||||
}
|
||||
.button {
|
||||
width: 60%;
|
||||
}
|
||||
.back-button {
|
||||
width: 35%;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cardImage {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
.badgeImage {
|
||||
height: 15px;
|
||||
}
|
||||
.heading {
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user