Select-kit fehlt komplett

darkpixlz · 26. Juli 2022 um 17:41

Mit meinem Theme passiert beim Klicken auf das Zahnrad nichts. Alles ist unterhalb des Bildschirms versteckt.

CSS-Code:

// Hintergrundbild hier ändern


body{
    background-image:linear-gradient(0deg, rgba(var(--secondary-rgb), 1) 0%, rgba(var(--secondary-rgb), 0.75) 100%),url("https://d3bpeqsaub0i6y.cloudfront.net/plugins/discourse-teams-sidebar/images/teams-pattern.gif");
    background-size:350px;
    font-family:"Poppins";
}
/* Cursor normal lassen */
body,
button,
div,
span,
a,
img,
svg,
h1,
h2,
h3,
h4,
h5,
h6,
p,
summary,
input,
textbox,
li,
ul,
input,
textarea {
    cursor: default !important;
}
.cooked img:not(.thumbnail):not(.emoji), .d-editor-preview img:not(.thumbnail):not(.emoji){
    border-radius:8px;
}

/* Tatsächliches Theme */
#main-outlet {
    z-index: 2;
}


/* Hässlichen Footer verstecken */
.ember633,
#footer_rbx {
    display: none;
}
aside.quote .title {
    border-radius:8px;
}

/* Like-Button weiß machen */
nav.post-controls .actions .double-button button.has-like .d-icon {
    color: #fff
}

/*
.d-header-icons .icon img.avatar {

    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(https://cdn.discordapp.com/attachments/971520421851697193/971527077369106432/unknown.png?size=4096);
    width: 40px !important;
    height: 40px !important;
    padding-left: 40px;
    background-size: 40px 40px;
*/
/* Suche */
.custom-search-banner-wrap {
    margin: 0 auto !important;
    max-width: unset;
    color: var(--secondary);
}

.custom-search-banner-wrap h1 {
    font-size: 4em;
}

.custom-search-banner-wrap p {
    font-size: 1.25em !important;
    font-weight: bold;
    margin-bottom: 1em;
}

.custom-search-banner-wrap .btn {
    height: 100%;
}

.custom-search-banner-wrap .search-menu input[type="text"] {
    border: 1px solid transparent;
    border-radius: 0.25em;
    min-height: 40px;
}

.custom-search-banner-wrap .search-menu input[type="text"]:focus {
    outline: 3px solid rgba(var(--primary-rgb), 0.35);
}

.custom-search-banner-wrap .widget-link.show-help {
    color: rgba(var(--primary-rgb), 0.75);
    border-radius: 0.5em;
    padding: 0.5em;
    background-color: rgba(var(--secondary-rgb), 0.25);
}

.custom-search-banner-wrap .widget-link.show-help:hover {
    color: var(--primary);
}

.custom-search-banner-wrap .search-menu .search-input {
    border-color: var(--tertiary-hover);
    outline: 1px solid var(--tertiary-hover);
}

.custom-search-banner-wrap .results {
    top: 43px;
    border-radius: 0.25em;
}

.custom-search-banner-wrap .search-context {
    top: 3.25em;
    right: 1em;
}
div.boxed, .admin-content .admin-contents, .full-width, .boxed.white,
.admin-customize .current-style .edit-main-nav ul, .admin-controls,
.admin-controls nav, .admin-controls nav:after, .admin-controls nav:before {
    background:0;
}

.custom-search-banner-wrap {
    margin: 0 auto !important;
    max-width: unset;
    color: var(--secondary);
}

.custom-search-banner-wrap h1 {
    font-size: 4em;
}

.custom-search-banner-wrap p {
    font-size: 1.25em !important;
    font-weight: bold;
    margin-bottom: 1em;
}

.custom-search-banner-wrap .btn {
    height: 100%;
}

.custom-search-banner-wrap .search-menu input[type="text"] {
    border: 1px solid transparent;
    border-radius: 0.25em;
    min-height: 40px;
}
body{
    background-image:url("https://d3bpeqsaub0i6y.cloudfront.net/plugins/discourse-teams-sidebar/images/teams-pattern.gif")!important;
}
pre code{
    border-radius:8px;
}
.custom-search-banner-wrap .search-menu input[type="text"]:focus {
    outline: 3px solid rgba(var(--primary-rgb), 0.35);
}
.d-header {
    background-image:url("https://cdn.discordapp.com/attachments/896497506895147008/995926334524096572/Untitled2.png?size=4096");
    background-repeat:none;
    border-radius:0px 0px 8px 8px ;
}

.custom-search-banner-wrap .widget-link.show-help {
    color: rgba(var(--primary-rgb), 0.75);
    border-radius: 0.5em;
    padding: 0.5em;
    background-color: rgba(var(--secondary-rgb), 0.25);
}

.custom-search-banner-wrap .widget-link.show-help:hover {
    color: var(--primary);
}
aside.onebox {
    border-radius:8px 8px 8px 8px
}
.custom-search-banner-wrap .search-menu .search-input {
    border-color: var(--tertiary-hover);
    outline: 1px solid var(--tertiary-hover);
}

.custom-search-banner-wrap .results {
    top: 43px;
    border-radius: 0.25em;
}



.custom-search-banner-wrap .search-context {
    top: 3.25em;
    right: 1em;
}

.search-input {
    border-radius: 0.25em;
}

#main #reply-control .grippie {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.display-search-banner #main-outlet {
    padding-top: 1em;
}

.alert {
    margin: 1em 0;
}
.composer-popup.education-message {
    border-radius:8px
}

.topic-list .topic-list-header .topic-list-data,
.topic-list .topic-list-item .topic-list-data {
    padding: 15px 5px;
}

.navigation-topics .topic-list .topic-list-body .topic-list-data,
.navigation-topics .topic-list .topic-list-header .topic-list-data {
    flex: unset;
}

/* Den Körper etwas heller machen */
html body {
    background-color: #121212 !important;
}

html body #main-outlet,
.user-content,
body,
.user-main .about .details {
    background-color: #090909 !important
}

/* Benutzerkarten + Header, die gut aussehen */
.d-header {
//    background: #000fff00;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0) !important;
}

