backup with fully working version, only one texture renders
This commit is contained in:
+2851
File diff suppressed because it is too large
Load Diff
+7820
File diff suppressed because it is too large
Load Diff
+947
@@ -0,0 +1,947 @@
|
||||
@layer base {
|
||||
/*Defaults*/
|
||||
div.tool.wide {
|
||||
width: 72px;
|
||||
padding: 1px 0;
|
||||
}
|
||||
.hidden, .tooltip_shift, .custom_select ul, .mobile_only, .m_disp {
|
||||
display: none;
|
||||
}
|
||||
div.selection_only {
|
||||
visibility: hidden;
|
||||
}
|
||||
a.open-in-browser {
|
||||
cursor: pointer;
|
||||
}
|
||||
.f_left {
|
||||
float: left;
|
||||
}
|
||||
.f_right {
|
||||
float: right !important;
|
||||
}
|
||||
.i_b {
|
||||
display: inline-block;
|
||||
}
|
||||
label.inline_label {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.progress_bar {
|
||||
background-color: var(--color-back);
|
||||
height: 18px;
|
||||
margin-top: 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.progress_bar_inner {
|
||||
background-color: var(--color-accent);
|
||||
height: 100%;
|
||||
width: calc(100% * var(--progress));
|
||||
border-radius: inherit;
|
||||
}
|
||||
.accent_color {
|
||||
color: var(--color-accent);
|
||||
font-weight: normal;
|
||||
}
|
||||
.slash {
|
||||
color: var(--color-light);
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
code, .code {
|
||||
font-family: var(--font-code);
|
||||
}
|
||||
.code {
|
||||
font-size: 16px;
|
||||
tab-size: 4;
|
||||
}
|
||||
textarea.code {
|
||||
padding: 5px;
|
||||
}
|
||||
.small_text {
|
||||
font-size: 0.94em;
|
||||
}
|
||||
.subtle {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
.color_x {
|
||||
color: var(--color-axis-x);
|
||||
}
|
||||
.color_y {
|
||||
color: var(--color-axis-y);
|
||||
}
|
||||
.color_z {
|
||||
color: var(--color-axis-z);
|
||||
}
|
||||
.color_u {
|
||||
color: var(--color-axis-u);
|
||||
}
|
||||
.color_v {
|
||||
color: var(--color-axis-v);
|
||||
}
|
||||
.color_w {
|
||||
color: var(--color-axis-w);
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
.dark_bordered {
|
||||
height: 30px;
|
||||
padding-left: 4px;
|
||||
padding-top: 1px;
|
||||
background-color: var(--color-back);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.input_wide {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
height: 40px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
input.medium_width {
|
||||
width: 64px;
|
||||
}
|
||||
.prism-editor-wrapper {
|
||||
padding-left: 4px;
|
||||
padding-top: 1px;
|
||||
background-color: var(--color-back);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.prism-editor__autocomplete {
|
||||
background-color: var(--color-back);
|
||||
border: 1px solid var(--color-accent);
|
||||
z-index: 30;
|
||||
}
|
||||
.prism-editor__autocomplete li:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.prism-editor__autocomplete li.selected {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
.checkerboard, .checkerboard_trigger .checkerboard_target {
|
||||
--color-checker_offset: rgba(0, 0, 0, 0.16);
|
||||
background-color: var(--color-checkerboard) !important;
|
||||
background-image: linear-gradient(45deg, var(--color-checkerboard) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-checkerboard) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-checkerboard) 75%),
|
||||
linear-gradient(-45deg, var(--color-checker_offset) 75%, var(--color-checkerboard) 75%);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
|
||||
}
|
||||
body[mode=start] div#center.checkerboard {
|
||||
background-image: none;
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
/*UI Elements*/
|
||||
div.preview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: inherit;
|
||||
}
|
||||
.preview > canvas {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
div.preview.fixed_ratio {
|
||||
display: flex;
|
||||
}
|
||||
.preview.fixed_ratio > canvas {
|
||||
margin: auto;
|
||||
border-radius: 7px;
|
||||
border: 2px solid var(--color-grid);
|
||||
}
|
||||
.preview > .preview_perspective_label {
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
bottom: 4px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.preview .preview_menu {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 2px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--color-dark);
|
||||
display: flex;
|
||||
}
|
||||
.checkerboard .preview_menu {
|
||||
background-color: var(--color-checkerboard);
|
||||
}
|
||||
.preview .preview_menu .tool {
|
||||
width: 32px;
|
||||
}
|
||||
.preview .preview_menu .preview_main_menu > i {
|
||||
width: 20px;
|
||||
}
|
||||
.preview .preview_background_menu {
|
||||
background-size: cover;
|
||||
width: 30px;
|
||||
}
|
||||
.preview > canvas.selectable_cursor {
|
||||
cursor: copy;
|
||||
}
|
||||
#weight_brush_outline {
|
||||
--radius: 50;
|
||||
position: absolute;
|
||||
width: calc(var(--radius) * 2px);
|
||||
height: calc(var(--radius) * 2px);
|
||||
margin: calc(var(--radius) * -1px);
|
||||
border-radius: 50%;
|
||||
border: 1px dashed var(--color-light);
|
||||
pointer-events: none;
|
||||
z-index: 12;
|
||||
}
|
||||
.text_padding {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.toolbar_label {
|
||||
padding: 2px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.bar {
|
||||
height: 30px;
|
||||
}
|
||||
.bar > * {
|
||||
float: left;
|
||||
}
|
||||
.bar.flex {
|
||||
display: flex;
|
||||
}
|
||||
.bar.flex > * {
|
||||
float: none;
|
||||
}
|
||||
.bar.flex > label {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.scroll_horizontal {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scroll_horizontal ::-webkit-scrollbar {
|
||||
height: 0px;
|
||||
}
|
||||
.list {
|
||||
background-color: var(--color-back);
|
||||
overflow-y: scroll;
|
||||
flex-grow: 1;
|
||||
clear: both;
|
||||
}
|
||||
.list::-webkit-scrollbar-track {
|
||||
background: var(--color-back);
|
||||
}
|
||||
ul.list_style li {
|
||||
list-style: initial;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#quick_message_box {
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 420px;
|
||||
z-index: 100;
|
||||
min-width: 150px;
|
||||
max-width: 250px;
|
||||
width: fit-content;
|
||||
padding: 0 12px;
|
||||
background-color: var(--color-bright_ui);
|
||||
color: var(--color-bright_ui_text);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);;
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (max-device-width: 640px) {
|
||||
#quick_message_box {
|
||||
bottom: 26px;
|
||||
top: unset;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
#cursor_tooltip {
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
max-width: 250px;
|
||||
width: fit-content;
|
||||
line-height: 18px;
|
||||
padding: 2px 8px;
|
||||
margin-top: 10px;
|
||||
margin-left: 9px;
|
||||
background-color: var(--color-bright_ui);
|
||||
color: var(--color-bright_ui_text);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-line;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
.uv_message_box {
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 101;
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
background-color: var(--color-bright_ui);
|
||||
color: var(--color-bright_ui_text);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.selection_rectangle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 1px solid var(--color-accent);
|
||||
background-color: rgba(40,50,60,0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
min-width: 40px;
|
||||
max-width: 100%;
|
||||
width: max-content;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background-color: var(--color-bright_ui);
|
||||
color: var(--color-bright_ui_text);
|
||||
padding: 3px 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.annotation.transparent {
|
||||
background: transparent;
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
padding: 0;
|
||||
margin: -4px;
|
||||
min-width: 15px;
|
||||
color: var(--color-light);
|
||||
text-shadow: 0 0 5px black;
|
||||
}
|
||||
.light_on_hover:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.elevated {
|
||||
background-color: var(--color-elevated);
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.spinning {
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
||||
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
||||
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
||||
/*Markdown*/
|
||||
.markdown h1 {
|
||||
margin: 8px 0 8px 0;
|
||||
}
|
||||
.markdown h2 {
|
||||
margin: 14px 0 8px 0;
|
||||
}
|
||||
.markdown p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.markdown li {
|
||||
list-style: initial;
|
||||
cursor: inherit;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.markdown li > p,
|
||||
.markdown h2 > p,
|
||||
.markdown h3 > p {
|
||||
margin: 0;
|
||||
}
|
||||
.markdown ul {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.markdown ol {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.markdown ol li {
|
||||
list-style: auto;
|
||||
}
|
||||
.markdown a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.markdown pre {
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-back);
|
||||
font-family: var(--font-code);
|
||||
padding: 6px 10px;
|
||||
clear: both;
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
overflow: auto;
|
||||
}
|
||||
.markdown pre code {
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid var(--color-accent);
|
||||
padding: 4px;
|
||||
padding-left: 16px;
|
||||
background: var(--color-back);
|
||||
}
|
||||
.markdown table {
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-back);
|
||||
}
|
||||
.markdown th {
|
||||
padding: 4px;
|
||||
}
|
||||
.markdown td {
|
||||
padding: 3px 4px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.markdown img {
|
||||
image-rendering: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*Actions*/
|
||||
.toolbar {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toolbar > .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
div.toolbar_wrapper {
|
||||
float: none;
|
||||
}
|
||||
.toolbar_wrapper.narrow > .toolbar {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
body.is_mobile .toolbar_wrapper.narrow > .toolbar:not(.vertical) {
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar_wrapper > .toolbar.no_wrap {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
.toolbar_wrapper > .toolbar.no_wrap > .content {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.toolbar_wrapper > .toolbar.vertical {
|
||||
width: 40px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.toolbar_wrapper > .toolbar.vertical .tool {
|
||||
height: 36px;
|
||||
width: 40px;
|
||||
padding: 2px;
|
||||
}
|
||||
.toolbar > .tool.toolbar_menu {
|
||||
float: right;
|
||||
width: 12px;
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
.toolbar.vertical .toolbar_menu {
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
.toolbar > .tool.toolbar_menu > i {
|
||||
width: 16px;
|
||||
margin-left: -5px;
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.toolbar.vertical > .tool.toolbar_menu > i {
|
||||
width: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.toolbar_overflow_popup {
|
||||
background-color: var(--color-ui);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 180px;
|
||||
z-index: 20;
|
||||
box-shadow: 0 0px 8px rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
.toolbar_overflow_dummy {
|
||||
height: 30px;
|
||||
width: 38px;
|
||||
}
|
||||
.tool {
|
||||
height: 30px;
|
||||
width: 36px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: default;
|
||||
float: left;
|
||||
color: var(--color-text);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tool i {
|
||||
display: block;
|
||||
margin: 4px auto;
|
||||
}
|
||||
.tool:active > .icon {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.tool:active > .icon.fa_big {
|
||||
padding-top: 2px;
|
||||
}
|
||||
img.icon {
|
||||
height: 26px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.tool.widget {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.tool.widget.bar_text {
|
||||
padding: 2px;
|
||||
}
|
||||
.tool.has_label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tool:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.tool.right_tool {
|
||||
position: relative;
|
||||
}
|
||||
.tool.enabled {
|
||||
background: var(--color-accent);
|
||||
border-radius: 4px;
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
float: left;
|
||||
}
|
||||
.toolbar .toolbar_separator.border {
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
float: left;
|
||||
background-color: var(--color-border);
|
||||
margin: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.toolbar .toolbar_separator.spacer {
|
||||
background: transparent;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.toolbar .toolbar_separator.linebreak {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.text_button:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.bar_select_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.bar_select:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.bar_select select {
|
||||
padding-right: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
.bar_select .bar_select_wrapper::before {
|
||||
content: "\f0d7";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
pointer-events: none;
|
||||
right: 6px;
|
||||
top: 3px;
|
||||
}
|
||||
.half {
|
||||
display: inline-block;
|
||||
width: calc(50% - 4px);
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
width: fit-content;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 1px;
|
||||
background: var(--color-bright_ui);
|
||||
color: var(--color-bright_ui_text);
|
||||
margin-top: 30px;
|
||||
white-space: nowrap;
|
||||
z-index: 20;
|
||||
box-shadow: 0 0.4px 3.5px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.tool:hover > .tooltip {
|
||||
visibility: visible;
|
||||
}
|
||||
.tooltip_shift {
|
||||
display: none;
|
||||
}
|
||||
.tooltip_description {
|
||||
position: absolute;
|
||||
background-color: var(--color-ui);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-bright_ui);
|
||||
padding: 2px 6px;
|
||||
margin-top: 1px;
|
||||
font-size: 0.84em;
|
||||
margin-left: -5px;
|
||||
opacity: 0;
|
||||
}
|
||||
.tool:hover > .tooltip .tooltip_description {
|
||||
transition-property: opacity;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 600ms;
|
||||
opacity: 1;
|
||||
}
|
||||
.tool.bar_select.icon_mode {
|
||||
padding: 0 4px;
|
||||
background-color: var(--color-button);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tool.bar_select .select_option {
|
||||
float: left;
|
||||
width: 28px;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.tool.bar_select .select_option:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.tool.bar_select .select_option.selected {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
.tool.bar_select .select_option:active {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.tool.bar_select .select_option .icon {
|
||||
transform: scale(0.86);
|
||||
}
|
||||
.tool.bar_select .select_option[key=vertex] .icon {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.tool.side_menu_tool {
|
||||
width: 48px;
|
||||
}
|
||||
.tool.side_menu_tool i.icon {
|
||||
display: block;
|
||||
margin-left: 6px;
|
||||
float: left;
|
||||
}
|
||||
.tool.side_menu_tool i.icon.action_more_options {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 4px;
|
||||
color: var(--color-text);
|
||||
margin-left: 0;
|
||||
}
|
||||
.tool.side_menu_tool i.icon.action_more_options:hover {
|
||||
color: inherit;
|
||||
}
|
||||
.toolbar.vertical .tool.side_menu_tool {
|
||||
height: 54px;
|
||||
}
|
||||
.toolbar.vertical .tool.side_menu_tool > .action_more_options {
|
||||
max-width: 48px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
/*(Context-)Menu*/
|
||||
.contextMenu {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: fit-content;
|
||||
min-width: 145px;
|
||||
background-color: var(--color-bright_ui);
|
||||
color: var(--color-bright_ui_text);
|
||||
z-index: 30;
|
||||
box-shadow: 0.4px 0.4px 4px rgba(0, 0, 0, 0.7);
|
||||
border-radius: 6px;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.contextMenu.sub {
|
||||
display: none;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.contextMenu.scrollable {
|
||||
max-height: min(800px, 100vh);
|
||||
overflow: auto;
|
||||
}
|
||||
.contextMenu li {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
padding: 4px;
|
||||
padding-left: 34px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.contextMenu li:first-of-type {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
.contextMenu li:last-of-type {
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
.contextMenu li.parent {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.contextMenu li.parent::after {
|
||||
content: "\f105";
|
||||
display: block;
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin-right: -12px;
|
||||
margin-left: 6px;
|
||||
margin-top: -1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.contextMenu li.enabled {
|
||||
padding-left: 29px;
|
||||
border-left: 5px solid var(--color-accent);
|
||||
}
|
||||
.contextMenu li.focused,
|
||||
.contextMenu li.parent.opened {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
.contextMenu li.hybrid_parent.opened {
|
||||
background-color: transparent;
|
||||
}
|
||||
.contextMenu li > i {
|
||||
margin-top: 1px;
|
||||
margin-right: 4px;
|
||||
margin-left: -28px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.contextMenu 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;
|
||||
}
|
||||
.contextMenu li > span {
|
||||
pointer-events: none;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.contextMenu li.marked > span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.contextMenu li.parent.focused > .contextMenu.sub {
|
||||
display: block;
|
||||
}
|
||||
.contextMenu li.hybrid_parent.opened > .contextMenu.sub {
|
||||
display: block;
|
||||
}
|
||||
.contextMenu li.opened > .contextMenu.sub {
|
||||
display: block;
|
||||
}
|
||||
.contextMenu .menu_more_button {
|
||||
width: 28px;
|
||||
margin: -4px -8px -4px 2px;
|
||||
padding: 4px 0;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contextMenu .menu_more_button:hover,
|
||||
.hybrid_parent.opened .menu_more_button {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
.contextMenu .menu_more_button > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
li.menu_separator {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: var(--color-menu_separator);
|
||||
}
|
||||
li.menu_separator.has_label {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
li.menu_separator.has_label > label {
|
||||
background-color: var(--color-bright_ui);
|
||||
color: color-mix(in srgb, var(--color-bright_ui_text) 70%, transparent);
|
||||
margin-top: -12px;
|
||||
margin-left: 12px;
|
||||
padding: 0 5px;
|
||||
height: 20px;
|
||||
}
|
||||
.contextMenu li.highlighted {
|
||||
animation: menu_item_highlight 1s infinite ease-in-out;
|
||||
}
|
||||
@keyframes menu_item_highlight {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
}
|
||||
50% {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.contextMenu .menu_search_bar {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
border-bottom: 2px solid var(--color-menu_separator);
|
||||
}
|
||||
.menu_search_bar > input {
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
}
|
||||
.menu_search_bar > div {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.menu_search_bar > div > * {
|
||||
pointer-events: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.keybinding_label {
|
||||
pointer-events: none;
|
||||
font-size: 0.84em;
|
||||
padding: 2px 0 2px 8px;
|
||||
opacity: 0.6;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Theme Borders */
|
||||
body.theme_borders .contextMenu,
|
||||
body.theme_borders dialog,
|
||||
body.theme_borders #start_screen > content,
|
||||
body.theme_borders #quick_message_box,
|
||||
body.theme_borders action_selector > #action_selector_list,
|
||||
body.theme_borders .plugins_suggested_row > ul > li
|
||||
{
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders #start_screen section {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders .panel {
|
||||
margin-top: -1px;
|
||||
border-top: 01px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders #right_bar {
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders #left_bar {
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders .preview .preview_menu {
|
||||
right: 0;
|
||||
}
|
||||
body.theme_borders .dialog_sidebar {
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders .dialog_handle {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders .dialog_close_button {
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
height: 34px;
|
||||
}
|
||||
body.theme_borders li.animation_file {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders #main_toolbar, body.theme_borders #tab_bar {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders #status_bar {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
body.theme_borders .contextMenu li.menu_separator {
|
||||
background-color: var(--color-border);
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
body.theme_borders #animation_controllers_wrapper .controller_state {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,512 @@
|
||||
/*! jQuery UI - v1.12.1 - 2017-04-02
|
||||
* http://jqueryui.com
|
||||
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
|
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
|
||||
* Copyright jQuery Foundation and other contributors; Licensed MIT */
|
||||
@layer lib {
|
||||
.ui-draggable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.ui-helper-hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px
|
||||
}
|
||||
|
||||
.ui-helper-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.ui-helper-clearfix:before,
|
||||
.ui-helper-clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
border-collapse: collapse
|
||||
}
|
||||
|
||||
.ui-helper-clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.ui-helper-zfix {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter: Alpha(Opacity=0)
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.ui-state-disabled {
|
||||
cursor: default!important;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -.25em;
|
||||
position: relative;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat
|
||||
}
|
||||
|
||||
.ui-widget-icon-block {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
display: block
|
||||
}
|
||||
|
||||
.ui-widget-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ui-resizable {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
display: block;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.ui-resizable-disabled .ui-resizable-handle,
|
||||
.ui-resizable-autohide .ui-resizable-handle {
|
||||
display: none
|
||||
}
|
||||
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
bottom: -5px;
|
||||
left: 0
|
||||
}
|
||||
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
right: -5px;
|
||||
top: 0;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: -5px;
|
||||
bottom: -5px
|
||||
}
|
||||
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: -5px;
|
||||
bottom: -5px
|
||||
}
|
||||
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: -5px;
|
||||
top: -5px
|
||||
}
|
||||
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: -5px;
|
||||
top: -5px
|
||||
}
|
||||
|
||||
.ui-selectable {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.ui-selectable-helper {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted black
|
||||
}
|
||||
|
||||
.ui-sortable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-header {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 2px 0 0 0;
|
||||
padding: .5em .5em .5em .7em;
|
||||
font-size: 100%
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-content {
|
||||
padding: 1em 2.2em;
|
||||
border-top: 0;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.ui-dialog .ui-resizable-se,
|
||||
.ui-dialog .ui-resizable-sw,
|
||||
.ui-dialog .ui-resizable-ne,
|
||||
.ui-dialog .ui-resizable-nw {
|
||||
width: 7px;
|
||||
height: 7px
|
||||
}
|
||||
|
||||
.ui-dialog .ui-resizable-se {
|
||||
right: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.ui-dialog .ui-resizable-sw {
|
||||
left: 0;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.ui-dialog .ui-resizable-ne {
|
||||
right: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.ui-dialog .ui-resizable-nw {
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.ui-draggable .ui-dialog-titlebar {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.ui-progressbar {
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.ui-progressbar .ui-progressbar-value {
|
||||
margin: -1px;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ui-progressbar .ui-progressbar-overlay {
|
||||
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
|
||||
height: 100%;
|
||||
filter: alpha(opacity=25);
|
||||
opacity: 0.25
|
||||
}
|
||||
|
||||
.ui-progressbar-indeterminate .ui-progressbar-value {
|
||||
background-image: none
|
||||
}
|
||||
|
||||
.ui-tooltip {
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-width: 300px
|
||||
}
|
||||
|
||||
body .ui-tooltip {
|
||||
border-width: 2px
|
||||
}
|
||||
|
||||
.ui-widget {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.ui-widget .ui-widget {
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
.ui-widget.ui-widget-content {
|
||||
border: 1px solid #c5c5c5
|
||||
}
|
||||
|
||||
.ui-widget-content {
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
color: #333
|
||||
}
|
||||
|
||||
.ui-widget-content a {
|
||||
color: #333
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
border: 1px solid #ddd;
|
||||
background: #e9e9e9;
|
||||
color: #333;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.ui-widget-header a {
|
||||
color: #333
|
||||
}
|
||||
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default,
|
||||
.ui-button,
|
||||
html .ui-button.ui-state-disabled:hover,
|
||||
html .ui-button.ui-state-disabled:active {
|
||||
border: 1px solid #c5c5c5;
|
||||
background: #f6f6f6;
|
||||
font-weight: normal;
|
||||
color: #454545
|
||||
}
|
||||
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited,
|
||||
a.ui-button,
|
||||
a:link.ui-button,
|
||||
a:visited.ui-button,
|
||||
.ui-button {
|
||||
color: #454545;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus,
|
||||
.ui-button:hover,
|
||||
.ui-button:focus {
|
||||
border: 1px solid #ccc;
|
||||
background: #ededed;
|
||||
font-weight: normal;
|
||||
color: #2b2b2b
|
||||
}
|
||||
|
||||
.ui-state-hover a,
|
||||
.ui-state-hover a:hover,
|
||||
.ui-state-hover a:link,
|
||||
.ui-state-hover a:visited,
|
||||
.ui-state-focus a,
|
||||
.ui-state-focus a:hover,
|
||||
.ui-state-focus a:link,
|
||||
.ui-state-focus a:visited,
|
||||
a.ui-button:hover,
|
||||
a.ui-button:focus {
|
||||
color: #2b2b2b;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.ui-visual-focus {
|
||||
box-shadow: 0 0 3px 1px rgb(94, 158, 214)
|
||||
}
|
||||
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active,
|
||||
a.ui-button:active,
|
||||
.ui-button:active,
|
||||
.ui-button.ui-state-active:hover {
|
||||
border: 1px solid #003eff;
|
||||
background: #007fff;
|
||||
font-weight: normal;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.ui-icon-background,
|
||||
.ui-state-active .ui-icon-background {
|
||||
border: #003eff;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.ui-state-active a,
|
||||
.ui-state-active a:link,
|
||||
.ui-state-active a:visited {
|
||||
color: #fff;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.ui-state-highlight,
|
||||
.ui-widget-content .ui-state-highlight,
|
||||
.ui-widget-header .ui-state-highlight {
|
||||
border: 1px solid #dad55e;
|
||||
background: #fffa90;
|
||||
color: #777620
|
||||
}
|
||||
|
||||
.ui-state-checked {
|
||||
border: 1px solid #dad55e;
|
||||
background: #fffa90
|
||||
}
|
||||
|
||||
.ui-state-highlight a,
|
||||
.ui-widget-content .ui-state-highlight a,
|
||||
.ui-widget-header .ui-state-highlight a {
|
||||
color: #777620
|
||||
}
|
||||
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error,
|
||||
.ui-widget-header .ui-state-error {
|
||||
border: 1px solid #f1a899;
|
||||
background: #fddfdf;
|
||||
color: #5f3f3f
|
||||
}
|
||||
|
||||
.ui-state-error a,
|
||||
.ui-widget-content .ui-state-error a,
|
||||
.ui-widget-header .ui-state-error a {
|
||||
color: #5f3f3f
|
||||
}
|
||||
|
||||
.ui-state-error-text,
|
||||
.ui-widget-content .ui-state-error-text,
|
||||
.ui-widget-header .ui-state-error-text {
|
||||
color: #5f3f3f
|
||||
}
|
||||
|
||||
.ui-priority-primary,
|
||||
.ui-widget-content .ui-priority-primary,
|
||||
.ui-widget-header .ui-priority-primary {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary,
|
||||
.ui-widget-header .ui-priority-secondary {
|
||||
opacity: .7;
|
||||
filter: Alpha(Opacity=70);
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
.ui-state-disabled,
|
||||
.ui-widget-content .ui-state-disabled,
|
||||
.ui-widget-header .ui-state-disabled {
|
||||
opacity: .35;
|
||||
filter: Alpha(Opacity=35);
|
||||
background-image: none
|
||||
}
|
||||
|
||||
.ui-state-disabled .ui-icon {
|
||||
filter: Alpha(Opacity=35)
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
width: 16px;
|
||||
height: 16px
|
||||
}
|
||||
|
||||
|
||||
.ui-icon-blank {
|
||||
background-position: 16px 16px
|
||||
}
|
||||
|
||||
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-left,
|
||||
.ui-corner-tl {
|
||||
border-top-left-radius: 3px
|
||||
}
|
||||
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-right,
|
||||
.ui-corner-tr {
|
||||
border-top-right-radius: 3px
|
||||
}
|
||||
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-left,
|
||||
.ui-corner-bl {
|
||||
border-bottom-left-radius: 3px
|
||||
}
|
||||
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-right,
|
||||
.ui-corner-br {
|
||||
border-bottom-right-radius: 3px
|
||||
}
|
||||
|
||||
.ui-widget-overlay {
|
||||
background: #aaa;
|
||||
opacity: .3;
|
||||
filter: Alpha(Opacity=30)
|
||||
}
|
||||
|
||||
.ui-widget-shadow {
|
||||
-webkit-box-shadow: 0 0 5px #666;
|
||||
box-shadow: 0 0 5px #666
|
||||
}
|
||||
}
|
||||
+3273
File diff suppressed because it is too large
Load Diff
+219
@@ -0,0 +1,219 @@
|
||||
/* PrismJS 1.17.1
|
||||
https://prismjs.com/download.html#themes=prism-okaidia&languages=css+json */
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
@layer lib {
|
||||
.prism-editor-wrapper code {
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
}
|
||||
.prism-editor-component {
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
.prism-editor-component,
|
||||
.prism-editor-wrapper {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.prism-editor-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
-o-tab-size: 1.5em;
|
||||
tab-size: 1.5em;
|
||||
-moz-tab-size: 1.5em;
|
||||
}
|
||||
.prism-editor-wrapper pre {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
div.prism-editor-wrapper .prism-editor-placeholder {
|
||||
color: #6f7276;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
}
|
||||
div.prism-editor-wrapper:focus-within .prism-editor-placeholder {
|
||||
visibility: hidden;
|
||||
}
|
||||
.prism-editor__line-numbers {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
padding-top: 4px;
|
||||
margin-top: 0;
|
||||
border-right: 1px solid var(--color-border);
|
||||
margin-right: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.prism-editor__line-number {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.prism-editor__autocomplete {
|
||||
position: absolute;
|
||||
min-width: 100px;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
top: 25px;
|
||||
min-height: 12px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
z-index: 4;
|
||||
}
|
||||
.prism-editor__autocomplete li {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 1px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.prism-editor__code {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
-webkit-box-flex: 2;
|
||||
-ms-flex-positive: 2;
|
||||
flex-grow: 2;
|
||||
min-height: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
outline: none;
|
||||
}
|
||||
pre.prism-editor__code:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: var(--font-code);
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
cursor: text;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: var(--color-back);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
+862
@@ -0,0 +1,862 @@
|
||||
@layer reset, lib, base, plugin, theme, theme-override;
|
||||
@layer reset {
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
outline-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
body {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
div {
|
||||
cursor: default;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
color: inherit;
|
||||
}
|
||||
i {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: bolder;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
/*INIT*/
|
||||
body.is_mobile * {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
[hidden], template {
|
||||
display: none;
|
||||
}
|
||||
/*Webkit*/
|
||||
a[href] {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
a[href]:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.bright_ui a[href]:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* SCROLLBARS */
|
||||
/* webkit */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-ui);
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--color-ui);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-selected);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
/* Web standard */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-selected) transparent;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
body.is_mobile ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
body.is_mobile * {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body.is_mobile .mobile_scrollbar {
|
||||
scrollbar-width: initial;
|
||||
}
|
||||
body.is_mobile .mobile_scrollbar::-webkit-scrollbar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
body.is_mobile .mobile_scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
}
|
||||
/*Assistant Font*/
|
||||
@font-face {
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: local('Assistant-ExtraLight'),
|
||||
url(../font/Assistant-ExtraLight.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Assistant-Light'),
|
||||
url(../font/Assistant-Light.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Assistant-Regular'),
|
||||
url(../font/Assistant-Regular.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Assistant-SemiBold'),
|
||||
url(../font/Assistant-SemiBold.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Assistant-Bold'),
|
||||
url(../font/Assistant-Bold.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Assistant';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Assistant-ExtraBold'),
|
||||
url(../font/Assistant-ExtraBold.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 100 1000;
|
||||
src: local('Montserrat-VariableFont'),
|
||||
url(../font/Montserrat-VariableFont_wght.ttf) format('truetype'),
|
||||
url(../font/Montserrat-VariableFont_wght.ttf) format('truetype');
|
||||
}
|
||||
|
||||
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1 */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../font/material-icons.woff2) format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('../font/icomoon.ttf') format('truetype'),
|
||||
url('../font/icomoon.woff') format('woff');
|
||||
}
|
||||
|
||||
/*Icons*/
|
||||
[class^="icon-"]:not(.fa), [class*=" icon-"]:not(.fa) {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
font-size: 1.4em;
|
||||
max-width: 24px;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
.icon-keyframe_discontinuous_bezier:before {
|
||||
content: "\e92d";
|
||||
}
|
||||
.icon-keyframe_smooth:before {
|
||||
content: "\e92c";
|
||||
}
|
||||
.icon-keyframe_step:before {
|
||||
content: "\e92b";
|
||||
}
|
||||
.icon-keyframe_bezier:before {
|
||||
content: "\e92a";
|
||||
}
|
||||
.icon-collada:before {
|
||||
content: "\e926";
|
||||
}
|
||||
.icon-fbx:before {
|
||||
content: "\e927";
|
||||
}
|
||||
.icon-format_bedrock_block:before {
|
||||
content: "\e928";
|
||||
}
|
||||
.icon-format_bedrock_entity:before {
|
||||
content: "\e929";
|
||||
}
|
||||
.icon-keyframe:before {
|
||||
content: "\e924";
|
||||
}
|
||||
.icon-keyframe_discontinuous:before {
|
||||
content: "\e925";
|
||||
}
|
||||
.icon-gizmo:before {
|
||||
content: "\e922";
|
||||
}
|
||||
.icon-gltf:before {
|
||||
content: "\e923";
|
||||
}
|
||||
.icon-format_bedrock_legacy:before {
|
||||
content: "\e91a";
|
||||
}
|
||||
.icon-crossbow:before {
|
||||
content: "\e91b";
|
||||
}
|
||||
.icon-format_bedrock:before {
|
||||
content: "\e91c";
|
||||
}
|
||||
.icon-format_block:before {
|
||||
content: "\e91d";
|
||||
}
|
||||
.icon-format_free:before {
|
||||
content: "\e91e";
|
||||
}
|
||||
.icon-format_hytale:before {
|
||||
content: "\e91f";
|
||||
}
|
||||
.icon-format_java:before {
|
||||
content: "\e920";
|
||||
}
|
||||
.icon-format_optifine:before {
|
||||
content: "\e921";
|
||||
}
|
||||
.icon-sketchfab:before {
|
||||
content: "\e919";
|
||||
}
|
||||
.icon-blockbench_file:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-vertexsnap:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-create_bitmap:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-objects:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-bow:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-bb_interface:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-blockbench:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.icon-x11:before {
|
||||
content: "\e907";
|
||||
}
|
||||
.icon-baby_zombie:before {
|
||||
content: "\e908";
|
||||
}
|
||||
.icon-armor_stand:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-armor_stand_small:before {
|
||||
content: "\e90a";
|
||||
}
|
||||
.icon-ground:before {
|
||||
content: "\e90b";
|
||||
}
|
||||
.icon-hud:before {
|
||||
content: "\e90c";
|
||||
}
|
||||
.icon-inventory_full:before {
|
||||
content: "\e90d";
|
||||
}
|
||||
.icon-inventory_nine:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.icon-inventory_single:before {
|
||||
content: "\e90f";
|
||||
}
|
||||
.icon-player_head:before {
|
||||
content: "\e910";
|
||||
}
|
||||
.icon-zombie:before {
|
||||
content: "\e911";
|
||||
}
|
||||
.icon-blockbench_inverted:before {
|
||||
content: "\e912";
|
||||
}
|
||||
.icon-optifine_file:before {
|
||||
content: "\e913";
|
||||
}
|
||||
.icon-saved:before {
|
||||
content: "\e914";
|
||||
}
|
||||
.icon-player:before {
|
||||
content: "\e915";
|
||||
}
|
||||
.icon-mirror_x:before {
|
||||
content: "\e916";
|
||||
}
|
||||
.icon-mirror_y:before {
|
||||
content: "\e917";
|
||||
}
|
||||
.icon-mirror_z:before {
|
||||
content: "\e918";
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon {
|
||||
user-select: none;
|
||||
}
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 22px;
|
||||
max-width: 22px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
i.fa_big {
|
||||
font-size: 18px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
padding-top: 1px;
|
||||
text-align: center;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.dialog .message_box_icon {
|
||||
font-size: 40pt;
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
height: 54px;
|
||||
min-width: 61px;
|
||||
max-width: 62px;
|
||||
}
|
||||
.dialog .message_box_icon.fa {
|
||||
font-size: 35pt;
|
||||
}
|
||||
.dialog img.message_box_icon {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
/*Vars*/
|
||||
body {
|
||||
--color-back: #181b1f;
|
||||
--color-dark: #101316;
|
||||
--color-border: #101316;
|
||||
--color-ui: #1e2127;
|
||||
--color-accent: #3e90ff;
|
||||
--color-button: #33383f;
|
||||
--color-selected: #3b3e49;
|
||||
--color-elevated: #272a31;
|
||||
--color-frame: #121418;
|
||||
--color-text: #cacad4;
|
||||
--color-light: #f4f3ff;
|
||||
--color-accent_text: #000006;
|
||||
--color-bright_ui_text: #000006;
|
||||
--color-subtle_text: #848891;
|
||||
--color-bright_ui: #f4f3ff;
|
||||
--color-bright_border: var(--color-text);
|
||||
--color-grid: #30333d;
|
||||
--color-wireframe: #576f82;
|
||||
--color-checkerboard: #14171b;
|
||||
|
||||
--color-menu_separator: #b0afba;
|
||||
--color-guidelines: rgba(136, 150, 157, 0.35);
|
||||
|
||||
--color-close: #d62e3f;
|
||||
--color-confirm: #90ee90;
|
||||
--color-error: #ff2a51;
|
||||
--color-warning: #ffc400;
|
||||
--color-stream: #6442A4;
|
||||
|
||||
--color-axis-x: #ff1242;
|
||||
--color-axis-y: #23d400;
|
||||
--color-axis-z: #0894ed;
|
||||
--color-axis-u: #23d4ed;
|
||||
--color-axis-v: #ff12ed;
|
||||
--color-axis-w: #ffd442;
|
||||
|
||||
--color-spline-handle-mirrored: #ff1242;
|
||||
--color-spline-handle-aligned: #F0B000;
|
||||
--color-spline-handle-free: #00D123;
|
||||
|
||||
--font-custom-main: '';
|
||||
--font-custom-headline: '';
|
||||
--font-custom-code: '';
|
||||
|
||||
--font-main: var(--font-custom-main), Assistant, segoe ui, sans-serif;
|
||||
--font-headline: var(--font-custom-headline), Montserrat, segoe ui, sans-serif;
|
||||
--font-code: var(--font-custom-code), Consolas, Monospace;
|
||||
}
|
||||
|
||||
/*Elements*/
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
font-family: var(--font-main);
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
color: var(--color-text);
|
||||
outline-color: var(--color-accent);
|
||||
background-color: var(--color-dark);
|
||||
image-rendering: pixelated;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
hr {
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin: 12px 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-headline);
|
||||
margin: 12px 0 8px 0;
|
||||
}
|
||||
h1 {
|
||||
letter-spacing: -0.03em;
|
||||
font-weight: 800;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.28em;
|
||||
font-weight: inherit;
|
||||
margin-left: 16px;
|
||||
min-width: 10px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*Inputs*/
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
-webkit-user-select: initial;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
background: var(--color-button);
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: default;
|
||||
outline: none;
|
||||
height: 32px;
|
||||
min-width: 100px;
|
||||
width: auto;
|
||||
color: var(--color-text);
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
button.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-accent_text) !important;
|
||||
}
|
||||
button:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
button.minor {
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
button.minor:hover {
|
||||
color: var(--color-light) !important;
|
||||
}
|
||||
button > i {
|
||||
pointer-events: none;
|
||||
vertical-align: sub;
|
||||
margin-right: 4px;
|
||||
}
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
outline-color: var(--color-accent);
|
||||
border: none;
|
||||
background-color: var(--color-button);
|
||||
height: 30px;
|
||||
padding-top: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
select:hover{
|
||||
color: var(--color-light);
|
||||
}
|
||||
select:focus{
|
||||
text-decoration: underline;
|
||||
}
|
||||
select option {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--color-back);
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: -webkit-fill-available;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-back);
|
||||
color: var(--color-text);
|
||||
border-radius: 5px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
}
|
||||
div[contenteditable="true"] {
|
||||
user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
}
|
||||
div.bb-select,
|
||||
select {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: var(--color-button);
|
||||
text-align: left;
|
||||
height: 30px;
|
||||
min-width: 50px;
|
||||
padding-top: 4px;
|
||||
padding-left: 8px;
|
||||
padding-right: 24px;
|
||||
border-radius: 5px;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.bb-select:hover,
|
||||
select {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
div.bb-select::before {
|
||||
content: "\f0d7";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
pointer-events: none;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appeareance: none;
|
||||
}
|
||||
input[type=range] {
|
||||
background-color: transparent;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
--color-track: var(--color-grid);
|
||||
--color-thumb: var(--color-accent);
|
||||
--color-center: var(--color-back);
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-top: -9px;
|
||||
border: none;
|
||||
background-color: var(--color-center);
|
||||
border: 2px solid var(--color-thumb);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border:none;
|
||||
background-color: var(--color-center);
|
||||
border: 2px solid var(--color-thumb);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
input[type=range]:not([disabled=disabled])::-webkit-slider-thumb:hover {
|
||||
background-color: var(--color-thumb);
|
||||
border: none;
|
||||
}
|
||||
input[type=range]:not([disabled=disabled])::-moz-range-thumb:hover {
|
||||
background-color: var(--color-thumb);
|
||||
border: none;
|
||||
}
|
||||
input[type=range][disabled=disabled]::-webkit-slider-thumb {
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
input[type=range][disabled=disabled]::-moz-range-thumb {
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
background: var(--color-track);
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
cursor: pointer;
|
||||
background: var(--color-track);
|
||||
border-radius: 3px;
|
||||
}
|
||||
input[type=text].dark_bordered:read-only {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 30px var(--color-back) inset !important;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
-webkit-text-fill-color: var(--color-text) !important;
|
||||
border-left: 4px solid var(--color-confirm);
|
||||
}
|
||||
input[type=password] {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
input[type=checkbox]::before {
|
||||
content: "\f0c8";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 300;
|
||||
font-size: 15pt;
|
||||
}
|
||||
input[type=checkbox]:checked::before {
|
||||
content: "\f14a";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 600;
|
||||
}
|
||||
input[type=checkbox]:focus, input[type=radio]:focus {
|
||||
color: var(--color-light);
|
||||
}
|
||||
input[type=checkbox][disabled=disabled] {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
input[type=checkbox].toggle_switch {
|
||||
height: 22px;
|
||||
width: 46px;
|
||||
background-color: var(--color-button);
|
||||
position: relative;
|
||||
--color: var(--color-text);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
transition: background-color 70ms ease-out;
|
||||
}
|
||||
input[type=checkbox].toggle_switch:checked {
|
||||
background-color: var(--color-accent);
|
||||
--color: var(--color-light);
|
||||
}
|
||||
input[type=checkbox].toggle_switch::before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin: 6px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: left 120ms ease-out, background-color 120ms ease-out;
|
||||
background-color: var(--color);
|
||||
}
|
||||
input[type=checkbox].toggle_switch:checked::before {
|
||||
left: calc(100% - 22px);
|
||||
}
|
||||
|
||||
input[type=radio]::before {
|
||||
content: "\f111";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 300;
|
||||
font-size: 15pt;
|
||||
}
|
||||
input[type=radio]:checked::before {
|
||||
content: "\f192";
|
||||
}
|
||||
input[type=radio][disabled=disabled] {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus {
|
||||
transition: background-color 600000s 0s, color 600000s 0s;
|
||||
}
|
||||
.numeric_input {
|
||||
position: relative;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.numeric_input > input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.numeric_input > div.tool {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
right: 1px;
|
||||
top: 0;
|
||||
color: var(--color-subtle_text);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.numeric_input > div.tool > i {
|
||||
font-size: 18px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
div.nslide {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
padding-left: 6px;
|
||||
cursor: e-resize;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
background-color: var(--color-elevated);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.tool.nslide_tool.has_percentage_bar .nslide::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
width: calc(var(--percentage) * 1%);
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.tool.nslide_tool.is_colored .nslide::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-color: var(--corner-color);
|
||||
border-bottom-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
div.nslide_arrow {
|
||||
position: absolute;
|
||||
z-index: 17;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
margin-top: -29px;
|
||||
user-select: none;
|
||||
margin-left: -42px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
div.nslide.editing {
|
||||
cursor: text;
|
||||
}
|
||||
.numeric_input.is_colored::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-color: var(--corner-color);
|
||||
border-bottom-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
|
||||
input.toggle_panel {
|
||||
display: none;
|
||||
}
|
||||
label.toggle_panel {
|
||||
height: 30px;
|
||||
width: 56px;
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
margin: 2px;
|
||||
}
|
||||
label.toggle_panel:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
input:checked + label.toggle_panel {
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
input:checked + label.toggle_panel:hover {
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
.y_scrollable {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
+488
@@ -0,0 +1,488 @@
|
||||
/***
|
||||
Spectrum Colorpicker v1.8.0
|
||||
https://github.com/bgrins/spectrum
|
||||
Author: Brian Grinstead
|
||||
License: MIT
|
||||
***/
|
||||
@layer lib {
|
||||
.sp-container {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display:inline-block;
|
||||
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-container:not(.sp-flat) {
|
||||
z-index: 42;
|
||||
}
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sp-container.sp-flat .sp-picker-container {
|
||||
width: calc(100% - 4px);
|
||||
padding: 2px;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
}
|
||||
.sp-container.sp-flat .sp-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-flat .sp-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Fix for * { box-sizing: border-box; } */
|
||||
.sp-container,
|
||||
.sp-container * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
|
||||
.sp-top {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
display:inline-block;
|
||||
}
|
||||
.sp-top-inner {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom: 4px;
|
||||
right:0;
|
||||
}
|
||||
.sp-alpha-enabled .sp-top-inner {
|
||||
bottom: 16px;
|
||||
}
|
||||
.sp-color {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right: 32px;
|
||||
}
|
||||
.sp-hue {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top:30px;
|
||||
height: 77.5%;
|
||||
}
|
||||
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
.sp-sat, .sp-val {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
.sp-alpha-enabled .sp-top {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sp-alpha-enabled .sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: -4px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 12px;
|
||||
margin-top: -6px;
|
||||
background-color: var(--color-ui);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.sp-alpha-inner:hover .sp-alpha-handle {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 22px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-clear.sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Don't allow text selection */
|
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select: -moz-none;
|
||||
-o-user-select:none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-input-disabled .sp-input-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-buttons-disabled .sp-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-only .sp-picker-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-disabled .sp-palette-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
|
||||
/* IE filters do not support multiple color stops.
|
||||
Generate 6 divs, line them up, and do two color gradients for each.
|
||||
Yes, really.
|
||||
*/
|
||||
.sp-1 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
|
||||
.sp-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Clearfix hack */
|
||||
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
|
||||
.sp-cf:after { clear: both; }
|
||||
|
||||
body.is_touch .sp-fill { padding-top: 64%; }
|
||||
|
||||
.sp-dragger {
|
||||
border-radius: 6px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-light);
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
margin-top: 3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top:0;
|
||||
cursor:pointer;
|
||||
height: 0;
|
||||
left: -3px;
|
||||
right: -3px;
|
||||
margin-top: -8px;
|
||||
border-color: var(--color-light);
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
margin-top: -8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
Theme authors:
|
||||
Here are the basic themeable display options (colors, fonts, global widths).
|
||||
See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
*/
|
||||
|
||||
.sp-container {
|
||||
border-radius: 0;
|
||||
background-color: var(--color-ui);
|
||||
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.56);
|
||||
border-radius: 6px;
|
||||
padding: 0;
|
||||
}
|
||||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.sp-input-container {
|
||||
float: left;
|
||||
width: 48%;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.sp-input {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
padding-left: 4px;
|
||||
background-color: var(--color-back);
|
||||
border: 1px solid var(--color-border);
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.8em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sp-input.sp-validation-error {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.sp-picker-container , .sp-palette-container {
|
||||
float:left;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: 172px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* Palettes */
|
||||
.sp-palette-container {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sp-palette-only .sp-palette-container {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-el {
|
||||
display: block;
|
||||
position:relative;
|
||||
float:left;
|
||||
width: 24px;
|
||||
height: 15px;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
border:solid 2px transparent;
|
||||
}
|
||||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.sp-thumb-el {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.sp-initial {
|
||||
float: left;
|
||||
border: solid 1px #333;
|
||||
}
|
||||
.sp-initial span {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border:none;
|
||||
display:block;
|
||||
float:left;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.sp-initial .sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
float: right;
|
||||
height: 27px;
|
||||
}
|
||||
.sp-button-container a:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
.sp-replacer {
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
padding: 6px;
|
||||
height: 30px;
|
||||
display:inline-block;
|
||||
color: var(--color-text);
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.sp-replacer.sp-disabled {
|
||||
cursor:default;
|
||||
border-color: silver;
|
||||
color: silver;
|
||||
}
|
||||
.sp-dd {
|
||||
padding: 2px 0;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
float:left;
|
||||
font-size:10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sp-preview {
|
||||
position:relative;
|
||||
width:25px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
float:left;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sp-palette {
|
||||
width: 40px;
|
||||
max-height: 220px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.sp-palette .sp-thumb-el {
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
margin: 1px;
|
||||
border: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
||||
.sp-reset {
|
||||
font-size: 11px;
|
||||
margin:0;
|
||||
padding:2px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
text-decoration:none;
|
||||
}
|
||||
.sp-cancel {
|
||||
font-size: 11px;
|
||||
margin:0;
|
||||
padding:2px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
text-decoration:none;
|
||||
}
|
||||
.sp-choose {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.sp-preview, .sp-alpha, .sp-thumb-el {
|
||||
position:relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-inner {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-clear-display {
|
||||
background-repeat:no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,612 @@
|
||||
@layer base {
|
||||
|
||||
/*Start Screen*/
|
||||
#mode_screen_start {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#start_screen {
|
||||
min-height: 300px;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 36px 0;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, var(--color-ui) 5%, var(--color-dark) 60%);
|
||||
}
|
||||
body.is_mobile #start_screen {
|
||||
padding: 0;
|
||||
}
|
||||
#start_screen h3 {
|
||||
margin: 0;
|
||||
}
|
||||
#start_screen .start_screen_features h3 {
|
||||
font-weight: 800;
|
||||
}
|
||||
#start_screen .bar.next_to_title {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
}
|
||||
#start_screen button {
|
||||
margin-right: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
#start_screen .recent_project {
|
||||
margin: 2px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen .recent_project:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#start_screen .recent_project .icon_wrapper {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
#start_screen .recent_project_name {
|
||||
font-size: 1.1em;
|
||||
overflow-x: hidden;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
margin: 0 4px;
|
||||
}
|
||||
#start_screen .recent_project_date {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
span.recent_project_date:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 26px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
#start_screen .recent_favorite_button {
|
||||
color: var(--color-subtle_text);
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
--color-active-favorite: #f9c300;
|
||||
}
|
||||
#start_screen .recent_project:hover .recent_favorite_button {
|
||||
color: var(--color-subtle_text);
|
||||
visibility: visible;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .recent_favorite_button {
|
||||
color: var(--color-text);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
#start_screen .recent_project .recent_favorite_button:hover {
|
||||
color: var(--color-light);
|
||||
visibility: visible;
|
||||
}
|
||||
#start_screen .recent_favorite_button.favorite_enabled {
|
||||
visibility: visible;
|
||||
color: #ffda24;
|
||||
}
|
||||
#start_screen div.start_screen_right .recent_favorite_button > i {
|
||||
font-size: 16px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
#start_screen .recent_favorite_button.favorite_enabled > i {
|
||||
color: var(--color-active-favorite);
|
||||
}
|
||||
|
||||
#start_screen_view_menu {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 20px;
|
||||
}
|
||||
#start_screen_view_menu li.selected {
|
||||
border-bottom: 3px solid var(--color-accent);
|
||||
}
|
||||
|
||||
#start_screen .recent_project.thumbnail {
|
||||
display: block;
|
||||
margin: 0;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background-color: var(--color-elevated);
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .thumbnail_image {
|
||||
display: block;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover {
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .recent_project_name {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .icon_wrapper {
|
||||
position: absolute;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
padding: 2px;
|
||||
color: var(--color-text);
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover .recent_project_name {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#start_files ul.redact li.recent_project.thumbnail .thumbnail_image {
|
||||
background: transparent !important;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover .icon_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#start_screen_view_menu .search_bar {
|
||||
min-width: 38px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#start_screen > content {
|
||||
display: block;
|
||||
max-width: 1000px;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: linear-gradient(180deg, var(--color-ui) 160px, var(--color-back) 1000px);
|
||||
box-shadow: 0 0 18px #00000060;
|
||||
overflow-x: hidden;
|
||||
image-rendering: auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#start_screen > content > section {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
#start_screen > content > section.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
div.start_screen_left, div.start_screen_right {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
max-height: 606px;
|
||||
}
|
||||
div.start_screen_right > ul {
|
||||
max-height: 470px;
|
||||
padding-right: 5px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px ,1fr));
|
||||
grid-gap: 5px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
div.start_screen_right > ul.recent_list_grid {
|
||||
display: grid;
|
||||
margin-left: 0;
|
||||
padding: 4px;
|
||||
gap: 8px;
|
||||
}
|
||||
#start_screen div.start_screen_left {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
#start_screen div.graphic:not(.graphic_icon) {
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
#start_screen div.graphic p {
|
||||
position: absolute;
|
||||
font-size: 0.96em;
|
||||
}
|
||||
#start_screen div.graphic.graphic_icon i {
|
||||
font-size: 40px;
|
||||
width: 42px;
|
||||
max-width: unset;
|
||||
margin-top: 4px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
#start_screen .start_screen_graphic_description {
|
||||
bottom: 15px;
|
||||
right: 0;
|
||||
padding: 2px;
|
||||
padding-right: 15px;
|
||||
padding-left: 100px;
|
||||
background: linear-gradient(90deg, rgba(3,86,112,0) 0%, rgba(0,10,22,0.63) 34%, rgba(0,9,20,0.72) 45%);
|
||||
color: #d5d5d5;
|
||||
position: absolute;
|
||||
}
|
||||
#start_screen div.start_screen_right {
|
||||
flex-grow: 1;
|
||||
width: 70%;
|
||||
}
|
||||
#start_screen section.vertical div.start_screen_right {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
#start_screen i.start_screen_close_button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen i.start_screen_close_button:not(:hover) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#start_screen section.vertical .start_screen_right {
|
||||
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
#start_screen section.vertical.bright_ui .start_screen_right {
|
||||
box-shadow: 0 0 14px #00103030;
|
||||
}
|
||||
#start_screen .start_screen_features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
}
|
||||
#start_screen .start_screen_features > li {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 7px;
|
||||
padding: 7px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
#start_screen .start_screen_features > li:nth-child(odd) {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
#start_screen .start_screen_features > li > * {
|
||||
max-width: 100%;
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
}
|
||||
#start_screen .start_screen_features > li > img {
|
||||
max-height: 230px;
|
||||
width: 58%;
|
||||
border-radius: 11px;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
#start_screen .start_screen_features > li > h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
@media (max-device-width: 640px) {
|
||||
#start_screen {
|
||||
width: 100%;
|
||||
}
|
||||
#start_screen > content {
|
||||
margin-top: 0px;
|
||||
margin-top: 0px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
max-height: 100%;
|
||||
}
|
||||
#start_screen > content > section {
|
||||
display: block;
|
||||
}
|
||||
#start_screen > content > section > div.start_screen_right {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen > content > section > div.start_screen_left {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen > content > section > div.start_screen_left {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen .start_screen_features > li {
|
||||
flex-direction: column !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
#start_screen .start_screen_features > li > * {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#splash_screen {
|
||||
aspect-ratio: 21/9;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
#splash_screen .splash_art_slideshow_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
#splash_screen .splash_art_slideshow_image.slideshow_previous {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
animation: fade_out_slideshow 500ms forwards;
|
||||
}
|
||||
@keyframes fade_out_slideshow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.splash_art_slideshow_points {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
#splash_screen:hover .splash_art_slideshow_points {
|
||||
opacity: 1;
|
||||
}
|
||||
.splash_art_slideshow_points > li {
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.splash_art_slideshow_points > li::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
margin-top: 9px;
|
||||
background-color: var(--color-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.splash_art_slideshow_points > li:hover::after {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
.splash_art_slideshow_points > li.selected::after {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
|
||||
#start_files div.start_screen_left {
|
||||
width: 30%;
|
||||
padding: 20px 0 0px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#start_files div.start_screen_right {
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
}
|
||||
#start_files div.start_screen_left h2 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
#start_files div.start_screen_left > ul {
|
||||
padding-bottom: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#start_files div.start_screen_right i {
|
||||
vertical-align: sub;
|
||||
}
|
||||
.tool.quickstart_button i {
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
|
||||
#start_files li.format_category {
|
||||
margin-top: 16px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
#start_files li.format_category > label {
|
||||
color: var(--color-subtle_text);
|
||||
font-size: 18px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
#start_files li.format_entry {
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
padding-left: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#start_files li.format_entry span.icon_wrapper {
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
display: flex;
|
||||
}
|
||||
#start_files li.format_entry > * {
|
||||
cursor: inherit;
|
||||
}
|
||||
#start_files li.format_entry:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#start_files li.format_entry.selected {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
#start_files li.format_entry.selected::after {
|
||||
float: right;
|
||||
content: "\f105";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.format_entry i {
|
||||
font-size: 18pt;
|
||||
height: 22px;
|
||||
margin: 2px 8px 0px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.format_entry i.fa_big {
|
||||
font-size: 16pt;
|
||||
}
|
||||
.format_entry.start_screen_link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.format_entry.start_screen_link::after {
|
||||
float: right;
|
||||
content: "\f08e";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
color: var(--color-subtle_text);
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#start_screen .start_screen_format_page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.format_target {
|
||||
padding: 10px 0;
|
||||
margin-bottom: 22px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.format_target span {
|
||||
padding: 2px 10px;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 16px;
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
#start_files .button_bar {
|
||||
text-align: left;
|
||||
padding-right: 14px;
|
||||
margin-top: auto;
|
||||
}
|
||||
#start_files .format_page_close_button {
|
||||
margin-top: 8px;
|
||||
margin-left: -2px;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
}
|
||||
.start_screen_format_page button#create_new_model_button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.start_screen_format_page button#create_new_model_button > i {
|
||||
vertical-align: bottom;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
section#keymap_preference {
|
||||
display: block !important;
|
||||
}
|
||||
section#keymap_preference > ul {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
section#keymap_preference > h2 {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
section#keymap_preference > p {
|
||||
padding: 0 20px;
|
||||
}
|
||||
section#keymap_preference .keymap_select_box {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
min-height: 132px;
|
||||
background-color: var(--color-back);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
section#keymap_preference .keymap_select_box:hover {
|
||||
color: var(--color-light);
|
||||
border-color: var(--color-accent);
|
||||
background-color: var(--color-ui);
|
||||
}
|
||||
section#keymap_preference .keymap_select_box p {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
|
||||
#start_screen section#quick_setup {
|
||||
padding: 20px 24px;
|
||||
display: block;
|
||||
border-bottom: 5px solid var(--color-border);
|
||||
border-top: 5px solid var(--color-border);
|
||||
}
|
||||
section#quick_setup > h2 {
|
||||
display: block;
|
||||
}
|
||||
section#quick_setup > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
margin-right: 48px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
section#quick_setup > div > label {
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
section#quick_setup > div .bb-select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
section#quick_setup > div > p {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
.quick_setup_theme {
|
||||
cursor: pointer;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.quick_setup_theme > div {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
padding-top: 8px;
|
||||
background-color: var(--color-ui);
|
||||
cursor: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.quick_setup_theme:hover,
|
||||
.quick_setup_theme.selected {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.quick_setup_theme:hover > div,
|
||||
.quick_setup_theme.selected > div {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
/* W3.CSS 4.04 Apr 2017 by Jan Egil and Borge Refsnes */
|
||||
@layer reset {
|
||||
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
|
||||
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
|
||||
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
|
||||
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
|
||||
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
|
||||
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
|
||||
a{background-color:transparent;-webkit-text-decoration-skip:objects}
|
||||
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
|
||||
dfn{font-style:italic}mark{background:#ff0;color:#000}
|
||||
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
|
||||
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
|
||||
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
|
||||
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
|
||||
button,input{overflow:visible}button,select{text-transform:none}
|
||||
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
|
||||
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
|
||||
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
|
||||
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
|
||||
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
|
||||
[type=checkbox],[type=radio]{padding:0}
|
||||
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
|
||||
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
|
||||
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
|
||||
::-webkit-input-placeholder{color:inherit;opacity:0.54}
|
||||
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
|
||||
/* End extract */
|
||||
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
|
||||
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
|
||||
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
|
||||
hr{border:0;border-top:1px solid #eee;margin:20px 0}
|
||||
}
|
||||
+1293
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user