/* ===================================================================

Stylesheet für https://chat.schloss-hogwarts.de
Aufgabe: Allgemeine Styles bereitstellen
Datei: chat_styles.css
Autor: Samuel Walz
Copyright (c) by Samuel Walz 2021

=================================================================== */

/* ===================================================================
1. Kalibrierung
=================================================================== */
/* für  Internetexplorer 10 und 11 */
main {
    display: block;
}

/* Normalisierung von box-sizing */

*,
::before,
::after {
    box-sizing: border-box;
}

* {
    padding   : 0;
    margin    : 0;
    /* cursor : url('media/Ausgelastet.gif'), auto; */
}

/* ===================================================================
2. Allgemeine Styles
=================================================================== */

:root {
    /* --blue                  : #007bff;
    --indigo                : #6610f2;
    --purple                : #6f42c1;
    --pink                  : #e83e8c;
    --red                   : #dc3545;
    --orange                : #fd7e14;
    --yellow                : #ffc107;
    --green                 : green;
    --teal                  : #20c997;
    --cyan                  : #17a2b8;
    --white                 : #fff;
    --gray                  : #6c757d;
    --gray-dark             : #343a40;
    --primary               : #a50620;
    --secondary             : #6c757d;
    --success               : #2daf34;
    --info                  : #1067ea;
    --warning               : #edad00;
    --danger                : #bf2413;
    --light                 : #f8f9fa;
    --dark                  : #343a40;
    --brand                 : #005f9a; */

    --blue       : rgb(0, 123, 255);
    --indigo     : rgb(102, 16, 242);
    --purple     : rgb(111, 66, 193);
    --pink       : rgb(232, 62, 140);
    --red        : rgb(190, 40, 20);
    --red-dark   : rgb(150, 20, 20);
    --orange     : rgb(253, 126, 20);
    --yellow     : rgb(230, 174, 6);
    --yellow-dark: rgb(230, 140, 0);
    --green      : rgb(0, 128, 0);
    --green-dark : rgb(0, 80, 0);
    --teal       : rgb(32, 201, 151);
    --cyan       : rgb(23, 162, 184);
    --white      : rgb(255, 255, 255);
    --gray       : rgb(108, 117, 125);
    --gray-dark  : rgb(52, 58, 64);
    --primary    : rgb(165, 6, 32);
    --secondary  : rgb(108, 117, 125);
    --success    : rgb(45, 175, 52);
    --info       : rgb(16, 103, 234);
    --warning    : rgb(237, 173, 0);
    --danger     : rgb(191, 36, 19);
    --light      : rgb(248, 249, 250);
    --dark       : rgb(52, 58, 64);
    --brand      : rgb(0, 95, 154);

    --breakpoint1           : 30rem;
    --breakpoint2           : 60rem;
    --breakpoint-xs         : 0;
    --breakpoint-sm         : 576px;
    --breakpoint-md         : 768px;
    --breakpoint-lg         : 992px;
    --breakpoint-xl         : 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace : SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --nav-height   : 5rem;
    --border-radius: 5px;
}

:root {
    --_chat-color       : 332;
    --_chat-saturation  : 79%;
    --_chat-brightness  : 58%;
    --_chat-transparency: 1;

    --chat-color: hsla(var(--_chat-color), var(--_chat-saturation), var(--_chat-brightness), var(--_chat-transparency));

    --_chat-bg-color       : 210;
    --_chat-bg-saturation  : 10%;
    --_chat-bg-brightness  : 23%;
    --_chat-bg-transparency: 1;

    --chat-bg-color: hsla(var(--_chat-bg-color), var(--_chat-bg-saturation), var(--_chat-bg-brightness), var(--_chat-bg-transparency));

    --_chat-nav-color       : 199;
    --_chat-nav-saturation  : 74%;
    --_chat-nav-brightness  : 50%;
    --_chat-nav-transparency: 1;

    --chat-nav-color: hsla(var(--_chat-nav-color), var(--_chat-nav-saturation), var(--_chat-nav-brightness), var(--_chat-nav-transparency));

    --_chat-nav-bg-color       : 210;
    --_chat-nav-bg-saturation  : 10%;
    --_chat-nav-bg-brightness  : 23%;
    --_chat-nav-bg-transparency: 1;

    --chat-nav-bg-color: hsla(var(--_chat-nav-bg-color), var(--_chat-bg-nav-saturation), var(--_chat-bg-nav-brightness), var(--_chat-bg-nav-transparency));

    --_nav-color       : 123;
    --_nav-saturation  : 59%;
    --_nav-brightness  : 43%;
    --_nav-transparency: 1;

    --nav-color: hsla(var(--_nav-color), var(--_nav-saturation), var(--_nav-brightness), var(--_nav-transparency));

    --_nav-bg-color       : 210;
    --_nav-bg-saturation  : 10%;
    --_nav-bg-brightness  : 23%;
    --_nav-bg-transparency: 1;

    --nav-bg-color: hsla(var(--_nav-bg-color), var(--_nav-bg-saturation), var(--_nav-bg-brightness), var(--_nav-bg-transparency));

    --font-primary-color  : hsla(0, 0%, 87%, 1);
    --secondary-color     : hsla(0, 0%, 20%, 1);
    --messages-primary-bg : hsla(210, 10%, 16%, 1);
    --messages-from-you-bg: hsla(213, 10%, 18%, 1);
}

