fyrfli/mastodon-blueberries-ui-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update from @HugoBDesigner

Browse Source 
Merge from https://gist.github.com/HugoBDesigner/1a784bf782b5994efecfb9e3adf85fc6/revisions#diff-9ce736d5cd20d2ffed32ece7bef40ab252779a444c02fe5de0238ccdf1ac1225
This commit is contained in:
brodokk 2023-05-28 10:32:39 +00:00
parent 69ff41ff76
commit c2e62b19c5
1 changed files with 172 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
blueberries.css
View File

@ -220,6 +220,36 @@
filter: hue-rotate(calc(var(--hue) - 260deg));
}
.media-modal__page-dot:first-of-type.active:not(:only-child):before {
content: "";
display: block;
border-radius: .5rem;
width: .4rem;
height: 1.5rem;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
top: 0px;
left: 0px;
margin-top: calc(-50vh + 15%);
margin-left: calc(-50vw + 50%);
transform: translateY(-50%) translateX(calc(30px - 1rem));
}
.media-modal__page-dot:last-of-type.active:not(:only-child):before {
content: "";
display: block;
border-radius: .5rem;
width: .4rem;
height: 1.5rem;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
top: 0px;
left: 0px;
margin-top: calc(-50vh + 15%);
margin-left: calc(50vw + 50%);
transform: translateY(-50%) translateX(calc(-30px + .5rem));
}
body {
/* background: #191b22; */
/* background: hsl(227, 15%, 12%); */
@ -910,6 +940,13 @@ a.status-card:hover {
color: hsl(var(--hue), 16%, 45%);
}
.poll__link:active,
.poll__link:focus {
/* background-color: rgba(96,105,132,.1); */
/* background-color: hsla(225, 16%, 45%, .1); */
background-color: hsla(var(--hue), 16%, 45%, .1);
}
.poll__footer {
/* color: #606984; */
/* color: hsl(225, 16%, 45%); */
@ -1980,7 +2017,9 @@ button.table-action-link {
color: hsl(var(--hue), 16%, 45%);
}
.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
.text-icon-button:active,
.text-icon-button:focus,
.text-icon-button:hover {
/* color: #51596f; */
/* background-color: rgba(96,105,132,.15); */
/* color: hsl(224, 16%, 38%); */
@ -2008,23 +2047,112 @@ button.table-action-link {
color: hsl(var(--hue), 16%, 45%);
}
.timeline-hint a:active,
.timeline-hint a:focus,
.timeline-hint a:hover {
/* color: #a0a1ff; */
/* color: hsl(239, 100%, 81%); */
color: hsl(var(--hue), 100%, 81%);
}
.column-title p {
/* color: #9baec8; */
/* color: hsl(215, 29%, 70%); */
color: hsl(var(--hue), 29%, 70%);
}
.account__header__image {
/* background: #1f232b; */
/* background: hsl(220, 16%, 15%); */
background: hsl(var(--hue), 16%, 15%);
}
.reactions-bar__item__count {
/* color: #9baec8; */
/* color: hsl(215, 29%, 70%); */
color: hsl(var(--hue), 29%, 70%);
}
.reactions-bar__item:active,
.reactions-bar__item:focus,
.reactions-bar__item:hover {
/* background: #4a5266; */
/* background: hsl(223, 16%, 35%); */
background: hsl(var(--hue), 16%, 35%);
}
.announcements__pagination {
/* color: #9baec8; */
/* color: hsl(215, 29%, 70%); */
color: hsl(var(--hue), 29%, 70%);
}
.interaction-modal__icon {
/* color: #8c8dff; */
/* color: hsl(239, 100%, 77%); */
color: hsl(var(--hue), 100%, 77%);
}
.interaction-modal__lead p,
.interaction-modal__choices__choice p {
/* color: #9baec8; */
/* color: hsl(215, 29%, 70%); */
color: hsl(var(--hue), 29%, 70%);
}
.copypaste input {
/* background: #17191f; */
/* border-color: #8c8dff; */
/* color: #9baec8; */
/* background: hsl(225, 15%, 11%); */
/* border-color: hsl(239, 100%, 77%); */
/* color: hsl(215, 29%, 70%); */
background: hsl(var(--hue), 15%, 11%);
border-color: hsl(var(--hue), 100%, 77%);
color: hsl(var(--hue), 29%, 70%);
}
.copypaste input:focus {
/* background: #1f232b; */
/* background: hsl(220, 16%, 15%); */
background: hsl(var(--hue), 16%, 15%);
}
.interaction-modal {
/* background: #282c37; */
/* background: hsl(224, 16%, 19%); */
background: hsl(var(--hue), 16%, 19%);
}
.compare-history-modal .status__content a {
/* color: #8c8dff; */
/* color: hsl(239, 100%, 77%); */
/* color: hsl(var(--hue), 100%, 77%); */
/* Manually changed for readability */
color: hsl(var(--hue), 70%, 47%);
}
/* brodokk's patches */
.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
/* color: #d9e1e8; */
/* color: hsl(var(--hue), 25%, 88%); */
color: hsl(var(--hue), 25%, 88%);
}
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
/* color: #d9e1e8; */
/* color: hsl(var(--hue), 25%, 88%); */
color: hsl(var(--hue), 25%, 88%);
}
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form .compose-form__modifiers {
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form .compose-form__modifiers {
/* color: #282c37; */
/* color: hsl(224, 16%, 19%); */
background: hsl(var(--hue), 16%, 19%);
@ -2078,19 +2206,35 @@ button.table-action-link {
color: hsl(var(--hue), 29%, 70%);
}
.public-layout .header, .public-layout .public-account-bio, .directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover {
.public-layout .header,
.public-layout .public-account-bio,
.directory__tag > a:active,
.directory__tag > a:focus,
.directory__tag > a:hover {
/* background: #393f4f; */
/* background: hsl(224, 16%, 27%); */
background: hsl(var(--hue), 16%, 27%);
}
.activity-stream .entry, .hero-widget__text, .directory__tag > a, .directory__tag > div{
.activity-stream .entry,
.hero-widget__text,
.directory__tag > a,
.directory__tag > div {
/* color: #282c37; */
/* color: hsl(224, 16%, 19%); */
background: hsl(var(--hue), 15%, 13%);
}
.public-layout .header .nav-link, .hero-widget__text p, .trends-widget h4, .public-layout .footer h4, .public-layout .public-account-header__tabs__tabs .counter, .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra, .placeholder-widget, .directory__tag h4 .fa, .endorsements-widget h4 {
.public-layout .header .nav-link,
.hero-widget__text p,
.trends-widget h4,
.public-layout .footer h4,
.public-layout .public-account-header__tabs__tabs .counter,
.public-layout .public-account-bio .roles,
.public-layout .public-account-bio__extra,
.placeholder-widget,
.directory__tag h4 .fa,
.endorsements-widget h4 {
/* color: #9baec8; */
/* color: hsl(215, 29%, 70%); */
color: hsl(var(--hue), 29%, 70%);
@ -2101,13 +2245,17 @@ button.table-action-link {
color: hsl(var(--hue), 20%, 70%);
}
.hero-widget__text a, .trends__item__current {
.hero-widget__text a,
.trends__item__current {
/* color: #d9e1e8; */
/* color: hsl(var(--hue), 25%, 88%); */
color: hsl(var(--hue), 25%, 88%);
}
.public-layout .footer .grid .column-2 h4 a, .public-layout .footer, .public-layout .footer .legal-xs a, .public-layout .footer ul a {
.public-layout .footer .grid .column-2 h4 a,
.public-layout .footer,
.public-layout .footer .legal-xs a,
.public-layout .footer ul a {
/* color: #737d99; */
/* color: hsl(215, 29%, 70%); */
color: hsl(var(--hue), 20%, 52%);
@ -2156,7 +2304,8 @@ button.table-action-link {
border: 2px dashed hsl(var(--hue), 16%, 45%);
}
.notice-widget a, .placeholder-widget a {
.notice-widget a,
.placeholder-widget a {
/* color: #2b90d9; */
color: hsl(var(--hue), 60%, 50%);
}
@ -2171,7 +2320,9 @@ button.table-action-link {
background-color: hsl(var(--hue), 29%, 47%);
}
.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
.public-layout .header .nav-button:active,
.public-layout .header .nav-button:focus,
.public-layout .header .nav-button:hover {
/* background-color: #535b72; */
background-color: hsl(var(--hue), 40%, 47%);
}
@ -2186,7 +2337,9 @@ button.table-action-link {
border-color: hsl(var(--hue), 15%, 31%) currentcolor;
}
.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
.public-layout .header .brand:active,
.public-layout .header .brand:focus,
.public-layout .header .brand:hover {
/* background: #42485a; */
background: hsl(var(--hue), 15%, 31%);
}
@ -2208,7 +2361,9 @@ button.table-action-link {
border-color: hsl(var(--hue), 100%, 77%);
}
.button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover {
.button.button-tertiary:active,
.button.button-tertiary:focus,
.button.button-tertiary:hover {
/* background: #6364ff; */
/* background: hsl(var(--hue), 100%, 69%); */
/* Manually changed for readability */
@ -2319,7 +2474,6 @@ button.table-action-link {
/* Hue rotate for complex backgrounds */
.simple_form select {
filter: hue-rotate(calc(var(--hue) - 240deg));
}