45 lines
5.8 KiB
CSS
45 lines
5.8 KiB
CSS
.landing-white .landing-shell{grid-template-columns:minmax(0,1fr)}
|
|
.landing-white .landing-cards{grid-template-columns:repeat(3,minmax(0,1fr));width:min(1280px,92%)}
|
|
.landing-white .landing-card h3{font-size:clamp(16px,1.25vw,21px)}
|
|
.sample-library-popup{box-sizing:border-box;width:min(1240px,90vw);height:90dvh;max-width:94vw;max-height:94dvh;padding:0;border:1px solid #d6e5f1;border-radius:20px;background:#f8fbff;color:#14263d;overflow:hidden;box-shadow:0 30px 100px #14263d40}
|
|
.sample-library-popup::backdrop{background:#14263d66;backdrop-filter:blur(6px)}
|
|
.sample-library-close{position:absolute;right:22px;top:18px;z-index:10;width:38px;height:38px;border:1px solid #d6e5f1;border-radius:10px;background:white;color:#325670;font-size:24px;cursor:pointer}
|
|
.sample-library-popup .sample-explorer{height:100%;min-height:0;padding:24px;gap:18px 24px;grid-template-columns:minmax(0,1fr) minmax(300px,.48fr);grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);border:0;box-shadow:none;background:linear-gradient(140deg,#fff,#f2f8fe)}
|
|
.sample-library-popup .sample-explorer-head{grid-column:1/-1;padding-right:62px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px) auto;gap:20px;align-items:center}
|
|
.sample-library-popup .sample-map-section{grid-column:1;grid-row:2}
|
|
.sample-library-popup .sample-selection{grid-column:1;grid-row:3;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);gap:0}
|
|
.sample-library-popup .sample-list-section{grid-column:2;grid-row:2/4;min-height:0;border-top:0;border-left:1px solid #dce6f0;padding:0 0 0 24px;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
|
|
.sample-library-popup .sample-list{max-height:none;grid-auto-rows:64px;gap:8px;grid-template-columns:minmax(0,1fr)}
|
|
.sample-library-popup .sample-row{min-height:64px;padding:10px;gap:10px;grid-template-columns:28px minmax(0,1fr)}
|
|
.sample-library-popup .sample-row-number{width:28px;height:30px;font-size:11px}
|
|
.sample-library-popup .sample-row strong{font-size:14px}.sample-library-popup .sample-row small{font-size:11px;line-height:1.5}
|
|
.sample-library-popup .sample-selection .sample-preview{height:100%;min-height:0;flex:initial}
|
|
.sample-library-popup .sample-location{min-width:0;margin:0;padding:8px 10px;background:#eff6fc;border:0}.sample-library-popup .sample-location dl{margin:3px 0}.sample-library-popup .sample-coordinate-basis{display:none}
|
|
.sample-library-popup .sample-section-title h3{font-size:15px}
|
|
.sample-library-popup .sample-project-action{padding-top:14px;border-top:1px solid #dce6f0}
|
|
.sample-library-popup .sample-project-action .sample-load{min-height:46px;font-size:14px;margin-top:12px}
|
|
.sample-library-popup .sample-project-action .sample-selection-info h3{font-size:18px}
|
|
@media(max-width:900px){.sample-library-popup{width:96vw;max-width:96vw;height:94dvh}.sample-library-popup .sample-explorer{padding:18px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sample-library-popup .sample-list-section{padding-left:12px}.sample-library-popup .sample-list{grid-template-columns:minmax(0,1fr)}.landing-white .landing-cards{gap:12px;width:95%}.landing-white .landing-card{padding:12px}}
|
|
@media(max-width:600px){.sample-library-popup{overflow:auto}.sample-library-popup .sample-explorer{height:auto;display:flex;flex-direction:column}.sample-library-popup .sample-map-section{height:260px;flex-shrink:0}.sample-library-popup .sample-selection{min-height:280px}.sample-library-popup .sample-list-section{height:420px;flex-shrink:0;border-left:0;padding-left:0}.sample-library-popup .sample-list{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-white .landing-cards{grid-template-columns:1fr}}
|
|
|
|
@media(max-width:1100px){.sample-library-popup .sample-explorer-head{grid-template-columns:minmax(0,1fr) minmax(240px,300px) auto;gap:12px}.sample-library-popup .sample-explorer{grid-template-columns:minmax(0,1fr) 280px;gap:14px}.sample-library-popup .sample-list-section{padding-left:14px}.sample-library-popup .sample-explorer-head h2{font-size:18px}}
|
|
@media(max-width:700px){.sample-library-popup .sample-explorer-head{grid-template-columns:1fr auto}.sample-library-popup .sample-location{grid-column:1/-1;grid-row:2}.sample-library-popup .sample-explorer{grid-template-columns:minmax(0,1fr) 220px}}
|
|
@media(max-width:600px){.sample-library-popup .sample-selection{height:260px;min-height:260px;flex-shrink:0}}
|
|
|
|
/* Location details sit beside the library title, directly above the left map. */
|
|
@media(min-width:701px){
|
|
.sample-library-popup .sample-explorer-head{position:relative;display:flex;min-height:112px;align-items:flex-start;padding-top:12px}
|
|
.sample-library-popup .sample-explorer-head>div:first-child{max-width:310px}
|
|
.sample-library-popup .sample-explorer-head>b{margin-left:auto}
|
|
.sample-library-popup .sample-explorer-head .sample-location{position:absolute;left:29%;right:calc(32.5% + 24px);bottom:0;width:auto;padding:6px 9px}
|
|
}
|
|
|
|
/* Compact location overlay stays inside the map without consuming a grid row. */
|
|
.sample-library-popup .sample-explorer-head{min-height:0;align-items:center;padding-top:0}
|
|
.sample-library-popup .sample-map .sample-location{position:absolute;top:10px;left:10px;right:auto;bottom:auto;z-index:5;width:min(340px,calc(100% - 60px));padding:8px 10px;margin:0;border:1px solid #d6e5f1;border-radius:8px;background:#ffffffed;box-shadow:0 3px 12px #14263d14;pointer-events:none;grid-column:auto;grid-row:auto}
|
|
.sample-library-popup .sample-map .sample-location-heading{margin:0}
|
|
.sample-library-popup .sample-map .sample-location p{margin:3px 0}
|
|
|
|
.sample-library-popup .sample-map .sample-location{width:max-content;max-width:calc(100% - 60px);padding:7px 10px;background:rgba(248,252,255,.88);border:1px solid rgba(187,209,226,.7);border-radius:8px;box-shadow:0 2px 9px #234a6814;backdrop-filter:blur(6px);text-shadow:none}
|
|
.sample-library-popup .sample-map .sample-location dl{grid-template-columns:max-content minmax(0,1fr);column-gap:8px}
|