digitalfabrik/integreat-cms

@use "sass:color";

// Country flags - define these before tailwind to make it possible to override
$fp-prepend: true;
$fp-enable-1x1: false;
$fp-4x3-path: "flagpack-dart-sass/flags/4x3/";
@import "flagpack-dart-sass/src/flagpack.scss";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer utilities {
    // Tailwind class: "font-default"
    @import "../fonts/raleway/raleway.css";
    // Tailwind class: "font-content"
    @import "../fonts/open-sans/open-sans.css";
    // Tailwind class: "font-content-rtl"
    @import "../fonts/lateef/lateef.css";
    // Tailwind class: "font-content-sc"
    @import "../fonts/noto-sans-sc/noto-sans-sc.css";
    // Tailwind class: "font-content-sc"
    @import "../fonts/noto-sans-ethiopic/noto-sans-ethiopic.css";
    // Tailwind class: "font-content-ka"
    @import "../fonts/noto-sans-georgian/noto-sans-georgian.css";
}

@import "./upload_form.css";

$list-bg-color: white;
$list-border-color: lightgray;
$hover-bg-color: color.adjust($list-border-color, $lightness: -20%);
$active-bg-color: color.adjust($list-border-color, $lightness: -10%);

body,
html {
    @apply h-full;
}

a:hover {
    cursor: pointer;
}

header {
    #region-selector:hover {
        #region-list {
            @apply block;
        }
    }
    #user-info:hover {
        #user-menu {
            @apply block;
        }
    }
    svg {
        @apply pr-1;
    }
}

