mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
1772 lines
36 KiB
CSS
1772 lines
36 KiB
CSS
/*Dialog*/
|
|
#blackout {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 21;
|
|
background-color: transparent;
|
|
opacity: 0;
|
|
}
|
|
#blackout.darken {
|
|
background-color: var(--color-dark);
|
|
opacity: 0.6;
|
|
}
|
|
.dialog_handle {
|
|
position: relative;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
padding-left: 8px;
|
|
background: var(--color-button);
|
|
height: 30px;
|
|
flex: 0 0 auto;
|
|
}
|
|
.dialog_handle .dialog_title {
|
|
padding-top: 2px;
|
|
font-size: 1.12em;
|
|
padding-left: 16px;
|
|
pointer-events: none;
|
|
}
|
|
.dialog_close_button {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
height: 30px;
|
|
width: 30px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.dialog_close_button:hover {
|
|
color: var(--color-accent_text);
|
|
background-color: var(--color-close);
|
|
}
|
|
.dialog_sidebar_menu_button {
|
|
height: 100%;
|
|
width: 34px;
|
|
padding: 4px;
|
|
float: left;
|
|
text-align: center;
|
|
}
|
|
.dialog_sidebar_menu_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.dialog_menu_button {
|
|
height: 100%;
|
|
width: 30px;
|
|
padding: 4px 0;
|
|
float: left;
|
|
text-align: center;
|
|
margin-left: 2px;
|
|
}
|
|
.dialog_menu_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.dialog:not(.draggable) .dialog_close_button {
|
|
top: 8px;
|
|
right: -34px;
|
|
}
|
|
|
|
dialog {
|
|
width: 540px;
|
|
min-width: min(370px, 100%);
|
|
max-height: calc(100% - 40px);
|
|
height: auto;
|
|
flex-direction: column;
|
|
background-color: var(--color-ui);
|
|
color: inherit;
|
|
border: none;
|
|
box-shadow: 0 0px 8px rgba(0, 0, 0, 0.64);
|
|
left: unset;
|
|
right: unset;
|
|
bottom: unset;
|
|
display: none;
|
|
}
|
|
.shapeless_dialog {
|
|
position: fixed;
|
|
z-index: 21;
|
|
}
|
|
dialog > content, dialog .dialog_wrapper > content {
|
|
display: block;
|
|
overflow-y: auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
dialog p > code {
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
user-select: text;
|
|
font-family: var(--font-code);
|
|
}
|
|
|
|
.dialog {
|
|
position: fixed;
|
|
z-index: 21;
|
|
top: 30px;
|
|
}
|
|
.dialog:not(.draggable) {
|
|
left: 0;
|
|
right: 0;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
.dialog:not(.ui-resizable) {
|
|
min-width: min(400px, 100%);
|
|
max-width: min(960px, 100%);
|
|
}
|
|
.dialog_bar {
|
|
position: relative;
|
|
min-height: 30px;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
height: auto;
|
|
clear: both;
|
|
}
|
|
.dialog_bar.form_bar {
|
|
display: flex;
|
|
}
|
|
label.name_space_left {
|
|
float: left;
|
|
min-width: 140px;
|
|
padding-top: 4px;
|
|
padding-left: 1px;
|
|
padding-right: 8px;
|
|
flex-shrink: 0;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.dialog_bar.form_bar.full_width_dialog_bar {
|
|
flex-wrap: wrap;
|
|
}
|
|
.dialog_bar.form_bar.full_width_dialog_bar > label {
|
|
width: 100% !important;
|
|
}
|
|
.dialog_bar.form_bar .half {
|
|
flex-grow: 1;
|
|
}
|
|
.dialog_bar > label {
|
|
width: var(--max_label_width);
|
|
}
|
|
.dialog_bar::after {
|
|
content: "";
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
.dialog_bar.narrow {
|
|
min-height: 30px;
|
|
}
|
|
.dialog_bar.button_bar {
|
|
text-align: right;
|
|
flex: 0 0 auto;
|
|
}
|
|
.dialog_bar > button.large {
|
|
margin-bottom: 0;
|
|
margin-top: 16px;
|
|
margin: 16px 4px 0 4px;
|
|
}
|
|
.dialog_bar > button.confirm_btn:not(:hover) {
|
|
background-color: var(--color-selected);
|
|
}
|
|
.dialog_bar input[type=checkbox] {
|
|
padding: 0 4px;
|
|
}
|
|
.dialog_bar .tool {
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
.dialog_bar.form_bar .tool > .tooltip {
|
|
display: none !important;
|
|
}
|
|
.dialog_bar.small_text li {
|
|
list-style: auto;
|
|
margin-left: 20px;
|
|
padding-left: 4px;
|
|
}
|
|
.dialog_vector_group {
|
|
display: flex;
|
|
}
|
|
.dialog_vector_group > input {
|
|
min-width: 30px;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.dialog_vector_group > input:not(:last-child) {
|
|
margin-right: 3px;
|
|
}
|
|
.dialog_bar > .range_input_label {
|
|
overflow: hidden;
|
|
width: 58px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
padding-top: 4px;
|
|
margin-left: 5px;
|
|
}
|
|
.tab_bar {
|
|
height: 30px;
|
|
display: flex;
|
|
}
|
|
.tab_bar > * {
|
|
height: 100%;
|
|
padding-top: 2px;
|
|
flex-grow: 1;
|
|
cursor: default;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
.tab_bar > .open {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
.tab_bar > *:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
.dialog p {
|
|
margin: 4px 0;
|
|
}
|
|
.dialog h3 {
|
|
margin-left: 16px;
|
|
}
|
|
.dialog_bar label.in_toolbar {
|
|
padding-left: 0;
|
|
}
|
|
.dialog p.multiline_text {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
font-size: 0.86em;
|
|
user-select: text;
|
|
}
|
|
|
|
.dialog_message_box_command {
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
background-color: var(--color-back);
|
|
margin-top: 6px;
|
|
}
|
|
.dialog_message_box_command:hover {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
}
|
|
.dialog_message_box_command::after {
|
|
float: right;
|
|
content: "\f105";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
margin-right: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
dialog .form_bar_file .input_wrapper {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
}
|
|
dialog .form_bar_file .input_wrapper input {
|
|
width: 100%;
|
|
padding-right: 30px;
|
|
}
|
|
dialog .form_bar_file .input_wrapper > .material-icons {
|
|
position: absolute;
|
|
margin-left: -28px;
|
|
margin-top: 4px;
|
|
opacity: 0.75;
|
|
right: 4px;
|
|
}
|
|
dialog .form_bar_file:hover .input_wrapper > .material-icons {
|
|
opacity: 1;
|
|
}
|
|
dialog .form_bar_radio {
|
|
display: flex;
|
|
}
|
|
dialog .form_bar_radio:hover {
|
|
color: var(--color-light);
|
|
}
|
|
dialog .form_bar_radio label {
|
|
flex-grow: 1;
|
|
padding: 3px 5px;
|
|
}
|
|
dialog .dialog_form_description {
|
|
margin-left: auto;
|
|
padding-top: 8px;
|
|
font-size: 13px;
|
|
height: 28px;
|
|
color: var(--color-subtle_text);
|
|
display: block;
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|
|
dialog .dialog_form_description:hover {
|
|
color: var(--color-light);
|
|
transition: color 750ms linear;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.dialog_wrapper {
|
|
flex-grow: 1;
|
|
display: block;
|
|
}
|
|
.dialog_wrapper.has_sidebar {
|
|
display: grid;
|
|
grid-template-rows: auto 42px;
|
|
grid-template-columns: minmax(160px, 200px) auto;
|
|
grid-template-areas: "sidebar content" "sidebar buttons";
|
|
transition: grid-template-columns 100ms ease;
|
|
}
|
|
.dialog_wrapper:not(.has_sidebar) .dialog_sidebar {
|
|
display: none;
|
|
}
|
|
.dialog_sidebar {
|
|
background-color: var(--color-back);
|
|
flex: 1 0 160px;
|
|
position: relative;
|
|
grid-area: sidebar;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.dialog_content {
|
|
display: block;
|
|
grid-area: content;
|
|
max-height: calc(100vh - 180px);
|
|
}
|
|
dialog .dialog_content,
|
|
dialog .dialog_bar.button_bar {
|
|
margin: 16px 24px;
|
|
}
|
|
@media (max-device-width: 640px) {
|
|
dialog {
|
|
width: 100% !important;
|
|
}
|
|
dialog .dialog_content, dialog .dialog_bar.button_bar {
|
|
margin: 12px;
|
|
}
|
|
.dialog_content {
|
|
max-height: calc(100vh - 136px);
|
|
}
|
|
}
|
|
dialog .dialog_bar.button_bar {
|
|
grid-area: buttons;
|
|
margin-top: 0px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.dialog_sidebar .dialog_sidebar_pages {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_pages li {
|
|
width: 100%;
|
|
padding: 4px 20px;
|
|
border-left: 4px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_pages li .icon {
|
|
float: left;
|
|
margin-left: -10px;
|
|
margin-right: 5px;
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_pages li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_pages li.selected {
|
|
background-color: var(--color-ui);
|
|
border-left: 4px solid var(--color-accent);
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_pages li.error::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
background-color: var(--color-close);
|
|
border-radius: 10px;
|
|
width: 10px;
|
|
height: 10px;
|
|
right: 6px;
|
|
margin-top: -17px;
|
|
}
|
|
|
|
.dialog_sidebar .dialog_sidebar_actions {
|
|
bottom: 10px;
|
|
padding: 8px;
|
|
margin-top: auto;
|
|
border-top: 2px solid var(--color-border);
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_actions li {
|
|
display: flex;
|
|
height: 30px;
|
|
padding: 4px;
|
|
padding-left: 34px;
|
|
padding-right: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_actions li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_actions li i {
|
|
margin-top: 1px;
|
|
margin-right: 8px;
|
|
margin-left: -28px;
|
|
flex-shrink: 0;
|
|
pointer-events: none;
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_actions li img {
|
|
cursor: default;
|
|
height: 20px;
|
|
width: 20px;
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
margin-bottom: -3px;
|
|
margin-left: -27px;
|
|
margin-right: 5px;
|
|
margin-top: 1px;
|
|
}
|
|
.dialog_sidebar .dialog_sidebar_actions li span {
|
|
pointer-events: none;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
|
|
/*Settings Dialog*/
|
|
dialog#settings .dialog_wrapper {
|
|
min-height: 640px;
|
|
}
|
|
dialog#settings .dialog_content {
|
|
margin-top: 10px;
|
|
}
|
|
#settings_tab_bar {
|
|
margin: -24px;
|
|
margin-bottom: 0;
|
|
margin-top: -20px;
|
|
}
|
|
dialog#settings h2, dialog#keybindings h2, dialog#theme h2 {
|
|
margin-top: -15px;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
#settings_profile_wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: right;
|
|
margin-bottom: 8px;
|
|
}
|
|
#settings_profile_wrapper > bb-select {
|
|
min-width: 126px;
|
|
margin-left: 6px;
|
|
}
|
|
#settings_profile_wrapper > bb-select.profile_is_selected {
|
|
background-color: var(--color-profile);
|
|
color: #000;
|
|
}
|
|
|
|
|
|
/*Settings*/
|
|
#settingslist {
|
|
width: 100%;
|
|
max-height: 600px;
|
|
overflow-y: scroll;
|
|
clear: both;
|
|
}
|
|
#settingslist li {
|
|
padding: 2px 1px;
|
|
margin: 4px 0;
|
|
}
|
|
#settingslist li.has_profile_override {
|
|
border: 1px solid var(--color-profile);
|
|
padding: 1px 0;
|
|
position: relative;
|
|
}
|
|
#settingslist .setting_profile_clear_button {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 0;
|
|
}
|
|
#settingslist li:hover input[type=checkbox] {
|
|
color: var(--color-light);
|
|
}
|
|
#settingslist .setting_element {
|
|
width: 50px;
|
|
text-align: center;
|
|
float: left;
|
|
margin-top: 12px;
|
|
}
|
|
#settingslist input[type=checkbox] {
|
|
margin-top: -6px;
|
|
}
|
|
#settingslist input[type=checkbox]::before {
|
|
font-size: 18pt;
|
|
}
|
|
#settingslist li > .setting_icon {
|
|
margin-top: 8px;
|
|
}
|
|
#settingslist li > .setting_label {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
width: calc(100% - 60px);
|
|
}
|
|
#settingslist .setting_name {
|
|
font-size: 1.1em;
|
|
display: inline-block;
|
|
}
|
|
#settingslist .setting_description {
|
|
font-size: 0.94em;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.setting_profile_value_indicator {
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 13px;
|
|
border: 3px solid var(--color-profile);
|
|
opacity: 0.8;
|
|
border-radius: 50%;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.setting_profile_value_indicator.active {
|
|
background-color: var(--color-profile);
|
|
}
|
|
.setting_profile_value_indicator:hover {
|
|
opacity: 1;
|
|
}
|
|
#settingslist input[type=number] {
|
|
height: 28px;
|
|
width: 100%;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
padding-left: 4px;
|
|
text-align: right;
|
|
}
|
|
#settingslist input[type=text], #settingslist input[type=password] {
|
|
padding: 10px;
|
|
margin-left: 5px;
|
|
vertical-align: bottom;
|
|
}
|
|
#settingslist div.bar_select {
|
|
margin: 8px;
|
|
width: 96%;
|
|
}
|
|
#settingslist div.bar_select select {
|
|
width: 100%;
|
|
}
|
|
#settingslist li .setting_icon i {
|
|
font-size: 26pt;
|
|
width: 34px;
|
|
margin-top: -6px;
|
|
}
|
|
#settingslist li:hover .setting_icon i {
|
|
color: var(--color-light);
|
|
}
|
|
.password_toggle {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
margin-top: 4px;
|
|
width: 24px;
|
|
text-align: center;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/*Keybinds*/
|
|
dialog#keybindings .dialog_wrapper {
|
|
min-height: 640px;
|
|
}
|
|
#keybindlist {
|
|
max-height: 600px;
|
|
margin-top: 16px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
clear: both;
|
|
}
|
|
#keybindlist .tool {
|
|
height: 30px;
|
|
width: 25px;
|
|
float: right;
|
|
}
|
|
#keybindlist li > div.keybindslot {
|
|
width: calc(48% - 32px);
|
|
padding: 4px;
|
|
padding-left: 8px;
|
|
height: 30px;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
font-size: 0.94em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
cursor: text;
|
|
}
|
|
#keybindlist li > div.keybindslot:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#keybindlist li > div.keybindslot.conflict {
|
|
border-left: 4px solid var(--color-close);
|
|
}
|
|
#keybindlist li > div:first-child {
|
|
background: transparent;
|
|
width: calc(52% - 28px);
|
|
text-align: right;
|
|
padding: 4px;
|
|
padding-left: 8px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
}
|
|
#keybindlist > li {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.keybindslot .punctuation {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.keybindslot .modifier, .keybindslot .key {
|
|
background: var(--color-button);
|
|
padding: 2px 5px;
|
|
}
|
|
.keybindslot .optional {
|
|
color: var(--color-subtle_text);
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
/*Colors*/
|
|
dialog#theme .dialog_wrapper {
|
|
min-height: 480px;
|
|
}
|
|
div#color_wrapper {
|
|
columns: 2;
|
|
margin-bottom: 20px;
|
|
}
|
|
.color_field {
|
|
min-height: 50px;
|
|
width: 100%;
|
|
margin: 2px 0;
|
|
}
|
|
.color_field .desc {
|
|
width: calc(100% - 60px);
|
|
display: inline-block;
|
|
}
|
|
.color_field p {
|
|
margin: 0;
|
|
font-size: 0.94em;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.color_field h4 {
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
.layout_color_preview {
|
|
height: 45px;
|
|
width: 45px;
|
|
margin: 4px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.prism-editor-wrapper .prism-editor__line-numbers {
|
|
background-color: var(--color-back) !important;
|
|
height: 56px;
|
|
}
|
|
.prism-editor-wrapper code[class*="language-"] {
|
|
color: var(--color-text);
|
|
}
|
|
#css_editor {
|
|
height: calc(100vh - 228px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#css_editor > .prism-editor-component {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#theme_list {
|
|
overflow-y: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
grid-gap: 10px;
|
|
}
|
|
#theme_list .theme {
|
|
float: left;
|
|
padding: 6px;
|
|
border: 2px solid transparent;
|
|
background-color: var(--color-ui);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
#theme_list .theme:hover {
|
|
border-color: var(--color-border);
|
|
color: var(--color-light);
|
|
background-color: var(--color-back);
|
|
}
|
|
#theme_list .theme.selected {
|
|
border-color: var(--color-accent);
|
|
}
|
|
#theme_list .theme * {
|
|
cursor: inherit;
|
|
}
|
|
.theme_name, .theme_author {
|
|
float: left;
|
|
margin-top: 4px;
|
|
margin-bottom: -4px;
|
|
}
|
|
.theme_author {
|
|
float: right;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
|
|
#theme_list .theme_preview {
|
|
position: relative;
|
|
height: 108px;
|
|
width: 100%;
|
|
background-color: var(--color-frame);
|
|
border: 2px solid var(--color-frame);
|
|
border-top: none;
|
|
}
|
|
.theme_preview_header {
|
|
height: 20px;
|
|
width: 100%;
|
|
background-color: var(--color-frame);
|
|
}
|
|
.theme_preview_window {
|
|
width: 100%;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--color-dark);
|
|
}
|
|
.theme_preview_sidebar {
|
|
flex: 0 0 40px;
|
|
background-color: var(--color-ui);
|
|
position: relative;
|
|
}
|
|
.theme_preview_sidebar::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 24px;
|
|
background-color: var(--color-back);
|
|
}
|
|
.theme_preview_center {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 5px solid var(--color-grid);
|
|
transform: rotate3d(1, 0, 0, 69deg) rotate(45deg);
|
|
margin-top: 34px;
|
|
border-radius: 4px;
|
|
}
|
|
.theme_preview_text {
|
|
height: 4px;
|
|
width: 40px;
|
|
border-radius: 2px;
|
|
margin: 8px 4px;
|
|
background-color: var(--color-text);
|
|
display: inline-block;
|
|
opacity: 0.6;
|
|
}
|
|
.theme_preview_menu {
|
|
background-color: var(--color-bright_ui);
|
|
position: absolute;
|
|
left: 31px;
|
|
z-index: 1;
|
|
}
|
|
.theme_preview_menu_header {
|
|
height: 20px;
|
|
background-color: var(--color-accent);
|
|
display: inline-block;
|
|
}
|
|
.theme_preview_menu_header > .theme_preview_text {
|
|
background-color: var(--color-accent_text);
|
|
}
|
|
.theme_preview_menu > .theme_preview_text {
|
|
background-color: var(--color-bright_ui_text);
|
|
display: block;
|
|
margin: 10px 7px;
|
|
}
|
|
.theme_preview.borders .theme_preview_window {
|
|
border-top: 2px solid var(--color-border);
|
|
}
|
|
.theme_preview.borders .theme_preview_menu {
|
|
border: 2px solid var(--color-border);
|
|
}
|
|
.theme_preview.borders .theme_preview_sidebar:first-child {
|
|
border-right: 2px solid var(--color-border);
|
|
}
|
|
.theme_preview.borders .theme_preview_sidebar:last-child {
|
|
border-left: 2px solid var(--color-border);
|
|
}
|
|
.theme_backup_bar {
|
|
padding: 2px 6px;
|
|
border: 2px solid var(--color-accent);
|
|
margin-bottom: 7px;
|
|
cursor: pointer;
|
|
}
|
|
.theme_backup_bar:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.theme_backup_bar > i {
|
|
padding: 1px;
|
|
color: var(--color-text);
|
|
float: right;
|
|
}
|
|
.theme_backup_bar > i:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
/*About*/
|
|
dialog#about .dialog_content {
|
|
text-align: center;
|
|
}
|
|
dialog#about h4 {
|
|
color: var(--color-subtle_text);
|
|
margin-top: 30px;
|
|
border-top: 2px
|
|
solid var(--color-border);
|
|
padding-top: 12px;
|
|
}
|
|
#about_page_title {
|
|
vertical-align: top;
|
|
opacity: 0.9;
|
|
}
|
|
#about_page_title img {
|
|
width: min(340px, 100%);
|
|
}
|
|
dialog#about div.socials {
|
|
display: flex;
|
|
padding: 20px 0;
|
|
max-width: 540px;
|
|
margin: auto;
|
|
}
|
|
dialog#about div.socials a {
|
|
text-align: center;
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
text-decoration: none;
|
|
padding: 6px;
|
|
padding-top: 10px;
|
|
}
|
|
dialog#about div.socials a:hover {
|
|
background-color: var(--color-accent);
|
|
}
|
|
dialog#about div.socials a i {
|
|
display: block;
|
|
font-size: 2em;
|
|
max-width: none;
|
|
pointer-events: none;
|
|
}
|
|
dialog#about div.socials a:hover i {
|
|
color: var(--color-light) !important;
|
|
}
|
|
dialog#about div.socials a label {
|
|
color: var(--color-subtle_text);
|
|
cursor: inherit;
|
|
pointer-events: none;
|
|
}
|
|
dialog#about div.socials a:hover label {
|
|
color: var(--color-light);
|
|
}
|
|
dialog#about .multi_column_list {
|
|
column-count: 3;
|
|
}
|
|
.special_thanks_mentions li {
|
|
line-height: 18px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/*Specific Dialogs*/
|
|
dialog#model_stats .form_bar {
|
|
margin: 0;
|
|
}
|
|
.dialog#texture_edit p.multiline_text {
|
|
width: 344px;
|
|
min-height: 51px;
|
|
}
|
|
p.multiline_text span {
|
|
user-select: inherit;
|
|
}
|
|
#texture_menu_thumbnail {
|
|
float: right;
|
|
margin-top: 3px;
|
|
margin-right: 12px;
|
|
height: 128px;
|
|
background-color: var(--color-back);
|
|
overflow-y: auto;
|
|
}
|
|
#texture_menu_thumbnail img {
|
|
width: 128px;
|
|
margin-bottom: -7px;
|
|
}
|
|
#import_texture_list li {
|
|
min-height: 112px;
|
|
width: 150px;
|
|
margin: 6px 3px;
|
|
position: relative;
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: 112px;
|
|
background-position-x: center;
|
|
box-sizing: content-box;
|
|
border: 2px solid transparent;
|
|
vertical-align: top;
|
|
}
|
|
#import_texture_list li:hover {
|
|
background-color: var(--color-selected);;
|
|
}
|
|
#import_texture_list li.selected {
|
|
border-color: var(--color-accent);
|
|
}
|
|
#import_texture_list li.selected::after {
|
|
position: absolute;
|
|
content: "\f00c";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
background-color: var(--color-ui);
|
|
height: 19px;
|
|
right: 0;
|
|
top: 0;
|
|
margin-right: -7px;
|
|
margin-top: -12px;
|
|
border-bottom-left-radius: 8px;
|
|
padding-left: 2px;
|
|
}
|
|
#import_texture_list li label {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 112px;
|
|
color: var(--color-subtle_text);
|
|
overflow-wrap: anywhere;
|
|
text-align: center;
|
|
}
|
|
#import_texture_list li:hover label {
|
|
color: var(--color-text);
|
|
}
|
|
body.entity_mode button.entity_mode_uv_button {
|
|
display: block;
|
|
padding: 0;
|
|
height: 32px;
|
|
width: 73px;
|
|
border: none;
|
|
}
|
|
dialog div.dialog_form_buttons a {
|
|
display: inline-block;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
margin-right: 8px;
|
|
}
|
|
dialog div.dialog_form_buttons a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
/*Scale*/
|
|
dialog#scale .form_bar_overflow_info {
|
|
color: #ff5767;
|
|
}
|
|
dialog#scale .toggle_panel {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*Extrusion*/
|
|
#image_extruder label {
|
|
float: left;
|
|
margin-right: 8px;
|
|
padding-top: 5px;
|
|
}
|
|
#scan_tolerance {
|
|
width: 200px;
|
|
}
|
|
#scan_tolerance_label {
|
|
margin-left: 8px;
|
|
}
|
|
#extrusion_canvas {
|
|
margin-left: 12px;
|
|
border-bottom: 1px solid var(--color-grid);
|
|
border-right: 1px solid var(--color-grid);
|
|
}
|
|
button.large:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/*Import entity texture*/
|
|
dialog#select_texture > ul {
|
|
max-height: 420px;
|
|
}
|
|
|
|
/*Selection Creator*/
|
|
input[type=range].dark_bordered {
|
|
height: 30px;
|
|
padding-top: 3px;
|
|
padding-left: 0;
|
|
}
|
|
select.dark_bordered {
|
|
color: var(--color-text);
|
|
padding: 6px;
|
|
padding-top: 2px;
|
|
height: 30px;
|
|
}
|
|
|
|
/*PE Import Dialog*/
|
|
dialog#bedrock_model_select .search_bar {
|
|
margin-bottom: 6px;
|
|
}
|
|
#model_select_list li {
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
padding: 2px 0;
|
|
}
|
|
#model_select_list li.selected {
|
|
background-color: var(--color-selected);
|
|
color: var(--color-light);
|
|
}
|
|
#model_select_list li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#model_select_list li > * {
|
|
margin: 0;
|
|
margin-left: 12px;
|
|
cursor: inherit;
|
|
}
|
|
#model_select_list > li > label {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
#model_select_list > li.selected > label {
|
|
color: var(--color-text);
|
|
}
|
|
/* Screenshot */
|
|
dialog#screenshot content {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
dialog#screenshot content img {
|
|
border: 1px solid var(--color-accent);
|
|
max-width: 100%;
|
|
max-height: 60vh;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
/*Bedrock Bindings*/
|
|
dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
|
|
overflow: visible;
|
|
}
|
|
|
|
/*Keybind Recording*/
|
|
#overlay_message_box {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: 130;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
#overlay_message_box > div {
|
|
margin-top: 64px;
|
|
width: 400px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#overlay_message_box > div > p {
|
|
margin-bottom: 20px;
|
|
}
|
|
#overlay_message_box h3 i {
|
|
vertical-align: sub;
|
|
margin: 8px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/*Plugin Menu*/
|
|
.bar.next_to_title {
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
}
|
|
.dialog.draggable .bar.next_to_title {
|
|
width: max-content;
|
|
margin-top: -30px;
|
|
margin-left: 111px;
|
|
float: left;
|
|
z-index: inherit;
|
|
}
|
|
#plugins .tab_bar {
|
|
width: calc(100% - 300px);
|
|
}
|
|
#plugin_list {
|
|
max-height: 600px;
|
|
overflow-y: scroll;
|
|
min-height: 80px;
|
|
}
|
|
#plugin_list > li {
|
|
min-height: 128px;
|
|
overflow-y: hidden;
|
|
margin: 8px;
|
|
background-color: var(--color-ui);
|
|
margin-right: 2px;
|
|
}
|
|
body.theme_borders #plugin_list > li {
|
|
border: 1px solid var(--color-border);
|
|
margin: 0;
|
|
margin-bottom: -1px;
|
|
}
|
|
#plugin_list > li.expanded {
|
|
min-height: 128px;
|
|
height: auto;
|
|
}
|
|
#plugin_list > li .icon_wrapper {
|
|
display: inline;
|
|
}
|
|
#plugin_list > li > * {
|
|
margin: 0;
|
|
margin-left: 12px;
|
|
cursor: default;
|
|
}
|
|
#plugin_list > li .button_bar {
|
|
height: auto;
|
|
float: right;
|
|
margin-left: -1px;
|
|
margin-top: 0;
|
|
text-align: right;
|
|
}
|
|
#plugin_list > li .button_bar.tiny {
|
|
color: var(--color-subtle_text);
|
|
font-size: 0.86em;
|
|
padding-right: 2px;
|
|
}
|
|
#plugin_list > li button {
|
|
min-width: 100px;
|
|
width: auto;
|
|
height: 36px;
|
|
float: right;
|
|
padding: 4px;
|
|
margin-left: -1px;
|
|
margin-top: 6px;
|
|
color: var(--color-text);
|
|
transition: width 100ms ease-in;
|
|
}
|
|
#plugin_list > li button > i {
|
|
float: left;
|
|
margin-top: 2px;
|
|
}
|
|
#plugin_list > li .title {
|
|
width: auto;
|
|
float: left;
|
|
font-size: 1.34em;
|
|
padding-top: 8px;
|
|
margin-bottom: -5px;
|
|
height: 48px;
|
|
}
|
|
#plugin_list > li .title i {
|
|
width: 22px;
|
|
font-size: 0.9em;
|
|
padding: 3px;
|
|
float: left;
|
|
margin-top: 5px;
|
|
margin-right: 6px;
|
|
}
|
|
#plugin_list > li .title i.plugin_expand_icon {
|
|
display: none;
|
|
}
|
|
#plugin_list > li.has_about_text .title:hover i.plugin_expand_icon {
|
|
display: inline-block;
|
|
}
|
|
#plugin_list > li.has_about_text .title:hover .plugin_icon {
|
|
display: none;
|
|
}
|
|
|
|
#plugin_list .plugin_version {
|
|
color: var(--color-subtle_text);
|
|
font-size: 0.9em;
|
|
margin-top: 14px;
|
|
float: left;
|
|
margin-left: 8px;
|
|
}
|
|
#plugin_list .author {
|
|
color: var(--color-subtle_text);
|
|
font-size: 0.9em;
|
|
clear: both;
|
|
}
|
|
#plugin_list .description {
|
|
font-size: 0.94em;
|
|
max-height: 148px;
|
|
margin-right: 12px;
|
|
}
|
|
#plugin_list .about {
|
|
overflow-y: auto;
|
|
max-height: 480px;
|
|
margin: 6px 0;
|
|
padding: 6px 12px;
|
|
background: var(--color-button);
|
|
}
|
|
#plugin_list > li ul.plugin_tag_list {
|
|
margin: 5px 8px;
|
|
line-height: 0;
|
|
}
|
|
.plugin_tag_list li {
|
|
display: inline-block;
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
max-width: 180px;
|
|
height: 22px;
|
|
padding: 1px 4px;
|
|
border-radius: 5px;
|
|
font-size: 0.9em;
|
|
margin: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
line-height: normal;
|
|
cursor: pointer;
|
|
}
|
|
.plugin_tag_list li.plugin_tag_source {
|
|
background-color: #ff7a52;
|
|
color: #111625;
|
|
}
|
|
.plugin_tag_list li.plugin_tag_mc {
|
|
background-color: #73e473;
|
|
color: #111625;
|
|
}
|
|
.plugin_tag_list li.plugin_tag_deprecated {
|
|
background-color: #ff3467;
|
|
color: #000000;
|
|
}
|
|
.no_plugin_message {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.search_bar {
|
|
float: right;
|
|
position: relative;
|
|
width: 220px;
|
|
}
|
|
.search_bar input {
|
|
float: right;
|
|
padding-right: 20px;
|
|
width: 100%;
|
|
transition: width 100ms ease;
|
|
}
|
|
.search_bar i {
|
|
float: right;
|
|
position: absolute;
|
|
right: 6px;
|
|
margin-top: 5px;
|
|
}
|
|
.search_bar.folded {
|
|
width: auto;
|
|
}
|
|
.search_bar.folded input {
|
|
width: 0px;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border-width: 0;
|
|
}
|
|
.search_bar.folded i:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
|
|
/*Toolbar Dialog*/
|
|
dialog#toolbar_edit .search_bar {
|
|
margin-top: 10px;
|
|
margin-bottom: 2px;
|
|
}
|
|
#bar_item_list {
|
|
max-height: 400px;
|
|
overflow-y: scroll;
|
|
min-height: 80px;
|
|
background-color: transparent;
|
|
}
|
|
#bar_item_list li {
|
|
padding: 4px;
|
|
}
|
|
#bar_item_list li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#bar_item_list li div.icon_wrapper {
|
|
display: inline-block;
|
|
height: 26px;
|
|
vertical-align: text-top;
|
|
}
|
|
#bar_item_list li:not(:hover) div.icon_wrapper.add, #bar_item_list li:hover div.icon_wrapper.normal {
|
|
display: none;
|
|
}
|
|
#bar_items_current {
|
|
background-color: var(--color-back);
|
|
overflow: hidden;
|
|
height: auto;
|
|
min-height: 34px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
#bar_items_current li {
|
|
min-width: 20px;
|
|
height: 30px;
|
|
cursor: move;
|
|
}
|
|
#bar_items_current li > * {
|
|
cursor: inherit;
|
|
}
|
|
#bar_items_current .toolbar_separator.border {
|
|
height: 32px;
|
|
width: 12px;
|
|
background: var(--color-border);
|
|
}
|
|
#bar_items_current .toolbar_separator.spacer {
|
|
width: 40px;
|
|
}
|
|
#bar_items_current .toolbar_separator.spacer::after {
|
|
content: "";
|
|
border-bottom: 6px dotted var(--color-subtle_text);
|
|
display: block;
|
|
position: a;
|
|
height: 18px;
|
|
width: 32px;
|
|
}
|
|
#bar_items_current .toolbar_separator.linebreak {
|
|
height: 32px;
|
|
width: 20px;
|
|
background-color: var(--color-dark);
|
|
color: var(--color-subtle_text);
|
|
}
|
|
#bar_items_current .toolbar_separator.linebreak::after {
|
|
content: "¶";
|
|
font-size: 22px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/*Action Control*/
|
|
#action_selector {
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 24;
|
|
right: 0;
|
|
left: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
top: 200px;
|
|
width: 400px;
|
|
height: 42px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
body.is_mobile #action_selector {
|
|
top: 26px;
|
|
}
|
|
#action_selector > input {
|
|
width: calc(100% - 38px);
|
|
height: 42px;
|
|
padding: 5px;
|
|
padding-left: 12px;
|
|
background-color: var(--color-ui);
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
#action_selector > .tool {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding-top: 6px;
|
|
background-color: var(--color-back);
|
|
}
|
|
#action_selector > i {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 9px;
|
|
}
|
|
#action_selector > #action_selector_list {
|
|
background-color: var(--color-ui);
|
|
color: var(--color-text);
|
|
width: 340px;
|
|
margin-left: 38px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
|
}
|
|
#action_selector ul {
|
|
background-color: var(--color-bright_ui);
|
|
color: var(--color-bright_ui_text);
|
|
min-height: 20px;
|
|
width: 100%;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
#action_selector > #action_selector_list > div {
|
|
background-color: var(--color-ui);
|
|
color: var(--color-text);
|
|
height: auto;
|
|
padding: 5px;
|
|
font-size: 0.94em;
|
|
word-break: break-word;
|
|
}
|
|
#action_selector ul > li {
|
|
height: 30px;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
}
|
|
#action_selector ul > li div.icon_wrapper {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
#action_selector ul > li span {
|
|
padding-left: 4px;
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
#action_selector ul > li label {
|
|
font-size: 0.84em;
|
|
padding: 2px;
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
}
|
|
#action_selector ul > li.selected {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
}
|
|
#action_selector ul > li div.icon_wrapper {
|
|
display: inline-block;
|
|
height: 26px;
|
|
vertical-align: text-top;
|
|
}
|
|
.action_selector_type_overlay {
|
|
position: absolute;
|
|
color: transparent;
|
|
background-color: var(--color-ui);
|
|
height: 30px;
|
|
width: auto;
|
|
pointer-events: none;
|
|
opacity: 0.32;
|
|
top: 4px;
|
|
left: 49px;
|
|
}
|
|
|
|
/* Validator */
|
|
li.validator_dialog_problem {
|
|
background-color: var(--color-back);
|
|
padding: 3px 5px;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
overflow-wrap: anywhere;
|
|
align-items: center;
|
|
}
|
|
li.validator_dialog_problem.validator_warning > i {
|
|
color: var(--color-warning);
|
|
margin: 3px 4px;
|
|
}
|
|
li.validator_dialog_problem.validator_error > i {
|
|
color: var(--color-error);
|
|
margin: 3px 4px;
|
|
}
|
|
li.validator_dialog_problem span {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
padding-top: 3px;
|
|
}
|
|
li.validator_dialog_problem .tool {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
/* Edit History */
|
|
#edit_history_list ul {
|
|
margin-left: 14px;
|
|
}
|
|
#edit_history_list ul li {
|
|
height: 30px;
|
|
padding: 2px 6px;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#edit_history_list ul li.current {
|
|
border-color: var(--color-accent);
|
|
}
|
|
#edit_history_list ul li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#edit_history_list ul li.selected {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
position: relative;
|
|
}
|
|
#edit_history_list ul li.selected:not(:first-of-type)::before {
|
|
content: "\f04b";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
font-size: 14px;
|
|
color: var(--color-accent);
|
|
display: block;
|
|
position: absolute;
|
|
top: -11px;
|
|
left: -16px;
|
|
}
|
|
#edit_history_list .edit_history_time {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
#edit_history_list ul li.selected .edit_history_time {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Custom Brush Options */
|
|
dialog#brush_options:not(.preset_selected) div.form_bar,
|
|
dialog#brush_options:not(.preset_selected) hr {
|
|
display: none !important;
|
|
}
|
|
ul#brush_preset_bar {
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
margin-bottom: 26px;
|
|
background-color: var(--color-back);
|
|
}
|
|
ul#brush_preset_bar > li {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 8px 4px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
ul#brush_preset_bar > li * {
|
|
pointer-events: none;
|
|
}
|
|
ul#brush_preset_bar > li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
ul#brush_preset_bar > li.selected {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
ul#brush_preset_bar > li:last-child {
|
|
position: sticky;
|
|
right: 0;
|
|
background: var(--color-back);
|
|
}
|
|
|
|
/* Texture Edit */
|
|
div.texture_adjust_previews {
|
|
overflow: auto;
|
|
max-height: 416px;
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
width: calc(100% - 38px);
|
|
float: left;
|
|
}
|
|
div.texture_adjust_previews.folded {
|
|
max-height: 30px;
|
|
overflow: hidden;
|
|
}
|
|
div.texture_adjust_previews img, div.texture_adjust_previews canvas {
|
|
max-height: 400px;
|
|
width: 400px;
|
|
margin: auto;
|
|
}
|
|
dialog .slider_input_combo {
|
|
clear: both;
|
|
}
|
|
dialog#adjust_curves .dialog_content {
|
|
margin-top: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
#contrast_graph {
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
height: 412px;
|
|
width: 412px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: crosshair;
|
|
}
|
|
.contrast_graph_selector {
|
|
clear: both;
|
|
display: flex;
|
|
}
|
|
.contrast_graph_selector > div {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
padding-top: 2px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.contrast_graph_selector > div:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.contrast_graph_selector > div.selected {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
}
|
|
#contrast_graph svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
#contrast_graph svg path {
|
|
fill: none;
|
|
stroke-width: 2px;
|
|
stroke: var(--color-accent);
|
|
opacity: 0.3;
|
|
}
|
|
#contrast_graph svg path.active {
|
|
opacity: 1.0;
|
|
}
|
|
#contrast_graph svg polygon {
|
|
fill: var(--color-selected);
|
|
stroke: none;
|
|
stroke-width: 0;
|
|
pointer-events: none;
|
|
}
|
|
.contrast_graph_point {
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-accent);
|
|
margin: -1px;
|
|
}
|
|
.contrast_graph_point:hover {
|
|
background-color: var(--color-light);
|
|
}
|
|
.contrast_graph_point::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
left: -6px;
|
|
top: -6px;
|
|
cursor: move;
|
|
}
|
|
/* Predicate Overrides */
|
|
.predicate_override_top_bar {
|
|
margin-bottom: 22px;
|
|
}
|
|
.predicate_override_top_bar > span {
|
|
max-width: calc(100% - 240px);
|
|
display: inline-block;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
dialog#predicate_overrides .bar.flex div {
|
|
flex: 1 1 0;
|
|
padding: 0 10px;
|
|
text-align: center;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
#predicate_override_list > li {
|
|
background-color: var(--color-ui);
|
|
display: flex;
|
|
margin: 8px;
|
|
}
|
|
#predicate_override_list .predicate {
|
|
display: flex;
|
|
}
|
|
#predicate_override_list .predicate_model {
|
|
width: 50px;
|
|
flex-grow: 1;
|
|
padding: 4px;
|
|
}
|
|
#predicate_override_list .predicate_model input {
|
|
width: 100%;
|
|
}
|
|
#predicate_override_list .predicate_model .tool {
|
|
float: right;
|
|
}
|
|
#predicate_override_list > li > .tool {
|
|
margin: 4px;
|
|
}
|
|
#predicate_override_list .predicate_list {
|
|
flex-grow: 1;
|
|
width: 100px;
|
|
position: relative;
|
|
}
|
|
#predicate_override_list .predicate_list li {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 4px;
|
|
}
|
|
#predicate_override_list .predicate_list > li > bb-select {
|
|
flex-grow: 1;
|
|
}
|
|
#predicate_override_list .predicate_list > li > input {
|
|
width: 80px;
|
|
flex-shrink: 1;
|
|
text-align: center;
|
|
}
|
|
#predicate_override_list .predicate_list > li .tool {
|
|
width: 28px;
|
|
}
|
|
.predicate_drag_handle {
|
|
width: 18px;
|
|
cursor: move;
|
|
flex-shrink: 0;
|
|
background-color: var(--color-button);
|
|
}
|
|
#predicate_override_list .predicate_list > .tool {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: -32px;
|
|
}
|
|
#predicate_override_add {
|
|
overflow: hidden;
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
#predicate_override_add button {
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
}
|
|
#predicate_override_generator {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
border: 1px solid var(--color-accent);
|
|
height: 46px;
|
|
padding: 7px 4px;
|
|
}
|
|
#predicate_override_generator bb-select {
|
|
flex-grow: 1;
|
|
}
|
|
#predicate_override_generator label {
|
|
padding: 3px 4px;
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#tab_overview {
|
|
z-index: 21;
|
|
display: flex;
|
|
width: max(600px, 80%);
|
|
max-width: 100%;
|
|
margin: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
#tab_overview_search .search_bar {
|
|
top: 130px;
|
|
pointer-events: all;
|
|
box-shadow: 0 0 0 2px var(--color-accent);
|
|
width: min(100vw, 326px);
|
|
}
|
|
#tab_overview_grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
max-height: 86%;
|
|
overflow-y: auto;
|
|
pointer-events: all;
|
|
}
|
|
#tab_overview_grid > li {
|
|
width: 300px;
|
|
height: 220px;
|
|
text-align: center;
|
|
background-color: var(--color-back);
|
|
cursor: pointer;
|
|
padding: 0 10px;
|
|
box-shadow: 0 0px 28px rgb(0 0 0 / 24%);
|
|
}
|
|
#tab_overview_grid > li:hover {
|
|
color: var(--color-light);
|
|
background-color: var(--color-ui);
|
|
}
|
|
#tab_overview_grid > li img {
|
|
max-width: 100%;
|
|
height: calc(100% - 30px);
|
|
display: block;
|
|
margin: auto;
|
|
cursor: inherit;
|
|
object-fit: contain;
|
|
}
|
|
#tab_overview_grid > li label {
|
|
cursor: inherit;
|
|
}
|