Style-Anpassung bzgl. Spezialfähigkeiten CD

[Scaraset]

Morgen zusammen,

mit der Anpassung der Spezialfähigkeiten wurde angepasst, dass man entsprechend 1-3 Icons sehen kann, welche Spezialfähigkeiten man aktivieren kann.

Mein "Problem" dabei, was ich gerne über das CSS anpassen will, ist das der Kreis für die Abklingzeiten nicht oben beginnt, sondern bei aktuell -90° (laut CSS). Das stört mich sehr, weshalb ich das auf 0° ändern will.

Jetzt sehe ich hier zwei Punkte, mit denen ich kämpfe:
1. Jede Spezialfähigkeit hat scheinbar unterschiedliche IDs, die hier im CSS angesprochen werden müssen, damit sie angepasst werden
M/A: Arbeitsdrang hat ID 21; Titanwaffen hat die ID 22
Onlo: Waldkenntnis (nur als Vergleich) die ID 41.

Diese Fähigkeiten werden im CSS angesprochen via:

Code: Alles auswählen

.directspezilink[href*="special_id=22"]::before{
}

mit "special_id=XYZ" basierend auf der Rasse und den aktivierten Fähigkeiten, vermute ich zumindest.

2. Dadurch, dass die Spezialfähigkeit im Cooldown "dreht", sodass man die grobe Wartezeit abschätzen kann, müsste ich für den Winkel den background anpassen. Aktuell sieht der so aus:

Code: Alles auswählen

background: conic-gradient(from -90deg, transparent 0.060574687837772turn, #fffa 0.060574687837772turn, #fffa);
background: conic-gradient(from -90deg, transparent 0.34634299889055turn, #fffa 0.34634299889055turn, #fffa);
background: conic-gradient(from -90deg, transparent 0.50488423068186turn, #fffa 0.50488423068186turn, #fffa)

Das sind alles Werte, die ich mir während dem Schreiben des Posts / des Bastelns kopiert hab, wie man also sieht, werden die dynamisch aktualisiert mit dem Bereich, der anders eingefärbt ist, um die Abklingzeit darzustellen.

Um den "Anfangswinkel" anzupassen, muss ich aber an den Background dran. Den darf ich aber nicht ändern, weil sonst der Kreis nicht mehr dynamisch ist; und einfach nur den Startpunkt anzupassen kann ich nicht (bzw. weiß ich nicht, wie ich das machen könnte.


Um Problem 1 zu lösen, müsste ich "nur" für jede mögliche Spezial-ID eine eigene CSS-Regel machen. Soweit, so einfach. Aber um die Dynamik beizubehalten, verstehe ich nicht, wie ich das schaffen könnte.

Bin für Tipps gerne offen, auch ein "Tja, das geht leider nicht ohne Codezugriff" ist gut, damit ich dann wenigstens nen Strich drunter setzen kann

[Projekt Chaos]

ich bin nicht ganz sicher ob ich dein Anliegen korrekt verstanden hab weil ich deinen gefundenen Code nicht nachvollziehen konnte, aber versuchs mal so, damit kannst du den Kreis drehen

Code: Alles auswählen

#listrow_special > span > a {
  transform: rotate(XXdeg) !important;
}

im offiziellen Style wird der Kreis mit 4 gestapelten

Code: Alles auswählen

linear-gradient

gezeichnet und mit

Code: Alles auswählen

transform

kannst du die gesamte gerenderte Box mit allem was darin angezeigt wird drehen, du brauchst

Code: Alles auswählen

background

gar nicht

und

Code: Alles auswählen

::before

brauchst du auch nicht, weil der Kreis nur ein leeres

Code: Alles auswählen

<a>

unter

Code: Alles auswählen

#listrow_special > span

ist

[Scaraset]

Danke schon mal für einen ersten Input. Hat leider mit dem listrow_special nicht geklappt, aber ich führe es vielleicht mal mit Bildern aus.
Zur Sicherheit hab ich meinen kompletten Custom-CSS Teil rausgenommen und arbeite mit Cold_Sunfire von normalem FW.

Ist halt schade, dass ich die hier nicht direkt einbetten kann, aber muss halt sein


Mir geht's um den markierten Bereich. Also die einzelnen Spezialfähigkeiten, hier bei mir Arbeitsdrang (links) und Titanwaffen (rechts)

Die Kreise beginnen aktuell auf 9 Uhr. Ich möchte, dass sie bei 12 Uhr beginnen.

Habe mir dann also mal das CSS angeschaut, bei mir in Firefox via Untersuchen.
Sieht dann, wenn ich bspw. Arbeitsdrang markiere damit, so aus:


Hier sehe ich in der Mitte das von dir benannte listrow_special, aber der tatsächliche Kreis wird via CSS erst darunter erzeugt, das steht dann in dem style Abschnitt auch nochmal direkt drin (also eine Zeile über der blau markierten), aber wird hier auch im Bild rechts angezeigt mit dem .directspezilink...

Und da finde ich dann eben den conic-gradient und nicht den linear-gradient (der aber scheinbar für die allgemeine Spezi-CD Grafik gilt).
Ab dem Zeitpunkt müsstest du glaube ich meinen ersten Post nachvollziehen können in den Beschreibungen.

Hoffe du verstehst mich jetzt besser.

[Projekt Chaos]

okay my bad, hatte bisher nur eine Spezi aktiv und auch die Option nicht aktiv im Itemframe die Spezi-Links durch Bilder zu ersetzen

aber die gute Nachricht auch hier ist es relativ einfach, und zwar benutzen wir ebenfalls transform

Code: Alles auswählen

.directspezilink::before {
  transform: rotate(90deg);
}

was dann für beide (theoretisch alle, also bis zu 3?) Spezi-Bilder gilt

den Kreis daneben kannst du weiterhin mit

Code: Alles auswählen

#listrow_special > span > a {
  transform: rotate(XXdeg) !important;
}

drehen

[Scaraset]

Soweit ich das also jetzt verstehe, drehst du mit dem Transform 90 deg einfach das Bild komplett um 90° (sodass es für den Start bei 0° steht). Aber dadurch dreht sich die ganze Grafik
Hab das kurz mal angeguckt, indem ich einfach den Background von der Abklingzeit weggemacht hab.

Ich nehm es, weil es mein Hauptziel erfüllt und glaub ich die Grafik mich dabei weniger stört als der Startpunkt. Danke für die Unterstützung!

[Projekt Chaos]

Nein eigentlich nicht, also transform dreht zwar die ganze Box, aber es gibt 3 verschiedene Ebenen: den <span> tag mit dem blau-grünen Rahmen um die Spezi-Box, das Icon der Spezi im <img> tag und eben der darüber liegende conic-gradient Schleier auf ::before

Und genau hier greift das CSS und dreht nur die Box mit dem Schleier um 90 Grad. Wirklich die komplette Box würde sich nur drehen, wenn du bei .directspezilink !important verwendest. Zumindest laut der Logik und auch Tests bei mir.

Aber wenn du so zufrieden bist freut mich das

[Scaraset]

Ahh, jetzt hab ich es verstanden. Hab mir das grade nochmal angeguckt und du hast vollkommen Recht; es dreht sich nur der graue Schleier. Mit Zoom erkenne ich das besser. Hab vermutlich, als ich es mir angeguckt hab, irgendwo beim CSS etwas rausgenommen gehabt, wodurch das mich verwirrt hat.