/* Caution overscroll-behavior requires Chrome 63+. It's in development or being considered by other browsers. See chromestatus.com for more information. */ /* Turning off the pull-to-refresh action is a single line of CSS. Just prevent scroll chaining on the entire viewport-defining element. In most cases, that's or : */ /* Disables pull-to-refresh kan naar x of y worden gespecificeerd. */ /* 100vw : Full width including the scrollbar. 100% : Full width excluding the scrollbar. */ /* reset */ html, body{ font-family: Roboto Condensed, sans-serif; min-height: 100vh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* end reset */ /* start css tweak html, body{ font-family: Roboto Condensed, sans-serif; overscroll-behavior-y: contain; margin:0; } end css tweak */ /* etc */ :root { --padding: 1rem; --bg-colorW : "white"; --bg-colorZ : "black"; --bg-colorR: "red"; --bg-colorG: "green"; --bg-colorB: "blue"; --colorW : "white"; --colorZ : "black"; --colorR: "red"; --colorG: "green"; --colorB: "blue"; /* --bg-color: #e5e4e2; = platinum */ --bg-color-test-0: rgb(238, 22, 184); /* The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. */ --bg-color-test: rgb(238 22 184 / 0.5); /* The rgb() functional notation expresses a color in the sRGB color space according to its red, green, and blue components. An optional alpha component represents the color's transparency. */ --bg-color-rood: rgb(100% 0% 0% / 1); --bg-color-groen: rgb(0% 100% 0% / 1); --bg-color-blauw: rgb(0% 0% 100% / 1); /* OkLCh (Lightness, Chroma, Hue) --bg-color-test1: orange; */ --bg-color-test2: oklch(from purple 0.10 50); --bg-color-test3: pink; --bg-color-test4: lightblue; --bg-color-test5: palegoldenrod; --bg-color-test6: khaki ; --bg-color-test7: lightgreen; --bg-color-test8: green; --bg-color-test9: darkgreen; --bg-color-test10: maroon; /* hue, saturation, and lightness components. An optional alpha component represents the color's transparency. */ --bg-color-uur00: black; --bg-color-uur01: hsl(( black) h s calc( l + 20) /0.5); /* --bg-color-uur01: rgb(40, 40, 39); */ --bg-color-uur02: rgb(71, 70, 63) ; --bg-color-uur03: rgb(61, 62, 61); --bg-color-uur04: rgb(94, 95, 94); --bg-color-uur05: #4d0d55; /* = platinum */ --bg-color-uur06: rgb(203, 121, 182); --bg-color-uur07: orange; --bg-color-uur08: rgb(128, 136, 212); --bg-color-uur09: rgb(125, 140, 191); --bg-color-uur10: lightblue; --bg-color-uur11: rgb(170, 208, 238); --bg-color-uur12: rgb(141, 236, 158) ; --bg-color-uur13: rgb(70, 111, 70); --bg-color-uur14: rgb(2, 136, 2); --bg-color-uur15: darkgreen; --bg-color-uur16: rgb(11, 68, 87); --bg-color-tes17: rgb(4, 51, 18); --bg-color-uur18: palegoldenrod; --bg-color-uur19: rgb(241, 220, 220) ; --bg-color-uur20: rgb(236, 180, 180); --bg-color-uur21: rgb(244, 102, 94); --bg-color-uur22: rgb(145, 51, 51); --bg-color-tes23: maroon; /* --bg-color-uur24: lightblue; */ --outline-test: dotted 30px var(--bg-color-test); } .inlogKnop:hover { /* Common hover effects */ background-color: #e0e0e0; /* A slightly darker or lighter background */ cursor: pointer; /* Ensures the cursor indicates interactivity */ opacity: 0.8; /* Slight transparency */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* A subtle shadow */ } .err_tabel{ width: 100%; border-collapse: collapse; /* nette randen */ table-layout: auto; /* laat kolommen zich aanpassen */ background-color: white; td, th { padding: 8px; border: 1px solid #ccc; white-space: normal; /* tekst mag afbreken */ word-wrap: break-word; /* forceer afbreken bij lange woorden */ overflow: visible; /* geen scrollbars */ } } .d_vrienden{ display: flex; } /* Decide on the cascade layer order */ @layer klein_l, nieuwe_layer; /* zoiets als versioning */ @layer nieuwe_layer { body{ } .test_php { background-color: var(--bg-color-test); } .werkblad{ anchor-name: --my-anchor; /* contain: layout; maakt zich onafhankelijk van de rest van de pagina, behalve voor position: fixed elementen. */ /* padding: top right botom left */ z-index : 1; background-color: rgb(255,235,205); /* margin: 100px 100px 50px 50px;*/ overflow-y: scroll; } .w_inlog_div{ width : 330px; height : 390px; border : 5px solid grey; background-color : transparent; padding : 5px; } .span_vr_irobot{ position : absolute; top : 100px; left: 45px; width : 240px; height : 180px; display : grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 33% 33% 33%; align-items: center; background: white; border : 5px solid grey; } .fi_spraak { position: sticky; top: 3px; left: 3px; display: grid; grid-template-columns: 7rem 10rem 5rem 2rem; grid-template-rows: 2rem; grid-template-areas: "i_menu_knop wrdid zoekcat categorie_icon"; z-index: 10; } .i_menu_knop{ grid-column: 1; grid-row: 1; font-size: x-large; text-align: center; margin-left: 30px; z-index: 4; } #wrdid{ grid-column: 2; grid-row: 1 ; grid-area: "wrdid"; } #zoekcat{ grid-column: 3; grid-row: 1; grid-area: "zoekcat"; } .categorie_icon { grid-column: 4; grid-row: 1; grid-area: "categorie_icon"; } /* */ .gridgeoloclijst { position : absolute; top : var(--top_dgeoloclijst); left: var(--left_dgeoloclijst); height : var(--height_dgeoloclijst); width : var(--width_dgeoloclijst); z-index:1; overflow-y: auto; scrollbar-gutter: auto; } .agenda_publiek { padding-bottom: 1rem; background-color: gainsboro; text-align: center; } .agenda_gebruiker { padding-bottom: 1rem; background-color: gainsboro; text-align: center; } .kalender_tabel_nav{ display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows:30px 30px; } #kalender_tabel{ display: grid; /* contents; or flex grid-template-rows : auto; width: 100%; */ } @scope (.kalender_dag) { div { border: 5px solid var(--bg_coror-test5); } img { border: 5px solid var(--bg_coror-test10); } } .kalender_dag { position: relative; width: 100%; display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 2rem minmax(.1rem, auto) minmax(.1rem, auto); grid-template-areas: "kal_dag kal_tijd kal_cat kal_aantal" "kal_foto kal_foto kal_foto kal_foto" "kal_tekst kal_tekst kal_tekst kal_tekst"; } .kal_dag{ text-align: left; height: 2.5rem; } .kal_button{ border: collapse; grid-area: kal_dag; } ._kal_uweek { grid-area: kal_dag; } .kal_tijd { grid-area: kal_tijd; grid-column: 2; grid-row: 1; text-align: left; } .kal_cat{ grid-area: kal_cat; text-align: left; } .kal_aantal{ background-color:"transparent"; grid-area: kal_aantal; text-align: center; margin-right: 2rem; } .kal_div_foto{ grid-column-start: 1; grid-column-end: 5; grid-row: 2; justify-self: center; .kal_foto{ /* object-fit: contain; width: var(--uwidth); */ max-width: 100%; height: auto; } } .maand_totaal_requests_gmap{ display: flex; justify-content: center; align-items: center; /* align-content: center; margin: 10px auto; */ outline: dotted 3px var(--bg-color-test); } .kal_tekst{ grid-area: kal_tekst; padding-left: 10px; border-left: 1px solid #200101; margin-bottom : 1.5rem; background-color: var(--bg-color-gebruiker); } .dag_uur { background-color: var(--bg-color-uur01); } .zie_rij{ position: relative; background-color: transparent; width: 100%; display: grid; grid-template-columns: 30% 5% 15% 30% 5% 15%; grid-template-rows: 2em, max-content, auto, auto; grid-template-areas: "zie_datum zie_datum_tot zie_cat zie_latlong zie_del zie_pp" "zie_foto zie_foto zie_foto zie_foto zie_foto zie_foto" "zie_tekst zie_tekst zie_tekst zie_tekst zie_tekst zie_tekst" "zie_noot zie_noot zie_noot zie_noot zie_noot zie_noot"; } ._zie_dag { grid-column: 1; grid-row: 1; text-align: center; background-color: rgb(238, 245, 245); font-size: 16px; border: none; border-radius: 8px; } .zie_datum{ grid-column: 1; grid-row: 1; text-align: left; color: var(--bg-color_test); background-color : transparent; font-size: 16px; padding-left: 5px; padding-right: 5px; border: none; border-radius: 8px; } .zie_datum_tot{ grid-column: 2; grid-row: 1; text-align: left; color: white; background-color: transparent; font-size: 16px; } .zie_cat{ grid-column: 3; grid-row: 1; text-align: center; background-color: white; font-size: 1em; border: none; border-radius: 8px; } .zie_latlong{ grid-column: 4; grid-row: 1; text-align: left; font-size: 16px; padding-left: 5px; padding-right: 5px; border-radius: 8px; visibility: visible; } .zie_del{ grid-column: 5; grid-row: 1; font-size: 16px; justify-content: center; /* centers items horizontally */ align-items: center; /* centers items vertically */ /* padding-left: 5px; padding-right: 5px; border: none; border-radius: 8px; */ } .zie_pp{ grid-column: 6; grid-row: 1; text-align: center; margin-left: 5px; background-color: rgb(218, 248, 248); font-size: 16px; padding-left: 5px; padding-right: 5px; border: none; border-radius: 8px; } .zie_foto{ grid-column: 1/7; grid-row:2; text-align: left; background-color: greenyellow; font-size: 1px; visibility: visible; border: none; border-radius: 8px; object-fit: cover; } .zie_tekst{ grid-column: 1/7; grid-row: 3; text-align: left; padding-left: 15px; padding-right: 15px; background-color: rgb(215,213,213); font-size: 18px; border: none; border-radius: 8px; } .zie_noot{ grid-column: 1/7; grid-row: 4; text-align: center; background-color: rgb(150, 140, 146); font-size: 16px; border: none; border-radius: 8px; } ._linker_statuslijst { /* container-type: inline-size; container-name: linker_statuslijst; */ position: absolute; left: 0px; top: 265px; width: 45px; color: black; margin-left: 5px; /* margin: 0.5em; max-height: calc(100vh - 450px); */ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; z-index: 2; } .rechter_statuslijst_mobiel{ /* container-type: inline-size; container-name: rechter_statuslijst; The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. */ position: absolute; width: 50px; left: 0px; top: 30px; color:black; background-color: transparent; z-index: 0; display: grid; grid-template-columns: 2; grid-template-rows: 8; grid-template-areas : "d_aantal_actief" "c_u_hoogte" "c_vandaag_opgenomen" "c_voorspellen" "d_uafst" "d_gem_snelheid" "d_gem_afst" "d_foto_terug d_foto_vooruit" } .rechter_statuslijst{ /* container-type: inline-size; container-name: rechter_statuslijst; The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. */ position: absolute; right: 30px; width: 100px; /*left: 50px; */ top: 100px; background-color: transparent; z-index: 1; display: grid; grid-template-columns: 2; grid-template-rows: 8; grid-template-areas : "d_aantal_actief" "c_u_hoogte" "c_vandaag_opgenomen" "c_voorspellen" "d_uafst" "d_gem_snelheid" "d_gem_afst" "d_foto_terug d_foto_vooruit" } .rechter_statuslijst:hover, .rechter_statuslijst_mobiel:hover { z-index: 5; } .footer { position: absolute; /* top: top_footer; in javascript */ height: 100px; width: 100%; margin-top: 50px; background-color: black; } /* overschrijft alles */ _footer > a , div { /* font-size : clamp(.5rem, 1, 1.5rem); */ } } /* end nieuw_l */ @layer klein_l { body{ background-color: var(--bg-color-gebruiker); } #weer_div { } .zqpm_wrap{ background-color: #4d0d55; } ._zqpm_wrap{ position : relative; width: 100%; height: auto; /* 100%; */ margin: 0; border: 0; padding: 0 ; display: grid; grid-template-columns: minmax(50px, 100px) 1fr auto; grid-template-rows: 5% 10% 70% 10% 5%; grid-column-end: auto; grid-row: 1 } .de_tabellen { max-height : 80%; padding : 5px; overflow-y : auto; background-color : white; z-index : -1; } .x_camera{ width: 100%; height: 100%; object-fit: cover; } .geo{ position: absolute; margin : 5px; top: 5px; left: 30rem; display: grid; grid-template-columns : repeat(18,3rem); /* 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em 3em; */ grid-template-rows : auto; grid-template-areas : "img_geluid hier_icon beschrijf_icon kalender img_google zoek_icon door_icon stop_icon img_fullscreen periode_icon d_weer_wrap img_tijdlijn img_poly img_err chat_icon fotolijst_icon volg_icon grootboek_icon knop_inlog_g tekst_inlog"; z-index: 1; } .geo_mobiel{ position: absolute; left : 3px; top: 300px; z-index: 1; display: grid; grid-template-columns : 50px; grid-template-rows : auto; /* 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 3rem 6rem; */ row-gap: 1rem; grid-template-areas : "img_geluid " "hier_icon " "beschrijf_icon " "kalender " "img_google " "zoek_icon " "door_icon " "stop_icon " "img_fullscreen " "periode_icon " "d_weer_wrap " "img_tijdlijn " "img_poly " "img_err " "chat_icon " "fotolijst_icon " "volg_icon " "grootboek_icon" "knop_inlog_g" "tekst_inlog "; } .inlog_melding{ position : absolute; bottom : 0px; right: 5px; } #tekst_inlog { /* display: grid; grid-column: tekst_inlog; grid-row: 1; grid-template-columns: subgrid; */ } #tekst_inlog_item1{ grid-column: tekst_inlog; grid-row: 1 ; } #tekst_inlog_item2{ grid-column: tekst_inlog; grid-row: 2; } /* rem is root fontsize, em = parent */ .kalender_tabel{ /* width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); /* 1fr 1fr 1fr 1fr; 30px, 20px, 100px,30px; repeat(4, 1fr); grid-template-rows: 1fr minmax(10%, 90%, auto) 1fr 1fr; */ } /* grid-template-columns: 20% 5% 10% 10% 5%; */ /* grid-template-rows: 30px minmax(0, auto) minmax(0, auto) minmax(0, auto); grid-template-rows: auto auto auto auto; */ ._kal_gebruikersnaam{ /*grid-column: 4; padding-left: 10px; */ } .kal_noot{ grid-area: kal_noot; padding-left: 10px; color: black; border-left: 1px solid #200101; margin-bottom : 10px; background-color: rgb(238, 245, 245); } #f_jaar_terug{ grid-column: 1/3; grid-row: 1; text-align: center; } #kalender_datum{ /* ? */ grid-column: 3/11; grid-row: 1; text-align: center; /* color: white; */ } #_kal_jaar{ text-align: center; grid-row: 2; /* color: white; */ } #f_jaar_vooruit{ grid-column: 10/13; grid-row: 1; text-align: center; } #_maand_balk{ grid-column: 1/13; grid-row: 2; text-align: center; } #maand1{ grid-column: 1; grid-row: 2; }#maand2{ grid-column: 2; grid-row: 2; }#maand3{ grid-column: 3; grid-row: 2; }#maand4{ grid-column: 4; grid-row: 2; }#maand5{ grid-column: 5; grid-row: 2; }#maand6{ grid-column: 6; grid-row: 2; }#maand7{ grid-column: 7; grid-row: 2; }#maand8{ grid-column: 8; grid-row: 2; }#maand9{ grid-column: 9; grid-row: 2; }#maand10{ grid-column: 10; grid-row: 2; }#maand11{ grid-column: 11; grid-row: 2; } #maand12{ grid-column: 12; grid-row: 2; } .kalender_tabel_nav > button:hover { /* Common hover effects */ background-color: #e0e0e0; /* A slightly darker or lighter background */ cursor: pointer; /* Ensures the cursor indicates interactivity */ opacity: 0.8; /* Slight transparency */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* A subtle shadow */ } .kalender_dag:hover { /* Common hover effects */ background-color: #e0e0e0; /* A slightly darker or lighter background */ cursor: pointer; /* Ensures the cursor indicates interactivity */ opacity: 0.8; /* Slight transparency */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* A subtle shadow */ } ._kalender_dag{ position : relative; /* absolute gooit de kaartjes op elkaar */ width : 100%; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; display: inline-grid; grid-template-columns: 20% 5% 10% 10% 5%; grid-template-rows: 30px minmax(0, auto) minmax(0, auto) minmax(0, auto); grid-template-areas: "kal_dag kal_tijd kal_uweek kal_cat kal_aantal" "kal_foto kal_foto kal_foto kal_foto kal_foto" "kal_tekst kal_tekst kal_tekst kal_tekst kal_tekst" "kal_noot kal_noot kal_noot kal_noot kal_noot"; gap: 3px; padding: 2px; } @container ( min-width > 1024px){ /* .kalender_tabel{ display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 5; font-size: x_small; } ._kalender_dag{ container: kalender_dag / inline-size; font-size: x_small; position :relative; width : 100%; display: inline-grid; grid-template-columns: 20% 5% 10% 10% 5%; grid-template-rows: 30px minmax(0, auto) minmax(0, auto) minmax(0, auto); grid-template-areas: "kal_dag kal_tijd kal_uweek kal_cat kal_aantal" "kal_foto kal_foto kal_foto kal_foto kal_foto" "kal_tekst kal_tekst kal_tekst kal_tekst kal_tekst" "kal_noot kal_noot kal_noot kal_noot kal_noot"; gap: 3px; padding: 2px; } .kal_dag{ grid-column: 1; grid-row: 1; text-align: center; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } .kal_uweek{ color: black; grid-column: 2; grid-row: 1; padding-top: 1px; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } .kal_tijd{ grid-column: 3; grid-row: 1; color: black; text-align: center; background-color: rgb(238, 245, 245); border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } .kal_cat{ grid-column: 4; grid-row: 1; text-align: left; background-color: rgb(238, 245, 245); border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } .kal_aantal{ text-align: center; grid-column: 5; grid-row: 1; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; } .kal_tekst{ grid-column: 1/7; grid-row: 3; padding-left: 10px; color: black; border-left: 1px solid #200101; margin-bottom : 10px; background-color: rgb(238, 245, 245); } .kal_noot{ grid-column: 1/7; grid-row: 4; padding-left: 10px; color: black; border-left: 1px solid #200101; margin-bottom : 10px; background-color: rgb(238, 245, 245); } */ ._kal_gebruikersnaam{ grid-column: 10 /13; grid-row: 1; padding-left: 10px; } } /* end container */ .zie_cat{ grid-column: 1; grid-row: 1; text-align: center; background-color: white; font-size: 1em; border: none; border-radius: 8px; } .zie_datum{ grid-column: 2; grid-row: 1; text-align: left; color:black; font-size: 16px; padding-left: 5px; padding-right: 5px; border: none; border-radius: 8px; } /* dist niet goed zie_geoloc .i_dist{ background-color: yellow; } */ .zie_datum_tot{ grid-column: 3; grid-row: 1; text-align: left; color: white; background-color: transparent; font-size: 16px; } .zie_latlong{ grid-column: 4; grid-row: 1; text-align: left; font-size: 16px; padding-left: 5px; padding-right: 5px; border-color: rgb(231, 255, 192); border-radius: 8px; visibility: visible; } .zie_del{ grid-column: 5; grid-row: 1; text-align: center; font-size: 16px; padding-left: 5px; padding-right: 5px; border: none; border-radius: 8px; } .zie_pp{ grid-column: 6; grid-row: 1; text-align: center; margin-left: 5px; font-size: 16px; padding-left: 5px; padding-right: 5px; border: none; border-radius: 8px; } .zie_foto{ grid-column: 1/7; grid-row:2; text-align: left; font-size: 1px; visibility: visible; border: none; border-radius: 8px; object-fit: cover; } .zie_tekst{ grid-column: 1/7; grid-row: 3; text-align: left; padding-left: 15px; padding-right: 15px; font-size: 18px; border: none; border-radius: 8px; } .zie_noot{ grid-column: 1/7; grid-row: 4; text-align: center; font-size: 16px; border: none; border-radius: 8px; } .div_leeg{ background-color:transparent; height: 1em; } .fi { background-color: rgb(255,235,205); font-weight: bold; display:grid; grid-template-columns: 35px 35px 35px 35px 35px 35px 35px 35px 35px 35px 35px; grid-template-rows: 15em 2em 2em 2em 2em 2em auto; row-gap:5px; } .fi_mobiel { background-color: rgb(255,235,205); font-weight: bold; display:grid; grid-template-columns: 35px 35px 35px 35px 35px 35px 35px 35px 35px 35px 35px; /* repeat(10, 1fr); */ grid-template-rows: 15em 2em 2em 2em 2em 2em auto; row-gap:5px; /* all: initial; oorspronkelijke css waarden */ } .fi_verbe { background-color: rgb(255,235,205); font-size: clamp(12px, 16px, 20px); display:inline-grid; grid-template-rows: 15em 2em 2em 2em 2em 2em auto; grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px; grid-gap:5px; } .fi_verbe_mobiel { background-color: rgb(255,235,205); font-size: clamp(12px, 16px, 20px); display:inline-grid; grid-template-rows: 15em 2em 2em 2em 2em 2em auto; grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px; grid-gap:5px; } .ibes{ grid-column: 1 / 12; grid-row: 1; } .ibes_mobiel{ grid-column: 1 / 12; grid-row: 1; } .inoot{ /* width: calc(50% + 10px); */ grid-column: 1 / 12; grid-row: 2; } .icat{ /* width: calc(50% + 10px); */ grid-column: 1 / 3; grid-row: 3; } .scr_foto{ /* width: calc(50% + 10px); */ grid-column: 3 / 9; grid-row: 3; } .ifoto_button{ /* width: calc(50% + 10px); */ grid-column: 9 / 12; grid-row: 3; } .button_weg{ /* width: calc(50% + 10px); */ grid-column: 1; grid-row: 4; } .idatum{ /* width: calc(50% + 10px); */ grid-column: 2 / 7; grid-row: 4; } .idatum_tot{ /* width: calc(50% + 10px); */ grid-column: 7 / 12; grid-row: 4; } .id_tekst{ /* width: calc(50% + 10px); */ grid-column: 1; grid-row: 5; } .ilatlong{ /* width: calc(50% + 10px); */ grid-column: 2 / 7; grid-row: 5; } .istuur{ /* width: calc(50% + 10px); */ grid-column: 8 / 10; grid-row: 5; /* outline: dotted 3px var(--bg-color-test2); */ } .foto_orientatie{ grid-column: 11; grid-row: 5; } .d_autocomplete{ grid-column: 1/12; grid-row: 6; } /* grid-template-areas: "kal_foto_all kal_foto_all kal_foto_all" "all_tekst all_tekst all_tekst" "all_cat all_datum all_datum"; */ .img_blad_all_mys{ position: absolute; top: 100px; left: 50px; width: 90%; height: var(--height_dgeoloclijst); visibility: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(90% / 3), 1fr)); /*grid-auto-rows: minmax( 160px, auto) minmax(30px,60px) 30px; 1fr 1fr 1fr; */ grid-auto-rows: auto; gap: 12px; /* replaces row-gap for consistency */ z-index: 1; overflow-y: scroll; scrollbar-gutter: auto; background-color : var(--bg-color-gebruiker); } .img_blad_all_idb{ position: absolute; top: 100px; left: 50px; width: 90%; height : var(--height_dgeoloclijst); visibility: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(90% / 3), 1fr)); /*grid-auto-rows: minmax( 160px, auto) minmax(30px,60px) 30px; 1fr 1fr 1fr; */ grid-auto-rows: auto; gap: 12px; /* replaces row-gap for consistency */ z-index: 3; /*margin: 0 auto; centers the grid horizontally */ overflow-y: scroll; scrollbar-gutter: auto; background-color : var(--bg-color-gebruiker); } .img_blad_all_idb_mobiel{ position: absolute; top: 100px; left: 50px; width: 346px; height: auto; z-index: 3; visibility: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /*grid-auto-rows: minmax( 160px, auto) minmax(30px,60px) 30px; 1fr 1fr 1fr; */ grid-auto-rows: auto; gap: 12px; /* replaces row-gap for consistency */ /* overflow: hidden; */ /*margin: 0 auto; centers the grid horizontally */ overflow-y : auto; background-color : #D7D5D5; } ._kaartje_all_mys{ height : var(--height_dgeoloclijst); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-auto-rows: minmax( 160px, auto) minmax(30px,60px) 30px; /* 1fr 1fr 1fr; */ gap: 12px; /* replaces row-gap for consistency */ margin: 0 auto; /* centers the grid horizontally */ z-index: 1; scrollbar-gutter: auto; /* margin: auto 1rem; */ /* border: solid red 1rem; */ } ._kaartje_all_idb{ display: grid; grid-template-columns: repeat(2,50%); /* auto-fit, minmax(400px, 1fr)); */ /* grid-template-rows: minmax(400px,100%), minmax(30px,60px), 30px; 1fr 1fr 1fr; */ grid-template-rows: minmax(.1rem, auto) minmax(.1rem, auto) , 30px; grid-template-areas: "kal_foto_all kal_foto_all" "all_tekst all_tekst" "all_cat all_datum"; gap: 12px; /* replaces row-gap for consistency */ margin: 0 auto; /* centers the grid horizontally */ z-index: 1; /* gevaarlijke fout iets hierna */ } .kaartje_all_idb.show{ visibility: visible; transform: translateX(0); } .kaartje_all_idb_mobiel{ display: subgrid; grid-template-columns: 160px 160px; grid-auto-rows: minmax( 160px, auto) minmax(30px,60px) 40px; /* 1fr 1fr 1fr; */ gap: 12px; /* replaces row-gap for consistency */ margin: 0 auto; /* centers the grid horizontally */ overflow: hidden; font-size: 12px; /*visibility: hidden; */ /* transform: translateX(100px); */ overflow-y : auto; min-height: 230px , auto; } .div_kal_foto{ grid-row: 1; grid-column: 1/3; /* grid-row: 1; width: 160px; height: 160px; align-self: center; border: solid red 2px; */ } ._kal_foto_all{ grid-row: 1; grid-column: 1/3; /* grid-row: 1; width: 160px; height: 160px; align-self: center; border: solid red 2px; */ } .all_tekst{ /* width: 160px; max-height: 60px; */ overflow: hidden; margin-left: 5px; grid-area: all_tekst; grid-row: 2; grid-column: 1/3; } .all_tekst:hover{ background-color: var(--bg-color-test); } .all_cat{ /* moet een span zijn */ grid-row: 3; grid-column:1; padding: 3px; } .all_datum{ /* moet een span zijn */ grid-row: 3; grid-column: 2; padding: 3px; } .all_cat_datum{ /* moet een span zijn */ grid-area: 2 / 2 / 4 / 4; margin-left: 30px; } .kal_foto_idb{ object-fit: cover; /* width: 160px; height: 160px; border: solid red 2px; */ } .img_container{ } .cijferblad_mobiel { --grid-min-col-size: 50%; --grid-gap: 1em; --grid-max-rows: 16; position: absolute; top : 750px; left: 50px; width: 340px; margin: 5px; /*var(--geopos_width); container-type: inline-size; container-name: cijferblad; */ display: grid; grid-template-columns: 30%, 30%; grid-template-rows: auto-fit; grid-gap: 1em; background-color: black; color: white; padding: 1em; z-index:0; } .cijferblad:hover, .cijferblad_mobiel:hover { z-index: 5; } .cijferblad { --grid-min-col-size: calc(100% / 15); --grid-gap: 0.5em; --grid-max-rows: 2; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(2,auto); gap : 0.5em; background-color: black; color: white; z-index:0; position :absolute; top : var(--top_cijfers); left: 5%; width:90%; height: 150px; border: 2px solid var(--bg-color-test); border-radius : 5px; padding: 0.5em; text-align: center; word-break: auto-phrase; /* break-all; */ } #d_error { position : absolute; top : var(--top_error); left: var(--left_error); height : var(--height_error); width : var(--width_error); z-index: 3; overflow : auto; } } /* end layer */ .foto_all_blad_mys{ background-color: white; } /* moet nog uitzoeken wat dit is */ /* @supports (){ anchor-name: --myanchor) and ( b_anchor : --b_anchor) { */ .wat_anchor{ /* Anchor styles here */ ._beschrijf_icon { anchor-name: --anchor-beschrijf_icon; popoverTarget: pop_beschrijf; popoverTargetAction: toggle; /* --outline-test: dotted 30px var(--bg-color-test); */ } .pop_beschrijf { position-anchor: --anchor-beschrijf_icon; position: absolute; left: anchor(left); top: anchor(bottom); } /* anchoring */ [popovertarget="menu"] { anchor-name: --menu; } [popovertarget="submenu"] { anchor-name: --submenu; } #menu { position: absolute; margin: 0; position-anchor: --menu; left: anchor(--menu left); top: anchor(--menu bottom); } #submenu { position: absolute; margin: 0; position-anchor: --submenu; left: anchor(--submenu right); top: anchor(--submenu top); margin-left: var(--padding); position-try-options: --bottom; transition: left 0.25s, top 0.25s; width: max-content; } @position-try --bottom { margin: var(--padding) 0 0 var(--padding); left: anchor(--submenu left); top: anchor(--submenu bottom); margin-left: var(--padding); } [popovertarget="submenu"] { width: 100%; display: flex; justify-content: space-between; } /* animating */ #_menu, #_submenu { padding: var(--padding); background: skyblue; gap: 1rem; border: none; } #_menu:popover-open, #_submenu:popover-open { display: grid; } #menu-btn { background: royalblue; color: white; padding: var(--padding); } #submenu { background: lightblue; } li { list-style: none; padding: 0; } a, button { font-family: system-ui; text-decoration: none; font-size: 1rem; padding: 0; color: black; text-transform: uppercase; font-weight: 700; letter-spacing: 0.2px; border: none; background: none; } .arrow { transition: rotate 0.2s; } #menu:has(:popover-open) { .arrow { rotate: -90deg; } } } /* end if support */