[CSS] One Button Fields, Egg Labels, Typeless Field Variants
Forum Index > PokéFarm > Guides >
QUOTE originally posted by Heartmint
In my experience it stays as next field button until it load, so clicking it again redo the loading process. But I may be wrong. Once again I'm not tech savvy
★ Zachary ★ They/He ★ 22 ★
Quiet nature collector.
QUOTE originally posted by Neonyan
That's interesting, I could not figure out how to replicate this behavior. It may have to do with your internet being slower.
Unfortunately, we are unable to use any type of IF statements with CSS, so that concept wouldn't be possible to add without some kind of userscript (userscripts involve downloading a browser plugin and then downloading external code into that plugin that injects into the site, its not too difficult but it can be a hastle for some people & doesn't work on mobile).
QUOTE originally posted by Heartmint
I don't think that will work. While I maybe can figure out how to do that, clicking on PC just have an overall much lower efficiency than on mobile. Not to mention all the mouse I will break
Edit: I just realized a new problems with my css. I can't turn it off. There's this toggle button in QOL menu that said "extra UI". If it's on the UI will show a big button on the bottom of the screen that function as shortcut to feeding berry and next field (I assume this is normal). But if I turn off that button, the big button will disappear after I click it once or twice, but I switched to the berries that's on the button (feeding mode). If I unselect the berries, the button will pop up once more. This caused me to be unable to look at pokemon in the field normally. Is there a solution for this? Thanks for the help btw
code
@toggle = block;
/* Hide with "Click counter" checkbox */
label:has([data-key="fieldClickCount"]) {
font-size: 0;
}
label:has([data-key="fieldClickCount"])::after {
content: ' Extra UI';
font-size: 12pt;
}
#content:has([data-key="fieldClickCount"]:not(:checked)) .fieldmon.cormyr::before,
#content:has([data-key="fieldClickCount"]:not(:checked)) button[data-action='next']::before,
#content:has([data-key="fieldClickCount"]:not(:checked)) [href='/user/~online']::before {
content: none!important;
@toggle = none;
}
#footbar::after {
content: 'WARNING: This CSS file uses the :has selector, which may be disabled by default. To enable :has in Firefox, visit about:config and toggle layout.css.has-selector.enabled.';
font-size: 10pt;
font-family: consolas, monospace;
color: black;
border: 1px solid darkred;
background-color: lightpink;
display: @toggle;
position: fixed;
width: 250px;
padding: 3px 5px;
margin: 5px;
right: 0;
bottom: 0;
z-index: 999;
} #footbar:has(*)::after { content: none; }
#field_field {
user-select: none;
}
#field_berries.selected > div > a {
opacity: 1;
}
#field_berries.selected > div > a > img {
opacity: 0.5;
transition: opacity 0.4s linear;
}
#field_berries.selected > div > a.selected > img {
opacity: 1;
}
[href='/user/~online']::before,
#field_nav button[data-action='next']::before,
#field_berries a[data-berry]::before,
.fieldmon.cormyr::before,
[href='/user/~online']::before {
display: @toggle;
cursor: pointer;
font-size: 48pt;
line-height: 0;
text-align: center;
background-color: white;
border: 3px solid black;
border-radius: 16px;
position: fixed;
width: clamp(120px, calc(50% - 340px), 300px);
height: 0;
padding: clamp(60px, calc(25% - 170px), 150px) 0;
bottom: 30px;
right: 15px;
transform-origin: 0px 0px;
z-index: 999;
user-select: none;
}
.mq25:has([data-key="fieldClickCount"]:checked) body:has(#field_field[data-mode='public'])::after {
content: '';
display: block;
height: 60vw;
user-select: none;
}
.mq25:has([data-key="fieldClickCount"]:checked) #field_field[data-mode='public'] .field::after {
content: '';
background-color: white;
display: block;
position: fixed;
height: 60vw;
left: 0;
bottom: 0;
right: 0;
user-select: none;
}
.mq25 [href='/user/~online']::before,
.mq25 #field_nav button[data-action='next']::before,
.mq25 #field_berries a[data-berry]::before,
.mq25 .fieldmon.cormyr::before,
.mq25 [href='/user/~online']::before {
display: @toggle;
font-size: 64pt;
border: none;
border-top: 3px solid black;
border-radius: 0;
width: auto;
height: 20vw;
padding: 20vw;
left: 0;
bottom: 0;
right: 0;
}
#core:has(#field_field[data-mode='public']):has([data-action='next'][disabled]) [href='/user/~online']::before {
content: '👥';
display: @toggle;
}
#core:has(#field_field[data-mode='public']):has([data-action='next'][disabled]):has([data-action='jump'][disabled]) [href='/user/~online']::before {
content: none;
display: @toggle;
}
#core:has(#field_field[data-mode='public']):has([data-action='next'][disabled]):has(.fieldmon:not(.nothungry)) [href='/user/~online']::before {
content: none;
display: @toggle;
}
button[data-action='next']:not([disabled])::before {
content: '👉';
display: @toggle;
}
#content:has(#field_field[data-mode='private']) button[data-action='next']::before,
#content:has(.fieldmon:not(.nothungry)) button[data-action='next']::before,
#core:has(#field_field[data-mode='public']):has(button[data-action='next'][disabled]):has(.fieldmon:not(.nothungry)) [href='/user/~online']::before {
content: none;
display: @toggle;
}
#content:has(.fieldmon[data-flavour^='sour']:not(.nothungry)) a[data-berry='aspear']::before,
#content:has(.fieldmon[data-flavour^='any']:not(.nothungry)) a[data-berry='aspear']::before,
#content:has(a.selected[data-berry='aspear']) .fieldmon.cormyr:not(.nothungry)::before {
content: '🍐';
display: @toggle;
}
#content:has(.fieldmon[data-flavour^='spicy']:not(.nothungry)) a[data-berry='cheri']::before,
#content:has(a.selected[data-berry='cheri']) .fieldmon.cormyr:not(.nothungry)::before {
content: '🍒';
display: @toggle;
}
#content:has(.fieldmon[data-flavour^='dry']:not(.nothungry)) a[data-berry='chesto']::before,
#content:has(a.selected[data-berry='chesto']) .fieldmon.cormyr:not(.nothungry)::before {
content: '🌰';
display: @toggle;
}
#content:has(.fieldmon[data-flavour^='sweet']:not(.nothungry)) a[data-berry='pecha']::before,
#content:has(a.selected[data-berry='pecha']) .fieldmon.cormyr:not(.nothungry)::before {
content: '🍑';
display: @toggle;
}
#content:has(.fieldmon[data-flavour^='bitter']:not(.nothungry)) a[data-berry='rawst']::before,
#content:has(a.selected[data-berry='rawst']) .fieldmon.cormyr:not(.nothungry)::before {
content: '🍓';
display: @toggle;
}
#content:has(.fieldmon.cormyr:not(.nothungry)) a[data-berry]::before {
content: none;
display: @toggle;
}
Question:
When I put it in the "Extra CSS" in the Site Skin I'm using, it doesn't do anything. What am I doing wrong? I'm using Chrome on PC. It works fine on Chrome on my phone.
EDIT: It looks like none of the field CSS I'm trying is working on my pc.
EDIT 2: Never mind, I had tried clearing my cache but it didn't work. Had to clear all my browsing data and now it works.
Score: 0
× 5 / 150
QUOTE originally posted by Peter
Yep, I tried what you suggested and it does not work.
I have been using it in the CSS text field in the QoL settings menu, so I tried removing it from there and using it in my site skin directly, and it still did not work. In Vivaldi, Firefox, and Edge. Refreshing and clearing cache do not seem to work.
It sounds to me like your cache wasn't cleared properly. cache updats/clears itself every now and then, so that's probalby what happened to fix it.
Apologies to everyone who was kinda left hanging, I've been kinda... too busy just clicking and hunting melans to think about CSS much, especially since the shelter update. ^^;
However, here's a tiny bit of CSS I wrote to make the new V~Wave icons a bit darker and more contrasting! I personally feel like it makes them a bit easier on the eyes and "pop out" a bit more with the default site skin.
Code
img[src*='pfq-static.com/img/types/v-'] {
filter:
brightness(90%)
contrast(125%);
}
winterbraid | they/them | usually most active around daily reset
one button fields and other CSS (last updated: 11 May 2024)
typerace: ghost | score: 14551 | next: dark
avatar by fubukit (Cubbychoo)
QUOTE originally posted by Winterbraid
Apologies to everyone who was kinda left hanging, I've been kinda... too busy just clicking and hunting melans to think about CSS much, especially since the shelter update. ^^;
However, here's a tiny bit of CSS I wrote to make the new V~Wave icons a bit darker and more contrasting! I personally feel like it makes them a bit easier on the eyes and "pop out" a bit more with the default site skin.
Code
img[src*='pfq-static.com/img/types/v-'] {
filter:
brightness(90%)
contrast(125%);
}
@Peter
Does the error say anything? Also, can you try putting that part as a single line instead, like this:
Code
img[src*='pfq-static.com/img/types/v-'] {
filter: brightness(90%) contrast(125%);
}
Filter is not supported in site skins. Are you using this in the QOL winterbraid?
Cannot post: Please log in to post