apple2js/js/components/css/Screen.module.css

95 lines
1.8 KiB
CSS
Raw Normal View History

:global(.mono) {
2022-06-26 00:40:47 +00:00
filter: url("#green");
}
.display {
2022-06-26 00:40:47 +00:00
margin: 5px auto 10px;
}
:global(.full-page) .display {
width: 100vw;
height: 68.5714vw; /* 384px / 560px * 100% */
max-height: 100vh;
max-width: 145.83vh; /* 560px / 384px * 100% */
padding: 0;
border: 0;
position: fixed;
2022-06-26 00:40:47 +00:00
top: 0;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-items: center;
margin: auto !important;
}
.overscan {
margin: auto;
position: relative;
background-color: black;
width: 592px;
height: 416px;
border: 6px inset #f0edd0;
border-radius: 10px;
}
:global(.full-page) .overscan {
margin: initial;
padding: 0;
width: initial;
border: 0;
border-radius: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
2022-06-26 00:40:47 +00:00
:global(.scanlines)::after {
display: block;
pointer-events: none;
2022-06-26 00:40:47 +00:00
background-image:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1px,
rgb(0 0 0 / 50%) 1px,
rgb(0 0 0 / 50%) 2px
);
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
2022-06-26 00:40:47 +00:00
:global(.full-page) :global(.scanlines)::after {
background-image:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 0.25vh,
rgb(0 0 0 / 50%) 0.25vh,
rgb(0 0 0 / 50%) 0.5vh
);
}
.screen {
cursor: crosshair;
2022-06-26 00:40:47 +00:00
image-rendering: crisp-edges;
width: 592px;
height: 416px;
touch-action: manipulation;
user-select: none;
}
2022-06-05 01:39:04 +00:00
.screen:global(.mouseMode) {
cursor: none;
}
:global(.full-page) .screen {
width: 100%;
height: 100%;
}