HS/FS Anwendung von CSS im Experten 4.12 und höher, Hilfe, Fragen, Beispiele?

[BadSmiley]

Moin Moin,
ich bräuchte bitte Hilfe für das CSS Feature vom Experten 4.12 Farbige Ränder an Boxen habe ich hin bekommen. Aber dass ich ein Symbol in einen bewegten Pfeil ändern kann, kriege ich einfach nicht hin.
Ich habe mich mit diesem Pfeil: https://codepen.io/nekwmtdl-the-sans/pen/bGzGdGZ probiert. Aber am Ende kommt immer ein schwarzer Klotz heraus.
In der Visu sieht es gerade so aus:
grafik.png

Die Eigenschaften des schwarzen Klotzes sehen so aus:
grafik.png
In der use.projekt.css steht aber der Code:

/* Peile */

body
background: #000

.arrow,
.arrow:before
position: absolute
left: 50%

.arrow
width: 40px
height: 40px
top: 50%
margin: -20px 0 0 -20px
-webkit-transform: rotate(45deg)
border-left: none
border-top: none
border-right: 2px #fff solid
border-bottom: 2px #fff solid


.arrow:before
content: ''
width: 20px
height: 20px
top: 50%
margin: -10px 0 0 -10px
border-left: none
border-top: none
border-right: 1px #fff solid
border-bottom: 1px #fff solid
animation-duration: 2s
animation-iteration-count: infinite
animation-name: arrow

@keyframes arrow
0%
opacity: 1
100%
opacity: 0
transform: translate(-10px, -10px)

/* Pfeile Ende */​

Jetzt hieß es "du musst mit "!important" arbeiten!! Das ist die Lösung." aber leider klappt das auch nicht. ich weiß nicht wooo ich überall das Important anhängen müsste?

Im Firefox sieht das Entwickler Tool so aus:
grafik.png

Kann mir da evtl. wer bitte, bitte helfen? Alle sagen "css ist sooo einfach" (wenn ich das auf den 1000 Hilfewebseiten in derem Umgebung mache, klappt es), aber im HS mag es mich einfach nicht.

Gruß
Roman

[BadSmiley]

Niemand?!!! 11111 Eins eins elf elf

[tobiasr]

Was mir da spontan auffällt, du separierst die CSS Klassen im Eingabefeld mit Komma. Aber die werden nur mit Leerzeichen getrennt.

[BadSmiley]

Was mir auffällt.. Das ist noch der falsche css Code. Da kommen die Klassen, die ich aufrufe, noch gar nicht vor.

[tobiasr]

Gehts jetzt?

[BadSmiley]

Nach dem ich das CSS File davon überzeugt habe, endlich den Code zu übernehmen, wird es schon besser! Danke
Das Komma war auch ein Fehler, damit sieht es jetzt so aus:

Damit kann ich mal mal weiter testen. Gerne noch weitere Vorschläge, Fragen, Hilfestellungen!

[BadSmiley]

Ich habe den Hintergrund transparent gemacht.. jetzt wird es schon besser, sieht nur noch nicht so aus wie es sein soll.

[DosOrDie]

Hallo zusammen,

würde gerne die alte xxAPI2 durch die neue HTML5 Visu ersetzen.

PopUps mit transparentem Hintergrund hab ich hinbekommen. Dazu einfach kein Hintergrund Bild auswählen und den CSS.Stil aus: background-color: transparent;

ABER: Wie schafft man es die Visu so oder so ähnlich "responsive" wie die xxAPI zu machen?
Es würde mir schon reichen wenn die Visu im Automatisch großer skaliert, damit sie nicht so verloren aussieht

So wie ich das gelesen habe könnte das über die use.projekt.css gehen. Hat da jemand ne Idee dazu?
Hab leider null CSS Erfahrung

Grüße
Dominik

[DosOrDie]

