app/assets/stylesheets/alchemy/sitemap.scss
:root {
--sitemap-url-width: 420px;
--sitemap-url-header-offset: 0;
--sitemap-status-width-base: 90px;
--sitemap-status-length: 2;
@media screen and (min-width: $large-screen-break-point) {
--sitemap-url-width: 520px;
}
@media screen and (min-width: $xlarge-screen-break-point) {
--sitemap-url-width: 620px;
}
@media screen and (min-width: $xxlarge-screen-break-point) {
--sitemap-url-width: 820px;
}
}
#sitemap_heading {
display: flex;
padding: 0;
line-height: 28px;
.page_name {
margin-left: 43px;
}
.page_urlname {
display: none;
margin-left: auto;
padding-left: $default-padding;
width: calc(var(--sitemap-url-width) - 60px);
@media screen and (min-width: $large-screen-break-point) {
display: block;
}
}
.page_status {
display: none;
padding-left: 2 * $default-padding;
margin-right: 190px;
margin-left: auto;
@media screen and (min-width: $medium-screen-break-point) {
display: block;
}
@media screen and (min-width: $large-screen-break-point) {
margin-left: initial;
}
}
}
#sitemap-wrapper {
position: relative;
min-height: calc(100vh - 148px);
}
#sitemap {
padding: 0 0 104px 0;
.page-icon {
display: inline-flex;
}
.handle {
cursor: move;
}
.page_folder {
position: absolute;
left: -$sitemap-line-height;
top: 0;
width: $sitemap-line-height;
height: $sitemap-line-height;
}
.placeholder {
background-color: $medium-gray;
margin-bottom: 0px;
margin-left: 22px;
}
ul {
margin: 0;
padding: 0;
}
li {
padding-left: 0;
li {
padding-left: $sitemap-line-height;
padding-right: 0;
}
}
}
.sitemap_page {
display: flex;
align-items: center;
height: $sitemap-line-height;
margin: 3 * $default-margin 0;
position: relative;
transition: background-color $transition-duration;
&.highlight {
background-color: $sitemap-highlight-color;
}
&.no-match .sitemap_pagename_link {
color: $medium-gray;
}
&:hover {
background-color: $sitemap-page-hover-color;
border-radius: $default-border-radius;
}
&:has(.page_infos :nth-child(3)) {
--sitemap-status-length: 3;
}
--sitemap-status-width: calc(
var(--sitemap-status-width-base) * var(--sitemap-status-length)
);
}
.sitemap_left_images {
position: relative;
justify-content: center;
display: flex;
align-items: center;
flex-shrink: 0;
width: 32px;
height: $sitemap-line-height;
}
.sitemap_sitename {
flex-grow: 1;
@include border-left-radius($default-border-radius);
line-height: $sitemap-line-height - 4;
overflow: hidden;
background-color: $sitemap-page-background-color;
&.without-status {
@include border-right-radius($default-border-radius);
}
.sitemap_pagename_link {
display: block;
padding: 0 10px;
margin: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&.inactive {
color: #656565;
}
}
}
.sitemap_url {
display: none;
background-color: $sitemap-info-background-color;
line-height: $sitemap-line-height - 2px;
font-size: $small-font-size;
padding: 0 2 * $default-padding;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid $sitemap-page-background-color;
width: calc(var(--sitemap-url-width) - var(--sitemap-status-width));
@media screen and (min-width: $large-screen-break-point) {
display: block;
}
}
.page_infos {
@extend .right-rounded-border;
background-color: $sitemap-page-background-color;
border-left: 1px solid $light-gray;
display: none;
justify-content: end;
width: var(--sitemap-status-width);
height: $sitemap-line-height;
line-height: $sitemap-line-height;
.page_status {
margin: 0 $default-margin;
padding: 0 $default-padding;
white-space: nowrap;
}
@media screen and (min-width: $medium-screen-break-point) {
display: flex;
}
}
.sitemap_right_tools {
display: none;
align-items: center;
gap: $default-padding;
height: $sitemap-line-height;
padding: 0 2 * $default-padding;
@media screen and (min-width: $small-screen-break-point) {
display: flex;
}
.sitemap_tool {
width: $sitemap-line-height;
height: $sitemap-line-height;
line-height: $sitemap-line-height;
text-align: center;
margin: 0;
&.disabled .icon {
opacity: 0.25;
filter: grayscale(100%);
}
}
}
.page_status_and_name .page_status {
margin-left: $default-margin;
margin-bottom: -1px;
// The lock icon is a bit too high, so we need to adjust it
&:last-child {
margin-bottom: 0;
}
}
.page_status {
display: inline-flex;
justify-content: center;
align-items: center;
gap: $default-margin;
}
#page_filter_result {
display: none;
margin-left: 2 * $default-margin;
}
.alchemy-dialog {
#sitemap-wrapper {
min-height: 0;
}
#sitemap {
margin: 0;
padding: 0 24px 8px 8px;
.page_icon {
cursor: default;
}
}
}
#search_field_clear {
cursor: pointer;
}