#spritedoc { position: relative; } #spritedoc canvas { display: none; } .spriteedit-enabled { overflow-y: scroll; } .spriteedit-smoothscroll { scroll-behavior: smooth; } .spriteedit-sorting * { cursor: move !important; cursor: -webkit-grabbing !important; cursor: grabbing !important; } .spriteedit-elastic { -webkit-transition-timing-function: cubic-bezier(0.46, 0, 0.19, 1.44) !important; transition-timing-function: cubic-bezier(0.46, 0, 0.19, 1.44) !important; } .spriteedit-droptarget { outline: 1px dashed #000; } .spriteedit-autoscroll { visibility: hidden; position: fixed; left: 0; right: 0; height: 50px; z-index: 999; } .spriteedit-autoscroll-up { top: 0; } .spriteedit-autoscroll-down { bottom: 0; } .spriteedit-sorting .spriteedit-autoscroll, .spriteedit-dragging .spriteedit-autoscroll { visibility: visible; } .spriteedit-toolbar-container { position: -webkit-sticky; position: sticky; top: 0; z-index: 91; } .spriteedit-toolbar { position: relative; background-color: #FFF; border-bottom: 4px solid #c8ccd1; padding: 0.5em 0; overflow: hidden; -webkit-transition: height 200ms; transition: height 200ms; z-index: 91; } .spriteedit-toolbar-fixed { position: fixed; top: 0; right: 0; margin: 0 !important; } #spriteedit-toolbox { font-weight: bold; vertical-align: middle; width: 10em; } #spritedoc .oo-ui-menuSelectWidget { z-index: 92; } .spriteedit-tool-deprecate .spritedoc-name > code { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } #spriteedit-save { position: absolute; right: 0; bottom: 0.5em; margin-right: 0; } #spriteedit-saveform { display: -ms-flexbox; display: -webkit-box; display: flex; margin-top: 0.5em; } #spriteedit-summary { margin-right: 0.5em; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; max-width: none; } /* XXX: Missing padding, probably fixed in a new version */ #spriteedit-summary .oo-ui-labelElement-label { padding-right: 0.9375em; } #spriteedit-review-button { margin-right: 0.5em; -webkit-box-flex: 0; -ms-flex: none; flex: none; } #spritedoc .mw-headline { display: inline-block; } .spriteedit-handle { -webkit-box-flex: 0; -ms-flex: none; flex: none; background: #AAA; background: -webkit-linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 0 0, -webkit-linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 2px 2px; background: linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 0 0, linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 2px 2px; background-repeat: repeat-y; background-size: 2px 4px; padding-right: 4px; margin-right: 0.3em; cursor: move; cursor: -webkit-grab; cursor: grab; visibility: hidden; opacity: 0; -webkit-transition: opacity 200ms 300ms, visibility 0s linear 500ms; transition: opacity 200ms 300ms, visibility 0s linear 500ms; } .spritedoc-box > .spriteedit-handle { position: absolute; top: 0; left: 0; bottom: 0; } .spriteedit-imageeditingenabled .spritedoc-image { cursor: pointer; } .sprite.spriteedit-replaced-image { display: none; } .spriteedit-add-name { position: absolute; right: -3px; bottom: -3px; margin-right: 0; visibility: hidden; opacity: 0; -webkit-transition: opacity 200ms 300ms, visibility 0s linear 500ms; transition: opacity 200ms 300ms, visibility 0s linear 500ms; z-index: 9; } .spriteedit-hidecontrols .spriteedit-handle, .spriteedit-hidecontrols .spriteedit-add-name { visibility: hidden !important; opacity: 0 !important; -webkit-transition: visibility, opacity !important; transition: visibility, opacity !important; } #spritedoc h3:hover > .spriteedit-handle, .spritedoc-box:hover .spriteedit-handle, .spritedoc-box:hover > .spriteedit-add-name { visibility: visible; opacity: 1; -webkit-transition-delay: 200ms; transition-delay: 200ms; } #spritedoc [contentEditable]:empty:after { content: "\A0"; /* Non-breaking space */ } #spritedoc [contentEditable][data-placeholder]:empty:after { content: attr(data-placeholder); opacity: 0.54; font-style: italic; } .spriteedit-dupe { background-color: #FFC7CE !important; } .spriteedit-ghost { position: fixed !important; z-index: 999; opacity: 0.8; pointer-events: none; } .spriteedit-placeholder { opacity: 0.5; outline: 1px dashed #000; } .spriteedit-processing { background-size: 1em 1em; background-image: -webkit-linear-gradient( 45deg, rgba(204, 204, 204, 0.4) 25%, transparent 25%, transparent 50%, rgba(204, 204, 204, 0.4) 50%, rgba(204, 204, 204, 0.4) 75%, transparent 75%, transparent ); background-image: linear-gradient( 45deg, rgba(204, 204, 204, 0.4) 25%, transparent 25%, transparent 50%, rgba(204, 204, 204, 0.4) 50%, rgba(204, 204, 204, 0.4) 75%, transparent 75%, transparent ); -webkit-animation: spriteedit-processing 1s infinite linear; animation: spriteedit-processing 1s infinite linear; } @-webkit-keyframes spriteedit-processing { 0% { background-position: 0 0; } 100% { background-position: 1em 0; } } @keyframes spriteedit-processing { 0% { background-position: 0 0; } 100% { background-position: 1em 0; } } .spriteedit-tooltip { position: absolute; margin-left: -19px; padding: 9px; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 19px bottom; transform-origin: 19px bottom; -webkit-transition: opacity 350ms, -webkit-transform 350ms; transition: opacity 350ms, -webkit-transform 350ms; transition: transform 350ms, opacity 350ms; z-index: 121; white-space: nowrap; line-height: 1.6; font-size: 0.875em; } .spriteedit-tooltip-horizontal { margin-left: 0; margin-top: -19px; -webkit-transform-origin: right 19px; transform-origin: right 19px; } .spriteedit-tooltip-text, .spriteedit-tooltip-arrow:before { border: 1px solid #CCC; background-color: #FFF; } .spriteedit-tooltip-arrow { position: absolute; bottom: 1px; left: 9px; height: 9px; width: 20px; overflow: hidden; } .spriteedit-tooltip-horizontal .spriteedit-tooltip-arrow { top: 14px; right: -4px; bottom: auto; left: auto; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .spriteedit-tooltip-arrow:before { content: ""; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); height: 10px; width: 10px; left: 4px; top: -6px; padding: 0; } .spriteedit-tooltip-controls .oo-ui-buttonInputWidget, .spriteedit-tooltip-controls .oo-ui-buttonInputWidget .oo-ui-buttonElement-button { display: block; width: 100%; text-align: left; margin-right: 0; } .spriteedit-dialog-overlay { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.2); opacity: 0; -webkit-transition: opacity 300ms; transition: opacity 300ms; z-index: 9000 } .spriteedit-dialog { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; background-color: #FFF; max-width: 90%; max-height: 90%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: width, height, -webkit-transform; transition-property: width, height, -webkit-transform; transition-property: transform, width, height; -webkit-transition-duration: 400ms, 350ms, 350ms; transition-duration: 400ms, 350ms, 350ms; margin: auto; border-radius: 3px; overflow: hidden; line-height: 1.6; font-size: 0.875em; } #spriteedit-dialog-close { position: absolute; top: 0; right: 0; margin-right: 0; } #spriteedit-dialog-close .oo-ui-buttonElement-button { border: 0; border-radius: 0; border-left: 1px solid #CCC; width: 42px; height: 42px; } .spriteedit-dialog-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .spriteedit-dialog-title { text-align: center; font-size: 120%; white-space: nowrap; padding: 0.45em 42px; } .spriteedit-dialog-text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: solid #CCC; border-width: 1px 0; padding: 0.5em; overflow: auto; } .spriteedit-dialog-actions { padding: 0.5em; } .spriteedit-sheet-diff { display: -webkit-box; display: -ms-flexbox; display: flex; } .spriteedit-sheet-diff img { width: 100%; } .spriteedit-old-sheet, .spriteedit-new-sheet { display: inline-block; padding: 1em; } .spriteedit-new-sheet { background-color: #D8ECFF; } .spriteedit-old-sheet { background-color: #FEEEC8; } .spriteedit-ec-editboxes { display: flex; flex-wrap: wrap; } .spriteedit-ec-editboxes > div { flex-grow: 1; margin: 0 1em; } .spriteedit-ec-editboxes .oo-ui-textInputWidget { min-width: 30em; max-width: none; } .spriteedit-ec-editboxes .oo-ui-textInputWidget > .oo-ui-inputWidget-input { min-height: 20em; height: 200em; }