mirror/Archipelago
1
0
Fork 1
mirror of https://github.com/ArchipelagoMW/Archipelago.git synced 2026-04-10 07:38:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

[WebHost] Unify style and behavior of popover and mobile menus (#1596)

Browse Source 
* [WebHost] Unify styles for popover and mobile menus. Adjust popover menu to function the same as the mobile menu, and toggle via JS.

* Remove class `first-link` in favor of CSS `:first-child`.

* Adjust mobile menu link font size and padding. Change wording of popover trigger text. Add border-right to popover menu. Change "Upload Host File" to "Host Game"

* Change mobile menu text to "Host Game"
This commit is contained in:
Chris Wilson
2023-03-27 00:12:10 -04:00
committed by GitHub
parent b5bd93c420
commit f09f3663d6
4 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
WebHostLib/static/styles/themes/base.css
View File

@@ -30,6 +30,8 @@ html{
}
#base-header-right{
display: flex;
flex-direction: row;
margin-top: 4px;
}
@@ -42,7 +44,7 @@ html{
margin-top: 4px;
}
#base-header a, #base-header-mobile-menu a, #dropdown #dropdown-text{
#base-header a, #base-header-mobile-menu a, #base-header-popover-text{
color: #2f6b83;
text-decoration: none;
cursor: pointer;
@@ -72,41 +74,49 @@ html{
position: absolute;
top: 7rem;
right: 0;
padding-top: 1rem;
}
#base-header-mobile-menu a{
padding: 4rem 2rem;
font-size: 5rem;
padding: 3rem 1.5rem;
font-size: 4rem;
line-height: 5rem;
color: #699ca8;
border-top: 1px solid #d3d3d3;
}
#base-header-mobile-menu :first-child, #base-header-popover-menu :first-child{
border-top: none;
}
#base-header-right-mobile img{
height: 3rem;
}
#dropdown {
display: inline-block;
}
#dropdown:hover #dropdown-menu {
display: block;
}
#dropdown-menu{
#base-header-popover-menu{
display: none;
flex-direction: column;
position: absolute;
background-color: #fff;
min-width: 160px;
padding: 12px 16px;
margin-left: -90px;
border-radius: 15px;
margin-left: -108px;
margin-top: 2.25rem;
border-radius: 10px;
border-left: 2px solid #d0ebe6;
border-bottom: 2px solid #d0ebe6;
border-right: 1px solid #d0ebe6;
filter: drop-shadow(-6px 6px 2px #2e3e83);
}
#dropdown-icon {
height: 7px;
#base-header-popover-menu a{
color: #699ca8;
border-top: 1px solid #d3d3d3;
text-align: center;
font-size: 1.5rem;
line-height: 3rem;
margin-right: 2px;
padding: 0.25rem 1rem;
}
#base-header-popover-icon {
width: 14px;
margin-bottom: 3px;
margin-left: 2px;
@@ -142,10 +152,10 @@ html{
}
#base-header-mobile-menu a{
font-size: 2rem;
font-size: 1.5rem;
line-height: 3rem;
margin: 0;
padding: 0 1rem;
padding: 0.25rem 1rem;
}
}
@@ -165,4 +175,4 @@ html{
margin-top: 30px;
margin-left: 20px;
}
}
}