body {
    /* anzeigen der vertikalen Scrollleiste, auch wenn die Seite kleiner als das Display ist */
    font-size       : 1.1rem;
    letter-spacing  : 1px;
    line-height     : 1.5rem;
    color           : var(--font-primary-color);
    font-family     : serif;
    background-color: var(--chat-bg-color);
}

footer {
    min-width       : 15rem;
    max-width       : 50rem;
    margin          : auto;
    background-color: white;
}


ul,
ol {
    list-style: none;
    box-sizing: border-box;
}

/* ======================================
    Links
====================================== */
a {
    text-decoration: none;
    color          : var(--chat-color);
}

a:hover {
    opacity: .7;
}

div#chat_navigation a {
    color: var(--chat-nav-color);
}


.invisible {
    display: none;
}

.visible {
    display: block;
}

/* ======================================
    vom Benutzer ausgewählter Text
====================================== */

::selection {
    color     : var(--chat-bg-color);
    background: var(--chat-color);
}

nav ::selection {
    color     : var(--nav-bg-color);
    background: var(--nav-color);
}

div#chat_navigation ::selection {
    color     : var(--chat-nav-bg-color);
    background: var(--chat-nav-color);
}

/* ===================================================================
3. Styles für Layout-Bereiche
=================================================================== */

/* ======================================
    vom Benutzer ausgewählter Text
====================================== */

main {
    position        : fixed;
    top             : var(--nav-height);
    bottom          : 0;
    left            : 0;
    right           : 0;
    background-color: var(--chat-bg-color);
    /* Damit Menü darüber ist, z-index -1 */
    z-index         : -1;
    overflow-y      : auto;
}

section#chat_outer_container {
    height        : 100%;
    display       : flex;
    flex-direction: row;
}

div#chat_inner_container {
    /* box-shadow    : -5px 0 10px rgb(197, 197, 197); */
    flex-basis    : 90%;
    height        : 100%;
    display       : flex;
    flex-direction: column;
    background    : var(--chat-bg-color);
}

aside#new_messages_container {
    background-color: transparent;
    border          : none;
    position        : fixed;
    pointer-events  : none;
    right           : 0;
    top             : 0;
    bottom          : 0;
    width           : 20rem;
}

/* ======================================
    Scrolleisten (nur Chrome)
====================================== */
/* width */
::-webkit-scrollbar {
    width: 9px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background   : grey;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

/* ======================================
====================================== */
p#pleaselogin {
    padding-top: 1rem;
    margin-left: 1rem;
}

p.success {
    border       : 2px solid var(--success);
    border-radius: var(--border-radius);
    max-width    : 30rem;
    margin       : auto;
    padding      : 1rem;
}

.loggedout {
    margin-left: 1rem;
}

/* ===================================================================
2. Chat-Navigation
=================================================================== */

div#chat_navigation {
    flex-basis: 20%;
    overflow-y: auto;
    height    : 100%;
}

