mirror of
https://gitlab.com/commento/commento.git
synced 2025-06-29 22:56:37 -04:00
frontend: check in html, css, js
This commit is contained in:
Adhityaa
147
frontend/sass/auth-main.scss
Normal file
147
frontend/sass/auth-main.scss
Normal file
@ -0,0 +1,147 @@
|
||||
@import "common-main.scss";
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
min-height: calc(100% - 100px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 100px;
|
||||
|
||||
.auth-form {
|
||||
width: 400px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
padding: 24px;
|
||||
margin: 20px;
|
||||
|
||||
.form-title {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid $gray-1;
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
font-size: 15px;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #32325d;
|
||||
border-bottom: 1px solid $gray-1;
|
||||
margin-right: 20px;
|
||||
background: $gray-0;
|
||||
width: 100%;
|
||||
color: #32325d;
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: 28px;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
input[type=text]::placeholder,
|
||||
input[type=password]::placeholder {
|
||||
color: $gray-3;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
color: $gray-5;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .shadow;
|
||||
border: 1px solid $blue-6;
|
||||
border-radius: 3px;
|
||||
line-height: 32px;
|
||||
background: $blue-6;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: $blue-5;
|
||||
border: 1px solid $blue-5;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
background: $blue-4;
|
||||
border: 1px solid $blue-4;
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
.err, .msg, .link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-weight: normal;
|
||||
color: $blue-6;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: $blue-6;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: $red-6;
|
||||
}
|
||||
|
||||
.msg {
|
||||
color: $green-6;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.auth-form {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cent {
|
||||
font-size: 12px;
|
||||
color: $gray-5;
|
||||
text-align: center;
|
||||
|
||||
.gray {
|
||||
color: $gray-5;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
border-bottom: 1px solid $gray-3;
|
||||
}
|
||||
}
|
||||
3
frontend/sass/auth.scss
Normal file
3
frontend/sass/auth.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "common-main.scss";
|
||||
@import "navbar-main.scss";
|
||||
@import "auth-main.scss";
|
||||
1
frontend/sass/chartist.scss
Normal file
1
frontend/sass/chartist.scss
Normal file
File diff suppressed because one or more lines are too long
314
frontend/sass/colors-main.scss
Normal file
314
frontend/sass/colors-main.scss
Normal file
@ -0,0 +1,314 @@
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
|
||||
$gray-list: (
|
||||
"0": #f8f9fa,
|
||||
"1": #f1f3f5,
|
||||
"2": #e9ecef,
|
||||
"3": #dee2e6,
|
||||
"4": #ced4da,
|
||||
"5": #adb5bd,
|
||||
"6": #868e96,
|
||||
"7": #495057,
|
||||
"8": #343a40,
|
||||
"9": #212529
|
||||
);
|
||||
|
||||
$gray-0: map-get($gray-list, "0");
|
||||
$gray-1: map-get($gray-list, "1");
|
||||
$gray-2: map-get($gray-list, "2");
|
||||
$gray-3: map-get($gray-list, "3");
|
||||
$gray-4: map-get($gray-list, "4");
|
||||
$gray-5: map-get($gray-list, "5");
|
||||
$gray-6: map-get($gray-list, "6");
|
||||
$gray-7: map-get($gray-list, "7");
|
||||
$gray-8: map-get($gray-list, "8");
|
||||
$gray-9: map-get($gray-list, "9");
|
||||
|
||||
$red-list: (
|
||||
"0": #fff5f5,
|
||||
"1": #ffe3e3,
|
||||
"2": #ffc9c9,
|
||||
"3": #ffa8a8,
|
||||
"4": #ff8787,
|
||||
"5": #ff6b6b,
|
||||
"6": #fa5252,
|
||||
"7": #f03e3e,
|
||||
"8": #e03131,
|
||||
"9": #c92a2a
|
||||
);
|
||||
|
||||
$red-0: map-get($red-list, "0");
|
||||
$red-1: map-get($red-list, "1");
|
||||
$red-2: map-get($red-list, "2");
|
||||
$red-3: map-get($red-list, "3");
|
||||
$red-4: map-get($red-list, "4");
|
||||
$red-5: map-get($red-list, "5");
|
||||
$red-6: map-get($red-list, "6");
|
||||
$red-7: map-get($red-list, "7");
|
||||
$red-8: map-get($red-list, "8");
|
||||
$red-9: map-get($red-list, "9");
|
||||
|
||||
$pink-list: (
|
||||
"0": #fff0f6,
|
||||
"1": #ffdeeb,
|
||||
"2": #fcc2d7,
|
||||
"3": #faa2c1,
|
||||
"4": #f783ac,
|
||||
"5": #f06595,
|
||||
"6": #e64980,
|
||||
"7": #d6336c,
|
||||
"8": #c2255c,
|
||||
"9": #a61e4d
|
||||
);
|
||||
|
||||
$pink-0: map-get($pink-list, "0");
|
||||
$pink-1: map-get($pink-list, "1");
|
||||
$pink-2: map-get($pink-list, "2");
|
||||
$pink-3: map-get($pink-list, "3");
|
||||
$pink-4: map-get($pink-list, "4");
|
||||
$pink-5: map-get($pink-list, "5");
|
||||
$pink-6: map-get($pink-list, "6");
|
||||
$pink-7: map-get($pink-list, "7");
|
||||
$pink-8: map-get($pink-list, "8");
|
||||
$pink-9: map-get($pink-list, "9");
|
||||
|
||||
$grape-list: (
|
||||
"0": #f8f0fc,
|
||||
"1": #f3d9fa,
|
||||
"2": #eebefa,
|
||||
"3": #e599f7,
|
||||
"4": #da77f2,
|
||||
"5": #cc5de8,
|
||||
"6": #be4bdb,
|
||||
"7": #ae3ec9,
|
||||
"8": #9c36b5,
|
||||
"9": #862e9c
|
||||
);
|
||||
|
||||
$grape-0: map-get($grape-list, "0");
|
||||
$grape-1: map-get($grape-list, "1");
|
||||
$grape-2: map-get($grape-list, "2");
|
||||
$grape-3: map-get($grape-list, "3");
|
||||
$grape-4: map-get($grape-list, "4");
|
||||
$grape-5: map-get($grape-list, "5");
|
||||
$grape-6: map-get($grape-list, "6");
|
||||
$grape-7: map-get($grape-list, "7");
|
||||
$grape-8: map-get($grape-list, "8");
|
||||
$grape-9: map-get($grape-list, "9");
|
||||
|
||||
$violet-list: (
|
||||
"0": #f3f0ff,
|
||||
"1": #e5dbff,
|
||||
"2": #d0bfff,
|
||||
"3": #b197fc,
|
||||
"4": #9775fa,
|
||||
"5": #845ef7,
|
||||
"6": #7950f2,
|
||||
"7": #7048e8,
|
||||
"8": #6741d9,
|
||||
"9": #5f3dc4
|
||||
);
|
||||
|
||||
$violet-0: map-get($violet-list, "0");
|
||||
$violet-1: map-get($violet-list, "1");
|
||||
$violet-2: map-get($violet-list, "2");
|
||||
$violet-3: map-get($violet-list, "3");
|
||||
$violet-4: map-get($violet-list, "4");
|
||||
$violet-5: map-get($violet-list, "5");
|
||||
$violet-6: map-get($violet-list, "6");
|
||||
$violet-7: map-get($violet-list, "7");
|
||||
$violet-8: map-get($violet-list, "8");
|
||||
$violet-9: map-get($violet-list, "9");
|
||||
|
||||
$indigo-list: (
|
||||
"0": #edf2ff,
|
||||
"1": #dbe4ff,
|
||||
"2": #bac8ff,
|
||||
"3": #91a7ff,
|
||||
"4": #748ffc,
|
||||
"5": #5c7cfa,
|
||||
"6": #4c6ef5,
|
||||
"7": #4263eb,
|
||||
"8": #3b5bdb,
|
||||
"9": #364fc7
|
||||
);
|
||||
|
||||
$indigo-0: map-get($indigo-list, "0");
|
||||
$indigo-1: map-get($indigo-list, "1");
|
||||
$indigo-2: map-get($indigo-list, "2");
|
||||
$indigo-3: map-get($indigo-list, "3");
|
||||
$indigo-4: map-get($indigo-list, "4");
|
||||
$indigo-5: map-get($indigo-list, "5");
|
||||
$indigo-6: map-get($indigo-list, "6");
|
||||
$indigo-7: map-get($indigo-list, "7");
|
||||
$indigo-8: map-get($indigo-list, "8");
|
||||
$indigo-9: map-get($indigo-list, "9");
|
||||
|
||||
$blue-list: (
|
||||
"0": #e7f5ff,
|
||||
"1": #d0ebff,
|
||||
"2": #a5d8ff,
|
||||
"3": #74c0fc,
|
||||
"4": #4dabf7,
|
||||
"5": #339af0,
|
||||
"6": #228be6,
|
||||
"7": #1c7ed6,
|
||||
"8": #1971c2,
|
||||
"9": #1864ab
|
||||
);
|
||||
|
||||
$blue-0: map-get($blue-list, "0");
|
||||
$blue-1: map-get($blue-list, "1");
|
||||
$blue-2: map-get($blue-list, "2");
|
||||
$blue-3: map-get($blue-list, "3");
|
||||
$blue-4: map-get($blue-list, "4");
|
||||
$blue-5: map-get($blue-list, "5");
|
||||
$blue-6: map-get($blue-list, "6");
|
||||
$blue-7: map-get($blue-list, "7");
|
||||
$blue-8: map-get($blue-list, "8");
|
||||
$blue-9: map-get($blue-list, "9");
|
||||
|
||||
$cyan-list: (
|
||||
"0": #e3fafc,
|
||||
"1": #c5f6fa,
|
||||
"2": #99e9f2,
|
||||
"3": #66d9e8,
|
||||
"4": #3bc9db,
|
||||
"5": #22b8cf,
|
||||
"6": #15aabf,
|
||||
"7": #1098ad,
|
||||
"8": #0c8599,
|
||||
"9": #0b7285
|
||||
);
|
||||
|
||||
$cyan-0: map-get($cyan-list, "0");
|
||||
$cyan-1: map-get($cyan-list, "1");
|
||||
$cyan-2: map-get($cyan-list, "2");
|
||||
$cyan-3: map-get($cyan-list, "3");
|
||||
$cyan-4: map-get($cyan-list, "4");
|
||||
$cyan-5: map-get($cyan-list, "5");
|
||||
$cyan-6: map-get($cyan-list, "6");
|
||||
$cyan-7: map-get($cyan-list, "7");
|
||||
$cyan-8: map-get($cyan-list, "8");
|
||||
$cyan-9: map-get($cyan-list, "9");
|
||||
|
||||
$teal-list: (
|
||||
"0": #e6fcf5,
|
||||
"1": #c3fae8,
|
||||
"2": #96f2d7,
|
||||
"3": #63e6be,
|
||||
"4": #38d9a9,
|
||||
"5": #20c997,
|
||||
"6": #12b886,
|
||||
"7": #0ca678,
|
||||
"8": #099268,
|
||||
"9": #087f5b
|
||||
);
|
||||
|
||||
$teal-0: map-get($teal-list, "0");
|
||||
$teal-1: map-get($teal-list, "1");
|
||||
$teal-2: map-get($teal-list, "2");
|
||||
$teal-3: map-get($teal-list, "3");
|
||||
$teal-4: map-get($teal-list, "4");
|
||||
$teal-5: map-get($teal-list, "5");
|
||||
$teal-6: map-get($teal-list, "6");
|
||||
$teal-7: map-get($teal-list, "7");
|
||||
$teal-8: map-get($teal-list, "8");
|
||||
$teal-9: map-get($teal-list, "9");
|
||||
|
||||
$green-list: (
|
||||
"0": #ebfbee,
|
||||
"1": #d3f9d8,
|
||||
"2": #b2f2bb,
|
||||
"3": #8ce99a,
|
||||
"4": #69db7c,
|
||||
"5": #51cf66,
|
||||
"6": #40c057,
|
||||
"7": #37b24d,
|
||||
"8": #2f9e44,
|
||||
"9": #2b8a3e
|
||||
);
|
||||
|
||||
$green-0: map-get($green-list, "0");
|
||||
$green-1: map-get($green-list, "1");
|
||||
$green-2: map-get($green-list, "2");
|
||||
$green-3: map-get($green-list, "3");
|
||||
$green-4: map-get($green-list, "4");
|
||||
$green-5: map-get($green-list, "5");
|
||||
$green-6: map-get($green-list, "6");
|
||||
$green-7: map-get($green-list, "7");
|
||||
$green-8: map-get($green-list, "8");
|
||||
$green-9: map-get($green-list, "9");
|
||||
|
||||
$lime-list: (
|
||||
"0": #f4fce3,
|
||||
"1": #e9fac8,
|
||||
"2": #d8f5a2,
|
||||
"3": #c0eb75,
|
||||
"4": #a9e34b,
|
||||
"5": #94d82d,
|
||||
"6": #82c91e,
|
||||
"7": #74b816,
|
||||
"8": #66a80f,
|
||||
"9": #5c940d
|
||||
);
|
||||
|
||||
$lime-0: map-get($lime-list, "0");
|
||||
$lime-1: map-get($lime-list, "1");
|
||||
$lime-2: map-get($lime-list, "2");
|
||||
$lime-3: map-get($lime-list, "3");
|
||||
$lime-4: map-get($lime-list, "4");
|
||||
$lime-5: map-get($lime-list, "5");
|
||||
$lime-6: map-get($lime-list, "6");
|
||||
$lime-7: map-get($lime-list, "7");
|
||||
$lime-8: map-get($lime-list, "8");
|
||||
$lime-9: map-get($lime-list, "9");
|
||||
|
||||
$yellow-list: (
|
||||
"0": #fff9db,
|
||||
"1": #fff8c5,
|
||||
"2": #ffec99,
|
||||
"3": #ffe066,
|
||||
"4": #ffd43b,
|
||||
"5": #fcc419,
|
||||
"6": #fab005,
|
||||
"7": #f59f00,
|
||||
"8": #f08c00,
|
||||
"9": #e67700
|
||||
);
|
||||
|
||||
$yellow-0: map-get($yellow-list, "0");
|
||||
$yellow-1: map-get($yellow-list, "1");
|
||||
$yellow-2: map-get($yellow-list, "2");
|
||||
$yellow-3: map-get($yellow-list, "3");
|
||||
$yellow-4: map-get($yellow-list, "4");
|
||||
$yellow-5: map-get($yellow-list, "5");
|
||||
$yellow-6: map-get($yellow-list, "6");
|
||||
$yellow-7: map-get($yellow-list, "7");
|
||||
$yellow-8: map-get($yellow-list, "8");
|
||||
$yellow-9: map-get($yellow-list, "9");
|
||||
|
||||
$orange-list: (
|
||||
"0": #fff4e6,
|
||||
"1": #ffe8cc,
|
||||
"2": #ffd8a8,
|
||||
"3": #ffc078,
|
||||
"4": #ffa94d,
|
||||
"5": #ff922b,
|
||||
"6": #fd7e14,
|
||||
"7": #f76707,
|
||||
"8": #e8590c,
|
||||
"9": #d9480f
|
||||
);
|
||||
|
||||
$orange-0: map-get($orange-list, "0");
|
||||
$orange-1: map-get($orange-list, "1");
|
||||
$orange-2: map-get($orange-list, "2");
|
||||
$orange-3: map-get($orange-list, "3");
|
||||
$orange-4: map-get($orange-list, "4");
|
||||
$orange-5: map-get($orange-list, "5");
|
||||
$orange-6: map-get($orange-list, "6");
|
||||
$orange-7: map-get($orange-list, "7");
|
||||
$orange-8: map-get($orange-list, "8");
|
||||
$orange-9: map-get($orange-list, "9");
|
||||
87
frontend/sass/common-main.scss
Normal file
87
frontend/sass/common-main.scss
Normal file
@ -0,0 +1,87 @@
|
||||
@import "colors-main.scss";
|
||||
|
||||
html {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 14px;
|
||||
color: $gray-7;
|
||||
background: $gray-0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
margin-top: 72px;
|
||||
|
||||
.copyright {
|
||||
align-items: none;
|
||||
color: $gray-3;
|
||||
background: $white;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
width: 100%;
|
||||
background: $white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.link-group {
|
||||
margin: 40px;
|
||||
|
||||
.header {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: $gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
color: $gray-5;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: $gray-7;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.link-group {
|
||||
display: block
|
||||
}
|
||||
|
||||
.links {
|
||||
display: block;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
918
frontend/sass/dashboard-main.scss
Normal file
918
frontend/sass/dashboard-main.scss
Normal file
@ -0,0 +1,918 @@
|
||||
@import "colors-main.scss";
|
||||
@import "common-main.scss";
|
||||
|
||||
.subscription-nag {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: calc(50% - 200px);
|
||||
height: 40px;
|
||||
width: 400px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
-moz-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
background: $gray-7;
|
||||
color: $gray-0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
animation: shake .5s linear;
|
||||
-webkit-animation: shake .5s linear;
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-delay: 1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes shake {
|
||||
8%, 41% {
|
||||
-webkit-transform: translateX(-5px);
|
||||
}
|
||||
25%, 58% {
|
||||
-webkit-transform: translateX(5px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateX(-2px);
|
||||
}
|
||||
92% {
|
||||
-webkit-transform: translateX(2px);
|
||||
}
|
||||
0%, 100% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.global-error, .global-ok {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin: 30px;
|
||||
padding: 5px;
|
||||
border: 1px solid $red-6;
|
||||
background: $red-6;
|
||||
color: white;
|
||||
display: none;
|
||||
z-index: 80000;
|
||||
}
|
||||
|
||||
.global-ok {
|
||||
border: 1px solid $green-7;
|
||||
background: $green-7;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
ul.tabs {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid $gray-4;
|
||||
|
||||
li {
|
||||
background: none;
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
li.current {
|
||||
border-bottom: 1px solid $blue-6;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
display: none;
|
||||
padding: 25px;
|
||||
|
||||
.pitch {
|
||||
color: $gray-6;
|
||||
margin-bottom: 24px;
|
||||
line-height: 22px;
|
||||
|
||||
a { color: $blue-6; }
|
||||
a:hover { color: $blue-6; }
|
||||
}
|
||||
}
|
||||
|
||||
.content.current{
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.email-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.email {
|
||||
@extend .shadow;
|
||||
border-radius: 4px;
|
||||
background: $white;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
.input {
|
||||
height: 40px;
|
||||
background: $white;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: $gray-5;
|
||||
}
|
||||
|
||||
.email-button {
|
||||
height: 40px;
|
||||
min-width: 110px;
|
||||
float: right;
|
||||
background: $white;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-left: 1px solid $gray-1;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: $blue-7;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.email-button:hover {
|
||||
color: $blue-6;
|
||||
}
|
||||
|
||||
.email-button:disabled {
|
||||
cursor: default;
|
||||
color: $gray-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mod-emails-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
margin-top: 24px;
|
||||
|
||||
.content {
|
||||
display: block;
|
||||
padding: 0px;
|
||||
border: 1px solid $gray-2;
|
||||
border-top: 0px solid transparent;
|
||||
min-width: 550px;
|
||||
|
||||
.mod-email {
|
||||
display: block;
|
||||
height: 42px;
|
||||
border-top: 1px solid $gray-2;
|
||||
|
||||
.date,
|
||||
.delete,
|
||||
.email {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0px 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.email {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.date {
|
||||
float: right;
|
||||
color: $gray-4;
|
||||
}
|
||||
|
||||
.delete {
|
||||
float: right;
|
||||
color: $red-6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete:hover {
|
||||
color: $red-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.round-check {
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
|
||||
|
||||
input[type="checkbox"] + label:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-top: 2px;
|
||||
background: $gray-0;
|
||||
border: 1px solid $gray-3;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: all .15s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled + label:before {
|
||||
background: $gray-0;
|
||||
border: 1px solid $gray-4;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label:before {
|
||||
background: $blue-6;
|
||||
border: 1px solid $blue-6;
|
||||
}
|
||||
|
||||
.pitch {
|
||||
font-size: 13px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
position: relative;
|
||||
top: 72px;
|
||||
width: 100%;
|
||||
height: calc(100% - 94px);
|
||||
|
||||
.pane-left {
|
||||
padding-top: 20px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
border-right: 1px solid $gray-1;
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
|
||||
.tree {
|
||||
opacity: 0.4;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.tree-svg {
|
||||
margin-bottom: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pane-middle {
|
||||
padding-top: 20px;
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
border-right: 1px solid $gray-1;
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.pane-right {
|
||||
position: absolute;
|
||||
left: 520px;
|
||||
width: calc(100% - 520px);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view {
|
||||
padding: 25px;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.view-inside {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tiny-view {
|
||||
font-size: 15px;
|
||||
width: 35%;
|
||||
min-width: 400px;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.small-view {
|
||||
font-size: 15px;
|
||||
width: 50%;
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.small-mid-view {
|
||||
font-size: 15px;
|
||||
width: 70%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.mid-view {
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.large-view {
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.select-a-domain {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: $gray-5;
|
||||
}
|
||||
|
||||
.pane-setting {
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: $gray-7;
|
||||
|
||||
.setting-title, .setting-subtitle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.setting-subtitle {
|
||||
color: $gray-5;
|
||||
}
|
||||
|
||||
.super-setting {
|
||||
display: flex;
|
||||
|
||||
.super-setting-title {
|
||||
display: inline;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.super-setting-text {
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pane-setting:hover {
|
||||
color: $gray-6;
|
||||
-webkit-box-shadow: inset -2px 0px 0 -1px $gray-4;
|
||||
-moz-box-shadow: inset -2px 0px 0 -1px $gray-4;
|
||||
box-shadow: inset -2px 0px 0 -1px $gray-4;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: $blue-6;
|
||||
-webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
|
||||
-moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
|
||||
box-shadow: inset -2px 0px 0 -1px $blue-6;
|
||||
}
|
||||
|
||||
.selected:hover {
|
||||
color: $blue-7;
|
||||
-webkit-box-shadow: inset -2px 0px 0 -1px $blue-6;
|
||||
-moz-box-shadow: inset -2px 0px 0 -1px $blue-6;
|
||||
box-shadow: inset -2px 0px 0 -1px $blue-6;
|
||||
}
|
||||
}
|
||||
|
||||
.import-text {
|
||||
font-size: 15px;
|
||||
color: $gray-6;
|
||||
line-height: 25px;
|
||||
|
||||
a {
|
||||
color: $blue-6;
|
||||
border-bottom: 1px solid $blue-6;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border: solid $gray-7;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(-45deg);
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 2px;
|
||||
position: absolute;
|
||||
left: -35px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.subtext-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 8px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.subtext {
|
||||
max-width: 500px;
|
||||
font-size: 13px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.float-right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.modal-window {
|
||||
position: fixed;
|
||||
background-color: rgba(82, 95, 127, 0.4);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: all 0.2s;
|
||||
-moz-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
|
||||
.inside {
|
||||
border: 1px solid white;
|
||||
border-radius: 6px;
|
||||
width: 500px;
|
||||
position: relative;
|
||||
margin: 10% auto;
|
||||
background: $gray-0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.modal-error-box {
|
||||
width: 100%;
|
||||
color: $red-6;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
text-align: center;
|
||||
color: $gray-6;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal-contents {
|
||||
padding: 12px;
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-window:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-image: url(/images/close.svg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 6px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.box-title {
|
||||
padding: 6px;
|
||||
padding-top: 0px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.box-subtitle {
|
||||
font-size: 14px;
|
||||
padding: 6px;
|
||||
color: $gray-6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.gray {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
color: $gray-6;
|
||||
opacity: 0.8;
|
||||
|
||||
a { color: $gray-6; border: none; }
|
||||
a:hover { color: $gray-6; border: none; }
|
||||
}
|
||||
|
||||
.gray:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.row {
|
||||
.gray-input {
|
||||
background: $gray-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $gray-2;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
color: $gray-5;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 15px;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
color: #32325d;
|
||||
border: none;
|
||||
outline: none;
|
||||
line-height: 28px;
|
||||
background: $gray-0;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: $gray-4;
|
||||
}
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: block;
|
||||
width: calc(100% - 20px);
|
||||
border: 1px solid white;
|
||||
-webkit-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
-moz-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
transition: all 0.3s;
|
||||
|
||||
.theme-title {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.theme-subtitle {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: $gray-5;
|
||||
}
|
||||
|
||||
.theme-image {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.theme:hover {
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
|
||||
.selectedtheme {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.selectedtheme:hover {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .shadow;
|
||||
height: 40px;
|
||||
min-width: 110px;
|
||||
background: $white;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0px 10px 0px 10px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: $blue-7;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: $blue-6;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
cursor: default;
|
||||
color: $gray-6;
|
||||
}
|
||||
|
||||
.short-button {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
-webkit-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
-moz-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: calc(100% - 80px);
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
|
||||
.number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 42px;
|
||||
|
||||
.digits {
|
||||
display: table-cell;
|
||||
font-size: 48px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.gray-digits {
|
||||
color: $gray-3;
|
||||
}
|
||||
|
||||
.gray-7-digits {
|
||||
color: $gray-7;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
text-transform: uppercase;
|
||||
color: $gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: $gray-6;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
foreignObject {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.all-done {
|
||||
margin-top: 40px;
|
||||
color: $gray-5;
|
||||
font-size :15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mod-button {
|
||||
width: fit-content;
|
||||
line-height: 24px;
|
||||
color: $gray-6;
|
||||
background: white;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mod-button:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.red-button {
|
||||
border: 1px solid $gray-3;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.red-button:hover {
|
||||
border: 1px solid $red-6;
|
||||
}
|
||||
|
||||
.green-button {
|
||||
color: $green-7;
|
||||
}
|
||||
|
||||
.green-button:hover {
|
||||
color: $green-7;
|
||||
}
|
||||
|
||||
.green-button:disabled {
|
||||
color: $gray-6;
|
||||
}
|
||||
|
||||
.orange-button {
|
||||
color: $orange-7;
|
||||
}
|
||||
|
||||
.orange-button:hover {
|
||||
color: $orange-7;
|
||||
}
|
||||
|
||||
.big-red-button {
|
||||
background: $red-6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.big-red-button:hover {
|
||||
background: $red-5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comment {
|
||||
-webkit-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
-moz-box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
|
||||
width: calc(100% - 40px);
|
||||
background: white;
|
||||
border: 1px solid white;
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 1s;
|
||||
|
||||
.comment-inside {
|
||||
.actions {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
color: $gray-5;
|
||||
margin-bottom: 18px;
|
||||
line-height: 28px;
|
||||
|
||||
.postlink {
|
||||
color: $gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
.avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.names {
|
||||
margin-left: 50px;
|
||||
|
||||
.name {
|
||||
a {
|
||||
color: $gray-7;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $gray-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.move-left {
|
||||
transform: translateX(10000px);
|
||||
}
|
||||
|
||||
.move-right {
|
||||
transform: translateX(10000px);
|
||||
}
|
||||
|
||||
.graph {
|
||||
margin-top: 16px;
|
||||
height: 300px;
|
||||
.ct-series-a .ct-line {
|
||||
stroke: $gray-7;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: $gray-7;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
4
frontend/sass/dashboard.scss
Normal file
4
frontend/sass/dashboard.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import "common-main.scss";
|
||||
@import "navbar-main.scss";
|
||||
@import "dashboard-main.scss";
|
||||
@import "tomorrow.scss";
|
||||
58
frontend/sass/navbar-main.scss
Normal file
58
frontend/sass/navbar-main.scss
Normal file
@ -0,0 +1,58 @@
|
||||
@import "colors-main.scss";
|
||||
|
||||
.navbar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
width: auto;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
font-size: 16px;
|
||||
color: $gray-5;
|
||||
background: $gray-0;
|
||||
}
|
||||
|
||||
.navbar-logo-text {
|
||||
font-size: 16px;
|
||||
margin-left: 56px;
|
||||
color: $gray-9;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.navbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-logo-text {
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-hamburger {
|
||||
color: $gray-9;
|
||||
}
|
||||
97
frontend/sass/tomorrow.scss
Normal file
97
frontend/sass/tomorrow.scss
Normal file
@ -0,0 +1,97 @@
|
||||
/*
|
||||
|
||||
Atom One Light by Daniel Gamage
|
||||
Original One Light Syntax theme from https://github.com/atom/one-light-syntax
|
||||
|
||||
base: #fafafa
|
||||
mono-1: #383a42
|
||||
mono-2: #686b77
|
||||
mono-3: #a0a1a7
|
||||
hue-1: #0184bb
|
||||
hue-2: #4078f2
|
||||
hue-3: #a626a4
|
||||
hue-4: #50a14f
|
||||
hue-5: #e45649
|
||||
hue-5-2: #c91243
|
||||
hue-6: #986801
|
||||
hue-6-2: #c18401
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
color: #383a42;
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #a0a1a7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #a626a4;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #e45649;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #0184bb;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: #50a14f;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: #c18401;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: #986801;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: #4078f2;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
Reference in New Issue
Block a user