ppy / osu-web

the browser-facing portion of osu!
https://osu.ppy.sh
GNU Affero General Public License v3.0
955 stars 380 forks source link

Badly visible gamemode icon on difficulty selector #5725

Open cyperdark opened 4 years ago

cyperdark commented 4 years ago

.beatmap-icon--expert-plus chrome_vYnDrMwqFs

peppy commented 4 years ago

Could you please provide a link?

cyperdark commented 4 years ago

https://osu.ppy.sh/beatmapsets/774594#osu/1628000

cyperdark commented 10 months ago

reopened because it's still badly visible on maps above 8* 1692863001_Ttu2wYnZyE

as suggestion i have this:

1692863037_DM38CXkXEc 1692863124_9Oqf5Ctcla

.beatmapset-beatmap-picker__beatmap--active .beatmap-icon--beatmapset {
    color: hsl(0deg 0% 100% / 50%); /* slightly brigther version of the difficulty color*/
    z-index: 2;
}

.beatmapset-beatmap-picker__beatmap--active:before {
    border-color: rgb(220, 72, 163); /* instead color of the difficulty */
    background: black;
    z-index: 0;
}

.beatmapset-beatmap-picker__beatmap--active:after {
    content:'';
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: rgba(220, 72, 163, 0.6);
    border-radius: 10px;
    z-index: 1;
}
RockRoller01 commented 10 months ago

@cyperdark your screenshots are using a custom theme, that kinda makes those images irrelevant..

Tho I do have to say, on the default green-grey that osu uses high star ratings are hard to see the icons for

image image

cyperdark commented 10 months ago

@RockRoller01 sorry forget to disable it, and attach link to map https://osu.ppy.sh/beatmapsets/1856043#osu/3814127

without custom theme, it's visible if you zoom in but on large screen it's not: image 1692922004_ucLFfBVvtw

with change it suggest it's way easier to identify which mode is it 1692922126_EKL6S2bpKn

peppy commented 10 months ago

@arflyte

arflyte commented 10 months ago

I like the proposed solution. We can use that before while we roll out the new design beatmap page design.

nanaya commented 10 months ago

it looks like the proposed active colour is harder to see and to compare with other difficulties? (and also when it's the only difficulty). Also doesn't help visibility of non-selected ones.

cyperdark commented 10 months ago

@nanaya The main idea to make gamemode icon more visible, because when i open this beatmap I couldn't tell for sure, is this taiko or std beatmap. Personally i think it's not making it harder to see, especially when most of the time it's 7*+

1692964171_Ps0HRqEOPS

cyperdark commented 10 months ago

@arflyte nice, also speaking of gamemode icons, can we have individual colors for each of them, on home and beatmap page

1692964628_7Izkeqzy03 1692964690_ty3OMpeZIr 1692964782_pdUXzJSECr

cyperdark commented 2 months ago

any updates?