albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Multiple style fixes, added top bar to layout

Browse source
This commit is contained in:
mrfry 2021-05-26 18:36:57 +02:00
parent 53d955808a
commit 3a67f2a1aa
11 changed files with 314 additions and 351 deletions
Download patch file Download diff file Expand all files Collapse all files

202
src/components/layout.module.css
View file

@ -1,24 +1,83 @@
.modalHead {
text-align: center;
font-size: 22px;
font-weight: 700;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 20px;
letter-spacing: 3px;
}
.donateLogoContainer {
.topBar {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background-color: var(--background-color);
z-index: 2;
width: 100%;
max-width: 1200px;
border-bottom: 1px solid var(--primary-color);
height: 45px;
}
.donateLogoContainer img {
max-width: 100px;
margin: 5px;
.topBar img {
display: block;
max-height: 45px;
width: auto;
height: auto;
border: none;
margin: 0px 15px;
}
.topBarLinks {
display: flex;
align-items: center;
word-wrap: break-word;
}
.topBarLinks > * {
text-align: center;
padding: 0px 10px;
text-decoration: none;
}
.topBarLinks > *:hover {
background-color: var(--hoover-color);
border-radius: 5px;
}
.sidebar {
top: 45px;
display: flex;
flex-direction: column;
width: 150px;
background-color: #222426;
position: fixed;
height: 100%;
overflow: auto;
}
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
text-align: center;
float: none;
}
}
.content {
height: 100%;
margin-left: 150px;
margin-top: 45px;
padding: 1px 7px;
word-wrap: break-word;
}
@media screen and (max-width: 700px) {
div.content {
padding: 1px 0px;
margin-left: 0;
}
}
.sidebarLinks > a {
border: 0.5px solid transparent;
display: block;
@ -48,3 +107,116 @@
text-shadow: 2px 2px 8px black;
transition: width 0.5s, height 0.5s, ease-out 0.5s;
}
.userStatus {
display: flex;
height: 40px;
margin: 3px;
align-items: center;
text-align: center;
justify-content: space-between;
}
.modalHead {
text-align: center;
font-size: 22px;
font-weight: 700;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 20px;
letter-spacing: 3px;
}
.donateLogoContainer {
display: flex;
justify-content: center;
}
.donateLogoContainer img {
max-width: 100px;
margin: 5px;
border-radius: 5px;
}
.menuicon div {
display: none;
}
@media screen and (max-width: 700px) {
.menuicon div {
display: block;
margin: 6px 0;
width: 30px;
height: 5px;
background-color: var(--bright-color);
}
.menuicon:hover {
background-color: var(--hoover-color);
}
.menuicon {
cursor: pointer;
display: inline;
}
}
.logout {
margin: 0px 5px;
padding: 3px;
cursor: pointer;
font-size: 15.5px;
}
.logout:hover {
color: #fff;
}
.userStatus > a {
text-decoration: none;
font-size: 27px;
}
.msgs {
font-size: 15px;
}
.msgs :first-child {
font-size: 27px;
margin-left: 4px;
}
.msgs > div {
padding: 2px 6px;
font-size: 13.5px;
}
.unreadNotification {
height: 45px;
}
.unreadNotification > span {
top: 8px;
display: inline-block;
position: relative;
}
.unreadNotification > div {
display: inline-block;
right: 10px;
top: 10px;
position: relative;
background-color: red;
font-size: 14px;
border-radius: 5px;
padding: 0px 3px;
}
@media screen and (max-width: 700px) {
.unreadNotification > div {
right: -10px;
top: -23px;
}
}