[Discussion] Tweak CSS #257

Open
opened 2023-09-28 17:58:19 +02:00 by AntoineD · 10 comments
Member

I found this repository with 3 tweak css that I find interesting:
https://codeberg.org/pancakes/firefish-edits

I particularly like "Consistent reactions", which I think could be applied by default.

The other two I'm thinking that if we choose to integrate them, maybe we should consider making them optional?

but we'll have to find an alternative code so that we don't have to modify users' "layout.css.has-selector.enabled".

I found this repository with 3 tweak css that I find interesting: https://codeberg.org/pancakes/firefish-edits I particularly like "Consistent reactions", which I think could be applied by default. The other two I'm thinking that if we choose to integrate them, maybe we should consider making them optional? but we'll have to find an alternative code so that we don't have to modify users' "layout.css.has-selector.enabled".
aylamz added the
enhancement
discussion
frontend
labels 2023-09-28 18:17:32 +02:00
zotan self-assigned this 2023-09-29 01:43:44 +02:00
Owner

This looks great, I'll implement it as a toggle when I have time :)

This looks great, I'll implement it as a toggle when I have time :)
Member

I like "Consistent reactions".
I like the idea of "Highlighted DMs", but the accent color gradient might make it look too much like button. We should find some other way to highlight it.

I don't understand the purpose of "Media caption warning".

This looks great, I'll implement it as a toggle when I have time :)

Please no. We should avoid adding more settings whenever possible. We already have too many little settings like that I think should be removed as they cause too much unnecessary maintenance burden (many of the settings are just broken and I don't think it's a good use of anyone's time to fix them, most of these are very niche options that don't get used anyway or are redundant). More settings also means that it's harder for people to find the settings they actually want to change.

I like "Consistent reactions". I like the idea of "Highlighted DMs", but the accent color gradient might make it look too much like button. We should find some other way to highlight it. I don't understand the purpose of "Media caption warning". > This looks great, I'll implement it as a toggle when I have time :) Please no. We should avoid adding more settings whenever possible. We already have too many little settings like that I think should be removed as they cause too much unnecessary maintenance burden (many of the settings are just broken and I don't think it's a good use of anyone's time to fix them, most of these are very niche options that don't get used anyway or are redundant). More settings also means that it's harder for people to find the settings they actually want to change.
Author
Member

I like the idea of "Highlighted DMs", but the accent color gradient might make it look too much like button. We should find some other way to highlight it.

I'm thinking that for DM, we could also simply use another background color a little lighter or darker than the other posts.

It seems to me that glitch-soc does it

We already have too many little settings … many of the settings are just broken

I agree that a lot of housekeeping needs to be done in the options.
But once it's done, I'm thinking that creating an "advanced settings" panel to group some tweaks (maybe not these ones) together would still be pleasant.

> I like the idea of "Highlighted DMs", but the accent color gradient might make it look too much like button. We should find some other way to highlight it. I'm thinking that for DM, we could also simply use another background color a little lighter or darker than the other posts. It seems to me that glitch-soc does it > We already have too many little settings … many of the settings are just broken I agree that a lot of housekeeping needs to be done in the options. But once it's done, I'm thinking that creating an "advanced settings" panel to group some tweaks (maybe not these ones) together would still be pleasant.
Author
Member

I don't understand the purpose of "Media caption warning".

I'm thinking of a select option (like the CW style).

  • Show all
  • Visual indicator that alt is missing
  • Hide posts with missing alt #165

I'm not convinced of the "pulsing" aspect, but it could be a 4th option if it's really useful for the people concerned.

> I don't understand the purpose of "Media caption warning". I'm thinking of a select option (like the CW style). - Show all - Visual indicator that alt is missing - Hide posts with missing alt #165 I'm not convinced of the "pulsing" aspect, but it could be a 4th option if it's really useful for the people concerned.
Member

I'm thinking that for DM, we could also simply use another background color a little lighter or darker than the other posts.