.d-header {
//    backdrop-filter: blur(1rem);
    top: 4px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.category-list.with-topics .category {
    border-radius:8px 0px 0px 8px;
}

.extra-info-wrapper .topic-header-extra .discourse-tags .discourse-tag {
    border-radius: 8px 8px 8px 8px;
    background-color: #0f0f0f !important
}


/* Die fehlerhaften Abzeichen reparieren */
.user-card .badge-section .user-card-badge-link,
.user-card .badge-section .more-user-badges {
    border: 0px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.badge-wrapper.box {
    border-radius: 0.25em;
    overflow: hidden;
}

.badge-wrapper.bullet .badge-category-bg {
    border-radius: 0.125em;
}

.badge-wrapper.bullet .badge-category-parent-bg {
    border-top-left-radius: 0.125em;
    border-bottom-left-radius: 0.125em;
}

/* Benachrichtigungen neu einfärben */
.d-header-icons .unread-notifications {
    /*Neue Benachrichtigung, gilt auch als "niedrige Priorität"*/
    background-color: #4aaeff;
}

.unread-high-priority-notifications.badge-notification[href] {
    /* DM/Moderationsaktion, gilt als "hohe Priorität" */
    background-color: #67ffb2;
}

.user-card.show,
.group-card.show {
    backdrop-filter: blur(08px);
    background: 0
}

.badge-wrapper.bullet .badge-category-parent-bg + .badge-category-bg {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0.125em;
    border-bottom-right-radius: 0.125em;
}



.user-card .badge-section .user-badge,
.user-card .badge-section .more-user-badges a {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.modal-backdrop.in,
.mfp-container {
    background: #000000c7;
    backdrop-filter: blur(0.4rem)
}

.modal-inner-container {
    border-radius: 9px
}

.discourse-tag {
    font-size: medium;
    border-radius: 0.25em;
    padding: 0.15em 0.25em 0.15em 0.35em;
    background-color: var(--primary-low);
    color: var(--primary) !important;
}

.discourse-tag:hover {
    background-color: var(--primary-low-mid);
    color: var(--primary);
}

.discourse-tags .discourse-tag.simple:not(:last-child)::after,
.list-tags .discourse-tag.simple:not(:last-child)::after,
.search-category .discourse-tag.simple:not(:last-child)::after {
    content: "";
    margin-left: unset;
}

.topic-list .link-bottom-line .discourse-tag.simple:after,
.topic-list .link-bottom-line .discourse-tag.box {
    margin-right: 0px;
}

#site-text-logo {
    color: var(--primary);
}

.mobile-view .cm-header-links {
    display: none;
}

.mobile-view .list-controls .nav-pills .drop li:first-of-type {
    display: none;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.select-kit.combo-box .select-kit-header,
.d-editor-textarea-wrapper,
div.ac-wrap {
    border-radius: 8px !important;
}
.badge-card,
.reviewable-filters,
.user-card.show, .group-card.show {
    border-radius:14px;
}

.list-controls .combo-box .combo-box-header {
    border: 0px;
    background-color: #2c2c2c
}

.d-header {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.d-header {
    margin-top:5px;
    border-radius:12px 12px 12px 12px
}

.d-header-icons .d-icon {
    border-radius: 100px;
}

.d-header-icons .icon {
    border-radius: 0.25em;
    margin-left: 0.3em;
    border: 1px solid transparent;
}

.d-header-icons .icon svg {
    font-size: 1.25em;
}

.d-header-icons .icon img.avatar {
    border-radius: 0.25em;
}

.menu-panel.drop-down {
    margin-top: 1em;
    border-radius: 0.5em;
    border: 1px solid var(--primary-low-mid);
}

.drop-down-mode .d-header-icons .active .icon {
    border: 1px solid transparent;
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

.drop-down-mode .d-header-icons .active .icon:hover {
    border: 1px solid transparent;
}
.topic-chat-container .chat-live-pane,
.chat-live-pane .chat-messages-scroll,
.chat-composer-container,
.chat-drawer,
.topic-chat-drawer-header,
.topic-chat-drawer-content,
.topic-chat-container {
    background-color: #24242412;
    backdrop-filter: blur(2rem);
}
.chat-message {
    background:0;
}
.chat-messages-container .chat-message.chat-message-bookmarked {
    border-radius:8px
}
.user-card.show, .group-card.show, .user-card .card-content, .group-card .card-content {
    border-radius:12px;
    background-color: #24242436;
    backdrop-filter:blur(2rem)
        
}
.chat-composer-dropdown__list,
[data-tippy-root],
.tippy-box {
    background-color:#24242412;
    border-radius:8px;
    backdrop-filter:blur(10rem)
}
.modal-backdrop.in {
    background-color:#24242400;
    backdrop-filter:blur(5rem)
}

.menu-panel .widget-link:hover,
.menu-panel .widget-link:focus,
.menu-panel .categories-link:hover,
.menu-panel .categories-link:focus {
    background-color: rgba(var(--tertiary-rgb), 0.5);
}

.btn:not(.themes-tab):not(.components-tab),
.select-kit.dropdown-select-box .dropdown-select-box-header {
    border-radius: 8px;
    border: 1px solid transparent;
}

.post-admin-menu.popup-menu .btn.widget-button {
    border-radius: 0px;
}

.unread-high-priority-notifications {
    background: var(--quaternary);
}

.timeline-container .topic-timeline .timeline-handle {
    background-color: var(--tertiary);
}

.timeline-container .topic-timeline .timeline-scrollarea {
    border-left-color: var(--tertiary);
}

html body {
    background: linear-gradient(0deg, rgba(var(--primary-rgb), 0.075) 0%, rgba(var(--primary-rgb), 0.075) 100%), linear-gradient(0deg, var(--secondary) 100%, var(--secondary) 100%);
}

html #background-container {
    position: fixed;
    z-index: -0;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%);
    clip-path: ellipse(148% 70% at 91% -14%);
}

html body #main-outlet {
    z-index: 6;
    margin-top: 5px;
    margin-bottom: 50px;
    background: var(--secondary);
    border-radius: 1em;
    padding: 3em 3em 5%;
    max-width: 1150px;
    padding-bottom: 5% !important;
    box-shadow: 0 24px 40px rgb(0, 0, 0), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
}

.archetype-regular html body #main-outlet {
    min-height: 500px;
}

@media screen and (max-width: 700px) {
    html body #main-outlet {
        padding: 1.5em;
        margin-top: 0;
    }
}

