Tweaks to hashtag headers
This commit is contained in:
parent
31d563fa71
commit
84088f0d1b
4 changed files with 120 additions and 108 deletions
|
@ -2265,6 +2265,36 @@ body.layout-single-column {
|
||||||
color: var(--color-fg);
|
color: var(--color-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Hashtag header */
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--color-accent);
|
||||||
|
background-color: var(--color-accent-bg);
|
||||||
|
border-top: 1px solid var(--color-accent-lines);
|
||||||
|
border-bottom: 1px solid var(--color-lines);
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header h1 {
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) and (max-width:1174px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-left: 1px solid var(--color-accent-lines);
|
||||||
|
border-right: 1px solid var(--color-accent-lines);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Account recommendations (For You Tab + User directory */
|
/* Account recommendations (For You Tab + User directory */
|
||||||
.layout-single-column .scrollable .account-card {
|
.layout-single-column .scrollable .account-card {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
|
@ -2528,33 +2558,6 @@ body.layout-single-column {
|
||||||
padding: 6px 17px;
|
padding: 6px 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hashtag header */
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
color: var(--color-fg-muted);
|
|
||||||
background-color: var(--color-accent-bg);
|
|
||||||
border-top: 1px solid var(--color-accent-lines);
|
|
||||||
border-bottom: 1px solid var(--color-lines);
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header h1 {
|
|
||||||
color: var(--color-content-fg);
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) and (max-width:1174px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
border-top-left-radius: 8px;
|
|
||||||
border-top-right-radius: 8px;
|
|
||||||
border-left: 1px solid var(--color-accent-lines);
|
|
||||||
border-right: 1px solid var(--color-accent-lines);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 🔔 Notifications
|
/* 🔔 Notifications
|
||||||
|
|
|
@ -2265,6 +2265,36 @@ body.layout-single-column {
|
||||||
color: var(--color-fg);
|
color: var(--color-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Hashtag header */
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--color-accent);
|
||||||
|
background-color: var(--color-accent-bg);
|
||||||
|
border-top: 1px solid var(--color-accent-lines);
|
||||||
|
border-bottom: 1px solid var(--color-lines);
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header h1 {
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) and (max-width:1174px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-left: 1px solid var(--color-accent-lines);
|
||||||
|
border-right: 1px solid var(--color-accent-lines);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Account recommendations (For You Tab + User directory */
|
/* Account recommendations (For You Tab + User directory */
|
||||||
.layout-single-column .scrollable .account-card {
|
.layout-single-column .scrollable .account-card {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
|
@ -2528,33 +2558,6 @@ body.layout-single-column {
|
||||||
padding: 6px 17px;
|
padding: 6px 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hashtag header */
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
color: var(--color-fg-muted);
|
|
||||||
background-color: var(--color-accent-bg);
|
|
||||||
border-top: 1px solid var(--color-accent-lines);
|
|
||||||
border-bottom: 1px solid var(--color-lines);
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header h1 {
|
|
||||||
color: var(--color-content-fg);
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) and (max-width:1174px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
border-top-left-radius: 8px;
|
|
||||||
border-top-right-radius: 8px;
|
|
||||||
border-left: 1px solid var(--color-accent-lines);
|
|
||||||
border-right: 1px solid var(--color-accent-lines);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 🔔 Notifications
|
/* 🔔 Notifications
|
||||||
|
|
|
@ -2265,6 +2265,36 @@ body.layout-single-column {
|
||||||
color: var(--color-fg);
|
color: var(--color-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Hashtag header */
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--color-accent);
|
||||||
|
background-color: var(--color-accent-bg);
|
||||||
|
border-top: 1px solid var(--color-accent-lines);
|
||||||
|
border-bottom: 1px solid var(--color-lines);
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header h1 {
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) and (max-width:1174px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-left: 1px solid var(--color-accent-lines);
|
||||||
|
border-right: 1px solid var(--color-accent-lines);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Account recommendations (For You Tab + User directory */
|
/* Account recommendations (For You Tab + User directory */
|
||||||
.layout-single-column .scrollable .account-card {
|
.layout-single-column .scrollable .account-card {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
|
@ -2528,33 +2558,6 @@ body.layout-single-column {
|
||||||
padding: 6px 17px;
|
padding: 6px 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hashtag header */
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
color: var(--color-fg-muted);
|
|
||||||
background-color: var(--color-accent-bg);
|
|
||||||
border-top: 1px solid var(--color-accent-lines);
|
|
||||||
border-bottom: 1px solid var(--color-lines);
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header h1 {
|
|
||||||
color: var(--color-content-fg);
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) and (max-width:1174px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
border-top-left-radius: 8px;
|
|
||||||
border-top-right-radius: 8px;
|
|
||||||
border-left: 1px solid var(--color-accent-lines);
|
|
||||||
border-right: 1px solid var(--color-accent-lines);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 🔔 Notifications
|
/* 🔔 Notifications
|
||||||
|
|
|
@ -2265,6 +2265,36 @@ body.layout-single-column {
|
||||||
color: var(--color-fg);
|
color: var(--color-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Hashtag header */
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--color-accent);
|
||||||
|
background-color: var(--color-accent-bg);
|
||||||
|
border-top: 1px solid var(--color-accent-lines);
|
||||||
|
border-bottom: 1px solid var(--color-lines);
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.layout-single-column .hashtag-header__header h1 {
|
||||||
|
color: var(--color-content-fg);
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) and (max-width:1174px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:890px) {
|
||||||
|
.layout-single-column .hashtag-header {
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-left: 1px solid var(--color-accent-lines);
|
||||||
|
border-right: 1px solid var(--color-accent-lines);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Account recommendations (For You Tab + User directory */
|
/* Account recommendations (For You Tab + User directory */
|
||||||
.layout-single-column .scrollable .account-card {
|
.layout-single-column .scrollable .account-card {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
|
@ -2528,33 +2558,6 @@ body.layout-single-column {
|
||||||
padding: 6px 17px;
|
padding: 6px 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hashtag header */
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
color: var(--color-fg-muted);
|
|
||||||
background-color: var(--color-accent-bg);
|
|
||||||
border-top: 1px solid var(--color-accent-lines);
|
|
||||||
border-bottom: 1px solid var(--color-lines);
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.layout-single-column .hashtag-header__header h1 {
|
|
||||||
color: var(--color-content-fg);
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) and (max-width:1174px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width:890px) {
|
|
||||||
.layout-single-column .hashtag-header {
|
|
||||||
border-top-left-radius: 8px;
|
|
||||||
border-top-right-radius: 8px;
|
|
||||||
border-left: 1px solid var(--color-accent-lines);
|
|
||||||
border-right: 1px solid var(--color-accent-lines);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 🔔 Notifications
|
/* 🔔 Notifications
|
||||||
|
|
Loading…
Reference in a new issue