css/lazy.css - master - RaskolnickOFF/3D

css/lazy.css
135 строк7 KB
RaskolnickOFF
feat: implement boundless 3x3 tile streaming manager and border tracking system
18 июн 2026, 03:54
18 июн 2026, 03:54e8f9134
/* css/lazy.css */

/* Critical error */
.critical-error {
    display: flex; position: absolute; z-index: var(--critical); 
    top: var(--tiny); width: var(--size-width); left: var(--standart); 
    padding: var(--tiny); user-select: none;
    background-color: var(--red); border-radius: var(--mini) var(--mini) 0 0;}

/* LOGS */
.logs-list::before, .logs-list {
    height: auto; width: var(--size-width); text-shadow: var(--shadow);}
.logs-list {
    background-color: var(--grey); display: flex; flex-direction: column;
    border-radius: 0 0 var(--mini) var(--mini); position: absolute; 
    top: var(--biggest); left: var(--standart); user-select: none;}
.logs-list::before {
    content: "Журнал событий:"; background-color: var(--blue);
    font-size: var(--medium-font); position: relative;
    padding-left: var(--mini); top: var(--big-);
    border-radius: var(--mini) var(--mini) 0 0;}
.logs-list ol {
    padding: var(--tiny) var(--macro); display: flex; flex-direction: column;
    position: relative; list-style: none;
    scrollbar-width: thin; scrollbar-color: var(--black-a7) var(--grey);
    overflow-y: auto; max-height: calc(50vh - var(--biggest) - var(--standart));}
.logs-list ol li {
    padding-left: var(--mini); font-size: var(--small-font);
    display: flex; justify-content: space-between; align-items: center;}
.logs-list ol li span {padding-right: var(--mini); color: var(--black-a7); 
    text-shadow: none; font-weight: 600; font-size: var(--medium-font)}
.logs-list ol li.error {background-color: var(--red); border-radius: var(--tiny);
    box-shadow: var(--macro) var(--macro) var(--tiny) var(--yellow);
    border-bottom: var(--micro) solid var(--yellow);}
.logs-list ol li.error span {color: var(--yellow);}

/* FPS */
.fps-counter {
    z-index: var(--fps); position: absolute; font-size: var(--tiny-font);
    display: flex; align-items: center; justify-content: space-between;
    top: var(--tiny); left: calc(var(--half-width) + var(--standart));
    background-color: var(--black-a7); width: var(--half-width); user-select: none;
    padding: var(--macro) var(--tiny);  border-radius: 0 var(--mini) 0 var(--mini); }
.fps-counter label {display: block; padding-left: var(--mini);}
.fps-counter span {font-size: var(--large-font);}
.fps-counter span.ok {color: var(--green);}
.fps-counter span.warn {color: var(--yellow);}
.fps-counter span.lag {color: var(--red);}

/* DEBUG and Controls */
.systems-debug-overlay::before, .systems-debug-overlay {
    height: auto; width: var(--size-width); text-shadow: var(--shadow);}
.systems-debug-overlay {
    background-color: var(--grey); display: flex; flex-direction: column;
    border-radius:0 0 var(--mini) var(--mini); position: absolute; 
    bottom: var(--tiny); left: var(--standart); user-select: none;}
.systems-debug-overlay::before {
    content: "Отладка систем:"; background-color: var(--blue);
    font-size: var(--medium-font); position: relative;
    padding-left: var(--mini); top: var(--big-);
    border-radius: var(--mini) var(--mini) 0 0;}
.systems-debug-overlay ul {
    display: flex; flex-direction: column; border-top: 1px solid var(--white);
    position: relative; list-style: none; top: var(--big-);
    min-height: calc(50vh - var(--biggest) * 3);
    scrollbar-width: thin; scrollbar-color: var(--black-a7) var(--grey);
    overflow-y: auto; max-height: calc(50vh - var(--biggest) * 3 );}
