/* Standard Theme (Dark) */
/*In HTML, the root element is always the element. */
:root {
--bg: #000;
--fg: #eee;
--block: #444;
--accent: #00c8ff;
--toggle-bg-dark: #4a5568;
--toggle-bg-light: #cbd5e1;
--toggle-handle-dark: #f8fafc;
--toggle-handle-light: #334155;
--angle: 45deg;
}
.down_bot{
z-index: 3333333;
position: absolute;
left: 22px;
bottom: 11px;
display: flex; /* Macht den Eltern-Container zum Flexbox-Grid */
justify-content: center; /* Zentriert horizontal */
align-items: center; /* Zentriert vertikal */
}
.testme2{
border-radius: 5px;
}
.containerleft{
position: fixed;
left: 12px;
margin-top: 11px;
top: 26px;
width: 21%;
/* border: 3px solid #73AD21;*/
display: block;
z-index: 1111111;
}
.run_stage{
position: absolute;
top: 6px;
right: -20px;
z-index: 999999999;
float: right;
}
.goback{
z-index: 111111;
position: fixed;
top: 8px;
left: 12px;
}
.gohome{
z-index: 111111;
position: fixed;
top: 8px;
left: 55px;
}
.containerMe{
display: block;
left: 25%;
width: calc(100% - 50%);
position: relative;
}
.containerMe2{
position: absolute;
width: 237px;
display:block;
top: 42px;
left: 50%;
transform:translate3d(-50%,0%,0);
border: 2px solid red; padding: 10px;
}
/* Light Theme */
body.light {
--bg: #f5f5f5;
--fg: #222;
--block: #ddd;
--accent: #007acc;
}
/* Anwendung der Variablen */
body {
font-family:'Source Sans Pro', 'Helvetica Neue';
font-size:16px;
background: var(--bg);
color: var(--fg);
transition: background-color 0.3s ease, color 0.3s ease;
}
/*
body {
font-family:'Source Sans Pro', 'Helvetica Neue';
font-size:16px;
background:#000;
color:#fff;
}
body.light {
background:#fff;
color:#111;
}*/
.restart-flash {
/*
padding: 5px 15px;
border-radius: 20px;
background: linear-gradient(45deg,#676767, #bcbcbc);
color: white;
font-weight: bold;
cursor: pointer;
transition: filter 0.2s;
width: 100px;
position: relative;
top: -17px;
right: -68%;
z-index: 999999999;
*/
padding: 5px 15px;
border-radius: 20px;
background: linear-gradient(45deg,#676767, #bcbcbc);
color: white;
font-weight: bold;
cursor: pointer;
transition: filter 0.2s;
width: 51px;
}
.restart-flash:active {
filter: brightness(1);
background: linear-gradient(49deg,#bcbcbc, #676767);
color: #111;
}
.restart-flash2 {
--angle: 45deg;
padding: 10px 20px;
border-radius: 20px;
background: linear-gradient(var(--angle), #3f1136, #f9ff33);
color: white;
font-weight: bold;
cursor: pointer;
transition: filter 2.2s;
width: 100px;
position: relative;
top: 40px;
}
.restart-flash2:active{
--angle: 90deg;
background: linear-gradient(var(--angle), #f9ff33, #3f1136);
color: #111;
}
body.light-theme {
--bg : #f8fafc;
--fg: #1e293b;
}
.theme-toggle {
/*
position: relative;
top: 6px;
left: 25%;
z-index:999999999;
width: 100px;
*/
position: relative;
top: 6px;
z-index: 999999999;
width: 100px;
float: left;
}
.theme-switcher {
display: none;
}
.toggle-label {
display: block;
width: 60px;
height: 30px;
background-color: var(--toggle-bg-light);
border-radius: 15px;
position: relative;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.toggle-label::before {
content: "☀️";
position: absolute;
left: 6px;
top: 47%;
transform: translateY(-50%);
font-size: 14px;
z-index: 2;
}
.toggle-label::after {
content: "🌙";
position: absolute;
right: 7px;
top: 46%;
transform: translateY(-50%);
font-size: 14px;
z-index: 2;
}
.toggle-handle {
position: absolute;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background-color: var(--toggle-handle-light);
border-radius: 50%;
transition: transform 0.3s ease, background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.theme-switcher:checked + .toggle-label {
background-color: var(--toggle-bg-dark);
}
.theme-switcher:checked + .toggle-label .toggle-handle {
transform: translateX(30px);
background-color: var(--toggle-handle-dark);
}
#toolbar {
position:fixed;
top:0;
left:0;
width:80%;
line-height:25px;
padding:10px;
box-sizing:border-box;
transition:0.15s;
opacity:1;
z-index:999999999;
}
/*
#toolbar:hover {
opacity:1;
}
*/
#theme {
padding-right:15px;
float:left;
}
#toolbar .link{
float:right;
}
#toolbar a {
color:inherit;
text-decoration:none;
}
#win,
#finished{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:inherit;
color:inherit;
z-index:9999;
display:none;
}
#win .text,
#finished .text {
position:absolute;
top:50%;
left:50%;
font-size:40px;
font-weight:100;
transform:translate3d(-50%,-50%,0);
}
body.light #win .text,
body.light #finished .text {
--bg: #f5f5f5;
--fg: #222;
--block: #ddd;
--accent: #007acc;
}
div[class^="level"] {
/* position:fixed;
top:50%; */
position: absolute;
top: 10%;
margin-top: 4px;
left:50%;
width:250px;
/*transform:translate3d(-50%,-50%,0);*/
transform:translate3d(-50%,0%,0);
/*
height: 56vh;*/
display:none;
}
div[class^="level"] .text {
font-size:19px;
padding-top:20px;
clear:both;
overflow:hidden;
}
div[class^="level"] .text span {
padding:10px 0 0;
font-size:20px;
display:block;
}
div[class^="level"] .text.center {
text-align:center;
}
div[class^="level"] .block,
#createLevel .newLevel .block {
position:relative;
width:50px;
height:50px;
float:left;
cursor:pointer;
overflow:hidden;
transition:0.15s ease-in-out;
}
div[class^="level"] .block.triple:before,
#createLevel .newLevel .block.triple:before {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:url(triple.png) 50% 50% / contain no-repeat;
display:block;
content:'';
}
div[class^="level"] .block.curve:before,
#createLevel .newLevel .block.curve:before {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:url(curve.png) 50% 50% / contain no-repeat;
display:block;
content:'';
}
div[class^="level"] .block.curve.double:before,
#createLevel .newLevel .block.curve.double:before {
background:url(curve-double.png) 50% 50% / contain no-repeat;
}
div[class^="level"] .block.straight:before,
#createLevel .newLevel .block.straight:before {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:url(straight.png) 50% 50% / contain no-repeat;
display:block;
content:'';
}
div[class^="level"] .block.straight.double:before,
#createLevel .newLevel .block.straight.double:before {
background:url(straight-double.png) 50% 50% / contain no-repeat;
}
div[class^="level"] .block.end:before,
#createLevel .newLevel .block.end:before {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:url(end.png) 50% 50% / contain no-repeat;
display:block;
content:'';
}
body.light div[class^="level"] .block,
body.light #createLevel .newLevel .block {
filter: invert(1);
}
body.light .containerleft .goback ,
body.light .containerleft .gohome,
body.light .run_stage
{
filter: invert(1);
}
div[class^="level"] .block,
#createLevel .newLevel .block{
/*transform:rotate(0deg);*/
transition: transform 0.4s ease;
}
body.light #createLevel .tools {
filter: invert(1);
}