.modal-middle-container {
    background: #fff0 !important;
}

.modal.in {
    background: #fff0 !important;
}

.modal-outer-container,
.modal.in {
    background: #fff0 !important;
}

@media screen and (max-width: 1120px) {
    html body #main-outlet {
        width: 80%;
    }
}

@media screen and (max-width: 1075px) {
    html body #main-outlet {
        width: 85%;
    }
}

.nav-pills > li a.active,
.nav-pills > li > a {
    border-radius: 0.5em;
}

@keyframes background-fade-highlight {
    0% {
        background-color: var(--highlight-low);
    }

    100% {
        background-color: var(--secondary);
    }
}

.full-width .contents .topic-list {
    border-collapse: separate;
    border-spacing: 0 0.25em;
    display: contents;
}

.full-width .contents .topic-list .topic-list-header {
    display: contents;
}

.full-width .contents .topic-list .topic-list-header tr {
    display: flex;
    border-bottom: none;
}

.full-width .contents .topic-list .topic-list-header .topic-list-data.default {
    width: 63%;
}

.full-width .contents .topic-list .topic-list-header .topic-list-data.posters {
    width: 7%;
}

.full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
    width: 15%;
}

.full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
    width: 15%;
}

.full-width .contents .topic-list .topic-list-body {
    display: contents;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item-separator {
    width: 100%;
    margin: 0.75em 0;
    display: flex;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item-separator .topic-list-data {
    width: 100%;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item {
    width: 100%;
    display: flex;
    margin-bottom: 0.5em;
    background-color: var(--secondary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 1em;
    position: relative;
    transition: box-shadow 100ms ease-in-out;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
}

.full-width .contents .topic-list .topic-list-body .topic-list-item.visited {
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.full-width .contents .topic-list .topic-list-body .topic-list-item.visited .discourse-tag {
    opacity: 0.75;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item.visited:hover {
    border: 1px solid rgba(var(--primary-rgb), 0.25);
}

.full-width .contents .topic-list .topic-list-body .topic-list-item.visited:hover .discourse-tag {
    opacity: 1;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item:hover {
    background-color: var(--secondary);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}
.ip-lookup .location-box {
    background-color:#24242412;
    backdrop-filter:blur(2rem);
    border-radius:8px;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item:hover a.title:not(.badge-notification),
.full-width .contents .topic-list .topic-list-body .topic-list-item:hover a.topic-excerpt {
    color: var(--primary) !important;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
    width: 63%;
    order: 2;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posters {
    width: 7%;
    order: 1;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posters a:not(.latest) {
    display: none;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
    width: 15%;
    order: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
    width: 15%;
    order: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}


.full-width .contents .topic-list .topic-list-item .posters a.latest {
    margin-right: 4px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.full-width .contents .topic-list .topic-list-item .posters a.latest .avatar {
    margin-right: 0;
}

.full-width .contents .topic-list .topic-list-item .main-link {
    min-height: 100%;
}

.full-width .contents .topic-list .topic-list-item .main-link .link-top-line {
    display: block;
    margin-bottom: 0.25em;
}

.full-width .contents .topic-list .topic-list-item .main-link .title {
    font-weight: bold;
}

.full-width .contents .topic-list .topic-list-item .main-link .link-area {
    display: flex;
}

.full-width .contents .topic-list .topic-list-item .main-link .link-area .link-title-area {
    margin-right: 1em;
    font-size: medium;
}

.full-width .contents .topic-list .topic-list-item .main-link .link-area .link-meta-area {
    font-size: medium;
    display: flex;
    align-items: center;
}

.full-width .contents .topic-list .topic-list-item .posters .avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.full-width .contents .topic-list .topic-list-item .posters a.latest .avatar {
    margin-right: 0;
}

.full-width .contents .topic-list .topic-list-item .posters a:not(.latest) {
    margin-left: -22px;
}

.full-width .contents .topic-list .topic-list-item .posters a:not(.latest) .avatar {
    border: 3px solid var(--secondary);
}

.full-width .contents .topic-list .topic-list-item .posts-map a,
.full-width .contents .topic-list .topic-list-item .num.age.activity a {
    padding: 0;
}

.full-width .contents .topic-list .topic-list-item .posts-map {
    position: relative;
}

.full-width .contents .topic-list .topic-list-item .posts-map .number {
    margin-right: 0.25em;
}

.full-width .contents .topic-list .topic-list-item .post-activity .d-icon-reply {
    color: var(--primary-medium);
    margin-right: 0.25em;
}

.full-width .contents .topic-list .topic-list-item .post-activity .relative-date {
    color: var(--primary-medium);
}

.navigation-container {
    margin-top: 2em;
}

.published-page-content-wrapper {
    max-width: 1000px;
    margin-top: 30px;
    margin-bottom: 50px;
    background: var(--secondary);
    border-radius: 1em;
    padding: 3em 3em 5%;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
    z-index: 1;
    position: relative;
}

.published-page .background-container {
    display: none;
}

.post-notice {
    background: 0;
}

.group-details-container {
    border-radius: 8px
}

.published-page::before {
    background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%);
    clip-path: ellipse(148% 70% at 91% -14%);
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    z-index: 0;
}

.quote-button {
    background-color: var(--primary-low-mid);
    border-radius: 0.5em;
}

.directory .filter-name {
    float: none;
}

.directory .filters {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.directory .filters > span {
    margin-bottom: 5px;
}

.directory .group-filter:not(.active) .select-kit-header {
    color: var(--primary-high);
}

.user-card-directory {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 60px 20px;
    margin-top: 60px;
}

.fullscreen-table-modal .modal-inner-container {
    border-radius: 8px
}

@media only screen and (min-width: 500px) {
    .user-card-directory {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

.user-card-directory .user-card-container {
    margin: 60px 20px;
}

@supports (display: grid) {
    .user-card-directory {
        display: grid;
    }

    .user-card-directory .user-card-container {
        margin: 0;
    }
}

.user-card-directory .user-card {
    z-index: auto;
    position: relative;
    width: 100%;
    box-shadow: none;
    margin: 0;
}

.hljs {
    border-radius: 8px
}

.user-card-directory .user-card .badge-section {
    overflow: hidden;
}

.user-card-directory .usercard-controls {
    display: none;
}

.user-card-directory .user-card-container {
    width: 100%;
    background-color: var(--secondary);
    box-shadow: none;
    margin-bottom: auto;
}

.user-card-directory .user-card-directory-footer {
    background-color: var(--secondary);
    padding: 0px 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
}

.user-card-directory .user-card-directory-footer .stat {
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2px;
}

.user-card-directory .user-card-directory-footer .stat .label {
    font-size: medium;
}

.user-card-directory .user-card-directory-footer .stat .label .d-icon {
    margin-right: 0.2em;
    color: var(--primary-medium);
}

/*
discourse, ihr müsst euer Suchsystem wirklich reparieren
*/
.search-container .search-header {
    background: 0;
}

.search-container .search-filters .search-advanced-filters .search-advanced-options {
    background-color: #121212;
}

.search-container .search-filters details.search-advanced-additional-options > summary {
    background-color: #121212;
}

.search-container .search-bar {
    background-color: #121212;
}

.search-container .search-filters {
    background-color: #121212;
}

.search-container .search-filters .search-advanced-filters {
    background-color: #121212;
}

.page-not-found-topics {
    margin-left: auto;
    margin-right: auto;
}

/*Ultras Mockup für das Flair, es hat mir so gut gefallen, dass ich es umgesetzt habe*/
.topic-avatar .avatar-flair.rounded,
.avatar-flair-preview .avatar-flair.rounded,
.collapsed-info .user-profile-avatar .avatar-flair.rounded,
.user-image .avatar-flair.rounded,
.latest-topic-list-item .avatar-flair.rounded,
.user-card-avatar .avatar-flair.rounded,
.user-profile-avatar .avatar-flair.rounded {
    background-color: #fff0 !important;
    bottom: 25px;
    right: -14px;
}

.user-card-avatar .avatar-flair.rounded,
.user-profile-avatar .avatar-flair.rounded {
    bottom: -20px;
    right: -23px
}

.user-card-avatar .avatar-flair .fa,
.user-profile-avatar .avatar-flair .fa {
    right: -20px
}

.topic-meta-data {
    align-items: end !important;
}

.topic-body .topic-meta-data {
    right: -5px
}
div.row {
    background:0;
}
body:not(.ios-safari-composer-hacks) #reply-control.open.composer-action-reply, 
input[type="text"],
input[type="password"], 
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"], 
input[type="time"],
input[type="week"],
input[type="number"], 
input[type="email"], 
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"], 
.select-kit.combo-box .select-kit-header,
.d-editor-textarea-wrapper,
div.ac-wrap,
.menu-panel.drop-down,
.popup-menu,
#reply-control .reply-area,
body:not(.ios-safari-composer-hacks) #reply-control.open {
    background: #000fff00 !important;
    backdrop-filter:blur(2rem) !important;
}
#reply-control .mini-tag-chooser .select-kit-header {
    background:0;
    border-radius:8px;
}
.popup-menu {
    border-radius:8px
}
.user-menu .quick-access-panel ul {
    border-radius:8px;
    opacity:0.7;
}

.menu-panel.drop-down {
    background:blur(2rem)!important;
}
.discourse-reactions-state-panel .container, .discourse-reactions-picker .discourse-reactions-picker-container {
    border-radius:8px;
    background: #000fff00 !important;
    backdrop-filter:blur(2rem) !important;
}
.admin-report .conditional-loading-section.is-loading {
    background:0;
}
nav.post-controls .actions button{
    border-radius:8px;
}

.menu-panel.drop-down {
    border: 0px;
    background-color: #1D1D1D
}

.user-menu .quick-access-panel li a {
    padding: 0em 0.5em;
}

.presence-users {
    background: 0
}

.drop-down-mode .d-header-icons .active .icon {
    background: #fff0
}

.user-menu .quick-access-panel.quick-access-profile li:not(.show-all) a {
    padding-bottom: .1em
}


img.avatar {
    border-radius: 15px
}

.search-container .search-page-heading {
    padding: 2em 3.8em;
    font-size: 5em
}

.search-advanced-additional-options {
    font-size: 20px
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: #0003ffeb
}

.user-invite-none {
    font-size: 25px;
    font-weight: 1000;
}
.topic-map {
    background-color:#06060600
}
a.mention {
    background-color: #fff0
}

div.poll .results .chosen .bar,
div.poll .results .bar-back {
    border-radius: 8px
}
.map:first-of-type .buttons .btn {
    border-radius:8px 0px 0px 8px 
}
div.poll .results .bar {
    border-radius: 8px;
}

.user-card .badge-section {
    border-radius: 8px !important
}

.user-main .about .secondary dl div {
    margin-right: -6px
}

#reply-control .save-or-cancel .cancel {
    background:#2C2C2C;
    border-radius:8px;
    width:70px;
    height:30px;
    content:"test" !important;
    text-align:center !important;
}
.post-notice p {
    font-family:"Gotham";
}
div#banner, div.global-notice, .ember29,.alert.alert-info {
    border-radius:12px;
}
blockquote {
    border-radius:8px;
}
.admin-detail, .admin-controls .controls, .nav-stacked li, .admin-nav {
    background:0;
    border-radius:8px;
}

Oder auf meiner GitHub-Seite.

Danke!

Don · 26. Juli 2022 um 18:58

Hallo,

Ich glaube, das Problem ist, dass backdrop-filter bei verschachtelten Elementen nicht gut funktioniert.
Ich schlage vor, backdrop-filter aus diesen Elementen zu entfernen oder zu versuchen, es zu einem ::before-Pseudo hinzuzufügen.

So etwas wie hier
Dies ist nur ein Beispiel für Composer. Sie müssen es für die anderen Elemente ändern, die Sie verwenden.

#reply-control.open,
.d-editor-textarea-wrapper {
    background-color: rgba(var(--header_background-rgb), 0.15);
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backdrop-filter: blur(2rem);
      backdrop-filter: blur(2rem);      
      z-index: -1;
    }
  }

Und so sieht es mit funktionierendem Select-Kit aus.

darkpixlz · 26. Juli 2022 um 19:03

Würde ich dies durch meinen vorhandenen Blur-Code ersetzen?

body:not(.ios-safari-composer-hacks) #reply-control.open.composer-action-reply, 
input[type="text"],
input[type="password"], 
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"], 
input[type="time"],
input[type="week"],
input[type="number"], 
input[type="email"], 
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"], 
.select-kit.combo-box .select-kit-header,
.d-editor-textarea-wrapper,
div.ac-wrap,
.menu-panel.drop-down,
.popup-menu,
#reply-control .reply-area,
body:not(.ios-safari-composer-hacks) #reply-control.open {
    background: #000fff00 !important;
    backdrop-filter:blur(2rem) !important;
}
#reply-control .mini-tag-chooser .select-kit-header {
    background:0;
    border-radius:8px;
}

darkpixlz · 26. Juli 2022 um 19:07

Nein, dieser Commit hat nicht funktioniert.

github.com/pyxfluff/darkpixlz-Modern-Theme

common/common.scss

master

// pyxfluff 2022-2025

@import url("https://fonts.googleapis.com/css?family=Nunito");

// Mixins
@mixin Semitransparent-Box() {
    border-radius: 12px;
    background: rgba(var(--secondary-rgb), .4);
    border: rgba(var(--secondary-rgb), .4)
}

@mixin BorderByOption($style) {

    // todo
    @if $style =="more" {
        border-radius: 18px;
    }

    @else {
        border-radius: 8px;

This file has been truncated. show original

Don · 26. Juli 2022 um 20:11

Ja, ich habe gerade ein Beispiel geteilt, wie man es macht, und du musst deinen Code dort einfügen, wo du backdrop-filter verwendest. Aber sei sicher, einige Stellen dieses Codes zu ändern, damit er zu deiner Website passt.

Zum Beispiel dieser Code:

body:not(.ios-safari-composer-hacks) #reply-control.open.composer-action-reply,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.select-kit.combo-box .select-kit-header,
.d-editor-textarea-wrapper,
div.ac-wrap,
.menu-panel.drop-down,
.popup-menu,
#reply-control .reply-area,
body:not(.ios-safari-composer-hacks) #reply-control.open {
    background: #000fff00 !important;
    backdrop-filter:blur(2rem) !important;
}

Sieht ungefähr so aus:

input[type],
div.ac-wrap,
.menu-panel.drop-down,
.popup-menu,
#reply-control.open,
.d-editor-textarea-wrapper {
  background-color: rgba(var(--header_background-rgb), 0.15);

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);
    z-index: -1;
  }
}

darkpixlz · 27. Juli 2022 um 00:06

Danke, das hat funktioniert

Ich habe bemerkt, dass auch andere unscharfe Elemente verschwunden sind.

Der Commit ist hier, falls du denkst, ich habe etwas Dummes getan:

Don · 27. Juli 2022 um 09:18

Hallo,

Ich habe dein gesamtes CSS neu geschrieben, einiges entfernt und einiges hinzugefügt. Ich verwende SCSS anstelle von CSS, da es einfacher zu handhaben und zu überprüfen ist und kürzer ausfällt. An einigen Stellen mit Transparenz verwende ich RGB anstelle von HEX. Aufgrund des riesigen CSS hast du einige zuvor hinzugefügte CSS-Codes dupliziert und überschrieben, was zu Problemen geführt hat. Außerdem wurde an einigen Stellen das abschließende ; vergessen, was ebenfalls Probleme verursacht.

Ich habe nicht alles überprüft, also bitte überprüfe und teste es, bevor du es auf deiner Live-Website verwendest.

// Hier Hintergrundbild ändern

body {
  background-image: linear-gradient(0deg, rgba(var(--secondary-rgb), 1) 0%, rgba(var(--secondary-rgb), 0.75) 100%),
                    url("https://d3bpeqsaub0i6y.cloudfront.net/plugins/discourse-teams-sidebar/images/teams-pattern.gif");
  background-size: 350px;
  /* Den Body etwas heller machen */
  background-color: #121212;
  font-family: "Poppins";
}

/* Cursor dauerhaft auf Normal stellen */
body,
button,div,span,a,
img,svg,
h1,h2,h3,h4,h5,h6,p,
summary,
input,textbox,input,textarea,
li,ul {
  cursor: default !important;
}

.cooked img:not(.thumbnail):not(.emoji),
.d-editor-preview img:not(.thumbnail):not(.emoji) {
  border-radius: 8px;
}

/* Den hässlichen Footer ausblenden */
#footer_rbx {
  display: none;
}

aside.quote .title {
  border-radius: 8px;
}

/* Like-Button weiß machen */
nav.post-controls .actions .double-button button.has-like .d-icon {
  color: #fff;
}

/*
.d-header-icons .icon img.avatar {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://cdn.discordapp.com/attachments/971520421851697193/971527077369106432/unknown.png?size=4096);
  width: 40px !important;
  height: 40px !important;
  padding-left: 40px;
  background-size: 40px 40px;
*/

/* Suche */
.custom-search-banner-wrap {
  margin: 0 auto !important;
  max-width: unset;
  color: var(--secondary);
  h1 {
    font-size: 4em;
  }
  p {
    font-size: 1.25em !important;
    font-weight: bold;
    margin-bottom: 1em;
  }
  .btn {
    height: 100%;
  }
  .search-menu {
    input[type="text"] {
      border: 1px solid transparent;
      border-radius: 0.25em;
      min-height: 40px;
      &:focus {
        outline: 3px solid rgba(var(--primary-rgb), 0.35);
      }
    }
    .search-input {
      border-color: var(--tertiary-hover);
      outline: 1px solid var(--tertiary-hover);
    }
  }
  .search-context {
    top: 3.25em;
    right: 1em;
  }
  .widget-link.show-help {
    color: rgba(var(--primary-rgb), 0.75);
    border-radius: 0.5em;
    padding: 0.5em;
    background-color: rgba(var(--secondary-rgb), 0.25);
    &:hover {
      color: var(--primary);
    }
  }
  .results {
    top: 43px;
    border-radius: 0.25em;
  }
}

div.boxed,
.admin-content .admin-contents,
.full-width,
.boxed.white,
.admin-customize .current-style .edit-main-nav ul,
.admin-controls nav,
.admin-controls nav:after,
.admin-controls nav:before {
  background: transparent;
}

pre code {
  border-radius: 8px;
}

.d-header {
  background-image: url("https://cdn.discordapp.com/attachments/896497506895147008/995926334524096572/Untitled2.png?size=4096");
  background-repeat: no-repeat;
  border-radius: 0px 0px 8px 8px;
}

.search-input {
  border-radius: 0.25em;
}

#main #reply-control .grippie {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.display-search-banner #main-outlet {
  padding-top: 1em;
}

.alert {
  margin: 1em 0;
}

.composer-popup.education-message {
  border-radius: 8px;
}

.topic-list {
  .topic-list-header,
  .topic-list-item {
    .topic-list-data {
      padding: 15px 5px;
    }
  }
}

.navigation-topics .topic-list {
  .topic-list-header,
  .topic-list-body {
    .topic-list-data {
      flex: unset;
    }
  }
}

#main-outlet,
.user-content,
body,
.user-main .about .details {
  background-color: #090909 !important;
}

/* Benutzerkarten + Header, die gut aussehen */
.d-header {
  //  background: #000fff00;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0) !important;
  // backdrop-filter: blur(1rem);
  top: 4px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.category-list.with-topics .category {
  border-radius: 8px 0px 0px 8px;
}

.extra-info-wrapper .topic-header-extra .discourse-tags .discourse-tag {
  border-radius: 8px 8px 8px 8px;
  background-color: #0f0f0f !important;
}

/* Den glitchy af-Abzeichen reparieren */
.user-card .badge-section {
  border-radius: 8px;
  .user-card-badge-link,
  .more-user-badges {
    border: 0px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}

.badge-wrapper.box {
  border-radius: 0.25em;
  overflow: hidden;
}

.badge-wrapper.bullet .badge-category-bg {
  border-radius: 0.125em;
}

.badge-wrapper.bullet .badge-category-parent-bg {
  border-top-left-radius: 0.125em;
  border-bottom-left-radius: 0.125em;
}

.badge-wrapper.bullet .badge-category-parent-bg + .badge-category-bg {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0.125em;
  border-bottom-right-radius: 0.125em;
}

/* Neufärbung der Benachrichtigungen */
.d-header-icons .unread-notifications {
  /* Neue Benachrichtigung, zählt auch als „niedrige Priorität" */
  background-color: #4aaeff;
}

.unread-high-priority-notifications.badge-notification[href] {
  /* DM/Moderationsaktion, zählt als „hohe Priorität" */
  background-color: #67ffb2;
}

.user-card {
  .badge-section {
    .user-badge,
    .more-user-badges a {
      border-radius: 16px;
    }  
  }
}

.modal-inner-container {
  border-radius: 9px;
}

.discourse-tag {
  font-size: medium;
  border-radius: 0.25em;
  padding: 0.15em 0.25em 0.15em 0.35em;
  background-color: var(--primary-low);
  color: var(--primary) !important;
  &:hover {
    background-color: var(--primary-low-mid);
    color: var(--primary);
  }
}

.discourse-tags,
.list-tags,
.search-category {
  .discourse-tag.simple:not(:last-child)::after {
    content: "";
    margin-left: unset;
  }
}

.topic-list {
  .link-bottom-line {
    .discourse-tag {
      &.simple:after,
      &.discourse-tag.box {
        margin-right: 0px;
      }
    }
  }
}

#site-text-logo {
  color: var(--primary);
}

.mobile-view .cm-header-links {
  display: none;
}

.mobile-view .list-controls .nav-pills .drop li:first-of-type {
  display: none;
}

input[type],
.select-kit.combo-box .select-kit-header,
.d-editor-textarea-wrapper,
div.ac-wrap {
  border-radius: 8px !important;
}

.badge-card,
.reviewable-filters,
.user-card.show,
.group-card.show {
  border-radius: 14px;
}

.list-controls .combo-box .combo-box-header {
  border: none;
  background-color: #2c2c2c;
}

.d-header {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  margin-top: 5px;
  border-radius: 12px 12px 12px 12px;
}

.d-header-icons {
  .d-icon {
    border-radius: 100px;
    .icon {
      border-radius: 0.25em;
      margin-left: 0.3em;
      border: 1px solid transparent;
      svg {
        font-size: 1.25em;
      }
      img.avatar {
        border-radius: 0.25em;
      }
    }
  }
}

.menu-panel.drop-down {
  margin-top: 1em;
  border-radius: 0.5em;
  border: none;
}

.drop-down-mode .d-header-icons .active .icon {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.00);
  .d-icon {
    color: var(--tertiary);
  }
  &:hover {
    border: 1px solid transparent;
  }
}

.topic-chat-container .chat-live-pane,
.chat-live-pane .chat-messages-scroll,
.chat-composer-container,
.chat-drawer,
.topic-chat-drawer-header,
.topic-chat-drawer-content,
.topic-chat-container {
  background-color: rgba(36, 36, 36, 0.07);
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
  }
}

.chat-message {
  background: transparent;
}

.chat-messages-container .chat-message.chat-message-bookmarked {
  border-radius: 8px;
}

.chat-composer-dropdown__list,
[data-tippy-root],
.tippy-box {
  background-color: rgba(36, 36, 36, 0.07);
  border-radius: 8px;
  backdrop-filter: blur(10rem);
  -webkit-backdrop-filter: blur(10rem);
}

.user-card.show,
.group-card.show,
.user-card .card-content,
.group-card .card-content {
  border-radius: 12px;
  background-color: rgba(36, 36, 36, 0.21);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
}

.modal-backdrop.in {
  background-color: rgba(36, 36, 36, 0.00);
  backdrop-filter: blur(5rem);
  -webkit-backdrop-filter: blur(5rem);
}

.menu-panel {
  .widget-link,
  .categories-link {
    &:hover,
    &:focus {
      background-color: rgba(var(--tertiary-rgb), 0.5);
    }
  }
}

.btn:not(.themes-tab):not(.components-tab),
.select-kit.dropdown-select-box .dropdown-select-box-header {
  border-radius: 8px;
  border: 1px solid transparent;
}

.post-admin-menu.popup-menu .btn.widget-button {
  border-radius: 0px;
}

.unread-high-priority-notifications {
  background: var(--quaternary);
}

.timeline-container {
  .topic-timeline {
    .timeline-handle {
      background-color: var(--tertiary);
    }
    .timeline-scrollarea {
      border-left-color: var(--tertiary);
    }
  }
}

#background-container {
  position: fixed;
  z-index: -0;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%);
  clip-path: ellipse(148% 70% at 91% -14%);
}

