hr.HR_design1 { border-style: solid; border-image: linear-gradient(to left, rgba(227,155,0,0.01) 1%, rgba(227,155,0,0.65) 25%, rgba(227,155,0,0.85) 50%, rgba(227,155,0,0.65) 75%, rgba(227,155,0,0.01) 100%) 100% 0 100% 0/1px 0 0px 0 stretch; width: 100%; } .Lade_Container { z-index: 2000; /* display: none; */ display: flex; top: 50%; left: 50%; position: fixed;/* fixed, um immer Bildschirm mittig zu zentrieren */ transform: translate(-50%, -50%); /* background: rgba(36,36,36,0.65);*/ /* Kompletten Bildschirm abdunkeln */ width: 100%; height: 100%; justify-content: center; align-items: center; opacity: 0;/* Auf 0 setzen wenn mit Javascript ausgeführt wird, um Flackern beim Laden der Seite zu verhindern */ } .Ladetext { width: 168px; height: 168px; color: #fff; border-radius:100%; background: rgba(36,36,36,0.75); z-index: 57; text-align: center; vertical-align: middle; font-size: 13px; } .Ladetext span { display: inline-block; vertical-align: middle; line-height: 166px; text-shadow: 0px 0px 5px rgb(255, 255, 255); } .Ladekreis_aussen{ position: absolute; z-index: 50; width:200px; height:200px; border-radius:100%; border:6px solid; -webkit-box-shadow: 0px 0px 15px -4px #000000; box-shadow: 0px 0px 15px -4px #000000; background: rgba(255,255,255,0.2); } .Ladekreis_innen{ position: absolute; z-index: 55; margin: 8px; width: 184px; height:184px; border-radius:100%; border:6px solid; border-color:transparent #e39b00 transparent #e39b00; background: rgba(255,255,255,0.2); } .Ladeanimation_Start { border-color:transparent #e39b00 transparent #e39b00; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .Ladeanimation_aussen { -webkit-animation: rotation 2.8s infinite linear; animation: rotation 2.8s infinite linear; } @-webkit-keyframes rotation{ from { -webkit-transform: rotate(0deg);transform: rotate(0deg);} to { -webkit-transform: rotate(359deg);transform: rotate(359deg);} }@keyframes rotation{ from { -webkit-transform: rotate(0deg);transform: rotate(0deg);} to { -webkit-transform: rotate(359deg);transform: rotate(359deg);} } .Ladeanimation_innen { -webkit-animation: rotation2 2.0s infinite linear; animation: rotation2 2.0s infinite linear; } @-webkit-keyframes rotation2 { from { -webkit-transform: rotate(359deg);transform: rotate(359deg);} to { -webkit-transform: rotate(0deg);transform: rotate(0deg);} }@keyframes rotation2 { from { -webkit-transform: rotate(359deg);transform: rotate(359deg);} to { -webkit-transform: rotate(0deg);transform: rotate(0deg);} } .Test0 { width: 500px; margin: auto; background: rgb(230,230,230); padding: 10px; } .Stats_Beschreibung { border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 2px solid #e39b00; border-bottom: 1px solid #ccc; border-top-left-radius: 20px; border-bottom-left-radius: 20px; height: 40px; width: 190px; padding: 7px; margin: 3px 1px 3px 1px; float:left; text-align: right; background: rgba(245,245,245, 0.5); -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-shadow: 1px 1px 0px #FFFFFF; } .Stats_Ergebnis { border-left: 2px solid #e39b00; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top-right-radius: 20px; border-bottom-right-radius: 20px; height: 40px; width: 100px; padding: 10px; margin: 3px 1px 3px 1px; font-size: 15px; font-weight: bold; line-height: 13px; text-align: center; background: rgba(245,245,245, 0.5); -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-shadow: 1px 1px 0px #FFFFFF; } .Stats_Beschreibung:hover, .Stats_Ergebnis:hover { background: rgba(227, 155, 0, 0.2); //background: linear-gradient(0deg, rgba(231,231,231,1) 0%, rgba(251,251,251,1) 100%); -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } .Stats_Beschreibung:active, .Stats_Ergebnis:active { transform:scale(1); animation: H_Animation 0.15s; -webkit-animation: H_Animation 0.15s; } @keyframes H_Animation { from { transform:scale(1.10); } to { transform:scale(1.0); } } .API_Label { font-size: 11px; color: rgba(0,0,0,0.6); } .Stats_Box { display: flex; } .Stats_Zentrierung { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .fieldset_style { border: 1px solid #ccc; border-radius: 3px; padding: 10px; margin: 2px auto; background: #fff; text-align: center; /*Button zentrieren*/ } .Container_Stats { display: table; margin: 20px auto; } .Stats_Button { transition: all 200ms; margin: auto; } .Special_BG { background: rgb(230,230,230)!important; } .Mini_Info { font-size: 12px; color: rgba(0,0,0,0.5); }