Theme skype v1 by [@nex:nexy7574.co.uk]

A simple clone of Skype's light and dark themes.

Last updated at 2025-03-24 21:07:58.512675 +0000 +0000

@import url("https://css.gomuks.app/theme/skype.css");

/*
This CSS file is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/
*/
:root {
    --skype-blue: #0E71CF;
    --skype-own-message: #CCF6FE;
    --skype-other-message: #F1F1F1;
    --skype-background: #FEFEFE;
    --skype-background-secondary: #EFF3F8;

    --primary-color: var(var(--skype-blue));
    --primary-color-dark: var(var(--skype-blue));
    --room-list-background: unset;

    --skype-timeline-letterbox: 0;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --skype-blue: #00BCF2;
        --skype-own-message: #0E3A81;
        --skype-other-message: #282828;
        --skype-background: #000000;
        --skype-background-secondary: #1E1E1E;
        --text-color: #DDF3FE;
    }
}

input.toggle {
    --enabled-color: var(var(--skype-blue));
}

div.message-composer {
    border-radius: 2em;
    margin: 0 auto;
    min-width: 25%;
    max-width: 75%;
    width: 100%
}

div.timeline-view {
    margin: 0 var(--skype-timeline-letterbox);
}

div.timeline-event {
    &.small-event, &.hidden-event {
        justify-self: center;
    }
}

/* Bubble theme by @em:f.dog, borrowed from https://css.gomuks.app/theme/bubblemuks */
.timeline-event:not(.small-event) .event-content {
    max-width: max-content;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background-color: var(--skype-background-secondary);
}

.timeline-event.own-event:not(.small-event) {
    direction: rtl;
}

.timeline-event.own-event:not(.small-event) .event-content {
    background-color: var(--skype-own-message);
}

.timeline-event.own-event:not(.small-event) > * {
    direction: ltr;
}

.timeline-event.own-event:not(.small-event) .event-sender-and-time {
    flex-direction: row-reverse;
}