@ -314,6 +314,70 @@ header {
@@ -314,6 +314,70 @@ header {
color : var ( --bg-primary ) ;
}
/* Wiki Index Page */
. wiki-index-content {
margin-top : 1rem ;
}
. wiki-index-intro {
margin-bottom : 1rem ;
color : var ( --text-secondary ) ;
}
. wiki-index-links {
display : flex ;
flex-wrap : wrap ;
gap : 0 . 75rem ;
margin-bottom : 1 . 5rem ;
}
. wiki-index-links . wiki-link {
display : inline-flex ;
align-items : center ;
padding : 0 . 75rem 1rem ;
background : var ( --bg-primary ) ;
color : var ( --text-primary ) ;
text-decoration : none ;
border-radius : 6px ;
border : 1px solid var ( --border-color ) ;
font-size : 0 . 95rem ;
transition : all 0 . 2s ;
white-space : nowrap ;
gap : 0 . 5rem ;
}
. wiki-index-links . wiki-link : hover {
background : var ( --accent-color ) ;
color : # ffffff ;
border-color : var ( --accent-color ) ;
transform : translateY ( -1px ) ;
box-shadow : 0 2px 4px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. wiki-index-links . wiki-link . active {
background : var ( --accent-color ) ;
color : var ( --bg-primary ) ;
font-weight : 500 ;
border-color : var ( --accent-color ) ;
}
. wiki-index-links . wiki-link . active : hover {
background : var ( --link-hover ) ;
color : var ( --bg-primary ) ;
}
. wiki-index-links . wiki-link : focus-visible {
outline : var ( --focus-outline ) ;
outline-offset : var ( --focus-offset ) ;
}
. wiki-sidebar-note {
margin-top : 1rem ;
color : var ( --text-secondary ) ;
font-size : 0 . 9rem ;
font-style : italic ;
}
. main-content {
flex : 1 ;
min-width : 0 ;
@ -1562,3 +1626,201 @@ p.icon-inline, h1.icon-inline, h2.icon-inline, h3.icon-inline, h4.icon-inline, h
@@ -1562,3 +1626,201 @@ p.icon-inline, h1.icon-inline, h2.icon-inline, h3.icon-inline, h4.icon-inline, h
align-items : center ;
gap : 0 . 5rem ;
}
/* Mobile Selector Dropdown */
. mobile-selector {
display : none ; /* Hidden on desktop, shown on mobile */
margin-bottom : 1rem ;
padding : 0 1rem ;
}
. mobile-select {
width : 100 % ;
padding : 0 . 75rem ;
background : var ( --bg-secondary ) ;
color : var ( --text-primary ) ;
border : 1px solid var ( --border-color ) ;
border-radius : 4px ;
font-size : 1rem ;
font-family : inherit ;
cursor : pointer ;
appearance : none ;
background-image : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f0f0f0' d='M6 9L1 4h10z'/%3E%3C/svg%3E" ) ;
background-repeat : no-repeat ;
background-position : right 0 . 75rem center ;
background-size : 12px ;
padding-right : 2 . 5rem ;
}
. mobile-select : focus-visible {
outline : var ( --focus-outline ) ;
outline-offset : var ( --focus-offset ) ;
border-color : var ( --focus-color ) ;
}
. mobile-select option {
background : var ( --bg-secondary ) ;
color : var ( --text-primary ) ;
padding : 0 . 5rem ;
}
/* Mobile Custom Dropdown with Profile Pictures */
. mobile-selector-custom {
display : none ; /* Hidden on desktop, shown on mobile */
position : relative ;
margin-bottom : 1rem ;
padding : 0 1rem ;
z-index : 100 ;
}
. mobile-dropdown-toggle {
width : 100 % ;
padding : 0 . 75rem ;
background : var ( --bg-secondary ) ;
color : var ( --text-primary ) ;
border : 1px solid var ( --border-color ) ;
border-radius : 4px ;
font-size : 1rem ;
font-family : inherit ;
cursor : pointer ;
display : flex ;
align-items : center ;
justify-content : space-between ;
gap : 0 . 75rem ;
text-align : left ;
}
. mobile-dropdown-toggle : focus-visible {
outline : var ( --focus-outline ) ;
outline-offset : var ( --focus-offset ) ;
border-color : var ( --focus-color ) ;
}
. mobile-dropdown-selected {
display : flex ;
align-items : center ;
gap : 0 . 75rem ;
flex : 1 ;
min-width : 0 ;
}
. mobile-dropdown-avatar {
width : 32px ;
height : 32px ;
border-radius : 50 % ;
object-fit : cover ;
flex-shrink : 0 ;
border : 1px solid var ( --border-color ) ;
}
. mobile-dropdown-avatar-placeholder {
width : 32px ;
height : 32px ;
border-radius : 50 % ;
background : var ( --bg-primary ) ;
border : 1px solid var ( --border-color ) ;
display : flex ;
align-items : center ;
justify-content : center ;
flex-shrink : 0 ;
}
. mobile-dropdown-avatar-placeholder . icon-inline {
width : 18px ;
height : 18px ;
margin : 0 ;
color : var ( --text-secondary ) ;
}
. mobile-dropdown-title {
flex : 1 ;
min-width : 0 ;
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
font-weight : 500 ;
}
. mobile-dropdown-arrow {
flex-shrink : 0 ;
font-size : 0 . 75rem ;
color : var ( --text-secondary ) ;
transition : transform 0 . 2s ;
}
. mobile-dropdown-toggle [ aria-expanded = "true" ] . mobile-dropdown-arrow {
transform : rotate ( 180deg ) ;
}
. mobile-dropdown-menu {
position : absolute ;
top : 100 % ;
left : 1rem ;
right : 1rem ;
margin-top : 0 . 25rem ;
background : var ( --bg-secondary ) ;
border : 1px solid var ( --border-color ) ;
border-radius : 4px ;
list-style : none ;
padding : 0 . 5rem 0 ;
margin-left : 0 ;
max-height : 60vh ;
overflow-y : auto ;
box-shadow : 0 4px 6px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
opacity : 0 ;
visibility : hidden ;
transform : translateY ( -10px ) ;
transition : opacity 0 . 2s , visibility 0 . 2s , transform 0 . 2s ;
z-index : 1000 ;
}
. mobile-dropdown-menu . active {
opacity : 1 ;
visibility : visible ;
transform : translateY ( 0 ) ;
}
. mobile-dropdown-menu li {
padding : 0 ;
margin : 0 ;
}
. mobile-dropdown-menu li [ role = "option" ] {
display : flex ;
align-items : center ;
gap : 0 . 75rem ;
padding : 0 . 75rem 1rem ;
cursor : pointer ;
transition : background 0 . 2s ;
border : none ;
background : transparent ;
width : 100 % ;
text-align : left ;
}
. mobile-dropdown-menu li [ role = "option" ] : hover ,
. mobile-dropdown-menu li [ role = "option" ] : focus {
background : var ( --bg-primary ) ;
outline : none ;
}
. mobile-dropdown-menu li [ role = "option" ] . selected {
background : var ( --bg-primary ) ;
border-left : 3px solid var ( --accent-color ) ;
}
. mobile-dropdown-menu li [ role = "option" ] . mobile-dropdown-avatar ,
. mobile-dropdown-menu li [ role = "option" ] . mobile-dropdown-avatar-placeholder {
width : 28px ;
height : 28px ;
}
. mobile-dropdown-menu li [ role = "option" ] . mobile-dropdown-avatar-placeholder . icon-inline {
width : 16px ;
height : 16px ;
}
. mobile-dropdown-menu li [ role = "option" ] . mobile-dropdown-title {
font-weight : normal ;
font-size : 0 . 95rem ;
}