#main-outlet {
  margin-top: 5px;
  margin-bottom: 50px;
  background: var(--secondary);
  border-radius: 1em;
  padding: 3em 3em 5%;
  max-width: 1150px;
  padding-bottom: 5% !important;
  box-shadow: 0 24px 40px rgb(0, 0, 0), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
  @media screen and (max-width: 700px) {
    padding: 1.5em;
    margin-top: 0;
  }
  @media screen and (max-width: 1120px) {
    width: 80%;
  }
  @media screen and (max-width: 1075px) {
    width: 85%;
  }
}

body.archetype-regular #main-outlet {
  min-height: 500px;
}

.nav-pills > li a.active,
.nav-pills > li > a {
    border-radius: 0.5em;
}

@keyframes background-fade-highlight {
  0% {
    background-color: var(--highlight-low);
  }
  100% {
    background-color: var(--secondary);
  }
}

.full-width {
  .contents {
    .topic-list {
      border-collapse: separate;
      border-spacing: 0 0.25em;
      display: contents;
      .topic-list-header {
        display: contents;
        tr {
          display: flex;
          border-bottom: none;
        }
        .topic-list-data {
          &.default {
            width: 63%;
          }
          &.posters {
            width: 7%;
          }
          &.posts {
            width: 15%;
          }
          &.activity {
            width: 15%;
          }
        }
      }
      .topic-list-body {
        display: contents;
        .topic-list-item-separator {
          width: 100%;
          margin: 0.75em 0;
          display: flex;
          .topic-list-data {
            width: 100%;
          }
        }
        .topic-list-item {
          width: 100%;
          display: flex;
          margin-bottom: 0.5em;
          background-color: var(--secondary);
          border: 1px solid rgba(var(--primary-rgb), 0.2);
          border-radius: 1em;
          position: relative;
          transition: box-shadow 100ms ease-in-out;
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
          &.visited {
            border: 1px solid rgba(var(--primary-rgb), 0.1);
            .discourse-tag {
              opacity: 0.75;
            }
            &:hover {
              border: 1px solid rgba(var(--primary-rgb), 0.25);
              .discourse-tag {
                opacity: 1;
              }
            }
          }
          &:hover {
            background-color: var(--secondary);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(var(--primary-rgb), 0.3);
            a.title:not(.badge-notification),
            a.topic-excerpt {
              color: var(--primary) !important;
            }
          }
          .topic-list-data {
            &.main-link {
              width: 63%;
              order: 2;
            }
            &.posters {
              width: 7%;
              order: 1;
              height: auto;
              display: flex;
              justify-content: center;
              align-items: center;
              a:not(.latest) {
                display: none;
              }
            }
            &.posts {
              width: 15%;
              order: 3;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            &.age {
              width: 15%;
              order: 4;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .posters {
            a.latest {
              margin-right: 4px;
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-content: center;
              align-items: center;
              .avatar {
                margin-right: 0;
              }
            }
            a:not(.latest) {
              margin-left: -22px;
              .avatar {
                border: 3px solid var(--secondary);
              }
            }
            .avatar {
              width: 40px;
              height: 40px;
              border-radius: 8px;
            }
          }
          .main-link {
            min-height: 100%;
            .link-top-line {
              display: block;
              margin-bottom: 0.25em;
            }
            .title {
              font-weight: bold;
            }
            .link-area {
              display: flex;
              .link-title-area {
                margin-right: 1em;
                font-size: medium;
              }
              .link-meta-area {
                font-size: medium;
                display: flex;
                align-items: center;
              }
            }
          }
          .posts-map a,
          .num.age.activity a {
            padding: 0;
          }
          .posts-map {
            position: relative;
            .number {
              margin-right: 0.25em;
            }
          }
          .post-activity {
            .d-icon-reply {
              color: var(--primary-medium);
              margin-right: 0.25em;
            }
            .relative-date {
              color: var(--primary-medium);
            }
          }
        }
      }
    }
  }
}

.ip-lookup .location-box {
  background-color: rgba(36, 36, 36, 0.07);
  border-radius: 8px;
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
}

.navigation-container {
  margin-top: 2em;
}

.published-page-content-wrapper {
  max-width: 1000px;
  margin-top: 30px;
  margin-bottom: 50px;
  background: var(--secondary);
  border-radius: 1em;
  padding: 3em 3em 5%;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07), 0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112), 0 4.50776px 10.0172px rgba(0, 0, 0, 0.035), 0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
  z-index: 1;
  position: relative;
}

.published-page {
  &::before{
    background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%);
    clip-path: ellipse(148% 70% at 91% -14%);
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    z-index: 0;
  }
  .background-container {
    display: none;
  }
}