.systems-debug-overlay ul li { overflow: hidden;}
.systems-debug-overlay ul li button {
    width: 100%; border: none; padding: var(--tiny) var(--mini);
    text-align: left; background-color: var(--white-a8);
    border: none; font-size: var(--tiny-font); font-weight: 600;
    color: var(--black-a7); cursor: pointer; transition: background 0.2s ease;}
.systems-debug-overlay ul li button:hover {
    background-color: var(--white); color: var(--blue);}
.systems-debug-overlay ul li.open button {
    background-color: var(--blue); color: var(--white); 
    text-shadow: var(--shadow); }
.systems-debug-overlay ul li div {
    max-height: 0; opacity: 0; visibility: hidden; font-size: var(--tiny-font);
    scrollbar-width: thin; scrollbar-color: var(--black-a7) var(--grey);
    display: flex; flex-direction: column;
    transition: max-height 0.1s ease-out, opacity 0.1s ease-in-out;}
.systems-debug-overlay ul li.open div {
    max-height: 220px; overflow: hidden; overflow-y: auto;
    opacity: 1; visibility: visible; padding: var(--macro) var(--mini); 
    border-top: 1px solid var(--white); border-bottom: 1px solid var(--white);}
.systems-debug-overlay ul li.open div button {
    background-color: var(--white-a8); color: var(--black-a7);
    text-shadow: none; text-align: center; border-radius: var(--mini);
    transition: background-color .2s linear, color .2s linear;}
.systems-debug-overlay ul li.open:not(:has(section)) button:hover {
    background-color: var(--blue); color: var(--white);
    text-decoration: underline;}
.systems-debug-overlay ul li.open div.two-buttons {
    display: flex; flex-direction: row; justify-content: space-between;}
.systems-debug-overlay ul li.open div.two-buttons button {
    width: calc(50% - var(--mini));}
.systems-debug-overlay ul li.open div label {
    display: flex; flex-direction: column; padding-bottom: var(--mini);}
.systems-debug-overlay ul li.open div label:not(:last-child) {
    border-bottom: 1px solid var(--white);}
.systems-debug-overlay ul li.open div label input {margin-top: var(--mini);}
.systems-debug-overlay ul li.open div label span {padding-left: var(--mini);}
.systems-debug-overlay ul li.open div label > span { color: var(--yellow); text-shadow: var(--micro) var(--micro) var(--micro) var(--red) ;}
.systems-debug-overlay ul li.open div.info-row { border: none;
    flex-direction: row; align-items: center; justify-content: space-between;}

.systems-debug-overlay ul li.open div label section { margin-top: var(--mini);
    display: flex; align-items: center; justify-content: space-between;}
.systems-debug-overlay ul li.open div label section button {width: auto;}
.systems-debug-overlay ul li.open div label section button:hover {
    background-color: var(--blue); color: var(--white);}

.systems-debug-overlay ul li.open div label li:has(span.hidden),
.systems-debug-overlay ul li.open div label li.hidden {display: none;}

/* Tiles debug */
section.tiles-container { 
    display: flex; flex-direction: column; width: 100%;
    aspect-ratio: 1 / 1; overflow-y: auto;  overflow-x: hidden;}
section.tiles-row { display: flex; flex: 1;}
article.tile-cell { display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--white-a8); cursor: pointer; flex: 1;
    font-size: var(--small-font);}
article.tile-cell:hover { z-index: 100; outline: 3px solid var(--yellow); }
article.tile-cell:active { background-color: var(--blue);}
article.tile-cell.tile-good { background-color: var(--green);}
article.tile-cell.tile-bad { background-color: var(--red);}
article.tile-cell.tile-bad:has(button) {justify-content: space-between;}
.systems-debug-overlay ul li.open div article.tile-cell.tile-bad button.tile-generate {
    background-color: var(--alpha); color: var(--white); padding: 0; font-size: auto;
    width: 50%; height: 100%; position: relative; border-radius: 0;}
.systems-debug-overlay ul li.open div article.tile-cell.tile-bad:has(button.tile-generate:active) {background-color: var(--blue);}
.systems-debug-overlay ul li.open div article.tile-cell.tile-bad button.tile-generate:active {color: var(--yellow);}