button.new_chat {
    background   : inherit;
    color        : black;
    border       : 1px solid var(--chat-nav-color);
    display      : block;
    width        : calc(100% - 1.4rem);
    text-align   : center;
    border-radius: var(--border-radius);
    font-size    : 1.1rem;
    padding      : 0 .2rem;
    margin       : .5rem;
    cursor       : pointer;
}

button.new_chat:hover {
    background-color: var(--nav-color);
    color           : var(--nav-bg-color);
    transition      : all 1s ease;
    border-color    : var(--nav-color);
}

li.chat_navigation_item {
    height    : 4rem;
    background: transparent;
}

button.select_chat_button {
    display       : block;
    width         : 100%;
    height        : 100%;
    border        : none;
    text-align    : left;
    font-size     : 1em;
    letter-spacing: inherit;
    font-family   : inherit;
    padding       : 1em;
    overflow      : hidden;
    word-wrap     : normal;
    overflow-wrap : normal;
    white-space   : nowrap;
    text-overflow : ellipsis;
    color         : var(--chat-nav-color);
    transition    : all .5s ease;
    background    : transparent;
}

button.select_chat_button:hover,
button.select_chat_button.active-chat {
    background-color: var(--chat-nav-color);
    color           : var(--chat-nav-bg-color);
    transition      : all .5s ease;
}

button.select_chat_button::before {
    font-family  : "Font Awesome 5 Free";
    content      : "\f075";
    padding-right: .5em;
    transition   : all .5s ease;
}

button.select_chat_button:hover,
button.select_chat_button::before:hover {
    transition: all .5s ease;
}

button.select_chat_button span.chat_nav_chatname {
    display      : inline-block;
    width        : 70%;
    overflow     : hidden;
    text-overflow: ellipsis;
}

button.select_chat_button span.chat_nav_unreadmessages {
    background   : orange;
    color        : black;
    display      : inline-block;
    width        : 1.5rem;
    height       : 1.5rem;
    padding      : .05rem .35rem;
    border       : 1px solid black;
    border-radius: 50%;
}


div#chat_navigation {
    padding         : 1rem 0 0 .5rem;
    background-color: var(--chat-nav-bg-color);
    max-width       : 20vw;
}

div.chat-message_vorschau {
    position: fixed;
    bottom  : 1rem;
    right   : 1rem;
}

div.chatbeitrag-vorschau {
    color        : var(--font-primary-color);
    overflow     : hidden;
    text-overflow: ellipsis;
}

/* ===================================================================
3. Styles für Chat
=================================================================== */


/* ======================================
    Einstellungen und Namen des Chats
====================================== */

div#chat_header {
    display           : flex;
    flex-direction    : row;
    /* justify-content: end; */
    /* align-content  : center; */
    height            : 4rem;
    border-bottom     : 1px solid white;
}

div#chat_header div#active-chat-name {
    color           : var(--chat-color);
    padding-top     : 1rem;
    font-size       : 1.5rem;
    padding-right   : 1rem;
    /* border-right : 2px solid var(--chat-color); */
    flex-basis      : 80%;
    text-align      : center;
}

div#options {
    flex: 1;
}

div#chat_header .fa-ellipsis-v {
    display   : block;
    padding   : 1rem 2rem 0 0;
    text-align: end;
}

div#chat_header .fa-ellipsis-v::before {
    font-size: 1.3rem;
}

/* ======================================
    Chatverlauf und Nachrichten
====================================== */

div#chatverlauf {
    flex-basis: 70%;
    padding   : 1rem 5rem;
    padding   : 1rem;
    overflow-y: auto;
}

div.chatbeitrag {
    color                     : var(--font-primary-color);
    background-color          : var(--messages-primary-bg);
    border                    : 2px solid rgba(0, 0, 0, 0);
    border-radius             : 5px;
    margin-bottom             : 2rem;
    max-height                : min-content;
    /* Für Positionierung von ::before */
    position                  : relative;
    z-index                   : 0;
}

@media all and (max-width: 30rem) {
    div.chatbeitrag[data-written^="self"] {
        margin-left: 0 !important;
    }
}

@media all and (min-width: 60rem) {
    div.chatbeitrag {
        max-width: 50vw;
    }
}

/* ::before-Pseudoelement für kleines Dreieck, damit Nachricht wie Sprechblase aussieht */