.post-notice {
  background: transparent;
}

.group-details-container {
  border-radius: 8px;
}

.quote-button {
  background-color: var(--primary-low-mid);
  border-radius: 0.5em;
}

.directory {
  .filters {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    > span {
      margin-bottom: 5px;
    }
  }
  .filter-name {
    float: none;
  }
  .group-filter:not(.active) .select-kit-header {
    color: var(--primary-high);
  }
}

.user-card-directory {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 60px 20px;
  margin-top: 60px;
  @media only screen and (min-width: 500px) {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  .user-card-container {
    margin: 60px 20px;
    width: 100%;
    background-color: var(--secondary);
    box-shadow: none;
    margin-bottom: auto;
  }
  .user-card {
    z-index: auto;
    position: relative;
    width: 100%;
    box-shadow: none;
    margin: 0;
    .badge-section {
      overflow: hidden;
    }
  }
  .usercard-controls {
    display: none;
  }
  .user-card-directory-footer {
    background-color: var(--secondary);
    padding: 0px 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    .stat {
      flex-basis: 0;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 2px;
      .label {
        font-size: medium;
        .d-icon {
          margin-right: 0.2em;
          color: var(--primary-medium);
        }
      }
    }
  }
}

@supports (display: grid) {
  .user-card-directory {
    display: grid;
  }
  .user-card-directory .user-card-container {
    margin: 0;
  }
}

.fullscreen-table-modal .modal-inner-container {
  border-radius: 8px;
}

.hljs {
  border-radius: 8px;
}

/*
discourse, du musst wirklich dein Suchsystem reparieren
*/
.search-container {
  .search-header {
    background: transparent;
  }
  .search-filters {
    background-color: #121212;
    .search-advanced-filters {
      background-color: #121212;
    }
    .search-advanced-filters .search-advanced-options,
    details.search-advanced-additional-options > summary {
      background-color: #121212;
    }
  }
  .search-bar {
    background-color: #121212;
  }
}

.page-not-found-topics {
  margin-left: auto;
  margin-right: auto;
}

/* Ultras Mockup zum Flair – es hat mir so gut gefallen, dass ich es umgesetzt habe */
.topic-avatar,
.avatar-flair-preview,
.collapsed-info .user-profile-avatar,
.user-image,
.latest-topic-list-item {
  .avatar-flair {
    &.rounded {
      background-color: rgba(255, 255, 255, 0.00);
      bottom: 25px;
      right: -14px;
    }
  }
}

.user-card-avatar,
.user-profile-avatar {
  .avatar-flair {
    &.rounded {
      background-color: rgba(255, 255, 255, 0.00);
      bottom: -20px;
      right: -23px;
    }
    .fa {
      right: -20px;
    }
  }
}

.topic-body .topic-meta-data {
  right: -5px;
  align-items: end !important;
}

div.row {
  background: transparent;
}

input[type],
div.ac-wrap,
.popup-menu,
#reply-control.open,
.d-editor-textarea-wrapper {
  background-color: rgba(0, 15, 255, 0.00);
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);      
    z-index: -1;
  }
}