nav#primary-navigation {
    &.testing {
        @apply top-6;
        height: calc(100% - 24px);
        #menu {
            max-height: calc(100vh - 78px);
        }
    }
    &.h-full {
        #menu {
            max-height: calc(100vh - 56px);
        }
    }
    #menu {
        a {
            @apply relative block p-3 pl-6;
        }
        svg {
            @apply pr-1;
        }
        &.integreat-branding {
            a {
                @apply hover:text-gray-600 hover:bg-[#fbda16];
            }
            a.active,
            .active > a {
                @apply text-gray-600 bg-[#fbda16];
            }
        }
        &.malte-branding {
            a {
                @apply hover:text-white hover:bg-[#f73429];
            }
            a.active,
            .active > a {
                @apply text-white bg-[#f73429];
            }
        }
        &.aschaffenburg-branding {
            a {
                @apply hover:text-white hover:bg-[#4d7679];
            }
            a.active,
            .active > a {
                @apply text-white bg-[#4d7679];
            }
        }
        &.netzwerk-obdach-branding {
            a {
                @apply hover:text-white hover:bg-[#e55129];
            }
            a.active,
            .active > a {
                @apply text-white bg-[#e55129];
            }
        }
    }
}

i[icon-name] {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

h1.heading {
    @apply text-3xl mb-2;
}

/***********
 * BUTTONS *
 ***********/

button,
a,
input[type="submit"] {
    // Normal buttons
    &.btn {
        @apply font-bold rounded inline-block bg-blue-500 text-white py-3 px-4;
        svg {
            @apply pr-1;
        }
        &.btn-ghost {
            @apply bg-blue-100 text-blue-500;
            &:hover {
                @apply bg-blue-200;
            }
        }
        &.btn-outline {
            @apply border-2 border-blue-500 text-blue-700 bg-white;
            &:hover {
                @apply bg-blue-100;
            }
        }
        // Pseudo-classes
        &:hover {
            @apply bg-blue-600;
        }
        &:focus {
            @apply outline-none;
        }
        &:disabled,
        &[disabled] {
            @apply bg-gray-400 cursor-not-allowed;
        }
        // Different types of buttons
        &.btn-small {
            @apply py-2 px-3;
        }
        &.btn-red {
            @apply bg-red-500;
            &:hover {
                @apply bg-red-600;
            }
        }
        // Override base styles
        &.hidden {
            display: none;
        }
    }
    // Icon buttons
    &.btn-icon {
        @apply text-gray-800;
        // Pseudo-classes
        &:hover {
            @apply text-blue-500;
        }
        &:disabled,
        &[disabled] {
            @apply text-gray-400 cursor-not-allowed;
        }
    }
}

/*********
 * FORMS *
 *********/

[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select,
.slug-field {
    @apply w-full rounded text-xl text-gray-800 bg-gray-200 border-gray-200 border-2;
    &:focus {
        @apply bg-white border-blue-500 ring-blue-500 #{!important};
    }
    &.border-red-500 {
        border-color: rgb(239, 68, 68);
    }
    &.rounded-r-none {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    &:disabled {
        @apply text-gray-500 pointer-events-none cursor-not-allowed;
    }
}

// All of the above except "select" and "multiple" which are read-only even when they can be edited
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
textarea {
    &:read-only {
        @apply text-gray-500 pointer-events-none cursor-not-allowed;
    }
}

.slug-field {
    @apply flex px-3 py-2 whitespace-nowrap;
    overflow: auto;
    &:focus-within {
        @apply bg-white border-blue-500 ring-1 ring-blue-500 outline-none;
    }
    > [type="text"] {
        @apply flex-grow p-0 border-none;
        width: fit-content;
        &:focus {
            box-shadow: none;
        }
    }
    > label {
        @apply font-normal cursor-auto m-0;
        opacity: 0.66;
    }
    &.hidden {
        display: none;
    }
}

[type="checkbox"],
[type="radio"] {
    @apply rounded text-blue-500 mr-2 align-text-top;

    &:disabled,
    &.fake-disable {
        @apply bg-gray-200 border-gray-200 pointer-events-none;
        &:checked {
            @apply bg-gray-400 border-gray-400;
        }
    }
}

label {
    @apply block my-2 text-lg font-bold text-gray-800 cursor-pointer;
}

label.secondary,
li > label {
    @apply text-base;
}

label.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

label:not([for]) {
    @apply cursor-auto;
}

[type="checkbox"] + label,
[type="radio"] + label {
    @apply inline-block;
}

.help-text {
    @apply mb-2 text-gray-600;
}

::-ms-clear {
    display: none;
}

::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
    display: none;
}

.table-listing {
    overflow-x: auto;

    svg {
        width: 18px;
        height: 18px;
    }

    td.rating {
        svg {
            width: 24px;
            height: 24px;
        }
    }

    table {
        tr {
            &.level-2 {
                > td.hierarchy {
                    padding-left: 22px;
                }
            }

            &.level-3 {
                > td.hierarchy {
                    padding-left: 44px;
                }
            }

            &.level-4 {
                > td.hierarchy {
                    padding-left: 66px;
                }
            }

            &.level-5 {
                > td.hierarchy {
                    padding-left: 88px;
                }
            }

            &.level-6 {
                > td.hierarchy {
                    padding-left: 110px;
                }
            }

            td.min,
            th.min {
                width: 1%;
                white-space: nowrap;
            }
        }
    }
}

.show-n-rows tbody tr:nth-child(n + 11) {
    display: none;
}

#page_order_table .table-listing {
    table {
        tr {
            &:not(.drop-between) td {
                height: 38px;
            }
            td.hierarchy {
                > span {
                    svg {
                        left: 0.5rem;
                    }
                }
            }
        }
    }
}

#language-switcher:hover {
    #language-switcher-list {
        @apply block;
    }
    #language-switcher-current {
        @apply rounded-b-none;
    }
    #language-switcher-chevron {
        @apply hidden;
    }
}

#language-switcher-current li a {
    @apply px-3 py-[calc(0.75rem+2px)] bg-water-500 rounded-t hover:bg-white hover:text-blue-50;
}

#language-switcher-list {
    .language-name {
        @apply px-2;
    }

    li {
        @apply mr-0;
        a {
            @apply px-3 py-2 flex bg-white whitespace-nowrap hover:bg-water-500 rounded-none;
        }
    }
}

.password_toggle {
    .eye-icon {
        width: 42px;
        height: 42px;
        top: 2px;
        right: 5px;
        padding: 10px;
        cursor: pointer;
        svg {
            color: #4c5e70;
            width: 22px;
            height: 22px;
        }
    }
}

.lang-grid {
    > a {
        text-align: center;
        width: 18.67px;
        display: inline-block;
        margin-right: 3.5px;
    }
}

.pagination a:hover {
    background-color: #fbda16;
}

.password_reset_errors ul {
    padding: 0;
    list-style: none;
    li {
        margin-bottom: 8px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.checkbox-error + label {
    @apply text-red-500;
}

.entity-lang-list {
    table {
        tr {
            td {
                &:last-child {
                    width: 30px;
                    svg {
                        position: absolute;
                        top: 50%;
                        right: 0.5rem;
                        width: 16px;
                        height: 16px;
                        margin-top: -8px;
                    }
                }
            }
            &:nth-child(odd) {
                background-color: #f8fafc;
            }
            &:hover {
                background-color: #f1f5f8;
                a {
                    color: #3d4852;
                }
            }
        }
    }
}

#popup-overlay {
    z-index: 3090;
}

#confirmation-dialog {
    margin: 0 auto;
    z-index: 3100;
}

#chat-history a {
    color: #4299e1;
    &:hover {
        color: #2b6cb0;
    }
}

