app/assets/stylesheets/pages_core/admin/components/page_tree.css
.page-tree {
user-select: none;
position: relative;
overflow: hidden;
margin: 20px 0 40px 0;
margin-left: -20px;
margin-right: -10px;
& .draggable {
user-select: none;
position: absolute;
opacity: 0.8;
}
& .node {
&.placeholder > * {
visibility: hidden;
}
&.placeholder {
border: 1px dashed var(--border-color);
}
& .inner {
position: relative;
cursor: pointer;
padding-left: 10px;
}
& .collapse {
position: absolute;
left: 0;
cursor: pointer;
font-size: 15px;
padding-top: 5px;
}
}
& .page {
font-size: 15px;
padding: 6px 10px;
border: 1px solid transparent;
&:after {
content: "";
display: table;
clear: both;
}
&:hover {
border: 1px solid var(--border-color-light);
background: linear-gradient(
to bottom,
var(--background-color) 0%,
var(--background-disabled-color) 100%
);
}
& .date {
font-size: 12px;
margin-left: 10px;
color: var(--text-light-color);
}
& .name {
font-weight: bold;
}
& .icon {
margin-right: 8px;
}
& .status-label,
& .collapsed-label {
margin-left: 3px;
font-size: 12px;
}
& form {
display: inline;
margin: 0;
padding: 0;
& input {
font-size: 15px;
padding: 2px 4px;
margin-top: -2px;
margin-bottom: -2px;
margin-right: 5px;
}
& button {
margin-left: 5px;
}
}
& a,
& a:visited {
color: var(--text-color);
text-decoration: none;
}
& a:hover,
& a:focus {
text-decoration: underline;
}
&.status-0,
&.status-1,
&.status-3 {
&,
& a,
& a:visited {
color: var(--text-light-color);
}
}
}
& .page .actions {
float: right;
visibility: hidden;
margin: -4px -6px -4px 5px;
& button {
margin-left: 5px;
}
}
& .page:hover .actions {
visibility: visible;
}
& button {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
font-size: 13px;
padding: 3px 5px;
border-radius: 3px;
color: var(--link-hover-color);
& .icon {
margin-right: 8px;
}
&:hover,
&:focus {
color: var(--blue-hover);
background: var(--blue-transparent);
}
&.add {
color: var(--green);
&:hover,
&:focus {
color: var(--green-hover);
background: var(--green-transparent);
}
}
&.delete,
&.cancel {
color: var(--red);
&:hover,
&:focus {
color: var(--red-hover);
background: var(--red-transparent);
}
}
}
& button.add-inline {
margin: 5px 0 5px 30px;
}
& .node .node .node .page .name {
font-weight: normal;
}
}