.menu-panel.drop-down {
  background-color: rgba(0, 15, 255, 0.00);
  -webkit-backdrop-filter: blur(2rem);
  backdrop-filter: blur(2rem); 
}

#reply-control .mini-tag-chooser .select-kit-header {
  background: transparent;
  border-radius: 8px;
}

.popup-menu {
  border-radius:8px;
}

.discourse-reactions-state-panel .container, .discourse-reactions-picker .discourse-reactions-picker-container {
  border-radius: 8px;
  background: rgba(0, 15, 255, 0.00);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
}

.admin-report .conditional-loading-section.is-loading {
  background: transparent;
}

nav.post-controls .actions button{
  border-radius:8px;
}

.user-menu .quick-access-panel {
  ul {
    border-radius: 8px;
    opacity: 0.7;
    li a {
      padding: 0em 0.5em;
    }
  }
  &.quick-access-profile li:not(.show-all) a {
    padding-bottom: .1em;
  }
}

.presence-users {
  background: transparent;
}

img.avatar {
  border-radius: 15px;
}

.search-container .search-page-heading {
  padding: 2em 3.8em;
  font-size: 5em;
}

.search-advanced-additional-options {
  font-size: 20px;
}

.user-invite-none {
  font-size: 25px;
  font-weight: 1000;
}