datalist {
    margin-top: -23px;
}

datalist option {
    background-color: #e2e8f0;
    border-radius: 50%;
    padding: 3px 8px;
    font-weight: bolder;
}

.timeline-item {
    cursor: pointer;
    background: #e2e8f0;
}

.timeline-item.active {
    background: #4299e1 !important;
    color: white !important;
}

.revision-tooltip {
    background: #4299e1;
}

.version-history-control.enabled {
    cursor: pointer !important;
}

.version-history-control.disabled {
    color: #b8b6b6;
    cursor: default !important;
}

.timeline-item {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 4px;
    background: #e2e8f0;
    transform: translateX(0%) translateY(-50%);
    z-index: -1;
}

.timeline-item:last-child::before {
    width: 0 !important;
}

.timeline-item::before {
    width: calc(100% + 32px);
}

#version-history {
    overflow-x: scroll; /* Allow scrolling */
    -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

#version-history::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

/* Page revision slider info box */
#revision-info {
    background: #4299e1;
    color: white;
    padding: 4px 12px;
    position: absolute;
    top: 35px;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}

/* Page Diff */
.revision-diff,
.xliff-diff-preview-rendered {
    h1 {
        @apply font-bold mb-2 text-2xl;
    }
    h2 {
        @apply text-xl;
    }
    h3 {
        @apply text-lg;
    }
    ins {
        @apply bg-green-300 no-underline;
    }
    del {
        @apply bg-red-300;
    }
}

/* classes for tree view drag and drop divs */
.drop-on {
    border-width: 2px !important;
    &.drop-allow {
        border-color: #3490dc;
    }
    &.drop-disallow {
        border-color: #cc3333;
    }
}
.drop-between {
    div {
        height: 2px;
        width: calc(100% - 5px);
        margin-left: 5px;
    }
    &.drop-allow div {
        background-color: #3490dc;
    }
    &.drop-disallow div {
        background-color: #cc3333;
    }
    span {
        position: relative;
        top: -3px;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        display: block;
    }
    &.drop-allow span {
        background-color: #3490dc;
    }
    &.drop-disallow span {
        background-color: #cc3333;
    }
}

/* styling for pagination links */
.pagination {
    display: flex;
    margin-top: 0.5rem;
    align-items: center;
    justify-content: space-between;
    .step-links {
        display: flex;
        a {
            display: inline-block;
            width: 40px;
            text-align: center;
            line-height: 25px;
            border: 1px solid $list-border-color;
            border-radius: 10%;
            box-shadow: 1px 1px $list-border-color;
            padding: 0.25rem;
            margin: 0.125rem;
            background-color: $list-bg-color;
            &.active {
                background-color: $active-bg-color;
            }
            &:hover {
                background-color: $hover-bg-color;
            }
        }
    }
}

/* Special class for truncated table cells that can be expanded */
.table-cell-truncate {
    @apply flex flex-nowrap items-center;

    span {
        @apply overflow-hidden overflow-ellipsis whitespace-nowrap;
    }

    .toggle-table-cell {
        @apply hover:scale-125 cursor-pointer inline-flex;
    }

    .less {
        @apply hidden;
    }

    .more {
        @apply inline-flex;
    }

    &.active {
        span {
            @apply break-all whitespace-pre-line overflow-visible;
        }

        .less {
            @apply inline-flex;
        }

        .more {
            @apply hidden;
        }
    }
}

#hix-bar {
    @apply h-full bg-gray-200 rounded;
    width: 100%;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

#hix-bar-fill {
    @apply rounded;
    display: block;
    transition: width 500ms ease-in-out;
}

#hix-value {
    @apply p-3 text-lg font-bold text-gray-800;
    text-align: left;
    white-space: nowrap;
}