actually as a proper fix, we should separate DMs from the rest of the timeline (and there's also two different UIs for DMs which is a problem). If DMs were separated from the rest of the timline, we wouldn't need to highlight them at all. Relevant: #86

I agree that a lot of housekeeping needs to be done in the options.
But once it's done, I'm thinking that creating an "advanced settings" panel to group some tweaks (maybe not these ones) together would still be pleasant.

This isn't something that can be fixed once and then paid no attention to again. This requires (constant) maintenance (like everything else). These are good changes I think, we should just implement them and not have an option to toggle these. (well, at least the consistent reactions one)

I'm thinking of a select option (like the CW style).

Show all
Visual indicator that alt is missing
Hide posts with missing alt #165

I'm not convinced of the "pulsing" aspect, but it could be a 4th option if it's really useful for the people concerned.

I still don't know what it's for. Why do we need to highlight images with missing alt-text, from usability perspective? Also tbh I'm not sure about #165, that issue was more intended as a discussion whether there's any value in hiding images without alt-text, no really as a proper feature request.

> I'm thinking that for DM, we could also simply use another background color a little lighter or darker than the other posts. actually as a proper fix, we should separate DMs from the rest of the timeline (and there's also two different UIs for DMs which is a problem). If DMs were separated from the rest of the timline, we wouldn't need to highlight them at all. Relevant: #86 > I agree that a lot of housekeeping needs to be done in the options. But once it's done, I'm thinking that creating an "advanced settings" panel to group some tweaks (maybe not these ones) together would still be pleasant. This isn't something that can be fixed once and then paid no attention to again. This requires (constant) maintenance (like everything else). These are good changes I think, we should just implement them and not have an option to toggle these. (well, at least the consistent reactions one) > I'm thinking of a select option (like the CW style). > Show all > Visual indicator that alt is missing > Hide posts with missing alt #165 > I'm not convinced of the "pulsing" aspect, but it could be a 4th option if it's really useful for the people concerned. I still don't know what it's for. Why do we need to highlight images with missing alt-text, from usability perspective? Also tbh I'm not sure about #165, that issue was more intended as a discussion whether there's any value in hiding images without alt-text, no really as a proper feature request.
Author
Member

In my instance.css I made this code :

.hkzvhatu.reacted:before {
  background: none !important;
  outline: solid 1px var(--accent);
}

.hkzvhatu.reacted>.count{color: var(--fg) !important;}

It does like "Consistent Reactions" without needing "layout.css.has-selector.enabled".

I'm still struggling to understand why his tweak uses so many selectors, I must have missed some cases.

In my instance.css I made this code : ```css .hkzvhatu.reacted:before { background: none !important; outline: solid 1px var(--accent); } .hkzvhatu.reacted>.count{color: var(--fg) !important;} ``` It does like "Consistent Reactions" without needing "layout.css.has-selector.enabled". I'm still struggling to understand why his tweak uses so many selectors, I must have missed some cases.
AntoineD changed title from [Discussion] Pancakes Tweak CSS to [Discussion] Tweak CSS 2023-10-26 17:37:33 +02:00
Author
Member

More css tweaks by Minybol :
https://gitlab.com/minybol/cozyfish-ui/-/blob/main/firefish-customcss.css?ref_type=heads

I really like his restyle of the hastags and links, which I've adapted a little on my instance
image

/* Hashtags */
.mfm-object a[href^="/tags/"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: var(--hashtag);
    opacity: .1;
    z-index: -1;
}
.mfm-object a[href^="/tags/"]:hover::before {
    background: var(--hashtag) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}
.mfm-object a[href^="/tags/"] {
    position: relative;
    display: inline-block;
    padding: 1px 8px 1px 8px;
    margin-block: 2px;
    border-radius: var(--margin);
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    isolation: isolate;
    text-decoration: none !important;
}
.mfm-object a[href^="/tags/"]:hover {
    color: var(--bg) !important;
    text-decoration: none !important;
}

/* Links */
.mfm-object ._link::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: var(--link);
    opacity: .1;
    z-index: -1;
}
.mfm-object ._link:hover::before {
    background: var(--link) !important;
    opacity: 1 !important;
}