.topic-map {
  background-color: rgba(6, 6, 6, 0.00);
}

a.mention {
  background-color: rgba(255, 255, 255, 0.00);
}

div.poll .results {
  .chosen .bar,
  .bar-back {
    border-radius: 8px;
  }
  .bar {
    border-radius: 8px;
  }
}

.map:first-of-type .buttons .btn {
  border-radius: 8px 0px 0px 8px;
}

.user-main .about .secondary dl div {
  margin-right: -6px;
}

#reply-control .save-or-cancel .cancel {
  background: #2C2C2C;
  border-radius: 8px;
  width: 70px;
  height: 30px;
  content: „test" !important;
  text-align: center !important;
}

.post-notice p {
  font-family: „Gotham";
}

div#banner,
div.global-notice,
.alert.alert-info {
  border-radius: 12px;
}

blockquote {
  border-radius: 8px;
}

.admin-detail,
.admin-controls .controls,
.nav-stacked li,
.admin-nav {
  background: transparent;
  border-radius: 8px;
}

darkpixlz · 27. Juli 2022 um 16:33

Vielen Dank, dass Sie das für mich tun!

Ich habe es ausprobiert und es ist das Standardthema, ich habe es auch normal installiert.

Und außerdem hatte ich es nur in normalem CSS, weil ich den Stil auf anderen Websites mit Stylish verwenden wollte, lol

