@@ -412,17 +412,39 @@ img.u-userImage[loading="lazy"][src][width][height] {
412412}
413413
414414
415- .o-navBar__list {
415+ .o-topNav {
416416 display : flex;
417- gap : 4pt ;
417+ flex-wrap : wrap;
418+ gap : 0.5rem 1rem ;
418419}
419420
420- .o-navBar__item {
421- display : block;
421+ .o-topNav__item {
422+ display : flex;
423+ align-items : center;
424+ gap : 0.25rem ;
422425}
423426
424- .o-navBar__header {
425- font-weight : bold;
427+ .o-topNav__icon {
428+ display : inline-block;
429+ width : 1rem ;
430+ height : 1rem ;
431+ filter : invert (var (--invert ));
432+ }
433+
434+ .o-topNav__icon .-back {
435+ background : url ('/assets/icons/arrow-left.svg' ) center/contain no-repeat;
436+ }
437+
438+ .o-topNav__icon .-home {
439+ background : url ('/assets/icons/house.svg' ) center/contain no-repeat;
440+ }
441+
442+ .o-topNav__icon .-support {
443+ background : url ('/assets/icons/comment.svg' ) center/contain no-repeat;
444+ }
445+
446+ .o-topNav__icon .-settings {
447+ background : url ('/assets/icons/gear.svg' ) center/contain no-repeat;
426448}
427449
428450.o-mainBar {
@@ -740,6 +762,11 @@ emoji-picker {
740762.m-profileSummary__bio {
741763 flex-basis : 100% ;
742764 width : 100% ;
765+ }
766+
767+ .m-profileSummary__bioEdit {
768+ flex-basis : 100% ;
769+ width : 100% ;
743770 height : 10rem ;
744771 border : 1px solid var (--color-button-border );
745772 border-radius : var (--border-radius-std );
@@ -1538,4 +1565,114 @@ input:checked+.slider:before {
15381565
15391566.o-notification : hover {
15401567 opacity : 0.9 ;
1541- }
1568+ }
1569+
1570+ /* Settings Page */
1571+ .o-settingsNav {
1572+ display : flex;
1573+ flex-direction : column;
1574+ gap : 0.25rem ;
1575+ margin-top : 1rem ;
1576+ padding : 0.5rem ;
1577+ background : var (--color-timeline-bg );
1578+ border : 1px solid var (--color-timeline-item-border );
1579+ border-radius : var (--border-radius-std );
1580+ min-width : 200px ;
1581+ }
1582+
1583+ .o-settingsNav__item {
1584+ display : block;
1585+ padding : 0.5rem 0.75rem ;
1586+ border-radius : var (--border-radius-std );
1587+ text-decoration : none;
1588+ color : var (--color-text-default );
1589+ }
1590+
1591+ .o-settingsNav__item : hover {
1592+ background : var (--color-button-bg-hover );
1593+ }
1594+
1595+ .o-settingsNav__item .-active {
1596+ background : var (--color-button-bg );
1597+ font-weight : bold;
1598+ }
1599+
1600+ .o-settingsContent {
1601+ padding : 1rem ;
1602+ background : var (--color-timeline-bg );
1603+ border : 1px solid var (--color-timeline-item-border );
1604+ border-radius : var (--border-radius-std );
1605+ }
1606+
1607+ .o-settingsContent__header {
1608+ margin : 0 0 1rem 0 ;
1609+ font-size : 1.5rem ;
1610+ }
1611+
1612+ .o-settingsContent__section {
1613+ margin-bottom : 1.5rem ;
1614+ }
1615+
1616+ .o-settingsContent__section : last-child {
1617+ margin-bottom : 0 ;
1618+ }
1619+
1620+ .o-settingsContent__sectionHeader {
1621+ margin : 0 0 0.75rem 0 ;
1622+ font-size : 1.1rem ;
1623+ color : var (--color-text-muted );
1624+ }
1625+
1626+ .o-settingsContent__empty {
1627+ color : var (--color-text-muted );
1628+ font-style : italic;
1629+ }
1630+
1631+ .m-followeeList {
1632+ display : flex;
1633+ flex-direction : column;
1634+ gap : 0.5rem ;
1635+ }
1636+
1637+ .m-followeeList__item {
1638+ display : flex;
1639+ align-items : center;
1640+ gap : 0.75rem ;
1641+ padding : 0.5rem ;
1642+ background : var (--color-post-bg );
1643+ border : 1px solid var (--color-button-border );
1644+ border-radius : var (--border-radius-std );
1645+ }
1646+
1647+ .m-followeeList__avatar {
1648+ flex-shrink : 0 ;
1649+ border-radius : var (--border-radius-std );
1650+ }
1651+
1652+ .m-followeeList__name {
1653+ flex : 1 ;
1654+ min-width : 0 ;
1655+ overflow : hidden;
1656+ text-overflow : ellipsis;
1657+ white-space : nowrap;
1658+ text-decoration : none;
1659+ color : var (--color-text-default );
1660+ }
1661+
1662+ .m-followeeList__name : hover {
1663+ text-decoration : underline;
1664+ }
1665+
1666+ .m-followeeList__actions {
1667+ flex-shrink : 0 ;
1668+ margin-left : 0.5rem ;
1669+ }
1670+
1671+ .m-followeeList__unfollowButton {
1672+ font-size : 0.875rem ;
1673+ padding : 0.25rem 0.5rem ;
1674+ }
1675+
1676+ .m-followeeList__unfollowButtonIcon {
1677+ background : url ('/assets/icons/xmark.svg' ) center/contain no-repeat;
1678+ }
0 commit comments