Hab mich jetzt mal ein wenig mit CSS beschäftigt und die HTML5 Visu pseudo responsive gemacht. Erstmal nur in Richtung größer, da es mich am PC am meisten genervt hat.
Die konfig ist jetzt speziell für ne Visu 1024x768V und ohne "neue" Popup Fenster. Also einfach von der xxapi zur HTML5 Visu.
Es passen auch noch nicht alle @ Media Einträge aber für den anfang ist es ok für mich.

Hier mal ein teil meiner use.projekt.css (falls es jemand braucht)

.vpage_popup {
    background-color: transparent !important;
    background-image: none !important;
             }

/* Basisgröße für 4:3-Format */
@media (min-width: 1024px) and (min-height: 768px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.0);
  }
}

@media (min-width: 1152px) and (min-height: 864px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.1);
  }
}

@media (min-width: 1280px) and (min-height: 960px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.2);
  }
}

/* Chrome mit Leisten auf FHD */
@media (min-width: 1360px) and (min-height: 905px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.189);
  }
}

@media (min-width: 1408px) and (min-height: 1056px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.3);
  }
}

@media (min-width: 1536px) and (min-height: 1152px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.4);
  }
}

/* Browser als App 27Zoller ohne Leisten */
@media (min-width: 1590px) and (min-height: 1190px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.55);
  }
}

/* Browser Fullscreen FHD */
@media (min-width: 1828px) and (min-height: 1447px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.34);
  }
}

@media (min-width: 1792px) and (min-height: 1344px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.6);
  }
}

@media (min-width: 1920px) and (min-height: 1440px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.65);
  }
}

@media (min-width: 2176px) and (min-height: 1536px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.7);
  }
}

@media (min-width: 2400px) and (min-height: 1632px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.75);
  }
}

/* Maximale Breite von 2550px und minimale Höhe von 1360px für scale 1.77 */
@media (min-width: 2550px) and (min-height: 1360px) {
  .hs-container-main, .o-modal, .vpage_popup {
    transform: scale(1.77);
  }
}
​

Grüße
Dominik

[quattromatik]

Hast du auch mit :active bei einer box gearbeitet?

Hab es funktional in edge/firefox…

aber auf dem ipad reagiert es erst wenn man länger drauf drückt, ich denke da müssten in die html noch spezifische touch parameter?!

Weiß jemand wo die html liegt, um sie bearbeiten zu können?

Edit: Habs gefunden....

"C:\Program Files (x86)\Gira\HS+FS\HS+FS Experte 4.12\hsres\hsvisu\index.html"

[DosOrDie]

Ja hab auch das :active und :hover für Symbole verwendet.

Auf dem iPad gehts bei mir auch nur so semi, deswegen schließe ich dort :hover aus, da sonst das Element nach nen klick auf der :hover stellung bleibt
Was hast du noch für Touch Parameter hinzugefügt?

Hier mal ein Beispiel von einem Button bei mir:

/* Animation für das "animation: clickEffect"  */
@keyframes clickEffect {
    0% {
        transform: scale(0.93);
        background-color: #3e8e41e0; /*dunkles Grün*/
    }
    100% {
        transform: scale(1);
        background-color: #4CAF50e0; /* mittleres, lebendiges Grün für erfolg*/
    }
}

.visu_knopf {
    border: 1px transparent;
    border-radius: 6px;
    transition: transform 0.1s ease, background-color 0.1s ease; /* Smoothe Anzeige */
}
.visu_knopf:hover {
    background-color: #0174ebe0; /* Hellblau */
}
.visu_knopf:active {
    animation: clickEffect 0.3s ease-in;
    animation-fill-mode: forwards; /* Behalte den Endzustand bis Animation fertig */
    }​

Hab mittlerweile auch die neuen PopUp in der größer Skalierung für Browser mit drin. Nur kleiner machen fürs iPhone hab ich noch nicht angefangen.

Hier mal ein Auszug:

/* Hintergrungfarbe Visucontainer (steht in usw.global.css) */
:root {
--hs-body-bgcolor: #000000 !important;
}
[data-theme='dark'] {
--hs-body-bgcolor: #000000 !important;
}

