/* BILLED-EDITOREN. Hører til public/billedredigering.js. * * Farverne er literaler og ikke var(--…): vinduet hænger på , altså UDEN FOR #view-build, * hvor trin-fladens variabler er sat. Scoper man dem, står vinduet nøgent. Samme fælde som * chat-boblernes CSS i tekstmenu.css. */ /* LAGDELINGEN ER MÅLT, IKKE GÆTTET. Appen har tre lag over 900: .gtask (den svævende grønne knap, 9998), .toast (9999) og brand-vælgeren (99999). Vinduet lå på 901 og havde altså den svævende knap oven i sig — præcis dér hvor "Gem som nyt billede" sidder. Det ligger nu OVER knappen men UNDER toasten, så kvitteringen for at have gemt stadig kan ses. */ #br_rod[hidden] { display: none; } .br-bag { position: fixed; inset: 0; z-index: 9990; background: rgba(14, 17, 15, .55); backdrop-filter: blur(3px); } body.br-laast { overflow: hidden; } .br-vindue { position: fixed; z-index: 9991; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(1080px, 94vw); max-height: 92vh; display: flex; flex-direction: column; background: #fdfbf7; border: 1px solid #e7e1d6; border-radius: var(--r-kort); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(10, 20, 14, .55); font-family:'Nunito Sans',system-ui,sans-serif; color: #16181a; } .br-top { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #efeae0; font-size: 15px; } .br-x { margin-left: auto; cursor: pointer; color: #8b8578; font-size: 21px; line-height: 1; } .br-x:hover { color: #16181a; } /* Scene + panel side om side. Under 860px lægger panelet sig UNDER billedet frem for at klemme det: skyderne skal kunne rammes med en tommelfinger. */ .br-krop { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 0; min-height: 0; flex: 1; } @media (max-width: 860px) { .br-krop { grid-template-columns: 1fr; } } .br-scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 18px; background: #f2efe8; } /* Lærredet får sine mål i pixels af JS'en. max-* holder det inde i vinduet uanset billedets størrelse, uden at forvrænge det. Indpakningen er kun til for beskærings-rammen: den skal ligge oven på PIXELS, ikke på scenen, og skrumper indpakningen ikke med, ville rammen sidde fast i et hjørne af den grå flade. */ .br-lae-wrap { position: relative; display: inline-block; line-height: 0; max-width: 100%; } .br-scene canvas { max-width: 100%; max-height: min(62vh, 560px); display: block; border-radius: var(--r-knap); box-shadow: 0 6px 22px -12px rgba(0, 0, 0, .5); background: #fff; } .br-henter { position: absolute; font-size: 13px; color: #8b8578; } /* Beskærings-rammen. Alt uden for den mørknes af ÉT box-shadow på 9999px — fire paneler ville skulle holdes i sync med rammen ved hvert eneste træk. */ .br-crop { position: absolute; cursor: move; touch-action: none; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(14, 17, 15, .48); } .br-crop[hidden] { display: none; } /* Tredjedelslinjer: de er grunden til at man overhovedet kan komponere en beskæring. */ .br-crop::before, .br-crop::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; } .br-crop::before { background: linear-gradient(to right, transparent 33.2%, #fff 33.2%, #fff 33.5%, transparent 33.5%, transparent 66.4%, #fff 66.4%, #fff 66.7%, transparent 66.7%); } .br-crop::after { background: linear-gradient(to bottom, transparent 33.2%, #fff 33.2%, #fff 33.5%, transparent 33.5%, transparent 66.4%, #fff 66.4%, #fff 66.7%, transparent 66.7%); } .br-crop i { position: absolute; width: 16px; height: 16px; background: #fff; border-radius: var(--r-lille); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); touch-action: none; } .br-crop i[data-h=nv] { left: -8px; top: -8px; cursor: nwse-resize; } .br-crop i[data-h=no] { right: -8px; top: -8px; cursor: nesw-resize; } .br-crop i[data-h=sv] { left: -8px; bottom: -8px; cursor: nesw-resize; } .br-crop i[data-h=so] { right: -8px; bottom: -8px; cursor: nwse-resize; } .br-afsnit { font-size: 12.5px; color: #4a4740; margin: 20px 0 8px; } .br-form { display: flex; flex-wrap: wrap; gap: 6px; } .br-form button { font: inherit; font-size: 12px; cursor: pointer; padding: 5px 11px; border: 1px solid #e0dacd; border-radius: var(--r-knap); background: #fff; color: #16181a; } .br-form button:hover { border-color: #c8c0ae; } .br-form button.valgt { border-color: #256a42; background: rgba(46, 200, 113, .1); color: #16543a; } #br_kropfra { color: #8b8578; } .br-hint { font-size: 11.5px; line-height: 1.5; color: #8b8578; margin: 9px 0 0; } .br-hint b { color: #16181a; font-weight: 600; } .br-hint[hidden] { display: none; } /* "Beskær billedet" er en HANDLING, ikke et valg — derfor fuld bredde og husets grønne, så den ikke forsvinder i rækken af formatpiller ovenover. Den var slet ikke der før, og resultatet var en ramme på skærmen man ikke kunne gøre noget ved. */ .br-udfoer { display: block; width: 100%; margin-top: 10px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: #fff; background: #256a42; border: none; border-radius: var(--r-knap); padding: 9px 14px; } .br-udfoer:hover { background: #1c5433; } .br-udfoer[hidden] { display: none; } .br-fortryd { display: block; width: 100%; margin-top: 7px; font: inherit; font-size: 12.5px; cursor: pointer; color: #4a4740; background: #fff; border: 1px solid #e0dacd; border-radius: var(--r-knap); padding: 7px 14px; } .br-fortryd:hover { border-color: #c8c0ae; } .br-fortryd[hidden] { display: none; } .br-panel { padding: 16px 18px; border-left: 1px solid #efeae0; overflow-y: auto; } @media (max-width: 860px) { .br-panel { border-left: none; border-top: 1px solid #efeae0; } } .br-sk { display: block; margin-bottom: 15px; } .br-sk > span { display: flex; align-items: baseline; font-size: 12.5px; color: #4a4740; margin-bottom: 6px; } .br-sk i { margin-left: auto; font-style: normal; font-size: 12px; color: #8b8578; font-variant-numeric: tabular-nums; } .br-sk em { display: block; font-style: normal; font-size: 11px; color: #a49a86; margin-top: 4px; } .br-sk input[type=range] { width: 100%; accent-color: #256a42; } .br-drej { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; } .br-drej button { font: inherit; font-size: 12.5px; cursor: pointer; padding: 7px 12px; border: 1px solid #e0dacd; border-radius: var(--r-knap); background: #fff; color: #16181a; } .br-drej button:hover { border-color: #c8c0ae; } #br_nul { margin-left: auto; color: #8b8578; } .br-bund { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid #efeae0; background: #fbf9f4; } .br-plads { flex: 1; } .br-bund button { font: inherit; font-size: 13.5px; cursor: pointer; border-radius: var(--r-knap); padding: 9px 17px; } .br-foer { border: 1px solid #e0dacd; background: #fff; color: #4a4740; user-select: none; } .br-foer:active { background: #16181a; color: #fff; } .br-annul { border: 1px solid #e0dacd; background: #fff; color: #4a4740; } .br-gem { border: 1px solid transparent; background: #16181a; color: #fff; font-weight: 600; } .br-gem:hover { background: #000; } .br-gem[disabled] { opacity: .55; cursor: default; } @media (max-width: 620px) { .br-foer { display: none; } }