div.chatbeitrag::before {
    content     : "";
    position    : absolute;
    top         : 100%;
    right       : 95%;
    width       : 0;
    height      : 0;
    border-top  : 1rem solid var(--messages-primary-bg);
    border-right: 1rem solid transparent;
}

div.chatbeitrag[data-written^="self"]::before {
    right           : 5%;
    border-right    : none;
    border-top-color: var(--messages-from-you-bg);
    border-left     : 1rem solid transparent;
}


div.chatbeitrag[data-written^="self"] {
    margin-left     : 5rem;
    background-color: var(--messages-from-you-bg);
}

/* Name des Autors der Nachricht, Datum und Uhrzeit der Erstellung und weitere Optionen wie Löschen */

div.chathead {
    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
    margin        : 0 .5rem;
    border-bottom : 1px solid #222;
}

div.nameanddate {
    flex-basis: 70%;
    display   : flex;
}

div.nameanddate div.chatname,
div.nameanddate div.chatdatum,
div.chatbeitrag-vorschau div.chatname,
div.chatbeitrag-vorschau div.chatdatum {
    flex       : 1;
    margin-top : .2rem;
    line-height: 1rem;
    height     : 1.3rem;
}

div.nameanddate div.chatname,
div.chatbeitrag-vorschau div.chatname {
    color: var(--chat-color);
}

div.nameanddate div.chatname {
    position: relative;
}

div.nameanddate div.chatname::after {
    display      : inline-block;
    margin-left  : .2rem;
    content      : "";
    position     : absolute;
    bottom       : .1rem;
    border       : 1px solid transparent;
    height       : .9rem;
    width        : .9rem;
    border-radius: 50%;
}

div.nameanddate div.chatname.online::after {
    background: radial-gradient(circle at 50% 50%, var(--green) 0%, var(--green) 50%, var(--green-dark) 100%);
}

div.nameanddate div.chatname.offline::after {
    background: radial-gradient(circle at 50% 50%, var(--red) 0%, var(--red) 50%, var(--red-dark) 100%);
}

div.nameanddate div.chatname.busy::after {
    background: radial-gradient(circle at 50% 50%, var(--yellow) 0%, var(--yellow) 50%, var(--yellow-dark) 100%);
}

div.chatbeitrag div.chatdatum,
div.chatbeitrag-vorschau div.chatdatum {
    /* text-align   : right; */
    color        : green;
    font-size    : .8rem;
    padding-right: 1rem;
}

div.message-options {
    flex-basis: 30%;
    position  : relative;
    right     : 1rem;
    top       : .1rem;
}

i.message-options-icon {
    display   : block;
    cursor    : pointer;
    width     : 100%;
    height    : 100%;
    text-align: right;
}

div.message-options ul {
    width      : min-content;
    white-space: nowrap;
    background : var(--chat-bg-color);
    background : #444c53;
    position   : absolute;
    margin-left: min-content;
}

ul.message-options-list {
    top      : 0;
    right    : 1rem;
    animation: blendoptions .5s forwards;
}

/* Einblenden der Optionen */
@media all and (min-width: 60rem) {
    @keyframes blendoptions {
        from {
            right  : -10rem;
            opacity: 0;
        }

        to {
            right  : inherit;
            opacity: 1;
        }
    }
}

@media all and (max-width: 60rem) {

    @keyframes blendoptions {
        from {
            top    : 10rem;
            opacity: 0;
        }

        to {
            top    : inherit;
            opacity: 1;
        }
    }
}


ul.message-options-list::before {
    position    : absolute;
    width       : 0;
    height      : 0;
    top         : 0;
    left        : 1rem;
    border-width: 0 5px 5px 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--messages-from-you-bg);
    font-size   : .9rem;
}

ul.message-options-list li {
    padding   : .2rem .5rem;
    font-size : .9rem;
    cursor    : pointer;
    transition: all .3s ease;
}


ul.message-options-list li:hover {
    background: var(--chat-color);
    color     : var(--chat-bg-color);
    transition: all .3s ease;
}

ul.message-options-list li ul {
    display: none;
    left   : 100%;
    top    : 50%;
}

ul.message-options-list li:hover ul {
    display   : block;
    background: #444c53;
    color     : var(--font-primary-color);
}

