-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
feat(theme): add boba theme (@Chouhan705) #7995
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 1 commit
ce23444
a88b637
029889a
2ade380
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* ========================================================================== | ||
| Boba (Bubble Tea) Theme O3O | ||
| A cozy, milk-tea inspired palette with dark tapioca contrast. | ||
| ========================================================================== */ | ||
|
|
||
| :root { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the whole rule is not needed, remove |
||
| --bg-color: #f4ebd9; /* creamy milk tea base */ | ||
| --main-color: #c39b7d; /* brown sugar syrup accent */ | ||
| --sub-color: #a68a73; /* taro milky tint */ | ||
| --sub-alt-color: #e9dec7; /* slightly darker cream for panels */ | ||
| --text-color: #3c2f2f; /* dark boba pearl text */ | ||
| --error-color: #d66868; /* strawberry popping boba */ | ||
| --error-bg-color: #f0d3d3; | ||
| --caret-color: #c39b7d; | ||
| } | ||
|
|
||
| /* Make the logo match the two-tone brown sugar style */ | ||
| header [data-ui-element="logoText"] { | ||
|
fehmer marked this conversation as resolved.
Outdated
|
||
| background: linear-gradient( | ||
| 90deg, | ||
| var(--text-color) 64%, | ||
| var(--main-color) 36% | ||
| ); | ||
| background-clip: text; | ||
| color: transparent; | ||
| padding-bottom: 0.1em; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| [data-ui-element="logoSubtext"] { | ||
| margin-top: 0em; | ||
| } | ||
|
|
||
| header [data-ui-element="logo"] svg { | ||
| color: var(--text-color); | ||
| padding-bottom: 0.05em; | ||
| } | ||
|
|
||
| /* --- Navigation Links & Hover states --- */ | ||
| [data-nav-item] { | ||
| color: var(--main-color); | ||
| transition: color 0.15s ease; | ||
| } | ||
|
|
||
| [data-nav-item]:hover { | ||
| /* soft overlay highlight when hovering items */ | ||
| color: color-mix(in srgb, var(--main-color) 85%, white 15%); | ||
| } | ||
|
|
||
| /* Individual nav item overrides based on core colors */ | ||
| [data-nav-item="test"] { | ||
| color: var(--error-color); | ||
| &:hover { | ||
| color: color-mix(in srgb, var(--error-color) 75%, black 25%); | ||
| } | ||
| } | ||
|
|
||
| [data-nav-item="leaderboards"] { | ||
| color: var(--main-color); | ||
| &:hover { | ||
| color: color-mix(in srgb, var(--main-color) 75%, black 25%); | ||
| } | ||
| } | ||
|
|
||
| [data-nav-item="about"] { | ||
| color: var(--sub-color); | ||
| &:hover { | ||
| color: color-mix(in srgb, var(--sub-color) 75%, black 25%); | ||
| } | ||
| } | ||
|
|
||
| [data-nav-item="settings"] { | ||
| color: var(--caret-color); | ||
| &:hover { | ||
| color: color-mix(in srgb, var(--caret-color) 75%, black 25%); | ||
| } | ||
| } | ||
|
|
||
| /* Account buttons layout styling */ | ||
| [data-nav-item="alerts"], | ||
| [data-nav-item="account"], | ||
| [data-nav-item="login"] { | ||
| --themable-button-text: var(--main-color); | ||
| --themable-button-hover-text: color-mix( | ||
| in srgb, | ||
| var(--themable-button-text) 75%, | ||
| black 25% | ||
| ); | ||
| } | ||
|
|
||
| [data-nav-item="alerts"], | ||
| [data-ui-element="navAvatar"] { | ||
| & [data-ui-element="notificationBubble"] { | ||
| box-shadow: none; | ||
| background: var(--sub-alt-color); | ||
| } | ||
| } | ||
|
|
||
| /* Tiny spacing tweaks to prevent clipping issues */ | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should be obsolete when we remove the effect on the logoText
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. still open |
||
| nav { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. both rules for |
||
| padding-bottom: 0.2em; | ||
| } | ||
|
|
||
| header { | ||
| margin-bottom: -0.1em; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is not needed