tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-06 19:25:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

align settings button

Browse Source
This commit is contained in:
geoffrey45 2021-11-17 10:44:51 +03:00
parent 541830bfdc
commit 90ecbe1a04
2 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.vue
View File

@ -12,8 +12,10 @@
<hr class="seperator" /> <hr class="seperator" />
<PinnedStuff :collapsed="collapsed" /> <PinnedStuff :collapsed="collapsed" />
<div id="settings-button"> <div id="settings-button">
<div class="nav-icon" id="settings-icon"></div> <div class="in">
<span id="text">Settings</span> <div class="nav-icon" id="settings-icon"></div>
<span id="text">Settings</span>
</div>
</div> </div>
</div> </div>
<div class="nav"> <div class="nav">
@ -62,6 +64,14 @@ export default {
animation-duration: 2s; animation-duration: 2s;
animation-iteration-count: 1; animation-iteration-count: 1;
} }
.nav-container .in {
display: flex;
align-items: center;
}
.collapsed .in {
flex-direction: column;
}
#logo-container { #logo-container {
height: 60px; height: 60px;
@ -94,21 +104,25 @@ export default {
.l-container #settings-button { .l-container #settings-button {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
color: #fff;
display: flex; display: flex;
align-items: center; color: #fff;
justify-content: flex-start;
height: 50px; height: 50px;
width: 100%; width: 100%;
} }
#settings-button .in {
display: flex;
align-items: center;
justify-content: center;
}
.l-container #settings-button:hover { .l-container #settings-button:hover {
background: #17c93d7c; background: #17c93d7c;
cursor: pointer; cursor: pointer;
} }
.l-container #settings-button #settings-icon { .l-container #settings-button #settings-icon {
margin-left: 10px; margin-left: 23px;
margin-right: 5px; margin-right: 5px;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -118,13 +132,7 @@ export default {
background-position: center; background-position: center;
} }
.collapsed #settings-button {
flex-direction: column;
justify-content: center;
}
.collapsed #settings-button #settings-icon { .collapsed #settings-button #settings-icon {
margin-left: 0;
margin-right: 0; margin-right: 0;
} }

2
src/components/LeftSidebar/Navigation.vue
View File

@ -91,7 +91,7 @@ export default {
.collapsed span { .collapsed span {
font-size: small; font-size: small;
margin-top: 20px; margin-top: 5px;
} }
.nav-container .nav-button:hover { .nav-container .nav-button:hover {