ul.message-options-list i::before {
    /* Damit alle Icons de gleiche Größe beanspruchen und somit der Test daneben in einer Spalte ist */
    display      : inline-block;
    width        : 2rem;
    padding-right: 1rem;
}

/* Wer Nachricht schon gelesen hat - Liste */

ul.whoreaditlist {
    left: 100%;
    top : 75% !important;
}

ul.whoreaditlist.left {
    left : unset;
    right: 100%;
}

div.chatbeitrag div.chattext {
    flex-basis : 100%;
    margin-top : .2rem;
    margin-left: .5rem;
    hyphens    : auto;
    word-wrap  : break-word;
}

@media all and (max-width: 60rem) {
    div#chat_inner_container {
        width: 100%;
    }
}

/* Laden-Icon, nicht benötit, geht alles schnell genug */
div.loading {
    position  : fixed;
    top       : 0;
    bottom    : 0;
    right     : 0;
    left      : 0;
    background: rgba(100, 100, 100, .6);
}

div.loading .fa-spinner {
    position: fixed;
    top     : calc(50vh - 2rem);
    left    : calc(50vw - 2rem);
    display : block;
    width   : 4rem;
    height  : 4rem;
}

div.loading .fa-spinner {
    height   : 4rem;
    width    : 4rem;
    font-size: 4rem;
    color    : var(--chat-color);
}

div.loading-message {
    position  : fixed;
    bottom    : 30vh;
    left      : calc(50vw - 10rem);
    width     : 20rem;
    text-align: center;
}


/* ===================================================================
2. BBCode
=================================================================== */

.bb_b {
    font-weight: bolder;
}

.bb_i {
    font-style: italic;
}

.bb_u {
    text-decoration: underline;
}

.bb_quote {
    display    : block;
    margin     : .5rem;
    border-left: 2px solid grey;
    padding    : 0 .5rem;
}

.bb_quote_heading {
    display    : block;
    font-size  : 1.1rem;
    font-family: serif;
    font-weight: 700;
    font-style : normal;

}

.bb_size {
    font-style: normal;
}

.bb_quote_text {
    display: block;
}

div.chatbeitrag[data-written^="self"] .bb_quote {
    background-color: var(--messages-primary-bg);
}

div.chatbeitrag:not([data-written^="self"]) .bb_quote {
    background-color: var(--messages-from-you-bg);
}

/* ===================================================================
2. Tooltip-Boxen
=================================================================== */

:root {
    --tooltip-standard-bg   : var(--messages-primary-bg);
    --tooltip-standard-color: var(--font-primary-color);
    --tooltip-border-color  : var(--font-primary-color);
    --tooltip-border-width  : 1px;
    --tooltip-border-radius : 5px;
    --tooltip-padding       : .3rem
}

[data-has-tooltip] {
    position: relative;
}

[role="tooltip"] {
    pointer-events: none;
    position      : absolute;
    height        : 0;
    width         : 0;
    opacity       : 0;
    border        : var(--tooltip-border-color) solid var(--tooltip-border-width);
    border-radius : var(--tooltip-border-radius);
    padding       : var(--tooltip-padding);
}

[role="tooltip"]:not([data-tooltip-bg]) {
    background: var(--tooltip-standard-bg);
}

[role="tooltip"]:not([data-tooltip-color]) {
    color: var(--tooltip-standard-color);
}

[role="tooltip"][data-tooltip-bg] {
    background: attr(data-tooltip-bg);
}

[role="tooltip"][data-tooltip-color] {
    color: attr(data-tooltip-color);
}


[data-has-tooltip]:hover [role="tooltip"] {
    z-index         : 9999;
    width           : max-content;
    max-width       : calc(70vw);
    height          : auto;
    opacity         : 1;
    transition      : opacity .3s ease;
    transition-delay: .5s;
}

[data-has-tooltip]:hover [role="tooltip"].top {
    bottom: 100%;
    margin: auto;
}

/* 
[data-has-tooltip]:hover [role="tooltip"].top-right {
    bottom: 100%;
} */

[data-has-tooltip]:hover [role="tooltip"].left {
    right: 100%;
}

[data-has-tooltip]:hover [role="tooltip"].right {
    left  : 100%;
    bottom: 50%;
}

small.tooltip-small {
    display    : inline-block;
    margin-left: .3rem;
    font-size  : .7rem;
}