styleguide/assets/webui/overrides.scss
/*
 * overrides.scss - Copyright (c) 2023-2024 - Arneo
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* stylelint-disable */
:root {
    color-scheme: light dark;
}

@mixin colorOverride() {
    --skin-complement: 20, 20, 20;
    --skin-links: 220, 220, 220;

    color: #dcdcdc;

    background-color: rgba(14, 14, 14, 0.9);

    .Header-Title {
        filter: brightness(0) invert(1);
    }

    pre code.hljs {
        display: block;
        overflow-x: auto;
        padding: 1em;
    }
    code.hljs {
        padding: 3px 5px;
    }
    .hljs {
        background: #23241f;
        color: #f8f8f2;
    }
    .hljs-subst,
    .hljs-tag {
        color: #f8f8f2;
    }
    .hljs-emphasis,
    .hljs-strong {
        color: #a8a8a2;
    }
    .hljs-bullet,
    .hljs-link,
    .hljs-literal,
    .hljs-number,
    .hljs-quote,
    .hljs-regexp {
        color: #ae81ff;
    }
    .hljs-code,
    .hljs-section,
    .hljs-selector-class,
    .hljs-title {
        color: #a6e22e;
    }
    .hljs-strong {
        font-weight: 700;
    }
    .hljs-emphasis {
        font-style: italic;
    }
    .hljs-attr,
    .hljs-keyword,
    .hljs-name,
    .hljs-selector-tag {
        color: #f92672;
    }
    .hljs-attribute,
    .hljs-symbol {
        color: #66d9ef;
    }
    .hljs-class .hljs-title,
    .hljs-params,
    .hljs-title.class_ {
        color: #f8f8f2;
    }
    .hljs-addition,
    .hljs-built_in,
    .hljs-selector-attr,
    .hljs-selector-id,
    .hljs-selector-pseudo,
    .hljs-string,
    .hljs-template-variable,
    .hljs-type,
    .hljs-variable {
        color: #e6db74;
    }
    .hljs-comment,
    .hljs-deletion,
    .hljs-meta {
        color: #75715e;
    }

    .Tree-collectionLabel::before {
        filter: invert(100%);
    }
}

body {
    &.-darkTheme {
        @include colorOverride;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        &:not(.-lightTheme) {
            @include colorOverride;
        }
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--skin-accent);
}

a {
    color: inherit;
    text-decoration: none;
}

/* Spécifique logo Arneo */
.a-logo__letter {
    fill: var(--skin-links);

    &.-underscore {
        fill: var(--skin-accent);
    }
}
/* Spécifique logo Arneo */

.Header {
    justify-content: space-between;
    padding: 10px 20px;
    border: none;
    background-color: var(--skin-complement);
    color: var(--skin-accent);
    box-shadow: 0px 2px 8px rgb(0 0 0 / 08%);

    &-Title {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
    }

    &-Utils {
        display: flex;
        align-items: center;

        a {
            margin-left: 20px;
        }
    }

    svg {
        margin-right: 20px;
    }
}

.Pen {
    background-color: rgba(var(--skin-complement), 0.5);
    padding: 20px;
}

.Pen-previewLink,
.Browser-tab a {
    &:link,
    &:visited,
    &:hover,
    &:active {
        color: rgb(var(--skin-links));
    }
}

.Frame-panel {
    padding-top: 0;
}

.Browser-panel,
.Browser-controls,
.Preview,
.Navigation-panel--variants {
    background-color: rgb(100 100 100 / 1%);
}

.Frame-panel--sidebar {
    background-color: rgba(var(--skin-complement), 0.95);
    color: rgb(var(--skin-links));
}

.Meta-key,
.FileBrowser-select-label {
    color: var(--skin-accent);
}

.Navigation {
    flex-direction: column;
}

.Navigation-group {
    margin-top: 0 !important;
}

.Navigation-group:not(:last-child) {
    margin-bottom: 20px;
}

.Navigation-group[data-role='variant-group'] {
    margin-bottom: 0;
}

.Navigation-panel--variants {
    flex-shrink: 0;
    height: auto;
    max-height: 30%;
    border-top: 1px solid rgb(83 83 99 / 25%);
}

.Tree-title {
    color: var(--skin-accent);
}

.Tree-collectionLabel,
.Tree-collapse {
    color: rgb(var(--skin-links));
}

.Status-dot {
    background-color: var(--skin-complement);
}

.swatches {
    display: flex;
}

.color-swatch {
    padding: 10px;
    margin-right: 10px;
    border-radius: 10px;

    &.c-white {
        color: #fff;
    }
}

.icons {
    display: flex;
    flex-wrap: wrap;

    div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 17%;
        font-size: 12px;
    }
}

.icon {
    width: 40px;
    height: 40px;
}

.FileBrowser-select {
    background-color: inherit;
    color: inherit;
}

$toggleSwitch-height: 32px;
$toggleSwitch-padding: 4px;

.Header-Left {
    display: flex;
    align-items: center;
}

.Header-Utils-toggleSwitch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-right: 16px;

    // Augmente la taille du swtich si actif pour indiquer l'état
    &:active {
        .Header-Utils-toggleSwitch__switch {
            &::after {
                width: ($toggleSwitch-height - $toggleSwitch-padding * 2) * 1.2;
            }
        }
    }
}

.Header-Utils-toggleSwitch__checkbox {
    height: 0;
    width: 0;
    visibility: hidden;

    &:checked {
        + .Header-Utils-toggleSwitch__switch {
            &::after {
                left: calc(100% - #{$toggleSwitch-padding});
                transform: translateX(-100%);
            }
        }
    }
}

.Header-Utils-toggleSwitch__switch {
    position: relative;
    display: block;
    width: $toggleSwitch-height * 2;
    height: $toggleSwitch-height;
    background: var(--skin-complement);
    border: 1px solid rgb(var(--skin-links));
    border-radius: $toggleSwitch-height;
    margin-left: 4px;

    &::after {
        content: '';
        position: absolute;
        top: $toggleSwitch-padding;
        left: $toggleSwitch-padding;
        width: $toggleSwitch-height - $toggleSwitch-padding * 2 - 2;
        height: $toggleSwitch-height - $toggleSwitch-padding * 2 - 2;
        background-color: rgb(var(--skin-links));
        border-radius: $toggleSwitch-height - $toggleSwitch-padding;
        transition: all 200ms ease;
    }
}
