code:
/* --- entrypoint for app ---*/
@use 'vars';
@use './dark';

:root {
    --active-highlight-color: #{vars.$activeHighlightColor};
    --body-bg-color: #{vars.$bodyBgColor};
    --kl-color: #{vars.$klColor};
}

@keyframes consoleIn {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

@keyframes consoleInFast {
    0% {
        opacity: 0.0;
    }
    10% {
        opacity: 1.0;
    }
}

@keyframes consoleOut {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}

body {
    overflow: hidden;
    font-size: 16px;
    overscroll-behavior-x: none; // prevent back gesture in Chrome
    color-scheme: light;
}

body, html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: none;

    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

.g-root { /* some browsers like to overwrite body */
    font-size: 16px;
    font-family: Arial, sans-serif;
}

a:link, a:not([href]) {
    color: var(--kl-color);
    text-decoration: underline;
    cursor: pointer;
}
a:visited {
    color: #536184;
     text-decoration: underline;
 }

a:hover, a:not([href]):hover {
    color: #000;
    text-decoration: underline;
}

.kl-select {
    background: #fff;
}

.grid-hr {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    clear: both;
}

.kl-toolspace {
    background-color: #ddd;
}

.kl-toolspace--left {
    border-right: 1px solid rgb(135, 135, 135);
}

.kl-toolspace--right {
    border-left: 1px solid rgb(135, 135, 135);
}

.kl-toolspace-row {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.6) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px #cecece;
}

.nohighlight {
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

.toolspace-row-button {
    cursor: pointer;
    flex-grow: 1;
}

.toolspace-triangle-button {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}
.toolspace-svg-triangle-button {
    cursor: pointer;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

.toolspace-row-button-hover {
    background: rgba(255, 255, 255, 0.7);
}

.toolspace-row-button:active, .toolspace-triangle-button:active {
    background-color: #ddd;
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.toolspace-svg-triangle-button-hover {
    fill: rgba(255, 255, 255, 0.7);

}

.toolspace-svg-triangle-button:active {
    fill: #ddd;
    filter: url(#innershadow);
}

.toolspace-row-button-activated {
    background: #fff;
    box-shadow: inset 0 2px 0 0 var(--active-highlight-color);
    pointer-events: none;
}

.toolspace-row-button-activated div {
    opacity: 1 !important;
}

.toolspace-row-button-disabled {
     opacity: 0.5;
     pointer-events: none;
 }

.kl-tool-row-border-right {
    border-right: 1px solid rgb(212, 212, 212);
}

.kl-color-picker {
}

.kl-color-picker__h, .kl-color-picker__sv, .kl-color-picker__preview {
    box-shadow: 0 0 0 1px rgb(188, 188, 188);
}

.kl-color-picker--active {
    box-shadow: 0 0 0 1px #fff;
    z-index: 1;
}

.kl-color-picker__secondary {
    box-shadow: 0 0 0 1px rgb(188, 188, 188);
}

.color-picker-preview-button {
    cursor: pointer;
    color: #000;
    opacity: 0.8;
    text-align: center;
    user-select: none;
    -webkit-user-select: none; // safari
}

.color-picker-preview-button-hover {
    background-color: #fff;
    opacity: 1;
    filter: none !important;
}

.color-picker-preview-button-active {
    background-color: #fff;
    opacity: 1;
    box-shadow: inset 0 2px 0 0 var(--active-highlight-color);
    filter: none !important;
}

.slider-wrapper {
    border-radius: 8px;
    box-shadow: 0.5px 1px 0 0 rgba(255,255,255,0.8);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    background: linear-gradient(to bottom, #909090 1%, #b3b3b3 73%);
    color: #333;
    cursor: ew-resize;
}

.slider-wrapper--active {
    background: linear-gradient(to bottom, #7a7a7a 1%, #939393 73%);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
    color: #000;
}

.slider-wrapper--active .slider-inner {
    box-shadow: 2px 2px 10px rgb(145, 145, 145);
    background: #fff;
}

.slider-inner {
    background-color: #fff;
    background-image: linear-gradient(
            to top,
            rgb(232, 232, 232) 0%,
            rgba(255, 255, 255, 1) 70%
    );
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3), 2px 2px 6px rgba(145, 145, 145, 0.49);
    border-radius: 6px 0 0 0;
}

.kl-point-slider__line {
    height: 2px;
    background: #aaa;
}

.kl-point-slider__point {
    position: absolute;
    top: 0;
    background-color: #eaeaea;
    cursor: ew-resize;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 0 3px rgba(0,0,0,0.8);

    &:active {
        box-shadow: 0 0 6px rgba(0,0,0,1);
    }
}

button {
    padding: 5px;
    min-width: 30px;
    font-size: 15px;
    line-height: 17px; // height of icons
    color: #666;
    border: none;
    background-color: #f3f3f3;
    border-radius: 3px;

    background-image: linear-gradient(
            to top,
            rgba(111, 111, 111, 0.1) 0%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0.3) 100%
    );

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px rgba(0,0,0,0.1), 0 2px 3px rgba(0,0,0,0.05);
    user-select: none;
    -webkit-user-select: none;
}

button:hover {
    background-color: #fff;
    color: #777;
    cursor: pointer;
}

button:active {
    background-color: #ddd;
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2), 0 2px 2px #ddd;
}

button:disabled {
    padding: 5px;
    min-width: 30px;
    font-size: 15px;
    color: #999;
    border: none;
    background-color: #ddd;
    border-radius: 3px;

    background-image: linear-gradient(
            to top,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0.3) 100%
    );
    cursor: default;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

button:disabled img {
    opacity: 0.2;
}

button img {
    float: left;
    pointer-events: none;
}

.kl-button-primary {
    background: var(--kl-color);
    color: #fff;
}
.kl-button-primary:hover {
    background-image: linear-gradient(
                    to top,
                    var(--kl-color) -50%,
                    var(--active-highlight-color) 150%
    );
    color: #fff;
}
.kl-button-primary:active {
    background-image: linear-gradient(
                    to top,
                    var(--kl-color) -50%,
                    var(--active-highlight-color) 120%
    );
    color: #fff;
    box-shadow: unset;
}

.grid-button {
    width: 120px;
    margin-left: 10px;
    margin-top: 10px;
}

.kl-popup {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(50, 50, 50, 0.5);
    animation-name: consoleIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    touch-action: pan-y;
}

.kl-popup-box {
    position: relative;
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.45) 0 5px 60px;
}

.kl-popup-box--sm {
    width: 300px;
}

.kl-popup__btn {
    min-width: 80px;
    margin-left: 8px;
    margin-top: 8px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.kl-popup__btn img {
    margin-left: 2px;
    margin-right: 5px;
}

.kl-popup__btn__text {
    flex-grow: 1;
    text-align: center;
}

.poperror, .popok, .popwarning, .popupload {
    padding-left: 104px;
    background-repeat: no-repeat;
    background-position: 20px 20px;
}

@media (max-width: 600px) {
    .poperror, .popok, .popwarning, .popupload {
        padding-left: 35px;
        background-position: 10px 20px;
        background-size: 20px 20px !important;
    }
}

.poperror {
    background-image: url(../img/ui/error.svg);
    background-size: 60px;
}
.popok {
    background-image: url(../img/ui/ok.svg);
    background-size: 60px;
}
.popwarning {
    background-image: url(../img/ui/warning.svg);
    background-size: 60px;
}
.popupload {
    background-image: url(../img/ui/upload-large.svg);
    background-size: 60px;
}

.kl-d-modal-root {
    background: rgba(0, 0, 0, 0.45);
}

.kl-d-modal {
    background: #eee;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 60px;
}

@keyframes topOverlayPulse {
    0% {

    }
    10% {
        padding-top: 12px;
        background-color: var(--kl-color);
    }
    50% {
        padding-top: 7px;
        background-color: var(--kl-color);
    }
    100% {

    }
}

.top-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 271px);
    z-index: 100;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none; // safari

    display: flex;
    justify-content: center;
}
.top-overlay--inner {
    text-align: center;
    padding: 7px 10px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /*box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.3);*/
    /*text-shadow: 0.5px 0.5px rgba(0,0,0,0.5);*/
}

.kl-checkbox {
    display: block;
    user-select: none;
    -webkit-user-select: none; // safari
}
.kl-checkbox--highlight {
     background: #bed5ff;
 }

.kl-checkbox__inner {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
}

.kl-checkbox__inner:hover {
    color: rgba(0, 0, 0, 1);
}

.kl-layer {
    width: 270px;
    height: 36px;
    // padding-left: 25px;
    background-color: rgb(220, 220, 220);
    border: 1px solid rgb(158, 158, 158);
    position: absolute;
    left: 0;
    transition: all 0.1s linear;
    // border-radius: 5px;
    box-sizing: border-box;
    background-image: linear-gradient(to top, rgba(188, 188, 188, 0.1) 0%, rgba(255, 255, 255, 0.3) 100%);

    .kl-layer__label, .kl-layer__opacity-label {
        color: #666;
    }
}

.kl-layer--selected {
    background: #fff;
    border: 1px solid var(--active-highlight-color);
    z-index: 1;

    .kl-layer__label {
        color: #000;
    }
}

.info-hint {
    background: rgb(255, 132, 115);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #d00000;
    margin-bottom: 10px;
}

textarea, input {
    border: 1px solid #b2b2b2;
    box-sizing: border-box;
    background: #fff;
    padding: 5px;
    font-size: 0.95em;
}

textarea:focus, input:focus {
    border: 1px solid #636363;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.kl-textarea::placeholder, .kl-input::placeholder {
    color: #929292;
}

.popup-x {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none; // safari
    filter: brightness(0.9);
}
.popup-x:hover {
    color: #000;
    filter: brightness(0.5);
}

.brush-alpha, .brush-alpha--selected {
    width: 35px;
    height: 35px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #aaa;
    margin-right: 1px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.brush-alpha {
    opacity: 0.4;
    cursor: pointer;
}

.brush-alpha--selected {
    opacity: 1;
    cursor: default;
    background-color: #fff;
    border: 1px solid #76a6ff;
}

iframe {
    border: none;
    box-sizing: border-box;
}

.tabrow {
    background: linear-gradient( to top, rgb(208, 208, 208) 0%, rgba(208, 208, 208, 0) 80% );
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
}

.tabrow__tab {
    user-select: none;
    -webkit-user-select: none; // safari
    cursor: pointer;
    flex-grow: 1;
    height: 100%;
    text-align: center;
    opacity: 0.6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    background-repeat: no-repeat;
    background-position: center;
}
.tabrow__tab-hover {
    background-color: #fff;
}

.tabrow__tab:active:not(.tabrow__tab--opened-accented, .tabrow__tab--opened) {
    background-color: #ddd;
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2), 0 2px 2px #ddd;
}

.tabrow__tab--opened, .tabrow__tab--opened-accented {
    background-color: #f5f5f5;
    opacity: 1;
    cursor: default;
    position: relative;
}

.tabrow__tab--opened-accented {
    box-shadow: inset 0 2px 0 0 var(--active-highlight-color);
}

.tabrow__tab--opened-accented:not(:first-child):before, .tabrow__tab--opened:not(:first-child):before {
    content:" ";
    width: 0;
    height: 0;
    border-left: 2px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 8px solid #f5f5f5;
    position: absolute;
    left: -1.5px;
    bottom: 0px;
}

.tabrow__tab--opened-accented:not(:last-child):after, .tabrow__tab--opened:not(:last-child):after {
    content:" ";
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 8px solid #f5f5f5;
    position: absolute;
    right: -1.5px;
    bottom: 0px;
}

.kl-option-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: -4px;
    margin-left: -4px;
}

.kl-option {
    cursor: pointer;
    padding: 6px 10px;
    margin: 4px 0 0 4px;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.1s ease-in-out;

    color: rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

    user-select: none;
    -webkit-user-select: none; // safari
}

.kl-option--small {
    font-size: 14px;
}

.kl-option--custom-el {
    padding: 0;
}

.kl-option--custom-el:not(.kl-option-selected) > * {
    opacity: 0.5;
}

.kl-option-selected {
    background: #fff;
    color: #000;
    box-shadow: inset 0 0 0 1px var(--active-highlight-color);
    cursor: default;
}