.mfm-object ._link {
    position: relative;
    display: inline-block;
    padding: 1px 6px 1px 8px;
    margin-block: 2px;
    border-radius: var(--margin);
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    isolation: isolate;
    overflow: clip;
}
.mfm-object ._link:hover {
    color: var(--bg) !important;
}
.mfm-object a._link, .mfm-object a._link:hover {text-decoration: none !important;}

._link > span {
    text-decoration: none !important;
}
.url .pathname, .url .query, .url .hash, .mention .host, .mk-acct > .host {
    opacity: 0.6 !important;
    font-size: 90%;
}
.url .schema {display: none;}

/* Mentions */
.mention:hover::before {
    background: var(--mention) !important;
    opacity: 1 !important;
}

.mention:hover {
    color: var(--fg) !important;
}
a.mention, a.mention:hover {text-decoration: none !important;}

.mention {
  border-radius: var(--margin) !important;

}
More css tweaks by Minybol : https://gitlab.com/minybol/cozyfish-ui/-/blob/main/firefish-customcss.css?ref_type=heads I really like his restyle of the hastags and links, which I've adapted a little on my instance ![image](/attachments/cb351742-446f-439f-90e7-d81147b2086d) ```css /* Hashtags */ .mfm-object a[href^="/tags/"]::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--hashtag); opacity: .1; z-index: -1; } .mfm-object a[href^="/tags/"]:hover::before { background: var(--hashtag) !important; opacity: 1 !important; text-decoration: none !important; } .mfm-object a[href^="/tags/"] { position: relative; display: inline-block; padding: 1px 8px 1px 8px; margin-block: 2px; border-radius: var(--margin); max-width: 100%; white-space: nowrap; text-overflow: ellipsis; isolation: isolate; text-decoration: none !important; } .mfm-object a[href^="/tags/"]:hover { color: var(--bg) !important; text-decoration: none !important; } /* Links */ .mfm-object ._link::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--link); opacity: .1; z-index: -1; } .mfm-object ._link:hover::before { background: var(--link) !important; opacity: 1 !important; } .mfm-object ._link { position: relative; display: inline-block; padding: 1px 6px 1px 8px; margin-block: 2px; border-radius: var(--margin); max-width: 100%; white-space: nowrap; text-overflow: ellipsis; isolation: isolate; overflow: clip; } .mfm-object ._link:hover { color: var(--bg) !important; } .mfm-object a._link, .mfm-object a._link:hover {text-decoration: none !important;} ._link > span { text-decoration: none !important; } .url .pathname, .url .query, .url .hash, .mention .host, .mk-acct > .host { opacity: 0.6 !important; font-size: 90%; } .url .schema {display: none;} /* Mentions */ .mention:hover::before { background: var(--mention) !important; opacity: 1 !important; } .mention:hover { color: var(--fg) !important; } a.mention, a.mention:hover {text-decoration: none !important;} .mention { border-radius: var(--margin) !important; } ```
150 KiB
Member

Ooh, I like it for the hashtags! not sure about the links

Ooh, I like it for the hashtags! not sure about the links
Author
Member

It made me want to have a little fun with css:

image

The hardest part is finding the right selectors to avoid false positives/false negatives while covering as many appropriate hashtags as possible.

It made me want to have a little fun with css: ![image](/attachments/de854030-e08a-456a-ac14-e2a778795976) The hardest part is finding the right selectors to avoid false positives/false negatives while covering as many appropriate hashtags as possible.
212 KiB
AntoineD added this to the (deleted) milestone 2023-12-03 01:08:17 +01:00
Author
Member

Maybe some tweaks would have a place in wellness tab?

Maybe some tweaks would have a place in wellness tab?
AntoineD added a new dependency 2023-12-06 18:57:53 +01:00
AntoineD added this to the Frontend rewriting project 2023-12-06 19:26:38 +01:00
Sign in to join this conversation.
No milestone
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Depends on
#367 More wellness settings
iceshrimp/iceshrimp
Reference: iceshrimp/iceshrimp#257
No description provided.