.vpage {
}

.vpage_popup {
  background-color: transparent !important;
  background-image: none !important;
  overflow-x: scroll !important; /* Horizontales Scrollen bleibt aktiv */
  overflow-y: scroll !important; /* Vertikales Scrollen bleibt aktiv */
  scrollbar-width: none !important; /* Scrollbalken in Firefox ausblenden */
}

.vpage_popup::-webkit-scrollbar {
  display: none; /* Scrollbalken in WebKit-Browsern (Chrome, Safari, Edge) ausblenden */
}
            
/* iPhone 15Pro landscape */
@media (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
   .hs-container, .o-modal {
    transform: scale(0.90);
    overflow: auto !important;
  }
  .vpage_popup {
      overflow-x: scroll !important;
  }
 }
/* Basisgröße für 4:3-Format */
@media (min-width: 1024px) and (min-height: 768px) {
  .hs-container, .o-modal {
    transform: scale(1.0);
  }
}

@media (min-width: 1152px) and (min-height: 864px) {
  .hs-container, .o-modal {
    transform: scale(1.1);
   }

}

@media (min-width: 1280px) and (min-height: 960px) {
  .hs-container, .o-modal {
    transform: scale(1.2);
   }
}

/* Chrome mit Leisten auf FHD  */
@media (min-width: 1360px) and (min-height: 905px) and (max-height: 1019px) {
  .hs-container, .o-modal {
    transform: scale(1.189);
  }
}

/* Browser Fullscreen FHD */
@media (min-width: 1365px) and (min-height: 1080px) {
  .hs-container, .o-modal {
    transform: scale(1.34);
  }
  
}
/* iPad Pro 12.9 */
@media (min-resolution: 2dppx) and (color-gamut: p3) and (min-width: 1365px) and (min-height: 999px) {
  .hs-container, .o-modal {
    transform: scale(1.3);
  }
  
}
@media (min-width: 1408px) and (min-height: 1056px) {
  .hs-container, .o-modal {
    transform: scale(1.36);
  }
}

@media (min-width: 1536px) and (min-height: 1152px) {
  .hs-container, .o-modal {
    transform: scale(1.4);
  }
}

/* Browser als App 27Zoller ohne Leisten */
@media (min-width: 1590px) and (min-height: 1190px) {
  .hs-container, .o-modal {
    transform: scale(1.55);
  }
}

@media (min-width: 1792px) and (min-height: 1344px) {
  .hs-container, .o-modal {
    transform: scale(1.6);
  }
}

@media (min-width: 1920px) and (min-height: 1440px) {
  .hs-container, .o-modal {
    transform: scale(1.65);
  }
}

@media (min-width: 2176px) and (min-height: 1536px) {
  .hs-container, .o-modal {
    transform: scale(1.7);
  }
}

@media (min-width: 2400px) and (min-height: 1632px) {
  .hs-container, .o-modal {
    transform: scale(1.75);
  }
}
/* Maximale Breite von 2550px und minimale Höhe von 1360px für scale 1.77 */
@media (min-width: 2550px) and (min-height: 1360px) {
  .hs-container, .o-modal {
    transform: scale(1.77);
  }
}​

    /* Deaktivert hover auf touch Geräten */            
 @media (hover: none) {
    .visu_knopf:hover,
    .visu_knopf_soft:hover,
    .text_nav_link:hover    {
        background-color: inherit; /* Entfernt Hover-Stil */
    }​

Grüße
Dominik

[DosOrDie]

Hallo,

habt ihr auch Probleme auf dem iPad und iPhone mit IOS 18.3 im Safari?
Bei mir aktualisieren sich keine zustände mehr in der HTML5 Visu. Also wenn eine Visu Seite nur offen ist aber nichts geklickt wird.
Läd man die Seite neu stimmen die Werte natürlich wieder.

Kennt ihr gute alternative Browser die auch im Fullscreen funktionieren?

Grüße
Dominik