blockbench/css/dialogs.css
JannisX11 f7f1b53455 Keybinding dialog now displays category conflicts again
Support format "features" inside conditions
Fix issue with clicking actions in action control
Add mesh UV rotate actions
UV size sliders now work for meshes
Complete blender keymap
2021-10-02 17:06:29 +02:00

1282 lines
25 KiB
CSS

/*Dialog*/
#blackout {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-dark);
opacity: 0.6;
z-index: 19;
}
.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-light);
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;
}
dialog > content, dialog .dialog_wrapper > content {
display: block;
overflow-y: auto;
flex: 1 1 auto;
}
@media (max-device-width: 640px) {
dialog {
width: 100% !important;
}
}
dialog p > code {
background-color: var(--color-back);
border: 1px solid var(--color-border);
user-select: text;
}
.dialog {
position: fixed;
z-index: 20;
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;
}
.dialog_bar.form_bar .half {
flex-grow: 1;
}
.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.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;
}
.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 .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: 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: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: 4px;
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;
}
#settings_tab_bar {
margin: -24px;
margin-bottom: 0;
margin-top: -20px;
}
dialog#settings h2, dialog#keybindings h2, dialog#theme h2 {
margin-top: -10px;
font-size: 1.8em;
}
/*Settings*/
#settingslist {
width: 100%;
max-height: 600px;
overflow-y: scroll;
clear: both;
}
#settingslist li {
padding: 5px 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;
}
#settingslist .setting_description {
font-size: 0.94em;
color: var(--color-subtle_text);
}
#settingslist input[type=number] {
height: 28px;
width: 100%;
background-color: var(--color-button);
padding-left: 4px;
border: 1px solid var(--color-border);
}
#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 {
border: 1px solid var(--color-border);
}
#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-accent);
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*/
#about_page_title {
vertical-align: top;
opacity: 0.9;
}
/*Specific Dialogs*/
.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 {
height: 112px;
width: 112px;
margin: 3px;
position: relative;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
box-sizing: content-box;
border: 1px solid transparent;
}
#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 5 Free';
font-weight: 600;
color: var(--color-accent);
background-color: var(--color-ui);
height: 19px;
margin-right: 0;
margin-left: 100px;
margin-top: -10px;
border-bottom-left-radius: 8px;
padding-left: 2px;
}
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*/
#model_scale_range {
width: calc(100% - 50px);
float: left;
height: 31px;
padding-top: 3px;
}
#model_scale_label {
width: 50px;
padding-top: 3px;
text-align: center;
float: left;
}
#scaling_clipping_warning {
color: #ff384b;
}
.borderless {
margin: 0;
padding: 0;
border: none;
}
/*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 #000;
border-right: 1px solid #000;
}
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;
}
label.name_space_left {
float: left;
min-width: 155px;
margin-top: 4px;
margin-left: 1px;
margin-right: 8px;
flex-shrink: 0;
}
/*PE Import Dialog*/
#pe_list {
max-height: 600px;
margin-bottom: 20px;
overflow-y: scroll;
}
#pe_list li {
overflow: hidden;
}
#pe_list li > * {
margin: 0;
margin-left: 12px;
cursor: default;
overflow-x: hidden;
}
#pe_list li.selected {
background-color: var(--color-selected);
}
#pe_list li > .pe_icon {
height: 48px;
width: 48px;
float: left;
margin: 4px;
margin-right: 8px;
margin-bottom: 0;
}
#pe_list li > h4 > span {
font-size: 0.7;
}
/* 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;
}
/*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 {
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 {
margin-right: 12px;
padding-top: 12px;
overflow-y: auto;
max-height: 480px;
}
#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;
}
.plugin_tag_list li.plugin_tag_source {
background-color: #ff7a52;
color: #111625;
}
.plugin_tag_list li.plugin_tag_mc {
background-color: #73e473;
color: #111625;
}
.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%;
}
.search_bar i {
float: right;
position: absolute;
right: 6px;
margin-top: 5px;
}
/*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: 360px;
height: 42px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
#action_selector > input {
width: 100%;
height: 42px;
padding: 5px;
padding-left: 12px;
background-color: var(--color-ui);
border: 1px solid var(--color-border);
}
#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: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
#action_selector ul {
background-color: var(--color-bright_ui);
color: var(--color-accent_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: 12px;
}
@media (max-device-width: 640px) {
dialog#action_selector {
top: 26px;
}
}
/* 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 5 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;
}