Don · 27. Juli 2022 um 17:54

Es gibt mehrere Möglichkeiten, es zu testen.

Versuchen Sie es mit einer lokalen Installation, wenn Sie eine haben oder
Gehen Sie zu https://theme-creator.discourse.org und erstellen Sie ein neues Design/eine neue Komponente oder
Erstellen Sie eine neue Komponente in Ihrer Website-Administration. Aktivieren Sie sie für das Standarddesign, und sie überschreibt die CSS des Standarddesigns oder
Erstellen Sie ein neues GitHub-Repository für dieses Testdesign und installieren Sie es.

Wenn alles gut zu sein scheint, können Sie Ihren Designcode auf GitHub ändern.

darkpixlz · 27. Juli 2022 um 17:58

Es hat im Theme Creator funktioniert, danke!

Ich finde, du solltest einen Pull-Request öffnen, damit du die verdiente Anerkennung für das Theme erhältst, und nochmals vielen Dank

Thema		Antworten	Aufrufe
Issue with blurring elements Development	15	1532	9. Juli 2022
Graceful Theme Theme official , graceful-theme	61	46869	13. Mai 2026
Theme unexplainably broke Development	5	522	18. September 2022
FKB Pro - Social theme Theme	485	38189	31. August 2026
Alien Night Theme - A free Dark Theme for Discourse Theme	78	29270	4. Februar 2025

Select-kit fehlt komplett

Verwandte Themen