forked from GNUsocial/gnu-social
[UI] Left panel template and Login page CSS work done
This commit is contained in:
rainydaysavings
parent
81e45e3ace
commit
879666fab7
@ -131,104 +131,3 @@ b {
|
|||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
align-self: center;
|
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);
|
|
||||||
}
|
|
||||||
|
|||||||
@ -159,113 +159,3 @@ b {
|
|||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
align-self: center;
|
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);
|
|
||||||
}
|
|
||||||
|
|||||||
@ -154,115 +154,3 @@ b {
|
|||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
fill: 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 %}
|
{% block header %}
|
||||||
<div id='header'>
|
<div id='header'>
|
||||||
<div id='top'>
|
<div id='top'>
|
||||||
<div id='left-panel'>
|
{% block left %}
|
||||||
<input type="checkbox" id="toggle">
|
{% endblock left %}
|
||||||
<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>
|
|
||||||
<nav id='instance'>
|
<nav id='instance'>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<svg class="icon icon-logo">
|
<svg class="icon icon-logo">
|
||||||
@ -102,7 +68,7 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock header%}
|
||||||
|
|
||||||
{% block nav %}{% endblock %}
|
{% block nav %}{% endblock %}
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
{% extends 'base.html.twig' %}
|
{% extends 'left/left.html.twig' %}
|
||||||
|
|
||||||
{% block meta %}{{ parent() }}
|
{% block meta %}
|
||||||
|
{{ parent() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block title %}{% 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)">
|
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 750px)">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block header %}{{ parent() }}
|
{% block header %}
|
||||||
|
{{ parent() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block left %}
|
||||||
|
{{ parent() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
{% block javascripts %}{% 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 title %}Log in!{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<form method="post">
|
<div class='content'>
|
||||||
{% if error %}
|
<form method="post">
|
||||||
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
{% if error %}
|
||||||
{% endif %}
|
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% if app.user %}
|
{% if app.user %}
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
|
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>
|
</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>
|
<div class="checkbox mb-3">
|
||||||
<label for="inputNickname">Nickname</label>
|
<label>
|
||||||
<input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
|
<input type="checkbox" name="_remember_me"> Remember me
|
||||||
<label for="inputPassword">Password</label>
|
</label>
|
||||||
<input type="password" name="password" id="inputPassword" class="form-control" required>
|
</div>
|
||||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
|
||||||
|
|
||||||
<div class="checkbox mb-3">
|
<button class="btn btn-lg btn-primary" type="submit">
|
||||||
<label>
|
Sign in
|
||||||
<input type="checkbox" name="_remember_me"> Remember me
|
</button>
|
||||||
</label>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock body %}
|
||||||
<button class="btn btn-lg btn-primary" type="submit">
|
|
||||||
Sign in
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{% endblock %}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user