2.2.3
Mobile fixes
This commit is contained in:
fraxle
+115
-6
@@ -31,8 +31,13 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-left .utci-search-wrap {
|
||||
/* Wraps the location line + the reveal-on-demand search overlay so the
|
||||
search can position itself directly over the location to save space. */
|
||||
.utci-loc-search {
|
||||
position: relative;
|
||||
margin-top: 18px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Right column — now hosts the "Why it feels like this" panel,
|
||||
@@ -76,16 +81,94 @@
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* "↳ Location, Somewhere" */
|
||||
/* "↳ Location, Somewhere" + the magnifier that reveals the search */
|
||||
.utci-current-loc {
|
||||
font-family: Fraunces, serif;
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
margin-top: 8px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: #1e1208;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* The location name doubles as a search trigger — styled to read as plain
|
||||
text but with a subtle hover cue so it's discoverable. */
|
||||
.utci-loc-name {
|
||||
flex: 0 1 auto;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
border-bottom: 1px dashed transparent;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
/* Map pin sits just ahead of the location name; nudge it onto the text
|
||||
baseline and tint it brass so it reads as a location marker. */
|
||||
.utci-loc-pin {
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
color: #c8922a;
|
||||
}
|
||||
|
||||
.utci-loc-name:hover {
|
||||
color: #c8922a;
|
||||
border-bottom-color: #c8922a80;
|
||||
}
|
||||
|
||||
.utci-loc-name:focus-visible {
|
||||
outline: none;
|
||||
color: #c8922a;
|
||||
border-bottom-color: #c8922a;
|
||||
}
|
||||
|
||||
/* Small brass magnifying-glass button sitting beside the location name */
|
||||
.utci-search-toggle {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1.5px solid #c9b08a;
|
||||
border-radius: 999px;
|
||||
background: #fffcf2;
|
||||
color: #9a7a3a;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.utci-search-toggle:hover {
|
||||
color: #c8922a;
|
||||
border-color: #c8922a;
|
||||
background: #fef3dc;
|
||||
}
|
||||
|
||||
.utci-search-toggle:focus-visible {
|
||||
outline: none;
|
||||
border-color: #c8922a;
|
||||
box-shadow: 0 0 0 3px #c8922a24;
|
||||
}
|
||||
|
||||
.utci-search-toggle[aria-expanded="true"] {
|
||||
color: #fff;
|
||||
background: #c8922a;
|
||||
border-color: #c8922a;
|
||||
}
|
||||
|
||||
/* The lat/lon below the location */
|
||||
@@ -95,6 +178,7 @@
|
||||
font-size: 11px;
|
||||
color: #b09870;
|
||||
display: block;
|
||||
flex-basis: 100%; /* drop onto its own line below the name + magnifier */
|
||||
margin-top: 4px;
|
||||
margin-left: 0;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -211,6 +295,26 @@
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/* When revealed, the search floats over the location line rather than
|
||||
occupying its own vertical slot — keeps the header compact. */
|
||||
.utci-search-overlay {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.utci-search-overlay .utci-search {
|
||||
box-shadow: 0 6px 20px #64461426; /* lift it off the location underneath */
|
||||
}
|
||||
|
||||
/* The 300px wrapper would let .utci-fetch-time's default right-align drift to
|
||||
the far edge; keep it left-aligned beneath the coords as before. */
|
||||
.utci-loc-search .utci-fetch-time {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.utci-search-label {
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 10px;
|
||||
@@ -327,8 +431,13 @@
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.utci-current-loc {
|
||||
.utci-loc-search {
|
||||
width: 100%;
|
||||
margin-top: 4px; /* tighten gap above location on mobile */
|
||||
}
|
||||
|
||||
.utci-current-loc {
|
||||
justify-content: center; /* centre name + magnifier on mobile */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -336,8 +445,8 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.utci-fetch-time {
|
||||
text-align: center;
|
||||
.utci-loc-search .utci-fetch-time {
|
||||
text-align: center; /* match the desktop override's specificity */
|
||||
}
|
||||
|
||||
.utci-search-wrap {
|
||||
|
||||
@@ -1126,6 +1126,26 @@
|
||||
margin: 0;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Profile cards are full-bleed image tiles, not slim label pills — the
|
||||
block/ellipsis treatment above collapses their flex scene to 0 height
|
||||
and hides the thumbnail. Restore the column layout for them. */
|
||||
.cs-btn.profile-card {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.cs-btn.profile-card .cs-btn-label {
|
||||
width: auto; /* span the full width via its left/right pins */
|
||||
}
|
||||
.cs-btn.profile-card .cs-arrow {
|
||||
top: auto;
|
||||
bottom: 7px;
|
||||
transform: rotate(45deg); /* pinned bottom-right, not vertically centred */
|
||||
}
|
||||
.cs-wrap.open .cs-btn.profile-card .cs-arrow {
|
||||
transform: rotate(225deg); /* keep the open-state flip */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user