[UI] Left panel template and Login page CSS work done
This commit is contained in:
rainydaysavings
Hugo Sales
parent
3ba46a9a60
commit
0dc3d3023e
|
|
@ -130,105 +130,4 @@ b {
|
|||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*-------------------------------------*/
|
||||
/* LEFT PANEL -------------------------*/
|
||||
.navbar {
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.navbar {
|
||||
left: -15em;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: #91B9D0;
|
||||
margin-left: var(--unit-size);
|
||||
margin-bottom: var(--small-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.navbar a:nth-child(1) {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.icon-menu label {
|
||||
display: none;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle:checked+.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
}
|
||||
|
||||
.info {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info #nick {
|
||||
order: 1;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .tags {
|
||||
order: 2;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .stats {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.info .tags i {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
.info .tags i:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
.stats span:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
}
|
||||
|
|
@ -158,114 +158,4 @@ b {
|
|||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*-------------------------------------*/
|
||||
/* LEFT PANEL -------------------------*/
|
||||
.navbar {
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background: rgb(51,61,71);
|
||||
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.navbar {
|
||||
left: -100%;
|
||||
top:0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: #91B9D0;
|
||||
margin-left: var(--unit-size);
|
||||
margin-bottom: var(--small-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.navbar a:nth-child(1) {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.icon-menu label {
|
||||
display: block;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#toggle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
.left-panel input[type=checkbox] {
|
||||
transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
-webkit-transform: scale(2);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#toggle:checked~.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
}
|
||||
|
||||
.info {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info #nick {
|
||||
order: 1;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .tags {
|
||||
order: 2;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .stats {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.info .tags i {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
.info .tags i:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
.stats span:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
}
|
||||
|
|
@ -153,116 +153,4 @@ b {
|
|||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*-------------------------------------*/
|
||||
/* LEFT PANEL -------------------------*/
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background: rgb(51,61,71);
|
||||
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.navbar {
|
||||
left: -100%;
|
||||
top:0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: #91B9D0;
|
||||
margin-left: var(--unit-size);
|
||||
margin-bottom: var(--small-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.navbar a:nth-child(1) {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#toggle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
width: var(--unit-size);
|
||||
height: var(--unit-size);
|
||||
opacity: 0;
|
||||
}
|
||||
.left-panel input[type=checkbox] {
|
||||
transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
-webkit-transform: scale(2);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#toggle:checked~.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
}
|
||||
|
||||
.info {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info #nick {
|
||||
order: 1;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .tags {
|
||||
order: 2;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .stats {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.info .tags i {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
.info .tags i:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
.stats span:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
}
|
||||
98
public/assets/css/left/left.css
Normal file
98
public/assets/css/left/left.css
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
.navbar {
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.navbar {
|
||||
left: -15em;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: #91B9D0;
|
||||
margin-left: var(--unit-size);
|
||||
margin-bottom: var(--small-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.navbar a:nth-child(1) {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.icon-menu label {
|
||||
display: none;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle:checked+.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
}
|
||||
|
||||
.info {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info #nick {
|
||||
order: 1;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .tags {
|
||||
order: 2;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .stats {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.info .tags i {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
.info .tags i:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
.stats span:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
107
public/assets/css/left/left_mid.css
Normal file
107
public/assets/css/left/left_mid.css
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
.navbar {
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background: rgb(51,61,71);
|
||||
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.navbar {
|
||||
left: -100%;
|
||||
top:0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: #91B9D0;
|
||||
margin-left: var(--unit-size);
|
||||
margin-bottom: var(--small-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.navbar a:nth-child(1) {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.icon-menu label {
|
||||
display: block;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#toggle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
.left-panel input[type=checkbox] {
|
||||
transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
-webkit-transform: scale(2);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#toggle:checked~.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
}
|
||||
|
||||
.info {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info #nick {
|
||||
order: 1;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .tags {
|
||||
order: 2;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .stats {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.info .tags i {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
.info .tags i:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
.stats span:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
109
public/assets/css/left/left_small.css
Normal file
109
public/assets/css/left/left_small.css
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
.navbar {
|
||||
width: 100%;
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background: rgb(51,61,71);
|
||||
background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.navbar {
|
||||
left: -100%;
|
||||
top:0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: #91B9D0;
|
||||
margin-left: var(--unit-size);
|
||||
margin-bottom: var(--small-size);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.navbar a:nth-child(1) {
|
||||
margin-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #F6F6F6;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#toggle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
width: var(--unit-size);
|
||||
height: var(--unit-size);
|
||||
opacity: 0;
|
||||
}
|
||||
.left-panel input[type=checkbox] {
|
||||
transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
-webkit-transform: scale(2);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#toggle:checked~.navbar {
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
padding: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
}
|
||||
|
||||
.info {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.info #nick {
|
||||
order: 1;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .tags {
|
||||
order: 2;
|
||||
margin-bottom: var(--small-size);
|
||||
}
|
||||
|
||||
.info .stats {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.info .tags i {
|
||||
color: #91B9D0;
|
||||
}
|
||||
|
||||
.info .tags i:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
|
||||
.stats span:last-child {
|
||||
margin-left: var(--small-size);
|
||||
}
|
||||
62
public/assets/css/login/login.css
Normal file
62
public/assets/css/login/login.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: var(--nav-size);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
font-size: var(--medium-size);
|
||||
background-color: #00000050;
|
||||
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: calc(2 * var(--unit-size));
|
||||
margin-right: var(--side-margin);
|
||||
margin-left: var(--side-margin);
|
||||
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: var(--main-size);
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password]
|
||||
{
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
color: #f6f6f6;
|
||||
border-style: none;
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.pair {
|
||||
float:left;
|
||||
width: 100%;
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
.pair input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--medium-size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
62
public/assets/css/login/login_mid.css
Normal file
62
public/assets/css/login/login_mid.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
font-size: var(--medium-size);
|
||||
background-color: #00000050;
|
||||
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: calc(2 * var(--unit-size));
|
||||
margin-right: var(--side-margin);
|
||||
margin-left: var(--side-margin);
|
||||
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: var(--main-size);
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password]
|
||||
{
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
color: #f6f6f6;
|
||||
border-style: none;
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.pair {
|
||||
float:left;
|
||||
width: 100%;
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
.pair input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--medium-size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
62
public/assets/css/login/login_small.css
Normal file
62
public/assets/css/login/login_small.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
font-size: var(--medium-size);
|
||||
background-color: #00000050;
|
||||
padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
|
||||
border-radius: var(--unit-size);
|
||||
margin-top: calc(2 * var(--unit-size));
|
||||
margin-right: var(--side-margin);
|
||||
margin-left: var(--side-margin);
|
||||
box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: var(--main-size);
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password]
|
||||
{
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
color: #f6f6f6;
|
||||
border-style: none;
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
}
|
||||
|
||||
.pair {
|
||||
float:left;
|
||||
width: 100%;
|
||||
margin-bottom: var(--medium-size);
|
||||
}
|
||||
.pair input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: var(--medium-size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -54,42 +54,8 @@
|
|||
{% block header %}
|
||||
<div id='header'>
|
||||
<div id='top'>
|
||||
<div id='left-panel'>
|
||||
<input type="checkbox" id="toggle">
|
||||
<div class="icon-menu">
|
||||
<label for="toggle" id='menu'></label>
|
||||
</div>
|
||||
<div class='navbar'>
|
||||
<div class='profile'>
|
||||
<svg class="icon icon-avatar">
|
||||
<use xlink:href="#icon-avatar"></use>
|
||||
</svg>
|
||||
<div class="info">
|
||||
<b id="nick">someone</b>
|
||||
<div class="tags">
|
||||
<i>coffee addict</i>
|
||||
<i>lazy</i>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span>
|
||||
<b>1337</b>
|
||||
Followers</span>
|
||||
<span>
|
||||
<b>42</b>
|
||||
Following</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href='#'>Bookmarks</a>
|
||||
<a href='#'>Happenings</a>
|
||||
<a href='#'>Messages</a>
|
||||
<a href='#'>Replies</a>
|
||||
<a href='#'>Favourites</a>
|
||||
<a href='#'>Reverse Favs</a>
|
||||
<a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
|
||||
<a href='#'>Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
{% block left %}
|
||||
{% endblock left %}
|
||||
<nav id='instance'>
|
||||
<a href="#">
|
||||
<svg class="icon icon-logo">
|
||||
|
|
@ -102,7 +68,7 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock header%}
|
||||
|
||||
{% block nav %}{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
{% extends 'left/left.html.twig' %}
|
||||
|
||||
{% block meta %}{{ parent() }}
|
||||
{% block meta %}
|
||||
{{ parent() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}{% endblock %}
|
||||
|
|
@ -12,7 +13,13 @@
|
|||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 750px)">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}{{ parent() }}
|
||||
{% block header %}
|
||||
{{ parent() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block left %}
|
||||
{{ parent() }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block javascripts %}{% endblock %}
|
||||
61
templates/left/left.html.twig
Normal file
61
templates/left/left.html.twig
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
{% extends '/base.html.twig' %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left.css') }}" media="screen and (min-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_mid.css') }}" media="screen and (max-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_small.css') }}" media="screen and (max-width: 750px)">
|
||||
{% endblock %}
|
||||
|
||||
{% block left %}
|
||||
{% if app.user %}
|
||||
<div id='left-panel'>
|
||||
<input type="checkbox" id="toggle">
|
||||
<div class="icon-menu">
|
||||
<label for="toggle" id='menu'></label>
|
||||
</div>
|
||||
<div class='navbar'>
|
||||
<div class='profile'>
|
||||
<svg class="icon icon-avatar">
|
||||
<use xlink:href="#icon-avatar"></use>
|
||||
</svg>
|
||||
<div class="info">
|
||||
<b id="nick">{{ app.user.username }}</b>
|
||||
<div class="tags">
|
||||
<i>coffee addict</i>
|
||||
<i>lazy</i>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span>
|
||||
<b>1337</b>
|
||||
Followers</span>
|
||||
<span>
|
||||
<b>42</b>
|
||||
Following</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href='#'>Bookmarks</a>
|
||||
<a href='#'>Happenings</a>
|
||||
<a href='#'>Messages</a>
|
||||
<a href='#'>Replies</a>
|
||||
<a href='#'>Favourites</a>
|
||||
<a href='#'>Reverse Favs</a>
|
||||
<a href="{{ path('settings_profile') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
|
||||
<a href='#'>Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id='left-panel'>
|
||||
<input type="checkbox" id="toggle">
|
||||
<div class="icon-menu">
|
||||
<label for="toggle" id='menu'></label>
|
||||
</div>
|
||||
<div class='navbar'>
|
||||
<a href="{{ path('login') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'login' %}active{% endif %}'>Login</a>
|
||||
<a href='#'>Register</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,34 +1,48 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
{% extends 'left_panel.html.twig' %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login.css') }}" media="screen and (min-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_mid.css') }}" media="screen and (max-width: 1300px)">
|
||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/login/login_small.css') }}" media="screen and (max-width: 750px)">
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}Log in!{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<form method="post">
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
||||
{% endif %}
|
||||
<div class='content'>
|
||||
<form method="post">
|
||||
{% if error %}
|
||||
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if app.user %}
|
||||
<div class="mb-3">
|
||||
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
|
||||
{% if app.user %}
|
||||
<div class="mb-3">
|
||||
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
<div class='pair'>
|
||||
<label for="inputNickname">Nickname</label>
|
||||
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class='pair' id='pass'>
|
||||
<label for="inputPassword">Password</label>
|
||||
<input type="password" name="password" id="inputPassword" class="form-control" required>
|
||||
</div>
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
<label for="inputNickname">Nickname</label>
|
||||
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
|
||||
<label for="inputPassword">Password</label>
|
||||
<input type="password" name="password" id="inputPassword" class="form-control" required>
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" name="_remember_me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" name="_remember_me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-primary" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
<button class="btn btn-lg btn-primary" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user