.kl-box-toggle {
    cursor: pointer;
    padding: 6px 10px;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.1s ease-in-out;

    color: rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

    user-select: none;
    -webkit-user-select: none; // safari
}

.kl-box-toggle--active {
    background: #fff;
    color: #000;
    box-shadow: inset 0 0 0 1px var(--active-highlight-color);
    cursor: default;
}

.kl-box-toggle--custom-el {
    padding: 0;
}

.kl-box-toggle--custom-el:not(.kl-box-toggle--active) > * {
    opacity: 0.5;
}

.kl-color-option {
    box-shadow: 0 0 0 1px #aaa;
    cursor: pointer;
    user-select: none;
    text-align: center;
    color: #aaa;
}

.kl-color-option--active {
    box-shadow: 0 0 0 2px var(--active-highlight-color), 0 0 5px 0 var(--active-highlight-color);
}

.tool-dropdown-wrapper {
    background: rgb(241, 241, 241);
    animation-name: dropdownOpen;
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.tool-dropdown-button:hover {
    background: #fff;
}

.tool-dropdown-button:active {
    background-color: #ddd;
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 2px 2px 10px rgba(0, 0, 0, 0.2);*/
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes dropdownOpen {
    from {
        height: 0;
        opacity: 0;
    }
    to {
    }
}

.image-toggle {
    width: 23px;
    height: 23px;
    cursor: pointer;
}
.image-toggle:not(.image-toggle-active) {
    box-shadow: #838383 0 0 0 1px;
    opacity: 0.4;
}
.image-toggle-active {
    box-shadow: var(--active-highlight-color) 0 0 0 2px;
    background-color: #fff;
}
.image-toggle__im {
    width: 100%;
    height: 100%;
    background-size: 83%;
    background-repeat: no-repeat;
    background-position: center;
}

.image-radio-wrapper {
    display: flex;
    gap: 7px;
}

.image-radio-wrapper .image-toggle-active {
    cursor: default;
}

.kl-radio {
    label {
        cursor: pointer;
    }
    label:not(:last-child) {
        margin-right: 10px;
    }
}

.kl-scroller {
    position: fixed;
    cursor: pointer;
    background-color: rgba(155, 155, 155, 0.9);
    filter: invert(1);
    width: 36px;
    height: 36px;
    background-image: url(../img/ui/caret-down.svg);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    user-select: none;
}

.kl-scroller:active {
    background-color: rgba(180, 180, 180, 0.9);
}

.kl-table {
    border-spacing: 0;
    td {
        padding: 0;
    }
}

.kl-2-tabs {
    display: flex;
    justify-content: center;

    .kl-2-tabs__left, .kl-2-tabs__right {
        width: 150px;
        padding: 10px 5px;
        text-align: center;
        transition: background 0.1s ease-in-out;

        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.6);
        color: rgba(0, 0, 0, 0.6);
        border-bottom: none;

        &:hover {
            background: #eee;
        }
    }

    .kl-2-tabs__left {
        border-top-left-radius: 10px;
        border-right: none;
    }

    .kl-2-tabs__right {
        border-top-right-radius: 10px;
        border-left: none;
    }

    .kl-2-tabs--active {
        color: #000;
        background: #fff;
        border: 1px solid var(--active-highlight-color);
        border-bottom: none;
        pointer-events: none;
        &:hover {
            background: #fff;
        }
    }
}

.kl-layer-preview {
    color: #555;
    canvas {
        box-shadow: 0 0 0 1px #9e9e9e;
    }
}

.kl-edit-crop-preview {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

.kl-edit-crop-preview__sel {
    position: absolute;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000, 0 0 40px 1px #000;
}

.kl-text-error {
    color: #f00;
}

.kl-file-no-autosave {
    text-align: center;
    margin-top: 10px;
    background: rgb(243, 243, 161);
    padding: 5px 5px;
    color: rgba(0,0,0,0.65);
    font-size: 15px;
}

.kl-preview-wrapper {
    margin-left: -20px;
    background-color: #9e9e9e;
    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(0, 0, 0, 0.2) 0px -1px inset;
    overflow: hidden;
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-preview-wrapper__canvas {
    position: relative;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.kl-transparent-preview {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px inset, rgba(0, 0, 0, 0.2) 0px -1px inset;
}

.kl-transparent-preview__canvas {
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.kl-text-preview-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.kl-merge-preview {
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.kl-stabilizer {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: rgba(0,0,0,0.6);
    margin-right: -1px;
}

.kl-toolspace-note {
    color: #534a3c;
    background: rgba(255,255,0,0.5);
    border: 1px solid #e7d321;
    border-radius: 5px;
    padding: 8px;
    text-align: center;
}

.kl-import-note {
    background: rgba(255,255,0,0.5);
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #e7d321;
    border-radius: 5px;
}

.kl-curves-graph {
    canvas {
        background: #c6c6c6;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
    }
}

.kl-curves-graph__grip {
    position: absolute;
    background: #fff;
    cursor: move;
    box-shadow: inset 0 0 0 2px #000;
    user-select: none;
    touch-action: none;
}

.kl-storage-preview {
    grid-area: preview;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    box-shadow: inset 0 0 0 1px #aaa;
    background: #cdcdcd;
    color: #545454;
    min-height: 67px;
}

.kl-storage-preview__im {
    display: block;
    max-width: calc(100% - 2px);
    max-height: calc(100% - 2px);
    margin: 0 auto;
    box-shadow: 0 0 0 1px #aaa;
    pointer-events: none;
}

.kl-storage-about {
    cursor: pointer;
    margin-left: 5px;
    width: 19px;
    height: 19px;
    border-radius: 100%;
    text-align: center;
    line-height: 19px;
    font-weight: bold;
    box-shadow: inset 0 0 0 1px #000;
}

.kl-overlay-toolspace {
    position: absolute;
    left: 500px;
    top: 500px;
    background: rgb(221, 221, 221);
    display: none;
    border: 1px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.kl-file-save-row {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin: 10px 10px 0 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    display: flex;
}


code:
$activeHighlightColor: #6e9ef8;
$bodyBgColor: rgb(158,158,158);
$klColor: #2a64f8;

repo_name: Doggermelon/klecks

license: mit


code:
import {EmbedWrapper} from './app/script/embed/bootstrap/embed-wrapper';
/**
 * by bitbof (bitbof.com)
 */
// Important to keep the initial bundle small so there can be a loading screen

import('./app/style/embed.scss'); // loading like this gives it a hash
Object.defineProperty(window, 'Klecks', {
    value: EmbedWrapper,
});


code:
<!DOCTYPE html>

    <meta charset="UTF-8">
    <title>Klecks Help</title>

Help

        About

Video Tutorial

            ▶ Kleki - Introduction Tutorial (2022)

            This tutorial is for Kleki, but most of it also applies to Klecks.

            This video gives you an overview and teaches you how to use the most important features, including: paint bucket, layers, shortcuts, text tool, and more.

Shortcuts

Eyedropper

Right Mouse Button, or Alt + Mouse

Hand Tool

Middle Mouse Button, or Space + Mouse

Hand Tool

Arrow keys

Zoom

Scroll, or hold Z + drag horizontally

Zoom

+ in, - out

Rotate View

Hold R and drag (+ Shift for snapping)

Rotate View

Hold R and press ← or →

Reset Rotation

R + Up-Arrow

Fit Into View

Double click while using Hand Tool, or Home

Reset View

End

Undo

Ctrl + Z or ⌘ + Z

Redo

Ctrl + Y or ⌘ + Y

HUD Color Picker

Ctrl + Alt or ⌘ + Alt

Line Tool

Hold Shift while drawing

Change Brushsize

[ decrease, ] increase

Swap color

X

Paint Bucket

G

Gradient

G

Text Tool

T

Shape Tool

U

Last Brush

B

Eraser

E

Clear Layer

Delete or Backspace

Fill Layer

Enter

Relative Sliding

Drag with Right Mouse Button

Relative Sliding

Scroll-Wheel

Manual Slider Input

Double tap/click on slider

Finegrained Sliding

Pull pointer away vertically

            Touch

Hand Tool

Drag/pinch/twist with 2 fingers

Fit Into View

Double tap with 1 finger

Undo

Tap with 2 fingers

Redo

Tap with 3 fingers

Pressure Sensitivity

            If you use a stylus (Wacom tablet, Apple Pencil, ...) and your browser supports it, then Klecks offers pressure
            sensitivity.
            You can toggle it next to the brush sliders.
            That way your pen pressure can affect brush size and opacity.

Stabilizer

            Stabilization makes it easier to control your lines by lagging behind and averaging your drawing motion.
            This is mostly used to create clean final lineart. It can also help making drawing easier in general when you
            only
            have a mouse.

            The responsiveness of no stabilization is desirable for fast sketching, or for large brush sizes, where jitter
            is
            less visible.

About

            Klecks (Klecks.org, Kleki.com)

            An open-source, community funded, painting tool for the browser. Donate to support further improvements.

            Copyright (c) bitbof

            Additional Credits: glfx.js for filters, Harmony inspired the Sketchy-Brush, FileSaver.js for saving files, ag-psd for PSD import/export.


code:
<!DOCTYPE html>

    <meta charset="UTF-8">
    <title>Klecks</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/png" href="app/img/klecks-icon.png">

Loading Klecks

<link rel="stylesheet" href="app/style/style.scss"/>


code:
/*
Base Language File
- contains hints - hints are not to be translated, they serve as help for the translator
- is the source of truth
- is in English

renaming keys across language files:
- change key name in here
- add property "oldKey" with the old key name
- run sync
-> translations are updated.
*/
{
  "switch-ui-left-right": {
    hint: "Button that switches layout from left to right, to accommodate left handed & right handed visitors.",
    value: "Switch left/right UI"
  },
  "toggle-show-tools": {
    hint: "Button that hides/shows the toolbar.",
    value: "Show/Hide Tools"
  },
  "scroll": {
    hint: 'Verb. As in scrolling a page.',
    value: 'Scroll',
  },
  "donate": "Donate",
  "home": {
    hint: 'button with logo, top left of tools',
    value: 'Home',
  },
  "modal-new-tab": {
    hint: "as in browser tab",
    value: "Open in new tab"
  },

  // Second row of buttons

  "tab-edit": {
    hint: "label for a tab that offer filters for making color adjustments, cropping, transforming, etc.",
    value: "Edit"
  },
  "tab-file": {
    hint: "label for a tab that lets user save the image, import, upload, etc.",
    value: "File"
  },

  "tool-brush": {
    hint: "tool that lets user paint (like in ms paint or photoshop)",
    value: "Brush"
  },
  "tool-paint-bucket": {
    "value": "Paint Bucket"
  },
  "tool-gradient": "Gradient",
  "tool-shape": {
    "hint": "Tool for drawing rectangles, circles, lines",
    "value": "Shape"
  },
  "tool-text": {
    "hint": "Tool for placing text on canvas",
    "value": "Text"
  },
  "tool-hand": {
    "hint": "Tool for navigating (or scrolling around) the canvas. Same name in Photoshop.",
    "value": "Hand Tool"
  },
  "tool-zoom": "Zoom",

  "undo": 'Undo',
  "redo": 'Redo',

  // names of brushes. (show when hovering row of icons below color selection, when using Brush tool)

  "brush-pen": {
    "hint": "Generic \"brush\" that feels a bit like a pen or marker, as opposed to a paint brush.",
    "value": "Pen"
  },
  "brush-blend": {
    "hint": "brush with watercolor feel. Makes colors blend/bleed into each other. Different from smudging though.",
    "value": "Blend"
  },
  "brush-sketchy": {
    hint: 'Made up brush name. Pictures drawn with this brush often look like sketches.',
    value: "Sketchy"
  },
  "brush-pixel": "Pixel",
  "brush-chemy": {
    hint: 'Made up brush name, derived from drawing applications "Webchemy" and "Alchemy"',
    value: 'Chemy',
  },
  "brush-smudge": {
    hint: 'Common brush/tool in image editing software. Smudges colors around canvas.',
    value: 'Smudge',
  },

  // brush settings (below that row of icons)

  "brush-size": "Size",
  "brush-blending": {
    "hint": "Wetness. How much colors will bleed into each other.",
    "value": "Blending"
  },
  "brush-toggle-pressure": {
    "hint": "google \"pressure sensitivity\". Feature of Wacom tablets, Apple Pencil, XP Pen, etc.",
    "value": "Toggle Pressure Sensitivity"
  },

  "brush-pen-circle": {
    "hint": "as in circle shape",
    "value": "Circle"
  },
  "brush-pen-chalk": {
    "hint": "as in chalk texture",
    "value": "Chalk"
  },
  "brush-pen-calligraphy": {
    "hint": "like a \"chisel tip marker\"",
    "value": "Calligraphy"
  },
  "brush-pen-square": {
    "hint": "as in square shape",
    "value": "Square"
  },

  "brush-sketchy-scale": {
    hint: 'How far the connecting lines of sketchy brush can reach.',
    value: 'Scale',
  },

  "brush-pixel-dither": {
    "hint": "Dithering/halftone pattern",
    "value": "Dither"
  },

  "brush-chemy-fill": {
    "hint": "Like in MS Paint. A shape can have be outlined, and filled.",
    "value": "Fill"
  },
  "brush-chemy-stroke": "Stroke",
  "brush-chemy-mirror-x": "Horizontal Symmetry",
  "brush-chemy-mirror-y": "Vertical Symmetry",
  "brush-chemy-gradient": {
    "hint": "as in color gradient",
    "value": "Gradient"
  },

  "brush-eraser-transparent-bg": {
    "hint": "as in transparent background/bottom layer",
    "value": "Transparent Background"
  },

  "stabilizer": {
    hint: 'Common feature in drawing software to make lines smoother',
    value: 'Stabilizer'
  },
  "stabilizer-title": {
    hint: '-title keys are usually more verbose description. shown as a tooltip.',
    value: "Stroke Stabilizer",
  },

  "eyedropper": "Eyedropper",
  "secondary-color": {
    "hint": "or sometimes called \"background\" color. Photoshop, MS Paint, etc. allow user to switch between two colors.",
    "value": "Secondary Color"
  },
  "manual-color-input": {
    hint: 'A dialog where users can manually type the color, each channel a number. "mci" keys all related to this dialog.',
    value: 'Manual Color Input'
  },
  "mci-hex": {
    "hint": "as in hex code. Hex representation of color. „#f00“ → red",
    "value": "Hex"
  },
  "mci-copy": {
    "hint": "verb",
    "value": "Copy"
  },

  "modal-ok": {
    "hint": "main confirmation button in dialogs. Can be to confirm an action, not just acknowledge information.",
    "value": "Ok"
  },
  "modal-cancel": "Cancel",
  "modal-close": {
    "hint": "as in close a dialog box",
    "value": "Close"
  },

  // Layer tab. When pressing layer icon (below the tools)

  "layers-active-layer": {
    hint: 'currently selected layer that user is drawing on',
    value: 'Active Layer'
  },
  "layers-layer": "Layer",
  "layers-copy": {
    hint: 'noun',
    value: 'copy',
  },
  "layers-blending": {
    hint: 'Common feature in image editing & drawing software. All layers-blend- keys relate to this. https://en.wikipedia.org/wiki/Blend_modes',
    value: 'Blending',
  },
  "layers-new": {
    "hint": "action",
    "value": "New Layer"
  },
  "layers-remove": {
    "hint": "action",
    "value": "Remove Layer"
  },
  "layers-duplicate": {
    "hint": "action",
    "value": "Duplicate Layer"
  },
  "layers-merge": {
    "hint": "action",
    "value": "Merge with layer below"
  },
  "layers-rename": {
    "hint": "action",
    "value": "Rename"
  },
  "layers-active-layer-visible": {
    "value": "Active layer is visible"
  },
  "layers-active-layer-hidden": {
    "value": "Active layer is hidden"
  },
  "layers-visibility-toggle": {
    "value": "Layer Visibility"
  },

  // Layer blend modes as seen in Photoshop and other image editing software

  "layers-blend-normal": "normal",
  "layers-blend-darken": "darken",
  "layers-blend-multiply": "multiply",
  "layers-blend-color-burn": "color burn",
  "layers-blend-lighten": "lighten",
  "layers-blend-screen": "screen",
  "layers-blend-color-dodge": "color dodge",
  "layers-blend-overlay": "overlay",
  "layers-blend-soft-light": "soft light",
  "layers-blend-hard-light": "hard light",
  "layers-blend-difference": "difference",
  "layers-blend-exclusion": "exclusion",
  "layers-blend-hue": "hue",
  "layers-blend-saturation": "saturation",
  "layers-blend-color": "color",
  "layers-blend-luminosity": "luminosity",

  "layers-rename-title": {
    "hint": "-title in code usually means it shows up in a tooltip, or it’s the header of a dialog box, so it can be a little bit longer.",
    "value": "Rename Layer"
  },
  "layers-rename-name": {
    "hint": "noun",
    "value": "Name"
  },
  "layers-rename-clear": {
    hint: 'aka action of deleting entered name',
    value: 'Clear Name',
  },
  "layers-rename-sketch": {
    "hint": "noun. Name suggestion for a layer",
    "value": "Sketch"
  },
  "layers-rename-colors": {
    "hint": "noun. Name suggestion for a layer",
    "value": "Colors"
  },
  "layers-rename-shading": {
    "hint": "noun. Name suggestion for a layer",
    "value": "Shading"
  },
  "layers-rename-lines": {
    "hint": "noun. Name suggestion for a layer",
    "value": "Lines"
  },
  "layers-rename-effects": {
    "hint": "noun. Name suggestion for a layer",
    "value": "Effects"
  },
  "layers-rename-foreground": {
    "hint": "noun. Name suggestion for a layer",
    "value": "Foreground"
  },

  "layers-merge-modal-title": "Merge/Mix Layers",
  "layers-merge-description": {
    "hint": "After \":\" a list of mix/blend modes is shown.",
    "value": "Merges the selected layer with the one underneath. Select the mix mode:"
  },

  // File tab (left of three dots)

  "file-no-autosave": {
    hint: "let user know they can't autosave, and there's no cloud storage. Keep short so fits on one line",
    value: 'No autosave, no cloud storage',
  },
  "file-new": {
    "hint": "action",
    "value": "New"
  },
  "file-import": {
    "hint": "action",
    "value": "Import"
  },
  "file-save": {
    "hint": "action",
    "value": "Save"
  },
  "file-format": {
    "value": "File Format",
  },
  "file-copy": {
    "hint": "verb",
    "value": "Copy"
  },
  "file-copy-title": "Copy To Clipboard",
  "file-share": {
    hint: 'Common feature on phones. Pressing share button allows to send data to a different app, e.g. as a text message to someone.',
    value: 'Share',
  },

  // Browser Storage (near bottom of file tab)

  "file-storage": {
    hint: 'Made up term. Allows users to store drawing in the browser. (not synced across devices)',
    value: 'Browser Storage',
  },
  "file-storage-thumb-title": {
    "hint": "when reopening or reloading",
    "value": "Restores when reopening page"
  },
  "file-storage-about": {
    "hint": "link to Browser Storage help/user manual",
    "value": "About Browser Storage"
  },
  "file-storage-cant-access": {
    "hint": "an error. Can’t access the storage.",
    "value": "Can't access"
  },
  "file-storage-empty": {
    hint: 'nothing stored',
    value: 'Empty',
  },
  "file-storage-store": {
    hint: 'verb',
    value: 'Store',
  },
  "file-storage-clear": "Clear",
  "file-storage-storing": {
    "hint": "while it is in the process of storing",
    "value": "Storing"
  },
  "file-storage-overwrite": {
    "hint": "overwrite what is already stored",
    "value": "Overwrite"
  },
  "file-storage-min-ago": {
    hint: '{x} <- needs to stay, it\'s a placeholder.',
    value: "{x}min ago",
  },
  "file-storage-hours-ago": "{x}h ago",
  "file-storage-days-ago": "{x}d ago",
  "file-storage-month-ago": "> 1month ago",
  "file-storage-restored": "Restored from Browser Storage",
  "file-storage-stored": "Stored to Browser Storage",
  "file-storage-failed": "Failed to store to Browser Storage",
  "file-storage-failed-1": "Failed to store. Possible causes:",
  "file-storage-failed-2": "Out of disk space",
  "file-storage-failed-3": "Storage disabled in incognito tab",
  "file-storage-failed-4": {
    "hint": "as in: unsupported feature",
    "value": "Browser doesn't support storage"
  },
  "file-storage-failed-clear": "Failed to clear.",
  "file-upload": {
    "hint": "verb",
    "value": "Upload"
  },

  "cleared-layer": {
    "hint": "the layer has been cleared. It is now empty",
    "value": "Cleared layer"
  },
  "filled": {
    hint: 'layer got filled with a color',
    value: 'Filled',
  },

  "new-title": "New Image",
  "new-current": {
    "hint": "as in \"reuse the current image resolution\"",
    "value": "Current"
  },

  // image dimension presets

  "new-fit": {
    "hint": "make dimensions of image fit your window size",
    "value": "Fit"
  },
  "new-oversize": {
    "hint": "like oversized clothes.",
    "value": "Oversize"
  },
  "new-square": {
    "hint": "square image format",
    "value": "Square"
  },
  "new-landscape": {
    "hint": "https://en.wikipedia.org/wiki/Page_orientation",
    "value": "Landscape"
  },
  "new-portrait": "Portrait",
  "new-screen": {
    "hint": "resolution of computer screen",
    "value": "Screen"
  },
  "new-video": {
    "hint": "dimensions of a video (usually 16:9)",
    "value": "Video"
  },
  "new-din-paper": {
    "hint": "https://en.wikipedia.org/wiki/Paper_size",
    "value": "DIN Paper"
  },

  "new-px": {
    hint: 'abbreviation of pixel',
    value: 'px',
  },
  "new-ratio": {
    hint: 'aspect ratio',
    value: 'Ratio',
  },

  "upload-title": {
    "hint": "\"Imgur\" is a website name.",
    "value": "Upload to Imgur"
  },
  "upload-link-notice": {
    "hint": "Explaining to user even though their upload is unlisted, they should be careful who they share the link with. No password protection.",
    "value": "Anyone with the link to your uploaded image will be able to view it."
  },
  "upload-name": {
    "hint": "noun",
    "value": "Title"
  },
  "upload-title-untitled": "Untitled",
  "upload-caption": {
    "hint": "as in image caption / description",
    "value": "Caption"
  },
  "upload-submit": {
    "hint": "verb",
    "value": "Upload"
  },
  "upload-uploading": {
    "hint": "in the process of uploading",
    "value": "Uploading..."
  },
  "upload-success": "Upload Successful",
  "upload-failed": "Upload failed.",
  "upload-delete": "To delete your image from Imgur visit:",

  "cropcopy-title-copy": "Copy To Clipboard",
  "cropcopy-title-crop": {
    hint: 'Cropping is a common feature in image editing.',
    value: 'Crop',
  },
  "cropcopy-click-hold": "Right-click or press hold to copy.",
  "cropcopy-btn-copy": {
    "hint": "confirmation button. Should be short.",
    "value": "To Clipboard"
  },
  "cropcopy-copied": "Copied.",
  "cropcopy-btn-crop": {
    "hint": "confirmation button. Should be short.",
    "value": "Apply Crop"
  },

  "crop-drag-to-crop": {
    "hint": "drag the mouse to adjust cropping",
    "value": "Drag to crop"
  },

  // Edit tab
  // Button labels in the edit tab. Should be short so the buttons only use one line. Some are found in Photoshop, etc.

  "filter-crop-extend": "Crop/Extend",
  "filter-flip": "Flip",
  "filter-perspective": {
    "hint": "perspective transformation",
    "value": "Perspective"
  },
  "filter-resize": "Resize",
  "filter-rotate": "Rotate",
  "filter-transform": {
    "hint": "more generic transformation. Commonly known as \"free transform\"",
    "value": "Transform"
  },
  "filter-bright-contrast": {
    "hint": "brightness contrast",
    "value": "Bright/Contrast"
  },
  "filter-curves": {
    "hint": "color curves",
    "value": "Curves"
  },
  "filter-hue-sat": "Hue/Saturation",
  "filter-invert": {
    "hint": "invert the colors",
    "value": "Invert"
  },
  "filter-tilt-shift": {
    "hint": "or just depth-of-field. https://en.wikipedia.org/wiki/Tilt%E2%80%93shift_photography",
    "value": "Tilt Shift"
  },
  "filter-to-alpha": {
    hint: 'feature that can isolate line drawings if it is a black and white image.',
    value: 'To Alpha',
  },
  "filter-triangle-blur": {
    "hint": "or just blur",
    "value": "Triangle Blur"
  },
  "filter-unsharp-mask": {
    "hint": "or just sharpen, https://en.wikipedia.org/wiki/Unsharp_masking",
    "value": "Unsharp Mask"
  },

  // dialogs that open when clicking on the buttons in the edit tab.

  "filter-crop-title": {
    "hint": "same as the button, but can be longer",
    "value": "Crop / Extend"
  },
  "filter-crop-description": {
    "hint": "descriptions explain the \"filter\" a tiny bit. Most importantly it says if it’s applied to a single layer, or the entire image (all layer)",
    "value": "Crop or extend the image."
  },
  "filter-crop-left": "Left",
  "filter-crop-right": "Right",
  "filter-crop-top": "Top",
  "filter-crop-bottom": "Bottom",
  "filter-crop-rule-thirds": {
    hint: 'https://en.wikipedia.org/wiki/Rule_of_thirds',
    value: 'Rule of Thirds',
  },
  "filter-crop-fill": {
    "hint": "If image gets extended, what color to fill that new area with",
    "value": "Fill"
  },

  "filter-flip-title": {
    "hint": "same as the button, but can be longer",
    "value": "Flip"
  },
  "filter-flip-description": "Flips layer or whole image.",
  "filter-flip-horizontal": "Horizontal",
  "filter-flip-vertical": "Vertical",
  "filter-flip-image": "Flip Image",
  "filter-flip-layer": "Flip Layer",

  "filter-perspective-title": {
    "hint": "same as the button, but can be longer",
    "value": "Perspective"
  },
  "filter-perspective-description": "Transforms the selected layer.",

  "filter-resize-title": {
    "hint": "same as the button, but can be longer",
    "value": "Resize"
  },
  "filter-resize-description": "Resizes the image.",

  "filter-rotate-title": {
    "hint": "same as the button, but can be longer",
    "value": "Rotate"
  },
  "filter-rotate-description": "Rotates the image.",

  "filter-transform-empty": {
    "hint": "nothing on the layer, just transparency",
    "value": "Layer is empty."
  },
  "filter-transform-title": {
    "hint": "same as the button, but can be longer",
    "value": "Transform"
  },
  "filter-transform-description": {
    "hint": "as in the Shift key.",
    "value": "Transforms selected layer. Hold Shift for additional behavior."
  },
  "filter-transform-rotation": {
    "hint": "or Angle",
    "value": "Rotation"
  },
  "filter-transform-flip": "Flip",
  "filter-transform-center": {
    "hint": "verb or noun",
    "value": "Center"
  },
  "filter-transform-constrain": {
    "hint": "short version of \"constrain proportions\" – feature that locks the aspect ratio",
    "value": "Constrain"
  },
  "filter-transform-snap": {
    "hint": "or snapping. Common feature in graphics software. Makes stuff snap into place so it’s easier to align elements in an image",
    "value": "Snap"
  },
  "filter-transform-snap-title": {
    "hint": "same as above, but as a tooltip",
    "value": "Snap Rotation And Position"
  },

  "filter-bright-contrast-title": {
    "hint": "same as the button, but can be longer",
    "value": "Brightness / Contrast"
  },
  "filter-bright-contrast-description": "Change brightness and contrast for the selected layer.",
  "filter-bright-contrast-brightness": "Brightness",
  "filter-bright-contrast-contrast": "Contrast",

  "filter-curves-title": {
    "hint": "same as the button, but can be longer",
    "value": "Curves"
  },
  "filter-curves-description": "Apply curves on the selected layer.",
  "filter-curves-all": "All",

  "filter-hue-sat-title": {
    "hint": "same as the button, but can be longer",
    "value": "Hue / Saturation"
  },
  "filter-hue-sat-description": "Change hue and saturation for the selected layer.",
  "filter-hue-sat-hue": "Hue",
  "filter-hue-sat-saturation": "Saturation",

  "filter-applied": {
    "hint": "used like this: „Invert“ applied. Informs that a filter was applied",
    "value": "applied"
  },

  "filter-tilt-shift-title": {
    "hint": "same as the button, but can be longer",
    "value": "Tilt Shift"
  },
  "filter-tilt-shift-description": "Applies tilt shift on the selected layer.",
  "filter-tilt-shift-blur": {
    "hint": "words can be individually translated",
    "value": "Blur Radius"
  },
  "filter-tilt-shift-gradient": {
    "hint": "words can be individually translated",
    "value": "Gradient Radius"
  },

  "filter-to-alpha-title": {
    "hint": "same as the button, but can be longer",
    "value": "To Alpha"
  },
  "filter-to-alpha-description": {
    "hint": "after \":\" follow two options",
    "value": "Generates alpha channel for selected layer from:"
  },
  "filter-to-alpha-inverted-lum": {
    "hint": "luminance is same as the layer blend mode \"luminosity\"",
    "value": "Inverted Luminance"
  },
  "filter-to-alpha-lum": "Luminance",
  "filter-to-alpha-replace": {
    "hint": "What color to replace the rgb channels with",
    "value": "Replace RGB"
  },

  "filter-triangle-blur-title": {
    "hint": "same as the button, but can be longer",
    "value": "Triangle Blur"
  },
  "filter-triangle-blur-description": "Applies triangle blur on the selected layer.",

  "filter-unsharp-mask-title": {
    "hint": "same as the button, but can be longer",
    "value": "Unsharp Mask"
  },
  "filter-unsharp-mask-description": "Sharpens the selected layer by scaling pixels away from the average of their neighbors.",
  "filter-unsharp-mask-strength": "Strength",

  "filter-grid": "Grid",
  "filter-grid-description": "Draws grid on selected layer.",

  "filter-noise": "Noise",
  "filter-noise-description": "Adds noise to selected layer.",
  "filter-noise-scale": "Scale",
  "filter-noise-alpha": "Alpha",

  "filter-pattern": "Pattern",
  "filter-pattern-description": "Generates pattern on selected layer. Drag the preview for further controls.",

  "filter-distort": "Distort",
  "filter-distort-description": "Distorts the selected layer.",
  "filter-distort-phase": "Phase",
  "filter-distort-stepsize": "Step Size",
  "filter-distort-sync-xy": "Sync XY",

  "filter-vanish-point": "Vanish Point",
  "filter-vanish-point-title": "Vanishing Point",
  "filter-vanish-point-description": "Adds vanishing point to selected layer. Drag preview to move.",
  "filter-vanish-point-lines": {
    hint: 'As in: the number of lines',
    value: 'Lines',
  },

  "import-opening": {
    "hint": "in the process of opening a large file",
    "value": "Opening file..."
  },
  "import-title": "Import Image",
  "import-too-large": "Image too large, will be downscaled.",
  "import-btn-as-layer": {
    "hint": "import as layer. Button label, should be short",
    "value": "As Layer"
  },
  "import-btn-as-image": {
    "hint": "import as image. Button label, should be short",
    "value": "As Image"
  },
  "import-as-layer-title": "Import Image as New Layer",
  "import-as-layer-description": "Adjust the position of the imported image.",
  "import-as-layer-limit-reached": {
    "hint": "Kleki allows only a certain number of layers",
    "value": "Layer limit reached. Image will be placed on existing layer."
  },
  "import-as-layer-fit": {
    hint: 'verb. imported image made to fit inside canvas.',
    value: 'Fit',
  },
  "import-flatten": {
    hint: 'Turn image that has multiple layers into an image that has only one layer.',
    value: 'Flatten image',
  },
  "import-unsupported-file": {
    "hint": "e.g. user tried to open a WAV",
    "value": "Unsupported file type. See Help for supported types."
  },
  "import-broken-file": {
    "hint": "if an image file is broken",
    "value": "Couldn't load image. File might be corrupted."
  },
  "import-psd-unsupported": {
    "hint": "PSD is photoshop file format. flatten as in „flatten image“ in photoshop. Merged all layers",
    "value": "Unsupported features. PSD had to be flattened."
  },
  "import-psd-limited-support": {
    "hint": "PSD has lots of fancy features that Kleki doesn't have, so when importing a PSD it often has to simplify things. So it might look different compared to when opening in Photoshop. We’re informing the user if they \"flatten\" the image it will be accurate despite losing layers. The user has to weigh, do they care about having layers, or do they care about it looking right.",
    "value": "PSD support is limited. Flattened will more likely look correct."
  },
  "import-psd-too-large": "Image exceeds maximum dimensions of {x} x {x} pixels. Unable to import.",
  "import-psd-size": "Image size",

  // hand tool
  "hand-reset": {
    hint: 'resets zoom (to 100%) and rotation (to 0°)',
    value: 'Reset',
  },
  "hand-fit": {
    hint: 'makes canvas cover whole working area',
    value: 'Fit',
  },

  // paint bucket tool
  "bucket-tolerance": {
    "hint": "a common feature for paint bucket",
    "value": "Tolerance"
  },
  "bucket-sample": {
    "hint": "like \"taking a sample\"",
    "value": "Sample"
  },
  "bucket-sample-title": "Which layers to sample color from",
  "bucket-sample-all": {
    "hint": "all layers",
    "value": "All"
  },
  "bucket-sample-active": {
    "hint": "currently active layer",
    "value": "Active"
  },
  "bucket-sample-above": {
    "hint": "layer above active layer",
    "value": "Above"
  },
  "bucket-grow": {
    "hint": "verb. Or expand.",
    "value": "Grow"
  },
  "bucket-grow-title": "Grow filled area (in pixels)",
  "bucket-contiguous": {
    hint: 'common setting for paint bucket in image editing software',
    value: 'Contiguous',
  },
  "bucket-contiguous-title": {
    "hint": "tooltip explaining Contiguous",
    "value": "Only fill connected areas"
  },

  // gradient tool
  "gradient-linear": 'Linear',
  "gradient-linear-mirror": 'Linear-Mirror',
  "gradient-radial": 'Radial',

  // shape tool
  "shape-stroke": "Stroke",
  "shape-fill": "Fill",
  "shape-rect": {
    "hint": "rectangle shape",
    "value": "Rectangle"
  },
  "shape-ellipse": {
    "hint": "ellipse shape",
    "value": "Ellipse"
  },
  "shape-line": "Line",
  "shape-line-width": "Line Width",
  "shape-outwards": {
    hint: 'grows shape from the center outwards',
    value: 'Outwards',
  },
  "shape-fixed": {
    "hint": "fixed ratio of 1:1",
    "value": "Fixed 1:1"
  },

  // text tool
  "text-instruction": "Click canvas to place text",
  "text-title": "Add Text",
  "text-text": "Text",
  "text-font": "Font",
  "text-placeholder": {
    "hint": "placeholder in text input.",
    "value": "Your text"
  },
  "text-color": "Color",
  "text-size": "Size",
  "text-line-height": "Line Height",
  "text-letter-spacing": 'Letter Spacing',
  "text-left": {
    "hint": "left, center, right text formatting like in Word",
    "value": "Left"
  },
  "text-center": "Center",
  "text-right": "Right",
  "text-italic": "Italic",
  "text-bold": "Bold",

  "save-reminder-title": {
    hint: 'Save Reminder is a popup that shows up after 20 minutes of not saving. Allows user to save on the spot.',
    value: "Unsaved Work",
  },
  "save-reminder-text": {
    hint: 'turns into: "...saved in <strong>12 minutes</strong>. Save..."',
    value: "Image was not saved in {a} minutes{b}. Save now to prevent eventual loss."
  },
  "save-reminder-save-psd": "Save As PSD",
  "save-reminder-psd-layers": "PSD will remember all layers.",
  "backup-drawing": {
    "hint": '(Embed) If the upload failed, the user can backup/download their drawing.',
    "value": 'You can backup your drawing.',
  },

  "submit": "Submit",
  "submit-title": {
    "hint": "tooltip when hovering \"Submit\" button",
    "value": "Submit Drawing"
  },
  "submit-prompt": {
    "hint": "Dialog asking for confirmation",
    "value": "Submit drawing?"
  },
  "submit-submitting": {
    "hint": "in the process of uploading",
    "value": "Submitting"
  },

  "embed-init-loading": {
    "hint": "when opening the app",
    "value": "Loading app"
  },
  "embed-init-waiting": {
    "hint": "The app is loaded, but it’s still waiting for image",
    "value": "Waiting for image"
  },

  "unsaved": "Unsaved",
  "help": {
    "hint": "or user manual",
    "value": "Help"
  },

  "tab-settings": 'Settings',
  "settings-language": 'Language',
  "settings-language-reload": {
    "hint": "changes will be visible after reloading the page",
    "value": "Will update after reloading."
  },
  "settings-theme": 'Theme',
  "theme-dark": 'Dark',
  "theme-light": 'Light',
  "terms-of-service": {
    oldKey: 'upload-tos',
    value: "Terms of Service",
  },
  "licenses": {
    "hint": "as in software licenses",
    "value": "Licenses"
  },
  "source-code": 'Source Code',
  "auto": {
    hint: 'automatically decided',
    value: 'auto'
  },

  'zoom-in': 'Zoom In',
  'zoom-out': 'Zoom Out',
  radius: 'Radius',
  "constrain-proportions": 'Constrain Proportions',
  width: 'Width',
  height: 'Height',
  "opacity": {
    "hint": "for layer opacity, brush opacity, text opacity, ...",
    "value": "Opacity"
  },
  "red": 'Red',
  "green": 'Green',
  "blue": 'Blue',
  "eraser": {
    "hint": "noun. As short as possible",
    "value": "Eraser"
  },
  "center": {
    hint: 'verb',
    value: 'Center',
  },
  "layers": {
    hint: "layers in the context of image editing software",
    value: "Layers",
  },
  "background": {
    "hint": "as in background layer",
    "value": "Background"
  },
  "scaling-algorithm": {
    "hint": "Label for dropdown where user chooses which computer graphics algorithm should be used to scale the image",
    "value": "Scaling Algorithm"
  },
  "algorithm-smooth": "Smooth",
  "algorithm-pixelated": "Pixelated",
  'preview': {
    hint: 'subject. When applying a filter user sees a preview of what the result would look like.',
    value: 'Preview',
  },
  "angle-snap": {
    "hint": "Snapping. Like when transforming an image and it snaps to the side of the frame.",
    "value": "Snap"
  },
  "angle-snap-title": '45° Angle Snapping',
  "lock-alpha": {
    "hint": "Short. Freezes the alpha channel of image. Images consist of 4 channels (red, green, blue, alpha). Alpha lock also found in Procreate and photoshop",
    "value": "Lock Alpha"
  },
  "lock-alpha-title": {
    "hint": "same as 'lock-alpha' but longer version. Shows up as a tooltip when hovering",
    "value": "Locks layer's alpha channel"
  },
  "reverse": {
    hint: 'Reversing the direction of a color gradient',
    value: 'Reverse',
  },
  "compare-before": "Before",
  "compare-after": "After",
  "loading": "Loading"
}


code:
{
  'switch-ui-left-right': {
    hint: 'Button that switches layout from left to right, to accommodate left handed & right handed visitors.',
    original: 'Switch left/right UI',
    value: 'Werkzeuge links / rechts'
  },
  'toggle-show-tools': {
    hint: 'Button that hides/shows the toolbar.',
    original: 'Show/Hide Tools',
    value: 'Werkzeuge Anzeigen/Verbergen'
  },
  scroll: {
    hint: 'Verb. As in scrolling a page.',
    original: 'Scroll',
    value: 'Scroll'
  },
  donate: {
    original: 'Donate',
    value: 'Spenden'
  },
  home: {
    hint: 'button with logo, top left of tools',
    original: 'Home',
    value: 'Home'
  },
  'modal-new-tab': {
    hint: 'as in browser tab',
    original: 'Open in new tab',
    value: 'In neuem Tab öffnen'
  },
  'tab-edit': {
    hint: 'label for a tab that offer filters for making color adjustments, cropping, transforming, etc.',
    original: 'Edit',
    value: 'Edit'
  },
  'tab-file': {
    hint: 'label for a tab that lets user save the image, import, upload, etc.',
    original: 'File',
    value: 'Datei'
  },
  'tool-brush': {
    hint: 'tool that lets user paint (like in ms paint or photoshop)',
    original: 'Brush',
    value: 'Pinsel'
  },
  'tool-paint-bucket': {
    original: 'Paint Bucket',
    value: 'Füllwerkzeug'
  },
  'tool-gradient': {
    original: 'Gradient',
    value: 'Verlauf'
  },
  'tool-shape': {
    hint: 'Tool for drawing rectangles, circles, lines',
    original: 'Shape',
    value: 'Form-Werkzeug'
  },
  'tool-text': {
    hint: 'Tool for placing text on canvas',
    original: 'Text',
    value: 'Text-Werkzeug'
  },
  'tool-hand': {
    hint: 'Tool for navigating (or scrolling around) the canvas. Same name in Photoshop.',
    original: 'Hand Tool',
    value: 'Hand-Werkzeug'
  },
  'tool-zoom': {
    original: 'Zoom',
    value: 'Zoom-Werkzeug'
  },
  undo: {
    original: 'Undo',
    value: 'Rückgängig'
  },
  redo: {
    original: 'Redo',
    value: 'Wiederherstellen'
  },
  'brush-pen': {
    hint: 'Generic "brush" that feels a bit like a pen or marker, as opposed to a paint brush.',
    original: 'Pen',
    value: 'Stift'
  },
  'brush-blend': {
    hint: 'brush with watercolor feel. Makes colors blend/bleed into each other. Different from smudging though.',
    original: 'Blend',
    value: 'Mischpinsel'
  },
  'brush-sketchy': {
    hint: 'Made up brush name. Pictures drawn with this brush often look like sketches.',
    original: 'Sketchy',
    value: 'Skizzierer'
  },
  'brush-pixel': {
    original: 'Pixel',
    value: 'Pixel'
  },
  'brush-chemy': {
    hint: 'Made up brush name, derived from drawing applications "Webchemy" and "Alchemy"',
    original: 'Chemy',
    value: 'Chemy'
  },
  'brush-smudge': {
    hint: 'Common brush/tool in image editing software. Smudges colors around canvas.',
    original: 'Smudge',
    value: 'Wischfinger'
  },
  'brush-size': {
    original: 'Size',
    value: 'Größe'
  },
  'brush-blending': {
    hint: 'Wetness. How much colors will bleed into each other.',
    original: 'Blending',
    value: 'Mischung'
  },
  'brush-toggle-pressure': {
    hint: 'google "pressure sensitivity". Feature of Wacom tablets, Apple Pencil, XP Pen, etc.',
    original: 'Toggle Pressure Sensitivity',
    value: 'Drucksensitivität an/aus'
  },
  'brush-pen-circle': {
    hint: 'as in circle shape',
    original: 'Circle',
    value: 'Kreis'
  },
  'brush-pen-chalk': {
    hint: 'as in chalk texture',
    original: 'Chalk',
    value: 'Kreide'
  },
  'brush-pen-calligraphy': {
    hint: 'like a "chisel tip marker"',
    original: 'Calligraphy',
    value: 'Kalligraphie'
  },
  'brush-pen-square': {
    hint: 'as in square shape',
    original: 'Square',
    value: 'Quadrat'
  },
  'brush-sketchy-scale': {
    hint: 'How far the connecting lines of sketchy brush can reach.',
    original: 'Scale',
    value: 'Ausmaß'
  },
  'brush-pixel-dither': {
    hint: 'Dithering/halftone pattern',
    original: 'Dither',
    value: 'Dither'
  },
  'brush-chemy-fill': {
    hint: 'Like in MS Paint. A shape can have be outlined, and filled.',
    original: 'Fill',
    value: 'Füllen'
  },
  'brush-chemy-stroke': {
    original: 'Stroke',
    value: 'Linie'
  },
  'brush-chemy-mirror-x': {
    original: 'Horizontal Symmetry',
    value: 'Horizontale Symmetrie'
  },
  'brush-chemy-mirror-y': {
    original: 'Vertical Symmetry',
    value: 'Vertikale Symmetrie'
  },
  'brush-chemy-gradient': {
    hint: 'as in color gradient',
    original: 'Gradient',
    value: 'Verlauf'
  },
  'brush-eraser-transparent-bg': {
    hint: 'as in transparent background/bottom layer',
    original: 'Transparent Background',
    value: 'Transparenter Hintergrund'
  },
  stabilizer: {
    hint: 'Common feature in drawing software to make lines smoother',
    original: 'Stabilizer',
    value: 'Stabilisierer'
  },
  'stabilizer-title': {
    hint: '-title keys are usually more verbose description. shown as a tooltip.',
    original: 'Stroke Stabilizer',
    value: 'Linien-Stabilisierer'
  },
  eyedropper: {
    original: 'Eyedropper',
    value: 'Pipette'
  },
  'secondary-color': {
    hint: 'or sometimes called "background" color. Photoshop, MS Paint, etc. allow user to switch between two colors.',
    original: 'Secondary Color',
    value: 'Sekundäre Farbe'
  },
  'manual-color-input': {
    hint: 'A dialog where users can manually type the color, each channel a number. "mci" keys all related to this dialog.',
    original: 'Manual Color Input',
    value: 'Manuelle Farbeingabe'
  },
  'mci-hex': {
    hint: 'as in hex code. Hex representation of color. „#f00“ → red',
    original: 'Hex',
    value: 'Hex'
  },
  'mci-copy': {
    hint: 'verb',
    original: 'Copy',
    value: 'Kopieren'
  },
  'modal-ok': {
    hint: 'main confirmation button in dialogs. Can be to confirm an action, not just acknowledge information.',
    original: 'Ok',
    value: 'Ok'
  },
  'modal-cancel': {
    original: 'Cancel',
    value: 'Abbrechen'
  },
  'modal-close': {
    hint: 'as in close a dialog box',
    original: 'Close',
    value: 'Schließen'
  },
  'layers-active-layer': {
    hint: 'currently selected layer that user is drawing on',
    original: 'Active Layer',
    value: 'Aktive Ebene'
  },
  'layers-layer': {
    original: 'Layer',
    value: 'Ebene'
  },
  'layers-copy': {
    hint: 'noun',
    original: 'copy',
    value: 'Kopie'
  },
  'layers-blending': {
    hint: 'Common feature in image editing & drawing software. All layers-blend- keys relate to this. https://en.wikipedia.org/wiki/Blend_modes',
    original: 'Blending',
    value: 'Modus'
  },
  'layers-new': {
    hint: 'action',
    original: 'New Layer',
    value: 'Neue Ebene'
  },
  'layers-remove': {
    hint: 'action',
    original: 'Remove Layer',
    value: 'Ebene löschen'
  },
  'layers-duplicate': {
    hint: 'action',
    original: 'Duplicate Layer',
    value: 'Ebene duplizieren'
  },
  'layers-merge': {
    hint: 'action',
    original: 'Merge with layer below',
    value: 'Auf untere Ebene reduzieren'
  },
  'layers-rename': {
    hint: 'action',
    original: 'Rename',
    value: 'Umbenennen'
  },
  'layers-active-layer-visible': {
    original: 'Active layer is visible',
    value: 'Aktive Ebene ist eingeblendet'
  },
  'layers-active-layer-hidden': {
    original: 'Active layer is hidden',
    value: 'Aktive Ebene ist ausgeblendet'
  },
  'layers-visibility-toggle': {
    original: 'Layer Visibility',
    value: 'Ebenensichtbarkeit'
  },
  'layers-blend-normal': {
    original: 'normal',
    value: 'Normal'
  },
  'layers-blend-darken': {
    original: 'darken',
    value: 'Abdunkeln'
  },
  'layers-blend-multiply': {
    original: 'multiply',
    value: 'Multiplizieren'
  },
  'layers-blend-color-burn': {
    original: 'color burn',
    value: 'Farbig nachbel.'
  },
  'layers-blend-lighten': {
    original: 'lighten',
    value: 'Aufhellen'
  },
  'layers-blend-screen': {
    original: 'screen',
    value: 'Negativ multipl.'
  },
  'layers-blend-color-dodge': {
    original: 'color dodge',
    value: 'Farbig abwedeln'
  },
  'layers-blend-overlay': {
    original: 'overlay',
    value: 'Überlagern'
  },
  'layers-blend-soft-light': {
    original: 'soft light',
    value: 'Weiches Licht'
  },
  'layers-blend-hard-light': {
    original: 'hard light',
    value: 'Hartes Licht'
  },
  'layers-blend-difference': {
    original: 'difference',
    value: 'Differenz'
  },
  'layers-blend-exclusion': {
    original: 'exclusion',
    value: 'Ausschluss'
  },
  'layers-blend-hue': {
    original: 'hue',
    value: 'Farbton'
  },
  'layers-blend-saturation': {
    original: 'saturation',
    value: 'Sättigung'
  },
  'layers-blend-color': {
    original: 'color',
    value: 'Farbe'
  },
  'layers-blend-luminosity': {
    original: 'luminosity',
    value: 'Luminanz'
  },
  'layers-rename-title': {
    hint: '-title in code usually means it shows up in a tooltip, or it’s the header of a dialog box, so it can be a little bit longer.',
    original: 'Rename Layer',
    value: 'Ebene umbenennen'
  },
  'layers-rename-name': {
    hint: 'noun',
    original: 'Name',
    value: 'Name'
  },
  'layers-rename-clear': {
    hint: 'aka action of deleting entered name',
    original: 'Clear Name',
    value: 'Namen leeren'
  },
  'layers-rename-sketch': {
    hint: 'noun. Name suggestion for a layer',
    original: 'Sketch',
    value: 'Skizze'
  },
  'layers-rename-colors': {
    hint: 'noun. Name suggestion for a layer',
    original: 'Colors',
    value: 'Farben'
  },
  'layers-rename-shading': {
    hint: 'noun. Name suggestion for a layer',
    original: 'Shading',
    value: 'Beleuchtung'
  },
  'layers-rename-lines': {
    hint: 'noun. Name suggestion for a layer',
    original: 'Lines',
    value: 'Linien'
  },
  'layers-rename-effects': {
    hint: 'noun. Name suggestion for a layer',
    original: 'Effects',
    value: 'Effekte'
  },
  'layers-rename-foreground': {
    hint: 'noun. Name suggestion for a layer',
    original: 'Foreground',
    value: 'Vordergrund'
  },
  'layers-merge-modal-title': {
    original: 'Merge/Mix Layers',
    value: 'Ebene Reduzieren'
  },
  'layers-merge-description': {
    hint: 'After ":" a list of mix/blend modes is shown.',
    original: 'Merges the selected layer with the one underneath. Select the mix mode:',
    value: 'Reduziert gewählte Ebene auf die darunter liegende. Wähle den Mischmodus:'
  },
  'file-no-autosave': {
    hint: "let user know they can't autosave, and there's no cloud storage. Keep short so fits on one line",
    original: 'No autosave, no cloud storage',
    value: 'Kein Autosave & Cloud-Speicher'
  },
  'file-new': {
    hint: 'action',
    original: 'New',
    value: 'Neu'
  },
  'file-import': {
    hint: 'action',
    original: 'Import',
    value: 'Öffnen'
  },
  'file-save': {
    hint: 'action',
    original: 'Save',
    value: 'Speichern'
  },
  'file-format': {
    original: 'File Format',
    value: 'Dateiformat'
  },
  'file-copy': {
    hint: 'verb',
    original: 'Copy',
    value: 'Kopieren'
  },
  'file-copy-title': {
    original: 'Copy To Clipboard',
    value: 'Kopieren in Zwischenablage'
  },
  'file-share': {
    hint: 'Common feature on phones. Pressing share button allows to send data to a different app, e.g. as a text message to someone.',
    original: 'Share',
    value: 'Teilen'
  },
  'file-storage': {
    hint: 'Made up term. Allows users to store drawing in the browser. (not synced across devices)',
    original: 'Browser Storage',
    value: 'Browser-Speicher'
  },
  'file-storage-thumb-title': {
    hint: 'when reopening or reloading',
    original: 'Restores when reopening page',
    value: 'Wiederhergestellt bei Neuladen'
  },
  'file-storage-about': {
    hint: 'link to Browser Storage help/user manual',
    original: 'About Browser Storage',
    value: 'Über Browser-Speicher'
  },
  'file-storage-cant-access': {
    hint: 'an error. Can’t access the storage.',
    original: "Can't access",
    value: 'Kein Zugriff'
  },
  'file-storage-empty': {
    hint: 'nothing stored',
    original: 'Empty',
    value: 'Leer'
  },
  'file-storage-store': {
    hint: 'verb',
    original: 'Store',
    value: 'Speichern'
  },
  'file-storage-clear': {
    original: 'Clear',
    value: 'Leeren'
  },
  'file-storage-storing': {
    hint: 'while it is in the process of storing',
    original: 'Storing',
    value: 'Speichert'
  },
  'file-storage-overwrite': {
    hint: 'overwrite what is already stored',
    original: 'Overwrite',
    value: 'Überschreiben'
  },
  'file-storage-min-ago': {
    hint: "{x} <- needs to stay, it's a placeholder.",
    original: '{x}min ago',
    value: 'vor {x} Min'
  },
  'file-storage-hours-ago': {
    original: '{x}h ago',
    value: 'vor {x} h'
  },
  'file-storage-days-ago': {
    original: '{x}d ago',
    value: 'vor {x} T'
  },
  'file-storage-month-ago': {
    original: '> 1month ago',
    value: 'vor >1 Monat'
  },
  'file-storage-restored': {
    original: 'Restored from Browser Storage',
    value: 'Wiederhergestellt (Browser-Speicher)'
  },
  'file-storage-stored': {
    original: 'Stored to Browser Storage',
    value: 'Gespeichert (Browser-Speicher)'
  },
  'file-storage-failed': {
    original: 'Failed to store to Browser Storage',
    value: 'Speichern fehlgeschlagen (Browser-Speicher)'
  },
  'file-storage-failed-1': {
    original: 'Failed to store. Possible causes:',
    value: 'Speichern fehlgeschlagen. Mögliche Gründe:'
  },
  'file-storage-failed-2': {
    original: 'Out of disk space',
    value: 'Ungenügend Speicherplatz vorhanden'
  },
  'file-storage-failed-3': {
    original: 'Storage disabled in incognito tab',
    value: 'Speicher deaktiviert in Inkognito-Tab'
  },
  'file-storage-failed-4': {
    hint: 'as in: unsupported feature',
    original: "Browser doesn't support storage",
    value: 'Browser unterstützt Speicher nicht'
  },
  'file-storage-failed-clear': {
    original: 'Failed to clear.',
    value: 'Leeren fehlgeschlagen.'
  },
  'file-upload': {
    hint: 'verb',
    original: 'Upload',
    value: 'Hochladen'
  },
  'cleared-layer': {
    hint: 'the layer has been cleared. It is now empty',
    original: 'Cleared layer',
    value: 'Ebene geleert'
  },
  filled: {
    hint: 'layer got filled with a color',
    original: 'Filled',
    value: 'Ebene gefüllt'
  },
  'new-title': {
    original: 'New Image',
    value: 'Neues Bild'
  },
  'new-current': {
    hint: 'as in "reuse the current image resolution"',
    original: 'Current',
    value: 'Aktuell'
  },
  'new-fit': {
    hint: 'make dimensions of image fit your window size',
    original: 'Fit',
    value: 'Passen'
  },
  'new-oversize': {
    hint: 'like oversized clothes.',
    original: 'Oversize',
    value: 'Übergroß'
  },
  'new-square': {
    hint: 'square image format',
    original: 'Square',
    value: 'Quadrat'
  },
  'new-landscape': {
    hint: 'https://en.wikipedia.org/wiki/Page_orientation',
    original: 'Landscape',
    value: 'Querformat'
  },
  'new-portrait': {
    original: 'Portrait',
    value: 'Hochformat'
  },
  'new-screen': {
    hint: 'resolution of computer screen',
    original: 'Screen',
    value: 'Bildschirm'
  },
  'new-video': {
    hint: 'dimensions of a video (usually 16:9)',
    original: 'Video',
    value: 'Video'
  },
  'new-din-paper': {
    hint: 'https://en.wikipedia.org/wiki/Paper_size',
    original: 'DIN Paper',
    value: 'DIN Papier'
  },
  'new-px': {
    hint: 'abbreviation of pixel',
    original: 'px',
    value: 'Px'
  },
  'new-ratio': {
    hint: 'aspect ratio',
    original: 'Ratio',
    value: 'Verhältnis'
  },
  'upload-title': {
    hint: '"Imgur" is a website name.',
    original: 'Upload to Imgur',
    value: 'Hochladen auf Imgur'
  },
  'upload-link-notice': {
    hint: 'Explaining to user even though their upload is unlisted, they should be careful who they share the link with. No password protection.',
    original: 'Anyone with the link to your uploaded image will be able to view it.',
    value: 'Jeder, der den Link zu Deinem hochgeladenen Bild hat, kann es sehen.'
  },
  'upload-name': {
    hint: 'noun',
    original: 'Title',
    value: 'Titel'
  },
  'upload-title-untitled': {
    original: 'Untitled',
    value: 'Ohne Titel'
  },
  'upload-caption': {
    hint: 'as in image caption / description',
    original: 'Caption',
    value: 'Beschreibung'
  },
  'upload-submit': {
    hint: 'verb',
    original: 'Upload',
    value: 'Hochladen'
  },
  'upload-uploading': {
    hint: 'in the process of uploading',
    original: 'Uploading...',
    value: 'Läd hoch...'
  },
  'upload-success': {
    original: 'Upload Successful',
    value: 'Erfolgreich Hochgeladen'
  },
  'upload-failed': {
    original: 'Upload failed.',
    value: 'Hochladen fehlgeschlagen.'
  },
  'upload-delete': {
    original: 'To delete your image from Imgur visit:',
    value: 'Um dein Bild zu löschen öffne folgenden Link:'
  },
  'cropcopy-title-copy': {
    original: 'Copy To Clipboard',
    value: 'Kopieren in Zwischenablage'
  },
  'cropcopy-title-crop': {
    hint: 'Cropping is a common feature in image editing.',
    original: 'Crop',
    value: 'zuschneiden'
  },
  'cropcopy-click-hold': {
    original: 'Right-click or press hold to copy.',
    value: 'Rechtsklick oder gedrückt halten für kopieren.'
  },
  'cropcopy-btn-copy': {
    hint: 'confirmation button. Should be short.',
    original: 'To Clipboard',
    value: 'In Zwischenablage'
  },
  'cropcopy-copied': {
    original: 'Copied.',
    value: 'Kopiert.'
  },
  'cropcopy-btn-crop': {
    hint: 'confirmation button. Should be short.',
    original: 'Apply Crop',
    value: 'Zuschneiden'
  },
  'crop-drag-to-crop': {
    hint: 'drag the mouse to adjust cropping',
    original: 'Drag to crop',
    value: 'Ziehen um zuzuschneiden'
  },
  'filter-crop-extend': {
    original: 'Crop/Extend',
    value: 'Arbeitsfläche'
  },
  'filter-flip': {
    original: 'Flip',
    value: 'Spiegeln'
  },
  'filter-perspective': {
    hint: 'perspective transformation',
    original: 'Perspective',
    value: 'Perspektive'
  },
  'filter-resize': {
    original: 'Resize',
    value: 'Skalieren'
  },
  'filter-rotate': {
    original: 'Rotate',
    value: 'Drehen'
  },
  'filter-transform': {
    hint: 'more generic transformation. Commonly known as "free transform"',
    original: 'Transform',
    value: 'Transformier.'
  },
  'filter-bright-contrast': {
    hint: 'brightness contrast',
    original: 'Bright/Contrast',
    value: 'Hell/Kontrast'
  },
  'filter-curves': {
    hint: 'color curves',
    original: 'Curves',
    value: 'Kurven'
  },
  'filter-hue-sat': {
    original: 'Hue/Saturation',
    value: 'Farbe/Sättig'
  },
  'filter-invert': {
    hint: 'invert the colors',
    original: 'Invert',
    value: 'Umkehren'
  },
  'filter-tilt-shift': {
    hint: 'or just depth-of-field. https://en.wikipedia.org/wiki/Tilt%E2%80%93shift_photography',
    original: 'Tilt Shift',
    value: 'Tilt Shift'
  },
  'filter-to-alpha': {
    hint: 'feature that can isolate line drawings if it is a black and white image.',
    original: 'To Alpha',
    value: 'Zu Alpha'
  },
  'filter-triangle-blur': {
    hint: 'or just blur',
    original: 'Triangle Blur',
    value: 'Weichzeichnen'
  },
  'filter-unsharp-mask': {
    hint: 'or just sharpen, https://en.wikipedia.org/wiki/Unsharp_masking',
    original: 'Unsharp Mask',
    value: 'Unscharf mask'
  },
  'filter-crop-title': {
    hint: 'same as the button, but can be longer',
    original: 'Crop / Extend',
    value: 'Arbeitsfläche'
  },
  'filter-crop-description': {
    hint: 'descriptions explain the "filter" a tiny bit. Most importantly it says if it’s applied to a single layer, or the entire image (all layer)',
    original: 'Crop or extend the image.',
    value: 'Schneidet das Bild zu oder erweitert es.'
  },
  'filter-crop-left': {
    original: 'Left',
    value: 'Links'
  },
  'filter-crop-right': {
    original: 'Right',
    value: 'Rechts'
  },
  'filter-crop-top': {
    original: 'Top',
    value: 'Oben'
  },
  'filter-crop-bottom': {
    original: 'Bottom',
    value: 'Unten'
  },
  'filter-crop-rule-thirds': {
    hint: 'https://en.wikipedia.org/wiki/Rule_of_thirds',
    original: 'Rule of Thirds',
    value: 'Drittel-Regel'
  },
  'filter-crop-fill': {
    hint: 'If image gets extended, what color to fill that new area with',
    original: 'Fill',
    value: 'Füllung'
  },
  'filter-flip-title': {
    hint: 'same as the button, but can be longer',
    original: 'Flip',
    value: 'Spiegeln'
  },
  'filter-flip-description': {
    original: 'Flips layer or whole image.',
    value: 'Spiegelt Ebene oder gesamtes Bild.'
  },
  'filter-flip-horizontal': {
    original: 'Horizontal',
    value: 'Horizontal'
  },
  'filter-flip-vertical': {
    original: 'Vertical',
    value: 'Vertikal'
  },
  'filter-flip-image': {
    original: 'Flip Image',
    value: 'Bild'
  },
  'filter-flip-layer': {
    original: 'Flip Layer',
    value: 'Ebene'
  },
  'filter-perspective-title': {
    hint: 'same as the button, but can be longer',
    original: 'Perspective',
    value: 'Perspektive'
  },
  'filter-perspective-description': {
    original: 'Transforms the selected layer.',
    value: 'Transformiert die gewählte Ebene.'
  },
  'filter-resize-title': {
    hint: 'same as the button, but can be longer',
    original: 'Resize',
    value: 'Skalieren'
  },
  'filter-resize-description': {
    original: 'Resizes the image.',
    value: 'Ändert die Größe des Bildes.'
  },
  'filter-rotate-title': {
    hint: 'same as the button, but can be longer',
    original: 'Rotate',
    value: 'Drehen'
  },
  'filter-rotate-description': {
    original: 'Rotates the image.',
    value: 'Dreht das Bild.'
  },
  'filter-transform-empty': {
    hint: 'nothing on the layer, just transparency',
    original: 'Layer is empty.',
    value: 'Ebene ist leer.'
  },
  'filter-transform-title': {
    hint: 'same as the button, but can be longer',
    original: 'Transform',
    value: 'Transformieren'
  },
  'filter-transform-description': {
    hint: 'as in the Shift key.',
    original: 'Transforms selected layer. Hold Shift for additional behavior.',
    value: 'Transformiert die gewählte Ebene. Halte Shift für erweiterte Funktionalität.'
  },
  'filter-transform-rotation': {
    hint: 'or Angle',
    original: 'Rotation',
    value: 'Rotation'
  },
  'filter-transform-flip': {
    original: 'Flip',
    value: 'Spiegel'
  },
  'filter-transform-center': {
    hint: 'verb or noun',
    original: 'Center',
    value: 'Zentrieren'
  },
  'filter-transform-constrain': {
    hint: 'short version of "constrain proportions" – feature that locks the aspect ratio',
    original: 'Constrain',
    value: 'Fest'
  },
  'filter-transform-snap': {
    hint: 'or snapping. Common feature in graphics software. Makes stuff snap into place so it’s easier to align elements in an image',
    original: 'Snap',
    value: 'Einrasten'
  },
  'filter-transform-snap-title': {
    hint: 'same as above, but as a tooltip',
    original: 'Snap Rotation And Position',
    value: 'Rotation und Position einrasten'
  },
  'filter-bright-contrast-title': {
    hint: 'same as the button, but can be longer',
    original: 'Brightness / Contrast',
    value: 'Helligkeit / Kontrast'
  },
  'filter-bright-contrast-description': {
    original: 'Change brightness and contrast for the selected layer.',
    value: 'Ändert Helligkeit und Kontrast der gewählten Ebene.'
  },
  'filter-bright-contrast-brightness': {
    original: 'Brightness',
    value: 'Helligkeit'
  },
  'filter-bright-contrast-contrast': {
    original: 'Contrast',
    value: 'Kontrast'
  },
  'filter-curves-title': {
    hint: 'same as the button, but can be longer',
    original: 'Curves',
    value: 'Kurven'
  },
  'filter-curves-description': {
    original: 'Apply curves on the selected layer.',
    value: 'Wendet Kurven auf gewählte Ebene an.'
  },
  'filter-curves-all': {
    original: 'All',
    value: 'Alle'
  },
  'filter-hue-sat-title': {
    hint: 'same as the button, but can be longer',
    original: 'Hue / Saturation',
    value: 'Farbton / Sättigung'
  },
  'filter-hue-sat-description': {
    original: 'Change hue and saturation for the selected layer.',
    value: 'Ändert Farbton und Sättigung der gewählten Ebene.'
  },
  'filter-hue-sat-hue': {
    original: 'Hue',
    value: 'Farbton'
  },
  'filter-hue-sat-saturation': {
    original: 'Saturation',
    value: 'Sättigung'
  },
  'filter-applied': {
    hint: 'used like this: „Invert“ applied. Informs that a filter was applied',
    original: 'applied',
    value: 'angewendet'
  },
  'filter-tilt-shift-title': {
    hint: 'same as the button, but can be longer',
    original: 'Tilt Shift',
    value: 'Tilt Shift'
  },
  'filter-tilt-shift-description': {
    original: 'Applies tilt shift on the selected layer.',
    value: 'Wendet Tilt Shift auf gewählte Ebene an.'
  },
  'filter-tilt-shift-blur': {
    hint: 'words can be individually translated',
    original: 'Blur Radius',
    value: 'Unschärferadius'
  },
  'filter-tilt-shift-gradient': {
    hint: 'words can be individually translated',
    original: 'Gradient Radius',
    value: 'Verlaufsradius'
  },
  'filter-to-alpha-title': {
    hint: 'same as the button, but can be longer',
    original: 'To Alpha',
    value: 'Zu Alpha'
  },
  'filter-to-alpha-description': {
    hint: 'after ":" follow two options',
    original: 'Generates alpha channel for selected layer from:',
    value: 'Erzeugt Alphakanal für gewählte Ebene aus:'
  },
  'filter-to-alpha-inverted-lum': {
    hint: 'luminance is same as the layer blend mode "luminosity"',
    original: 'Inverted Luminance',
    value: 'Umgekehrte Luminanz'
  },
  'filter-to-alpha-lum': {
    original: 'Luminance',
    value: 'Luminanz'
  },
  'filter-to-alpha-replace': {
    hint: 'What color to replace the rgb channels with',
    original: 'Replace RGB',
    value: 'Ersetze RGB'
  },
  'filter-triangle-blur-title': {
    hint: 'same as the button, but can be longer',
    original: 'Triangle Blur',
    value: 'Dreiecksunschärfe'
  },
  'filter-triangle-blur-description': {
    original: 'Applies triangle blur on the selected layer.',
    value: 'Wendet Dreiecksunschärfe auf gewählte Ebene an.'
  },
  'filter-unsharp-mask-title': {
    hint: 'same as the button, but can be longer',
    original: 'Unsharp Mask',
    value: 'Unscharf maskieren'
  },
  'filter-unsharp-mask-description': {
    original: 'Sharpens the selected layer by scaling pixels away from the average of their neighbors.',
    value: 'Schärft die ausgewählte Ebene durch Skalierung der Pixel weg vom Durchschnitt ihrer Nachbarn.'
  },
  'filter-unsharp-mask-strength': {
    original: 'Strength',
    value: 'Stärke'
  },
  'filter-grid': {
    original: 'Grid',
    value: 'Gitter'
  },
  'filter-grid-description': {
    original: 'Draws grid on selected layer.',
    value: 'Zeichnet Gitter auf gewählte Ebene.'
  },
  'filter-noise': {
    original: 'Noise',
    value: 'Rauschen'
  },
  'filter-noise-description': {
    original: 'Adds noise to selected layer.',
    value: 'Zeichnet Rauschen auf gewählte Ebene.'
  },
  'filter-noise-scale': {
    original: 'Scale',
    value: 'Größe'
  },
  'filter-noise-alpha': {
    original: 'Alpha',
    value: 'Alpha'
  },
  'filter-pattern': {
    original: 'Pattern',
    value: 'Muster'
  },
  'filter-pattern-description': {
    original: 'Generates pattern on selected layer. Drag the preview for further controls.',
    value: 'Erzeugt Muster auf aktiver Ebene. Ziehe in der Vorschau um weitere Parameter zu steuern.'
  },
  'filter-distort': {
    original: 'Distort',
    value: 'Verzerren'
  },
  'filter-distort-description': {
    original: 'Distorts the selected layer.',
    value: 'Verzerrt aktive Ebene.'
  },
  'filter-distort-phase': {
    original: 'Phase',
    value: 'Phase'
  },
  'filter-distort-stepsize': {
    original: 'Step Size',
    value: 'Schrittgröße'
  },
  'filter-distort-sync-xy': {
    original: 'Sync XY',
    value: 'XY koppeln'
  },
  'filter-vanish-point': {
    original: 'Vanish Point',
    value: 'Fluchtpunkt'
  },
  'filter-vanish-point-title': {
    original: 'Vanishing Point',
    value: 'Fluchtpunkt'
  },
  'filter-vanish-point-description': {
    original: 'Adds vanishing point to selected layer. Drag preview to move.',
    value: 'Zeichnet Fluchtpunkt auf aktive Ebene. Ziehe Vorschau zum Verschieben.'
  },
  'filter-vanish-point-lines': {
    hint: 'As in: the number of lines',
    original: 'Lines',
    value: 'Linien'
  },
  'import-opening': {
    hint: 'in the process of opening a large file',
    original: 'Opening file...',
    value: 'Öffne Datei...'
  },
  'import-title': {
    original: 'Import Image',
    value: 'Datei öffnen'
  },
  'import-too-large': {
    original: 'Image too large, will be downscaled.',
    value: 'Bild zu groß, es wird verkleinert.'
  },
  'import-btn-as-layer': {
    hint: 'import as layer. Button label, should be short',
    original: 'As Layer',
    value: 'Als Ebene'
  },
  'import-btn-as-image': {
    hint: 'import as image. Button label, should be short',
    original: 'As Image',
    value: 'Als Bild'
  },
  'import-as-layer-title': {
    original: 'Import Image as New Layer',
    value: 'Öffne Bild als neue Ebene'
  },
  'import-as-layer-description': {
    original: 'Adjust the position of the imported image.',
    value: 'Passe die Position des importierten Bildes an.'
  },
  'import-as-layer-limit-reached': {
    hint: 'Kleki allows only a certain number of layers',
    original: 'Layer limit reached. Image will be placed on existing layer.',
    value: 'Maximale Ebenen erreicht, es wird auf vorhandene Ebene platziert.'
  },
  'import-as-layer-fit': {
    hint: 'verb. imported image made to fit inside canvas.',
    original: 'Fit',
    value: 'Passen'
  },
  'import-flatten': {
    hint: 'Turn image that has multiple layers into an image that has only one layer.',
    original: 'Flatten image',
    value: 'Reduzieren'
  },
  'import-unsupported-file': {
    hint: 'e.g. user tried to open a WAV',
    original: 'Unsupported file type. See Help for supported types.',
    value: 'Nicht unterstützter Dateityp. Siehe Hilfe für unterstützte Typen.'
  },
  'import-broken-file': {
    hint: 'if an image file is broken',
    original: "Couldn't load image. File might be corrupted.",
    value: 'Bild konnte nicht geladen werden. Datei könnte beschädigt sein.'
  },
  'import-psd-unsupported': {
    hint: 'PSD is photoshop file format. flatten as in „flatten image“ in photoshop. Merged all layers',
    original: 'Unsupported features. PSD had to be flattened.',
    value: 'Nicht unterstützte Funktionen. PSD musste auf eine Ebene reduziert werden.'
  },
  'import-psd-limited-support': {
    hint: 'PSD has lots of fancy features that Kleki doesn\'t have, so when importing a PSD it often has to simplify things. So it might look different compared to when opening in Photoshop. We’re informing the user if they "flatten" the image it will be accurate despite losing layers. The user has to weigh, do they care about having layers, or do they care about it looking right.',
    original: 'PSD support is limited. Flattened will more likely look correct.',
    value: 'Begrenzte Unterstützung für PSD. Reduziertes Bild sieht vermutlich korrekter aus.'
  },
  'import-psd-too-large': {
    original: 'Image exceeds maximum dimensions of {x} x {x} pixels. Unable to import.',
    value: 'Bild überschreitet Maximum von {x} x {x} Pixel, kann nicht geöffnet werden.'
  },
  'import-psd-size': {
    original: 'Image size',
    value: 'Bildgröße'
  },
  'hand-reset': {
    hint: 'resets zoom (to 100%) and rotation (to 0°)',
    original: 'Reset',
    value: 'Zurücksetzen'
  },
  'hand-fit': {
    hint: 'makes canvas cover whole working area',
    original: 'Fit',
    value: 'Passen'
  },
  'bucket-tolerance': {
    hint: 'a common feature for paint bucket',
    original: 'Tolerance',
    value: 'Toleranz'
  },
  'bucket-sample': {
    hint: 'like "taking a sample"',
    original: 'Sample',
    value: 'Quelle'
  },
  'bucket-sample-title': {
    original: 'Which layers to sample color from',
    value: 'Von welchen Ebenen wird Farbe gelesen'
  },
  'bucket-sample-all': {
    hint: 'all layers',
    original: 'All',
    value: 'Alle'
  },
  'bucket-sample-active': {
    hint: 'currently active layer',
    original: 'Active',
    value: 'Aktiv'
  },
  'bucket-sample-above': {
    hint: 'layer above active layer',
    original: 'Above',
    value: 'Über'
  },
  'bucket-grow': {
    hint: 'verb. Or expand.',
    original: 'Grow',
    value: 'Wachsen'
  },
  'bucket-grow-title': {
    original: 'Grow filled area (in pixels)',
    value: 'Erweitere gefüllten Bereich (in Pixel)'
  },
  'bucket-contiguous': {
    hint: 'common setting for paint bucket in image editing software',
    original: 'Contiguous',
    value: 'Benachbart'
  },
  'bucket-contiguous-title': {
    hint: 'tooltip explaining Contiguous',
    original: 'Only fill connected areas',
    value: 'Fülle nur miteinander verbundene Bereiche'
  },
  'gradient-linear': {
    original: 'Linear',
    value: 'Linear'
  },
  'gradient-linear-mirror': {
    original: 'Linear-Mirror',
    value: 'Linear Gespiegelt'
  },
  'gradient-radial': {
    original: 'Radial',
    value: 'Radial'
  },
  'shape-stroke': {
    original: 'Stroke',
    value: 'Linie'
  },
  'shape-fill': {
    original: 'Fill',
    value: 'Füllen'
  },
  'shape-rect': {
    hint: 'rectangle shape',
    original: 'Rectangle',
    value: 'Rechteck'
  },
  'shape-ellipse': {
    hint: 'ellipse shape',
    original: 'Ellipse',
    value: 'Ellipse'
  },
  'shape-line': {
    original: 'Line',
    value: 'Linie'
  },
  'shape-line-width': {
    original: 'Line Width',
    value: 'Linienbreite'
  },
  'shape-outwards': {
    hint: 'grows shape from the center outwards',
    original: 'Outwards',
    value: 'Nach Außen'
  },
  'shape-fixed': {
    hint: 'fixed ratio of 1:1',
    original: 'Fixed 1:1',
    value: 'Fest 1:1'
  },
  'text-instruction': {
    original: 'Click canvas to place text',
    value: 'Klicken um Text zu platzieren'
  },
  'text-title': {
    original: 'Add Text',
    value: 'Text Hinzufügen'
  },
  'text-text': {
    original: 'Text',
    value: 'Text'
  },
  'text-font': {
    original: 'Font',
    value: 'Schrift'
  },
  'text-placeholder': {
    hint: 'placeholder in text input.',
    original: 'Your text',
    value: 'Dein Text'
  },
  'text-color': {
    original: 'Color',
    value: 'Farbe'
  },
  'text-size': {
    original: 'Size',
    value: 'Größe'
  },
  'text-line-height': {
    original: 'Line Height',
    value: 'Zeilenhöhe'
  },
  'text-letter-spacing': {
    original: 'Letter Spacing',
    value: 'Zeichenabstand'
  },
  'text-left': {
    hint: 'left, center, right text formatting like in Word',
    original: 'Left',
    value: 'Linksbündig'
  },
  'text-center': {
    original: 'Center',
    value: 'Zentriert'
  },
  'text-right': {
    original: 'Right',
    value: 'Rechtsbündig'
  },
  'text-italic': {
    original: 'Italic',
    value: 'Kursiv'
  },
  'text-bold': {
    original: 'Bold',
    value: 'Fett'
  },
  'save-reminder-title': {
    hint: 'Save Reminder is a popup that shows up after 20 minutes of not saving. Allows user to save on the spot.',
    original: 'Unsaved Work',
    value: 'Ungespeicherter Fortschritt'
  },
  'save-reminder-text': {
    hint: 'turns into: "...saved in <strong>12 minutes</strong>. Save..."',
    original: 'Image was not saved in {a} minutes{b}. Save now to prevent eventual loss.',
    value: 'Dein Bild wurde seit {a} Minuten{b} nicht gespeichert. Speichere jetzt um Datenverlust zu vermeiden.'
  },
  'save-reminder-save-psd': {
    original: 'Save As PSD',
    value: 'Speichere als PSD'
  },
  'save-reminder-psd-layers': {
    original: 'PSD will remember all layers.',
    value: 'PSD merkt sich alle Ebenen.'
  },
  'backup-drawing': {
    hint: '(Embed) If the upload failed, the user can backup/download their drawing.',
    original: 'You can backup your drawing.',
    value: 'Du kannst dein Bild lokal sichern.'
  },
  submit: {
    original: 'Submit',
    value: 'Senden'
  },
  'submit-title': {
    hint: 'tooltip when hovering "Submit" button',
    original: 'Submit Drawing',
    value: 'Bild senden'
  },
  'submit-prompt': {
    hint: 'Dialog asking for confirmation',
    original: 'Submit drawing?',
    value: 'Bild senden?'
  },
  'submit-submitting': {
    hint: 'in the process of uploading',
    original: 'Submitting',
    value: 'Läd hoch'
  },
  'embed-init-loading': {
    hint: 'when opening the app',
    original: 'Loading app',
    value: 'Lade App'
  },
  'embed-init-waiting': {
    hint: 'The app is loaded, but it’s still waiting for image',
    original: 'Waiting for image',
    value: 'Warten auf Bild'
  },
  unsaved: {
    original: 'Unsaved',
    value: 'Ungespeichert'
  },
  help: {
    hint: 'or user manual',
    original: 'Help',
    value: 'Hilfe'
  },
  'tab-settings': {
    original: 'Settings',
    value: 'Einstellungen'
  },
  'settings-language': {
    original: 'Language',
    value: 'Sprache'
  },
  'settings-language-reload': {
    hint: 'changes will be visible after reloading the page',
    original: 'Will update after reloading.',
    value: 'Aktualisiert mit Neuladen.'
  },
  'settings-theme': {
    original: 'Theme',
    value: 'Farbe'
  },
  'theme-dark': {
    original: 'Dark',
    value: 'Dunkel'
  },
  'theme-light': {
    original: 'Light',
    value: 'Hell'
  },
  'terms-of-service': {
    original: 'Terms of Service',
    value: 'Nutzungsbedingungen'
  },
  licenses: {
    hint: 'as in software licenses',
    original: 'Licenses',
    value: 'Lizenzen'
  },
  'source-code': {
    original: 'Source Code',
    value: 'Quellcode'
  },
  auto: {
    hint: 'automatically decided',
    original: 'auto',
    value: 'Automatisch'
  },
  'zoom-in': {
    original: 'Zoom In',
    value: 'Vergrößern'
  },
  'zoom-out': {
    original: 'Zoom Out',
    value: 'Verkleinern'
  },
  radius: {
    original: 'Radius',
    value: 'Radius'
  },
  'constrain-proportions': {
    original: 'Constrain Proportions',
    value: 'Festes Seitenverhältnis'
  },
  width: {
    original: 'Width',
    value: 'Breite'
  },
  height: {
    original: 'Height',
    value: 'Höhe'
  },
  opacity: {
    hint: 'for layer opacity, brush opacity, text opacity, ...',
    original: 'Opacity',
    value: 'Deckkraft'
  },
  red: {
    original: 'Red',
    value: 'Rot'
  },
  green: {
    original: 'Green',
    value: 'Grün'
  },
  blue: {
    original: 'Blue',
    value: 'Blau'
  },
  eraser: {
    hint: 'noun. As short as possible',
    original: 'Eraser',
    value: 'Radierer'
  },
  center: {
    hint: 'verb',
    original: 'Center',
    value: 'Zentrieren'
  },
  layers: {
    hint: 'layers in the context of image editing software',
    original: 'Layers',
    value: 'Ebenen'
  },
  background: {
    hint: 'as in background layer',
    original: 'Background',
    value: 'Hintergrund'
  },
  'scaling-algorithm': {
    hint: 'Label for dropdown where user chooses which computer graphics algorithm should be used to scale the image',
    original: 'Scaling Algorithm',
    value: 'Skalierungsalgorithmus'
  },
  'algorithm-smooth': {
    original: 'Smooth',
    value: 'Glatt'
  },
  'algorithm-pixelated': {
    original: 'Pixelated',
    value: 'Pixelig'
  },
  preview: {
    hint: 'subject. When applying a filter user sees a preview of what the result would look like.',
    original: 'Preview',
    value: 'Vorschau'
  },
  'angle-snap': {
    hint: 'Snapping. Like when transforming an image and it snaps to the side of the frame.',
    original: 'Snap',
    value: 'Einrasten'
  },
  'angle-snap-title': {
    original: '45° Angle Snapping',
    value: '45° einrasten'
  },
  'lock-alpha': {
    hint: 'Short. Freezes the alpha channel of image. Images consist of 4 channels (red, green, blue, alpha). Alpha lock also found in Procreate and photoshop',
    original: 'Lock Alpha',
    value: 'Fixieren'
  },
  'lock-alpha-title': {
    hint: "same as 'lock-alpha' but longer version. Shows up as a tooltip when hovering",
    original: "Locks layer's alpha channel",
    value: 'Fixiert Alpha-Kanal der Ebene'
  },
  reverse: {
    hint: 'Reversing the direction of a color gradient',
    original: 'Reverse',
    value: 'Umkehren'
  },
  'compare-before': {
    original: 'Before',
    value: 'Vorher'
  },
  'compare-after': {
    original: 'After',
    value: 'Danach'
  },
  loading: {
    original: 'Loading',
    value: 'Läd'
  }
}