Nasim SadatandClaude Opus 5.5
1b8e57adb4
Baseline before the clean-up (PD-13): the PD-11 reader setup and the PD-12 app dashboards as they ran on the local stack, uncommitted until now. Not deployed, not independently reviewed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
155 lines
7.1 KiB
CSS
155 lines
7.1 KiB
CSS
/* Readers only (petrolyst_reader.py, templates/head_custom_extra.html). Hides what Superset 6.1
|
|
shows whatever the permissions. Cosmetic: what protects is the role and the reader rules. */
|
|
|
|
/* The dashboard's title row: name, favourite, refresh, owner, last change, "…". */
|
|
[data-test="dashboard-header-container"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ATOMA's Fleet tab: no filter column and its resize handle (no filter applies there); the
|
|
column is empty then, so the map takes the full width. Site details keeps it. Also hidden
|
|
until the dashboard's grid is there, so it does not flash up while the Fleet tab loads.
|
|
dashboards/atoma/build_bundle.py checks that this names the Fleet tab. */
|
|
body:has(.ant-tabs-tab-active[data-node-key="TAB-fleet"]) [data-test="dashboard-filters-panel"],
|
|
body:has(.ant-tabs-tab-active[data-node-key="TAB-fleet"]) div:has(+ [data-test="dashboard-filters-panel"]),
|
|
body:not(:has([data-test="grid-container"])) [data-test="dashboard-filters-panel"],
|
|
body:not(:has([data-test="grid-container"])) div:has(+ [data-test="dashboard-filters-panel"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Superset sizes blocks in pixels and measures again only about 0.3 s after loading, so the
|
|
map would start beside a column that is not there and then widen. Its block spans all 12
|
|
columns (build_bundle.py checks it), so the full width is always right. Its column grows to
|
|
the row's width; the blocks inside it follow.
|
|
Height: down to the window's bottom edge instead of the layout's 800 px. Above the block are
|
|
123 px (navbar, margin, tab row) and below it 16, so the map ends 32 px above the edge, as it
|
|
does from the sides. At least 592 px: the map's own minimum height, 560, and the padding. */
|
|
.grid-row > .dragdroppable-column:has(#MARKDOWN-fleet-map) {
|
|
flex-grow: 1;
|
|
}
|
|
#MARKDOWN-fleet-map > .resizable-container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: max(592px, 100vh - 139px) !important;
|
|
}
|
|
|
|
/* Navbar: "+" (new) and the theme switcher. */
|
|
li.ant-menu-submenu:has(> .ant-menu-submenu-title[data-menu-id$="-new-dropdown"]),
|
|
li.ant-menu-submenu:has(> .ant-menu-submenu-title[data-menu-id$="-theme-sub-menu"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Settings: Info and the About group (Superset's name and version); User → Logout remains. */
|
|
li.ant-menu-item[data-menu-id$="-info"],
|
|
li.ant-menu-item-group:has([data-menu-id$="-about-info"]),
|
|
li.ant-menu-item-divider:has(+ li.ant-menu-item-group [data-menu-id$="-about-info"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ATOMA's top-level tabs as a lens switch in the navbar, centred: Map and Insights (owner,
|
|
29 Oct). Pinned to the window, a scroll-linked animation moves it up as fast as the navbar
|
|
scrolls away. Without that support, or narrower than 900 px, the tab row stays in the page.
|
|
With the switch, the map's block grows by the tab row's 46 px: 93 px are left above and
|
|
below it. */
|
|
@supports (animation-timeline: scroll()) {
|
|
@media (min-width: 900px) {
|
|
#TABS-main > .ant-tabs-nav {
|
|
position: fixed;
|
|
top: 9px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
margin: 0;
|
|
padding: 4px;
|
|
border-radius: 12px;
|
|
background: rgba(11, 29, 51, 0.06);
|
|
animation: petrolyst-lens-scroll linear both;
|
|
animation-timeline: scroll(root block);
|
|
animation-range: 0 61px;
|
|
}
|
|
#TABS-main > .ant-tabs-nav::before,
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-ink-bar,
|
|
#TABS-main > .ant-tabs-nav .anchor-link-container {
|
|
display: none;
|
|
}
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-nav-list {
|
|
gap: 4px;
|
|
}
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-tab {
|
|
margin: 0 !important;
|
|
padding: 7px 18px 7px 14px !important;
|
|
border-radius: 9px !important;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #3b4a5c;
|
|
}
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-tab-active {
|
|
background: #0b1d33 !important;
|
|
}
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {
|
|
color: #fff !important;
|
|
}
|
|
#TABS-main > .ant-tabs-nav [data-test="span-title"]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 8px;
|
|
vertical-align: -3px;
|
|
background: currentColor;
|
|
-webkit-mask: var(--lens-icon) center / contain no-repeat;
|
|
mask: var(--lens-icon) center / contain no-repeat;
|
|
}
|
|
#TABS-main .ant-tabs-tab[data-node-key="TAB-fleet"] {
|
|
--lens-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204%203%206v14l6-2%206%202%206-2V4l-6%202-6-2z'/%3E%3Cpath%20d='M9%204v14M15%206v14'/%3E%3C/svg%3E");
|
|
}
|
|
#TABS-main .ant-tabs-tab[data-node-key="TAB-site"] {
|
|
--lens-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'/%3E%3C/svg%3E");
|
|
}
|
|
#MARKDOWN-fleet-map > .resizable-container {
|
|
height: max(592px, 100vh - 93px) !important;
|
|
}
|
|
/* A third lens, AI, as a teaser: greyed, tagged PRO, not a tab and not clickable (owner,
|
|
29 Oct; no AI lens is built until Botswerk exists). Drawn by the tab list itself, so the
|
|
dashboard's layout stays Map and Insights. From 1100 px only: narrower, the wider switch
|
|
would cover the logo. */
|
|
@media (min-width: 1100px) {
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-nav-list::before {
|
|
content: "AI" / "AI, available with Petrolyst Pro";
|
|
order: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 7px 58px 7px 40px;
|
|
border-radius: 9px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 22px;
|
|
color: #8a96a3;
|
|
cursor: not-allowed;
|
|
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a96a3'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z'/%3E%3Cpath%20d='M20%203v4M22%205h-4'/%3E%3C/svg%3E") 14px center / 18px 18px no-repeat;
|
|
}
|
|
#TABS-main > .ant-tabs-nav .ant-tabs-nav-list::after {
|
|
content: "PRO" / "";
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
padding: 3px 7px;
|
|
border-radius: 999px;
|
|
background: #0f7b6c;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes petrolyst-lens-scroll {
|
|
to {
|
|
transform: translate(-50%, -61px);
|
|
}
|
|
}
|