- Betroffene Version
- WoltLab Suite 5.2
Stile Wechsler als Button
-
taker9999 -
1. Mai 2021 um 19:53 -
Erledigt
-
-
-
So etwas habe ich gesucht. Ist nur die Frage wie ich es für mein Style hinbekomme.
-
Einfachste Lösung...
Mach dein Icon dahin wo du es möchtest und als Verlinkung machst du www.deine-seite/?styleId=XXX XXX ist dann die gewünschte Id
-
@taker9999, ist eine Menge Arbeit, bin das ganze auch am umschreiben, die Methode von @LoStisWorld habe ich nicht getestet,
aber ich will ja auch keinen Stil neu laden, sondern Direkt von Dunkel auf Hell umschalten.
-
aber ich will ja auch keinen Stil neu laden, sondern Direkt von Dunkel auf Hell umschalten.
Das Thema wurde hier schon öfter angesprochen. Der Aufwand für den dynamischen Switch ist es (noch) nicht Wert. Deshalb die obige Lösung den Stil des Nutzers zu ändern. Wenn du dir genügend Zeit für dein JavaScript und CSS-Code nimmst dann ist das zwar durchaus realisierbar, allerdings ist das keine Sache von 60 Minuten oder sowas.
-
GangstaSunny, wem sagst du das, hänge da schon ein paar Stunden dran.
-
Hier wäre halt auch eine Lösung von Belarus
https://wbbsupport.de/forum/thread/5…-mode-switcher/ -
Mr. Johnsen
wie in der Anleitung [Template] Dark-/Light-Mode Switcher beschrieben, sind darin natürlich entsprechende CSS/SCSS Änderungen notwendig, um dieses den eigenen Wünschen entsprechend anzupassen. Ohne dem ist es lediglich ein einfacher Switch ohne großartigen Änderungen. Da jedoch keine Farbkombi zu jedem x-beliebig genutzten Stil passen würde, wurde auf CSS/SCSS-Deklarationen absichtlich verzichtet, so dass diese wie o.g. selbst angepasst werden müssten. Wem das ganze jedoch zu viel wird, der kann auf auf das Plugin Theme Light / Dark | Automatisch von mipu zurückgreifen.Gruss,
Andreas -
Moin,
ich habe mich die ganze Nacht damit auseinander gesetzt, die Version von Mipu, ist recht umfangreich und an seinen Stile angelehnt, das zu ändern, ist eine menge Arbeit, ich gehe da lieber einen anderen weg und mache es Manuell und suche mir die Farben, etc. über das Web-Entwickler Werkzeug raus, das ist so einfacher, zumindest für mich.
MfG Holger
-
HTMH
schlag Dich noch ein paar Nächte rum oder ersetze einfach den folgenden Quellcode mit dem des Dark-/Light-Mode Switchers. Dieser ist zwar noch nicht vollständig farblich angepasst, aber mit ein wenig Anpassungen werden es sicher nicht noch weitere lange NächteCSS
Alles anzeigen/* :::::::::: DARK MODE SWITCHER :::::::::: */ /* Light Theme*/ .theme-light #main{ transition: .5s ease-in-out; } .theme-dark { transition: .5s ease-in-out; & { /* redeactor */ .redactor-layer pre { background-color: #fff !important; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: #444 !important; } .redactor-layer pre:not(.redactorCalcHeight)::before, .redactor-layer pre.woltlabHtml::before { color: rgba(32, 157, 212, 1); } .redactor-layer pre.woltlabHtml::after { color: rgba(199, 199, 199, 1); } /* codeBox */ .codeBox { background-color: rgba(21, 21, 21, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .codeBox.collapsed>.toggleButton { box-shadow: 0 -10px 50px 10px #151515; } .codeBox>div>.codeBoxCode>code .codeBoxLine:target { background-color: rgba(255, 255, 102, 1); } .codeBox>.toggleButton { background-color: #151515; } /* token */ .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; background: rgba(255, 255, 255, 0.5); } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.function, .token.class-name { color: #dd4a68; } .token.regex, .token.important, .token.variable { color: #e90; } /* groupMention */ .groupMention { background-color: rgba(21, 21, 21, 1); } .groupMention:hover { color: rgba(32, 157, 212, 1); } /* inlineCode */ .inlineCode, kbd { background-color: rgba(255, 255, 255, 1) !important; border: 1px solid rgba(196, 196, 196, 1) !important; color: rgba(68, 68, 68, 1) !important; } /* media BBCode */ .mediaBBCode .mediaBBCodeCaption { color: rgba(199, 199, 199, 1); } /* quoteBox */ woltlab-quote, .quoteBox { background-color: rgba(21, 21, 21, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .quoteBox.collapsed>.toggleButton { box-shadow: 0 -10px 50px 10px #151515; } .quoteBox>.toggleButton { background-color: #151515; } woltlab-quote:not(.redactorCalcHeight)::before { color: rgba(32, 157, 212, 1); } .quoteBoxIcon>.quoteBoxQuoteSymbol { color: rgba(199, 199, 199, 1); } /* redeactor-layer */ .redactor-layer woltlab-spoiler { background-color: rgba(21, 21, 21, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .redactor-layer woltlab-spoiler:not(.redactorCalcHeight)::before { color: rgba(32, 157, 212, 1); } /* spoiler Box */ .spoilerBox>.spoilerBoxContent { background-color: rgba(21, 21, 21, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } /* user Mention */ .userMention { background-color: rgba(21, 21, 21, 1); } /* dl */ dl:not(.plain)>dt { color: rgba(98, 149, 196, 1); } dl:not(.plain)>dd>small:not(.innerError):not(.innerInfo):not(.innerSuccess):not(.innerWarning) { color: rgba(199, 199, 199, 1); } dl.dataList>dt { color: rgba(199, 199, 199, 1); } dl.statsDataList>dt { color: rgba(199, 199, 199, 1); } /* tagList */ .tagList .tag { background-color: rgba(68, 68, 68, 1); color: rgba(238, 238, 238, 1); } .tagList .tag::before { border-right-color: rgba(68, 68, 68, 1); } .tagList .tag:hover { background-color: rgba(32, 157, 212, 1); color: rgba(238, 238, 238, 1); } .tagList .tag:hover::before { border-right-color: rgba(32, 157, 212, 1); } /* Font Awesome Icons */ .icon, .fa { color: rgba(238, 238, 238, 1); } .icon.disabled, .fa.disabled { opacity: 0.3; } .icon.green, .fa.green { color: rgba(0, 153, 0, 1) } .icon.red, .fa.red { color: rgba(204, 0, 0, 1); } .icon.black, .fa.black { color: #333; } .icon.brown, .fa.brown { color: #c63; } .icon.orange, .fa.orange { color: #f90; } .icon.yellow, .fa.yellow { color: #ff0; } .icon.blue, .fa.blue { color: #369; } .icon.purple, .fa.purple { color: #c0f; } .icon.pink, .fa.pink { color: #f0c; } .fa-spinner, .wcfImageViewer>div.loading:before, .wcfImageViewer>footer>div>ul>li.loading:before { border: 2px solid #ccc; border-top-color: #4f81bd; } /* boxContentSeperator */ .boxContentSeparator { background: rgba(51, 51, 51, 1); } /* Boxen */ .boxesHeaderBoxes { background-color: rgba(25, 25, 25, 1); color: rgba(238, 238, 238, 1); } .boxesHeaderBoxes a { color: rgba(3, 113, 164, 1); } .boxesHeaderBoxes a:hover { color: rgba(3, 113, 164, 1); } .boxesHeaderBoxes .icon { color: rgba(238, 238, 238, 1); } .boxesTop .boxTitle a, .boxesBottom .boxTitle a { color: rgba(32, 157, 212, 1); } .boxesTop .boxTitle a:hover, .boxesBottom .boxTitle a:hover { color: rgba(32, 157, 212, 1); } .boxesTop { border-bottom: 1px solid rgba(51, 51, 51, 1); } .boxesBottom { border-top: 1px solid rgba(51, 51, 51, 1); } .boxesSidebarLeft, .boxesSidebarRight { color: rgba(238, 238, 238, 1); } .boxesSidebarLeft a, .boxesSidebarRight a { color: rgba(32, 157, 212, 1); } .boxesSidebarLeft a:hover, .boxesSidebarRight a:hover { color: rgba(32, 157, 212, 1); } @media screen and (min-width:545px) and (max-width:1024px) { .boxesSidebarLeft>.boxContainer>.box, .boxesSidebarRight>.boxContainer>.box { border-bottom: 30px solid transparent; } } .boxesSidebarLeft .icon, .boxesSidebarRight .icon { color: rgba(238, 238, 238, 1); } .boxesSidebarLeft small, .boxesSidebarRight small, .boxesSidebarLeft .dimmed, .boxesSidebarRight .dimmed { color: rgba(204, 204, 204, 1); } .boxesSidebarLeft small a, .boxesSidebarRight small a, .boxesSidebarLeft .dimmed a, .boxesSidebarRight .dimmed a { color: rgba(199, 199, 199, 1); } .boxesSidebarLeft small a:hover, .boxesSidebarRight small a:hover, .boxesSidebarLeft .dimmed a:hover, .boxesSidebarRight .dimmed a:hover { color: rgba(32, 157, 212, 1); } .boxesSidebarLeft .boxTitle, .boxesSidebarRight .boxTitle { color: rgba(199, 199, 199, 1); } .boxesSidebarLeft .boxTitle a, .boxesSidebarRight .boxTitle a { color: rgba(199, 199, 199, 1); } .boxesSidebarLeft .boxTitle a:hover, .boxesSidebarRight .boxTitle a:hover { color: rgba(199, 199, 199, 1); } .boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) { background-color: rgba(21, 21, 21, 1); } .boxesSidebarLeft .box.boxError, .boxesSidebarRight .box.boxError { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1); } .boxesSidebarLeft .box.boxError a:not(.button), .boxesSidebarRight .box.boxError a:not(.button) { color: rgba(32, 157, 212, 1); } .boxesSidebarLeft .box.boxError a:not(.button):hover, .boxesSidebarRight .box.boxError a:not(.button):hover { color: rgba(32, 157, 212, 1); } .boxesSidebarLeft .box.boxInfo, .boxesSidebarRight .box.boxInfo { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .boxesSidebarLeft .box.boxInfo a:not(.button), .boxesSidebarRight .box.boxInfo a:not(.button) { color: rgba(32, 157, 212, 1) } .boxesSidebarLeft .box.boxInfo a:not(.button):hover, .boxesSidebarRight .box.boxInfo a:not(.button):hover { color: rgba(32, 157, 212, 1) } .boxesSidebarLeft .box.boxSuccess, .boxesSidebarRight .box.boxSuccess { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .boxesSidebarLeft .box.boxSuccess a:not(.button), .boxesSidebarRight .box.boxSuccess a:not(.button) { color: rgba(32, 157, 212, 1) } .boxesSidebarLeft .box.boxSuccess a:not(.button):hover, .boxesSidebarRight .box.boxSuccess a:not(.button):hover { color: rgba(32, 157, 212, 1) } .boxesSidebarLeft .box.boxWarning, .boxesSidebarRight .box.boxWarning { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1); } .boxesSidebarLeft .box.boxWarning a:not(.button), .boxesSidebarRight .box.boxWarning a:not(.button) { color: rgba(32, 157, 212, 1); } .boxesSidebarLeft .box.boxWarning a:not(.button):hover, .boxesSidebarRight .box.boxWarning a:not(.button):hover { color: rgba(32, 157, 212, 1); } .boxesSidebarLeft .box .boxMenu li.active>.boxMenuLink, .boxesSidebarRight .box .boxMenu li.active>.boxMenuLink { background-color: rgba(21, 21, 21, 1); color: rgba(32, 157, 212, 1); } .boxesSidebarLeft .box .boxMenu li.active>.boxMenuLink:hover, .boxesSidebarRight .box .boxMenu li.active>.boxMenuLink:hover { color: rgba(32, 157, 212, 1); } @media screen and (max-width:544px) { .boxesSidebarLeft::before, .boxesSidebarRight::before { background-color: rgba(21, 21, 21, 1); color: rgba(32, 157, 212, 1); } .boxesSidebarLeft:not(.open)+.content+.boxesSidebarRight:not(.open) { border-left: 1px solid rgba(21, 21, 21, 1); } } .boxesContentTop .boxTitle, .boxesContentBottom .boxTitle { color: rgba(199, 199, 199, 1); } .boxesContentTop .boxTitle a, .boxesContentBottom .boxTitle a { color: rgba(32, 157, 212, 1) } .boxesContentTop .boxTitle a:hover, .boxesContentBottom .boxTitle a:hover { color: rgba(32, 157, 212, 1) } .boxesContentTop .boxInfo, .boxesContentBottom .boxInfo { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1); } .boxesContentTop .boxInfo a:not(.button), .boxesContentBottom .boxInfo a:not(.button) { color: rgba(32, 157, 212, 1); } .boxesContentTop .boxInfo a:not(.button):hover, .boxesContentBottom .boxInfo a:not(.button):hover { color: rgba(32, 157, 212, 1); } .boxesFooterBoxes { background-color: rgba(25, 25, 25, 1); color: rgba(238, 238, 238, 1) } .boxesFooterBoxes a { color: rgba(3, 113, 164, 1) } .boxesFooterBoxes a:hover { color: rgba(3, 113, 164, 1) } .boxesFooterBoxes .icon { color: rgba(238, 238, 238, 1) } .boxesFooterBoxes .boxTitle { color: rgba(199, 199, 199, 1) } .boxesFooterBoxes .boxTitle a { color: rgba(199, 199, 199, 1) } .boxesFooterBoxes .boxTitle a:hover { color: rgba(199, 199, 199, 1) } .boxesFooter { background-color: rgba(59, 59, 59, 1); color: rgba(255, 255, 255, 1); } .boxesFooter .icon { color: rgba(255, 255, 255, 1) } .boxesFooter a { color: rgba(255, 255, 255, 1) } .boxesFooter a:hover { color: rgba(255, 255, 255, 1); } .boxesFooter .boxTitle { color: rgba(238, 238, 238, 1) } .boxesFooter .boxTitle a { color: rgba(255, 255, 255, 1) } .boxesFooter .boxTitle a:hover { color: rgba(255, 255, 255, 1) } /* boxWithEditButton */ .boxWithEditButton .boxEditButton:hover { color: inherit; } .boxWithEditButton .boxEditButton>.icon { color: inherit; } /* containerList */ .containerList>li:not(:last-child) { border-bottom: 1px solid rgba(51, 51, 51, 1) } .containerList>li:first-child { border-top: 1px solid rgba(98, 149, 196, 1) } .containerList>li:last-child { border-bottom: 1px solid rgba(98, 149, 196, 1) } .containerList>li:hover { background-color: rgba(37, 37, 37, 1) } .containerList>li.showMore:hover { background-color: transparent } .containerList>li .containerHeadline>.containerContentType { color: rgba(199, 199, 199, 1); } .containerList>li.containerListButtonGroup:hover { background-color: transparent } @media screen and (max-width:1024px) { .containerList>li .buttonGroupNavigation>.buttonList { background-color: rgba(25, 25, 25, 1); border-radius: 2px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: rgba(238, 238, 238, 1); } .containerList>li .buttonGroupNavigation>.buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), .containerList>li .buttonGroupNavigation>.buttonList li.dropdownList>li:hover:not(.dropdownDivider), .containerList>li .buttonGroupNavigation>.buttonList li.dropdownNavigationItem, .containerList>li .buttonGroupNavigation>.buttonList li.active { background-color: rgba(85, 85, 85, 1); color: rgba(238, 238, 238, 1) } .containerList>li .buttonGroupNavigation>.buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText)>a, .containerList>li .buttonGroupNavigation>.buttonList li.dropdownList>li:hover:not(.dropdownDivider)>a, .containerList>li .buttonGroupNavigation>.buttonList li.dropdownNavigationItem>a, .containerList>li .buttonGroupNavigation>.buttonList li.active>a { color: rgba(238, 238, 238, 1) } .containerList>li .buttonGroupNavigation>.buttonList li.dropdownDivider { border-top: 1px solid rgba(51, 51, 51, 1); } .containerList>li .buttonGroupNavigation>.buttonList li.missingValue>span:after { color: rgba(199, 199, 199, 1); } .containerList>li .buttonGroupNavigation>.buttonList li.disabled { color: rgba(199, 199, 199, 1) } .containerList>li .buttonGroupNavigation>.buttonList li>a { color: rgba(238, 238, 238, 1) } .containerList>li .buttonGroupNavigation>.buttonList li .icon { color: inherit; } } @media screen and (min-width:1025px), print { .containerList>li .buttonGroupNavigation>ul { background-color: rgba(21, 21, 21, 1); border: 1px solid rgba(0, 0, 0, 0.15); } .containerList>li .buttonGroupNavigation>ul>li:not(:last-child) { border-right: 1px solid rgba(0, 0, 0, 0.15) } .containerList>li .buttonGroupNavigation>ul>li>a>.icon, .containerList>li .buttonGroupNavigation>ul>li>a>.invisible { color: rgba(0, 0, 0, 0.5) } .containerList>li .buttonGroupNavigation>ul>li.active>a>.icon, .containerList>li .buttonGroupNavigation>ul>li:hover>a>.icon, .containerList>li .buttonGroupNavigation>ul>li.active>a>.invisible, .containerList>li .buttonGroupNavigation>ul>li:hover>a>.invisible { color: rgba(238, 238, 238, 1) } } @media screen and (min-width:769px), print { .containerList.doubleColumned, .containerList.tripleColumned { border-top: 1px solid rgba(98, 149, 196, 1); border-bottom: 1px solid rgba(98, 149, 196, 1) } } .containerListDisplayOptions { border-bottom: 2px solid currentColor; color: rgba(199, 199, 199, 1); } /* contentHeader */ .contentHeader, .boxHeadline { color: rgba(199, 199, 199, 1) } .contentHeader .contentTitle a, .boxHeadline .contentTitle a, .contentHeader>h1 a, .boxHeadline>h1 a { color: rgba(32, 157, 212, 1) } .contentHeader .contentTitle a:hover, .boxHeadline .contentTitle a:hover, .contentHeader>h1 a:hover, .boxHeadline>h1 a:hover { color: rgba(32, 157, 212, 1) } .contentHeader .contentHeaderDescription { color: rgba(199, 199, 199, 1); } .contentHeader .contentHeaderMetaData { color: rgba(199, 199, 199, 1); } .contentHeader .contentHeaderMetaData>li a, .contentHeader .contentHeaderMetaData>li a:hover, .contentHeader .contentHeaderMetaData>li .icon { color: rgba(199, 199, 199, 1) } .contentHeader .inlineDataList { color: rgba(199, 199, 199, 1) } /* boxHeadline */ .boxHeadline.boxSubHeadline>h2 { color: rgba(199, 199, 199, 1); } .boxHeadline.boxSubHeadline>h2 a { color: rgba(32, 157, 212, 1) } .boxHeadline.boxSubHeadline>h2 a:hover { color: rgba(32, 157, 212, 1) } /* sectionTitle */ .section .sectionTitle { color: rgba(199, 199, 199, 1); } .section .sectionTitle a { color: rgba(32, 157, 212, 1) } .section .sectionTitle a:hover { color: rgba(32, 157, 212, 1) } .section .sectionDescription { color: rgba(199, 199, 199, 1) } .section:not(.sectionContainerList)>.sectionHeader, .section:not(.sectionContainerList)>.sectionTitle { border-bottom: 1px solid rgba(51, 51, 51, 1); } .section.tabularBox>.sectionHeader, .section.tabularBox>.sectionTitle { border-color: rgba(98, 149, 196, 1); margin-bottom: 0 } /* fieldset */ fieldset>legend { border-bottom: 1px solid rgba(51, 51, 51, 1); color: rgba(199, 199, 199, 1); } fieldset>legend a { color: rgba(32, 157, 212, 1) } fieldset>legend a:hover { color: rgba(32, 157, 212, 1) } fieldset>legend+small { color: rgba(199, 199, 199, 1); } input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea { background-color: rgba(21, 21, 21, 1); border: 1px solid rgba(51, 51, 51, 1); border-radius: 0; color: rgba(204, 204, 204, 1); } input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus, input[type="date"]:hover, input[type="datetime"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, select:hover, textarea:hover { background-color: rgba(38, 38, 38, 1); border-color: rgba(135, 174, 210, 1); color: rgba(238, 238, 238, 1) } input[type="date"][disabled], input[type="datetime"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="password"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="text"][disabled], input[type="url"][disabled], select[disabled], textarea[disabled], input[type="date"].disabled, input[type="datetime"].disabled, input[type="email"].disabled, input[type="number"].disabled, input[type="password"].disabled, input[type="search"].disabled, input[type="tel"].disabled, input[type="text"].disabled, input[type="url"].disabled, select.disabled, textarea.disabled { background-color: rgba(38, 38, 38, 1) !important; border-color: rgba(250, 242, 204, 1) !important; color: rgba(250, 242, 204, 1) !important } input[type="date"][readonly], input[type="datetime"][readonly], input[type="email"][readonly], input[type="number"][readonly], input[type="password"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="text"][readonly], input[type="url"][readonly], select[readonly], textarea[readonly] { color: rgba(250, 242, 204, 1) !important } input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"] {} input[type="date"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder { color: rgba(169, 169, 169, 1) } input[type="date"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="url"]::-moz-placeholder { color: rgba(169, 169, 169, 1) } input[type="date"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder { color: rgba(169, 169, 169, 1) } input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="date"]:hover, input[type="datetime"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover {} input[type="date"]:focus::-webkit-input-placeholder, input[type="datetime"]:focus::-webkit-input-placeholder, input[type="email"]:focus::-webkit-input-placeholder, input[type="number"]:focus::-webkit-input-placeholder, input[type="password"]:focus::-webkit-input-placeholder, input[type="search"]:focus::-webkit-input-placeholder, input[type="tel"]:focus::-webkit-input-placeholder, input[type="text"]:focus::-webkit-input-placeholder, input[type="url"]:focus::-webkit-input-placeholder, input[type="date"]:hover::-webkit-input-placeholder, input[type="datetime"]:hover::-webkit-input-placeholder, input[type="email"]:hover::-webkit-input-placeholder, input[type="number"]:hover::-webkit-input-placeholder, input[type="password"]:hover::-webkit-input-placeholder, input[type="search"]:hover::-webkit-input-placeholder, input[type="tel"]:hover::-webkit-input-placeholder, input[type="text"]:hover::-webkit-input-placeholder, input[type="url"]:hover::-webkit-input-placeholder { color: rgba(204, 204, 204, 1) } input[type="date"]:focus::-moz-placeholder, input[type="datetime"]:focus::-moz-placeholder, input[type="email"]:focus::-moz-placeholder, input[type="number"]:focus::-moz-placeholder, input[type="password"]:focus::-moz-placeholder, input[type="search"]:focus::-moz-placeholder, input[type="tel"]:focus::-moz-placeholder, input[type="text"]:focus::-moz-placeholder, input[type="url"]:focus::-moz-placeholder, input[type="date"]:hover::-moz-placeholder, input[type="datetime"]:hover::-moz-placeholder, input[type="email"]:hover::-moz-placeholder, input[type="number"]:hover::-moz-placeholder, input[type="password"]:hover::-moz-placeholder, input[type="search"]:hover::-moz-placeholder, input[type="tel"]:hover::-moz-placeholder, input[type="text"]:hover::-moz-placeholder, input[type="url"]:hover::-moz-placeholder { color: rgba(204, 204, 204, 1) } input[type="date"]:focus:-ms-input-placeholder, input[type="datetime"]:focus:-ms-input-placeholder, input[type="email"]:focus:-ms-input-placeholder, input[type="number"]:focus:-ms-input-placeholder, input[type="password"]:focus:-ms-input-placeholder, input[type="search"]:focus:-ms-input-placeholder, input[type="tel"]:focus:-ms-input-placeholder, input[type="text"]:focus:-ms-input-placeholder, input[type="url"]:focus:-ms-input-placeholder, input[type="date"]:hover:-ms-input-placeholder, input[type="datetime"]:hover:-ms-input-placeholder, input[type="email"]:hover:-ms-input-placeholder, input[type="number"]:hover:-ms-input-placeholder, input[type="password"]:hover:-ms-input-placeholder, input[type="search"]:hover:-ms-input-placeholder, input[type="tel"]:hover:-ms-input-placeholder, input[type="text"]:hover:-ms-input-placeholder, input[type="url"]:hover:-ms-input-placeholder { color: rgba(204, 204, 204, 1) } input[type="date"][disabled], input[type="datetime"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="password"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="text"][disabled], input[type="url"][disabled], input[type="date"][readonly], input[type="datetime"][readonly], input[type="email"][readonly], input[type="number"][readonly], input[type="password"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="text"][readonly], input[type="url"][readonly] { background-color: rgba(38, 38, 38, 1) !important; border-color: rgba(250, 242, 204, 1) !important; color: rgba(250, 242, 204, 1) !important } textarea[disabled], textarea[readonly] { background-color: rgba(38, 38, 38, 1) !important; border-color: rgba(250, 242, 204, 1) !important; color: rgba(250, 242, 204, 1) !important } .inputAddon>.inputPrefix:not(.button), .inputAddon>.inputSuffix:not(.button) { background-color: rgba(68, 68, 68, 1); border: 1px solid rgba(51, 51, 51, 1); color: rgba(238, 238, 238, 1); } .formError dt { color: rgba(204, 0, 1, 1) !important } .formError input, .formError select, .formError textarea { border-color: rgba(204, 0, 1, 1) !important } .customOptionRequired { color: rgba(204, 0, 1, 1) !important } .grayscale { filter: gray; -webkit-filter: grayscale(1) } .containerContent hr, .htmlContent hr, .messageBody>.messageText hr, .messageSignature>div hr, .redactor-layer hr { border-top: 1px solid rgba(51, 51, 51, 1); } .separatorLeft::before { color: rgba(238, 238, 238, 1); } .separatorRight::after { color: rgba(238, 238, 238, 1); } body { background-color: rgba(21, 21, 21, 1); color: rgba(238, 238, 238, 1); } a { color: rgba(32, 157, 212, 1); } a:hover { color: rgba(32, 157, 212, 1); } .pageFooterCopyright { background-color: rgba(52, 52, 52, 1); color: rgba(255, 255, 255, 1); } .pageFooterCopyright a { color: rgba(255, 255, 255, 1) } .pageFooterCopyright a:hover { color: rgba(217, 217, 217, 1); } .pageHeaderContainer a { color: rgba(32, 157, 212, 1) } .pageHeaderContainer a:hover { color: rgba(32, 157, 212, 1) } .pageHeaderContainer .icon { color: rgba(32, 157, 212, 1) } @media screen and (min-width:1025px), print { .pageHeaderContainer { background-color: rgba(34, 34, 34, 1) } } @media screen and (max-width:1024px) { .pageHeaderPanel { background-color: rgba(34, 34, 34, 1) } } @media screen and (min-width:1025px), print { .pageHeaderPanel { background-color: rgba(59, 59, 59, 1) } } .mainMenu .boxMenu>li>a { background: rgba(59, 59, 59, 1); color: rgba(255, 255, 255, 1); } .mainMenu .boxMenu>li.active>a, .mainMenu .boxMenu>li:hover>a { background: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } .mainMenu .boxMenu .boxMenuDepth1 { background-color: rgba(74, 74, 74, 1); } .mainMenu .boxMenu .boxMenuDepth1>li>a { color: rgba(255, 255, 255, 1) } .mainMenu .boxMenu .boxMenuDepth1>li.active>a, .mainMenu .boxMenu .boxMenuDepth1>li>a:hover { background-color: rgba(90, 90, 90, 1); color: rgba(255, 255, 255, 1); } .mainMenu .boxMenu .boxMenuDepth2 li>a { color: rgba(255, 255, 255, 1); } .mainMenu .boxMenu .boxMenuDepth2 li.active>a, .mainMenu .boxMenu .boxMenuDepth2 li>a:hover { background-color: rgba(90, 90, 90, 1); color: rgba(255, 255, 255, 1); } .mainMenu .mainMenuShowPrevious { background: linear-gradient(to left, transparent 0%, rgba(59, 59, 59, 1) 75%); } .mainMenu .mainMenuShowNext { background: linear-gradient(to right, transparent 0%, rgba(59, 59, 59, 1) 75%); } .userPanel>ul>li>a { background: rgba(59, 59, 59, 1); color: rgba(255, 255, 255, 1); } .userPanel>ul>li>a>.badgeUpdate { box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(225, 225, 225, 0.3); } .userPanel>ul>li>a .icon { color: rgba(255, 255, 255, 1) } .userPanel>ul>li.dropdownOpen>a, .userPanel>ul>li.open>a, .userPanel>ul>li:hover>a { background: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } .userPanel>ul>li.dropdownOpen>a .icon, .userPanel>ul>li.open>a .icon, .userPanel>ul>li:hover>a .icon { color: rgba(255, 255, 255, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchType>.button { background-color: rgba(59, 59, 59, 1); color: rgba(255, 255, 255, 1); } .pageHeaderSearchInputContainer .pageHeaderSearchType>.button:hover, .pageHeaderSearchInputContainer .pageHeaderSearchType.dropdownOpen>.button { background: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInput { background-color: rgba(25, 25, 25, 1); border-width: 0; color: rgba(255, 255, 255, 1); } .pageHeaderSearchInputContainer .pageHeaderSearchInput:focus, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover { background-color: rgba(85, 85, 85, 1); color: rgba(255, 255, 255, 1); } .pageHeaderSearchInputContainer .pageHeaderSearchInput:focus::-webkit-input-placeholder, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover::-webkit-input-placeholder { color: rgba(207, 207, 207, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInput:focus::-moz-placeholder, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover::-moz-placeholder { color: rgba(207, 207, 207, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInput:focus:-ms-input-placeholder, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover:-ms-input-placeholder { color: rgba(207, 207, 207, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInput::-webkit-input-placeholder { color: rgba(207, 207, 207, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInput::-moz-placeholder { color: rgba(207, 207, 207, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInput:-ms-input-placeholder { color: rgba(207, 207, 207, 1) } .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton { background-color: rgba(59, 59, 59, 1); border-radius: 0 0 2px 0; color: rgba(255, 255, 255, 1); } .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton:hover { background-color: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } @media screen and (max-width:1024px) { .mainMenu.pageMenuMobileButtonHasContent::after, .userPanel.pageMenuMobileButtonHasContent::after { background-color: #f44336; border: 2px solid rgba(34, 34, 34, 1); } .mainMenu::before, .userPanel:not(.userPanelLoggedIn)::before { color: rgba(32, 157, 212, 1); } .mainMenu:hover::before, .userPanel:not(.userPanelLoggedIn):hover::before { color: rgba(32, 157, 212, 1) } } @media screen and (min-width:769px), print { .pageNavigation { background-color: rgba(25, 25, 25, 1); color: rgba(238, 238, 238, 1); } .pageNavigation .icon { color: inherit; } .pageNavigation a { color: rgba(32, 157, 212, 1) } .pageNavigation a:hover { color: rgba(32, 157, 212, 1) } } @media screen and (max-width:768px) { .breadcrumbs>ol>li:last-child { color: rgba(199, 199, 199, 1); } .breadcrumbs>ol>li:last-child>a { color: rgba(199, 199, 199, 1); } } @media print { *, ::after, ::before { background: 0 0 !important; box-shadow: none !important; color: #000 !important; } .messageList, .messageList>li:not(:first-child) { border-top: 1px solid rgba(98, 149, 196, 1) } } .sidebar .boxContainer>div:not(.box), .sidebar .boxContainer>fieldset, .sidebar .boxContainer>section:not(.box) { background-color: rgba(21, 21, 21, 1) } .sidebar .boxContainer section:not(.box)>h1, .sidebar .boxContainer fieldset>legend { color: rgba(199, 199, 199, 1); } .sidebar .boxContainer section:not(.box)>h1>a, .sidebar .boxContainer fieldset>legend>a { color: rgba(199, 199, 199, 1) } .sidebar .boxContainer section:not(.box)>h1>a>.icon, .sidebar .boxContainer fieldset>legend>a>.icon { color: rgba(199, 199, 199, 1) } .sidebar .boxContainer section:not(.box)>h1>a:hover, .sidebar .boxContainer fieldset>legend>a:hover { color: rgba(199, 199, 199, 1) } .sidebar .boxContainer section:not(.box)>h1>a:hover>.icon, .sidebar .boxContainer fieldset>legend>a:hover>.icon { color: rgba(199, 199, 199, 1) } .aclList:not(:empty) { border-bottom: 1px solid rgba(98, 149, 196, 1); border-top: 1px solid rgba(98, 149, 196, 1) } .aclList>li.active { background-color: rgba(37, 37, 37, 1) } .aclPermissionList>li.aclCategory:hover { background-color: transparent } .error { background-color: rgba(38, 38, 38, 1); border-color: rgba(255, 0, 0, 1); color: rgba(199, 199, 199, 1) } .error a { color: rgba(32, 157, 212, 1) } .error a:hover { color: rgba(32, 157, 212, 1) } .info { background-color: rgba(38, 38, 38, 1); border-color: rgba(25, 121, 162, 1); color: rgba(199, 199, 199, 1) } .info a { color: rgba(32, 157, 212, 1) } .info a:hover { color: rgba(32, 157, 212, 1) } .success { background-color: rgba(38, 38, 38, 1); border-color: rgba(89, 162, 25, 1); color: rgba(199, 199, 199, 1) } .success a { color: rgba(32, 157, 212, 1) } .success a:hover { color: rgba(32, 157, 212, 1) } .warning { background-color: rgba(38, 38, 38, 1); border-color: rgba(253, 196, 0, 1); color: rgba(199, 199, 199, 1) } .warning a { color: rgba(32, 157, 212, 1) } .warning a:hover { color: rgba(32, 157, 212, 1) } .innerError::before, .innerInfo::before, .innerSuccess::before, .innerWarning::before { border: 6px solid transparent; } .innerError { background-color: #f2dede; color: #a94442 } .innerError::before { border-bottom-color: #f2dede } .innerError a { color: rgba(32, 157, 212, 1) } .innerError a:hover { color: rgba(32, 157, 212, 1) } .innerSuccess { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .innerSuccess::before { border-bottom-color: rgba(38, 38, 38, 1) } .innerSuccess a { color: rgba(32, 157, 212, 1) } .innerSuccess a:hover { color: rgba(32, 157, 212, 1) } .innerWarning { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .innerWarning::before { border-bottom-color: rgba(38, 38, 38, 1) } .innerWarning a { color: rgba(32, 157, 212, 1) } .innerWarning a:hover { color: rgba(32, 157, 212, 1) } .innerInfo { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .innerInfo::before { border-bottom-color: rgba(38, 38, 38, 1) } .innerInfo a { color: rgba(32, 157, 212, 1) } .innerInfo a:hover { color: rgba(32, 157, 212, 1) } .articleImage .articleImageWrapper, .contentCoverPhotoImage .articleImageWrapper, .articleImage .contentCoverPhotoImageWrapper, .contentCoverPhotoImage .contentCoverPhotoImageWrapper { border-radius: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .articleImage figcaption, .contentCoverPhotoImage figcaption { color: rgba(199, 199, 199, 1); } .articleNavigation .previousArticleButton>a, .articleNavigation .nextArticleButton>a { color: rgba(238, 238, 238, 1); } .articleNavigation .previousArticleButton>a:hover::before, .articleNavigation .nextArticleButton>a:hover::before { color: rgba(32, 157, 212, 1) } .articleNavigation .previousArticleButton>a:hover .articleNavigationArticleTitle, .articleNavigation .nextArticleButton>a:hover .articleNavigationArticleTitle { color: rgba(32, 157, 212, 1) } .articleList .articleListMetaData .icon { color: inherit } .articleList a { color: inherit } .articleList a:hover { color: inherit } .articleList a:hover .articleListTitle { color: rgba(32, 157, 212, 1) } .attachmentThumbnail { box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .attachmentThumbnail .attachmentThumbnailImage { background-color: #333; } .attachmentThumbnail .attachmentThumbnailData { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.5) 100%); } .attachmentThumbnail .attachmentFilename { color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); } .attachmentThumbnail .attachmentMetaData { color: rgba(199, 199, 199, 1); } .attachmentThumbnail .attachmentMetaData .icon { color: inherit; } .embeddedAttachmentLink, .embeddedImageLink { border: 1px solid rgba(51, 51, 51, 1); } .embeddedAttachmentLink::after, .embeddedImageLink::after { background-color: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); color: white; } .badge, a.badge { background-color: rgba(238, 238, 238, 1); color: rgba(21, 21, 21, 1); } .badge.badgeUpdate, a.badge.badgeUpdate { background-color: rgba(204, 0, 1, 1); color: rgba(255, 255, 255, 1); } .badge.green, a.badge.green { background-color: rgba(0, 153, 0, 1); color: rgba(238, 255, 238, 1) } .badge.red, a.badge.red { background-color: rgba(204, 0, 0, 1); color: rgba(255, 238, 238, 1) } .badge.black, a.badge.black { background-color: #333; color: #fff } .badge.brown, a.badge.brown { background-color: #c63; color: #fff } .badge.orange, a.badge.orange { background-color: #f90; color: #fff } .badge.yellow, a.badge.yellow { background-color: #ff0; color: #333 } .badge.blue, a.badge.blue { background-color: #369; color: #fff } .badge.purple, a.badge.purple { background-color: #c0f; color: #fff } .badge.pink, a.badge.pink { background-color: #f0c; color: #fff } a.badge:hover { color: rgba(21, 21, 21, 1); text-decoration: none } a.badge:hover.black { background-color: #000 } a.badge:hover.brown { background-color: #930 } a.badge:hover.red { background-color: #900 } a.badge:hover.orange { background-color: #f60 } a.badge:hover.yellow { background-color: #cc0 } a.badge:hover.green { background-color: #060 } a.badge:hover.blue { background-color: #036 } a.badge:hover.purple { background-color: #90c } a.badge:hover.pink { background-color: #c09 } #benchmarkDetails>li.hot>small { color: rgba(199, 199, 199, 1) } .breadcrumbs>ol>li:not(:last-child):after { color: rgba(238, 238, 238, 1); } .breadcrumbs>ol>li>a { color: rgba(32, 157, 212, 1); } .breadcrumbs>ol>li>a:hover { color: rgba(32, 157, 212, 1); } button, input[type="button"], input[type="reset"], input[type="submit"], .button, a.button { background-color: rgba(68, 68, 68, 1); color: rgba(238, 238, 238, 1); } button .icon, input[type="button"] .icon, input[type="reset"] .icon, input[type="submit"] .icon, .button .icon, a.button .icon { color: inherit; } button.active, input[type="button"].active, input[type="reset"].active, input[type="submit"].active, .button.active, a.button.active { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1); } button small, input[type="button"] small, input[type="reset"] small, input[type="submit"] small, .button small, a.button small { color: inherit; } button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary { background-color: rgba(3, 113, 164, 1); color: rgba(255, 255, 255, 1) } button.buttonPrimary.active, input[type="button"].buttonPrimary.active, input[type="submit"].active, .button.buttonPrimary.active, a.button.buttonPrimary.active { background-color: rgba(32, 157, 212, 1); color: rgba(238, 238, 238, 1) } html:not(.touch) button:hover, html:not(.touch) input[type="button"]:hover, html:not(.touch) input[type="reset"]:hover, html:not(.touch) input[type="submit"]:hover, html:not(.touch) .button:hover, html:not(.touch) a.button:hover { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1); } html:not(.touch) button.buttonPrimary:hover, html:not(.touch) input[type="button"].buttonPrimary:hover, html:not(.touch) input[type="submit"]:hover, html:not(.touch) .button.buttonPrimary:hover, html:not(.touch) a.button.buttonPrimary:hover { background-color: rgba(32, 157, 212, 1); color: rgba(238, 238, 238, 1) } button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled, .button:disabled, a.button:disabled, button.disabled, input[type="button"].disabled, input[type="reset"].disabled, input[type="submit"].disabled, .button.disabled, a.button.disabled { background-color: rgba(0, 0, 0, 1) !important; color: rgba(68, 68, 68, 1) !important; } .dropdownOpen>button, .dropdownOpen>input[type="button"], .dropdownOpen>input[type="reset"], .dropdownOpen>input[type="submit"], .dropdownOpen>.button, .dropdownOpen>a.button { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1) } .dropdownOpen>button.buttonPrimary, .dropdownOpen>input[type="button"].buttonPrimary, .dropdownOpen>input[type="submit"], .dropdownOpen>.button.buttonPrimary, .dropdownOpen>a.button.buttonPrimary { background-color: rgba(32, 157, 212, 1); color: rgba(238, 238, 238, 1) } .flexibleButtonGroup>li>a, .flexibleButtonGroup>li>label { background-color: #cfd8dc; border: 1px solid transparent; color: #212121; } .flexibleButtonGroup>li>a>.icon, .flexibleButtonGroup>li>label>.icon { color: inherit } .flexibleButtonGroup>li>a>.icon, .flexibleButtonGroup>li>label>.icon { color: inherit !important; } .flexibleButtonGroup>li>a.active, .flexibleButtonGroup>li>input[type="radio"]:checked+label, .flexibleButtonGroup>li>input[type="radio"]+label:hover { color: #fff } .flexibleButtonGroup>li>a.active.green, .flexibleButtonGroup>li>input[type="radio"]:checked+label.green, .flexibleButtonGroup>li>input[type="radio"]+label:hover.green { background-color: #2e7d32 } .flexibleButtonGroup>li>a.active.red, .flexibleButtonGroup>li>input[type="radio"]:checked+label.red, .flexibleButtonGroup>li>input[type="radio"]+label:hover.red { background-color: #c62828 } .flexibleButtonGroup>li>a.active.yellow, .flexibleButtonGroup>li>input[type="radio"]:checked+label.yellow, .flexibleButtonGroup>li>input[type="radio"]+label:hover.yellow { background-color: #fb8c00; color: #000 } .disabled .flexibleButtonGroup>li>input[type="radio"]:checked+label, .flexibleButtonGroup>li>input[type="radio"]:disabled+label { background-color: #f2f2f2 !important; color: #7d8264 !important; cursor: default } .disabled .flexibleButtonGroup>li>input[type="radio"]:checked+label>.icon, .flexibleButtonGroup>li>input[type="radio"]:disabled+label>.icon { color: #7d8264 !important; cursor: default !important } #colorPickerGradient { background-color: #f00; background-image: url('../images/colorPickerGradient.png'); background-repeat: no-repeat; border: 1px solid rgba(0, 0, 0, 1); } #colorPickerGradient>span { border: 1px solid rgba(0, 0, 0, 1); } #colorPickerGradient>span>span { border: 1px solid rgba(255, 255, 255, 1); } #colorPickerBar { background-image: url('../images/colorPickerBar.png'); background-repeat: repeat-x; border: 1px solid rgba(0, 0, 0, 1); } #colorPickerBar>span::after { border-bottom: 5px solid transparent; border-right: 5px solid rgba(0, 0, 0, 1); border-top: 5px solid transparent; } #colorPickerBar>span::before { border-bottom: 5px solid transparent; border-left: 5px solid rgba(0, 0, 0, 1); border-top: 5px solid transparent; } #colorPickerForm>.colors>.new, #colorPickerForm>.colors>.old { border: 1px solid rgba(0, 0, 0, 1); } #colorPickerForm>.colors>.old { background-position: 8px 0; } .colorPreview { border: 1px solid rgba(51, 51, 51, 1); } .colorPreview>div { border: 2px solid rgba(21, 21, 21, 1); } .commentList>li:hover { background-color: transparent } .commentList .commentContent+.commentOptionContainer .commentResponseAdd { border-top: 1px solid rgba(51, 51, 51, 1); } .commentList .commentResponseList>li:first-child, .commentList .commentResponseList>li:last-child { border-color: rgba(51, 51, 51, 1) } .commentListAddComment.collapsed { background-color: rgba(21, 21, 21, 1); } .commentListAddComment.collapsed::before { color: rgba(238, 238, 238, 1); } .commentListAddComment.collapsed::after { color: rgba(238, 238, 238, 1); } .contentItem { background-color: rgba(21, 21, 21, 1); border-radius: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .contentItemContentTruncate::after { background-image: linear-gradient(to top, rgba(21, 21, 21, 1), transparent); } .contentItemTitle { color: rgba(32, 157, 212, 1); } .contentItemTitle:hover { color: rgba(32, 157, 212, 1) } .contentItemDescription { color: rgba(238, 238, 238, 1); } .contentItemMeta { border-top: 1px solid rgba(51, 51, 51, 1); color: rgba(199, 199, 199, 1); } .contentItemMeta .icon { color: inherit } .contentItemMetaAuthor { color: rgba(238, 238, 238, 1) } .contentItemMetaAuthor a, .contentItemMetaAuthor a:hover { color: inherit } .contentItemImagePreview { border-radius: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .datePicker { background-color: rgba(25, 25, 25, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); color: rgba(238, 238, 238, 1); } .datePicker>ul>li { border-top: 1px solid rgba(51, 51, 51, 1); } .datePicker>ul>li.weekdays, .datePicker>ul>li.weekdays+li { border-top-color: rgba(51, 51, 51, 1) } .datePicker>ul>li>a { color: rgba(238, 238, 238, 1) } .datePicker>ul>li>a.active, .datePicker>ul>li>a:not(.otherMonth):hover { background-color: rgba(85, 85, 85, 1); color: rgba(238, 238, 238, 1) } .datePicker>ul>li>a.otherMonth { color: rgba(199, 199, 199, 1); } .datePicker>ul>li>span { color: rgba(199, 199, 199, 1); } .datePicker>footer { border-top: 1px solid rgba(51, 51, 51, 1); } .dialogOverlay { background-color: transparent; } .dialogOverlay::before { background-color: rgba(0, 0, 0, 0.4); } .dialogContainer>header { background-color: rgba(34, 34, 34, 1); color: rgba(32, 157, 212, 1); } .dialogContainer>header>.dialogCloseButton:hover>.icon { color: rgba(32, 157, 212, 1) } .dialogContainer>header>.dialogCloseButton>.icon { color: rgba(32, 157, 212, 1) } .dialogContainer>.dialogContent { background-color: rgba(21, 21, 21, 1); } .dialogContainer>.dialogContent .dialogFormSubmit { background-color: rgba(21, 21, 21, 1); border-top: 1px solid rgba(51, 51, 51, 1); } .dialogContainer>.dialogContent.jsWebKitFractionalPixel { border-left: 1px solid transparent } .spinner { background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); color: #2c3e50; } .dropdownMenu { background-color: rgba(25, 25, 25, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: rgba(238, 238, 238, 1); } .dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), .dropdownMenu li.dropdownList>li:hover:not(.dropdownDivider), .dropdownMenu li.dropdownNavigationItem, .dropdownMenu li.active { background-color: rgba(85, 85, 85, 1); color: rgba(238, 238, 238, 1) } .dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText)>a, .dropdownMenu li.dropdownList>li:hover:not(.dropdownDivider)>a, .dropdownMenu li.dropdownNavigationItem>a, .dropdownMenu li.active>a { color: rgba(238, 238, 238, 1) } .dropdownMenu li.dropdownDivider { border-top: 1px solid rgba(51, 51, 51, 1); } .dropdownMenu li.missingValue>span:after { color: rgba(199, 199, 199, 1); } .dropdownMenu li.disabled { color: rgba(199, 199, 199, 1) } .dropdownMenu li>a { color: rgba(238, 238, 238, 1) } .dropdownMenu li .icon { color: inherit; } .interactiveDropdown { background-color: rgba(21, 21, 21, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); color: rgba(238, 238, 238, 1); } .interactiveDropdownHeader { background-color: rgba(21, 21, 21, 1); color: rgba(199, 199, 199, 1); } .interactiveDropdownHeader a { color: rgba(199, 199, 199, 1) } .interactiveDropdownHeader a:hover { color: rgba(199, 199, 199, 1); } .interactiveDropdownItemsContainer { border: 1px solid rgba(51, 51, 51, 1); } .interactiveDropdownItems>li:hover { background-color: rgba(37, 37, 37, 1) } .interactiveDropdownItems>li a { color: rgba(32, 157, 212, 1) } .interactiveDropdownItems>li a:hover { color: rgba(32, 157, 212, 1) } .interactiveDropdownShowAll { background-color: rgba(21, 21, 21, 1); color: rgba(199, 199, 199, 1); } .interactiveDropdownShowAll:hover { color: rgba(199, 199, 199, 1); } .embeddedContent { background-color: rgba(21, 21, 21, 1); border: 1px solid rgba(51, 51, 51, 1); } .embeddedContentCategory { color: rgba(199, 199, 199, 1); } .embeddedContentTitle { color: rgba(199, 199, 199, 1); } .embeddedContentMeta { border-top: 1px solid rgba(51, 51, 51, 1); color: rgba(199, 199, 199, 1); } .embeddedContentMetaAuthor { color: rgba(238, 238, 238, 1) } .embeddedContentMetaAuthor>a { color: inherit } .fontAwesomeIcons { border: 1px solid rgba(51, 51, 51, 1); } .fontAwesomeIcons>li:hover { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1); } .fontAwesomeIcons>li:hover>.icon, .fontAwesomeIcons>li:hover>small { color: inherit; } .fontAwesomeIcons>li>small { color: rgba(199, 199, 199, 1); } .googleMapsCustomControlContainer .googleMapsCustomControl { color: #565656; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.14902); box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; } .googleMapsCustomControlContainer .googleMapsCustomControl:hover { background-color: #ebebeb; color: #000 } .googleMapsCustomControlContainer .googleMapsCustomControl.active { color: #000; } .wcfImageViewer { background-color: rgba(0, 0, 0, 1); } .wcfImageViewer .icon { color: #9e9e9e } .wcfImageViewer.wcfImageViewerMobile>header, .wcfImageViewer.wcfImageViewerMobile>footer { background-color: rgba(0, 0, 0, 1); } .wcfImageViewer.wcfImageViewerMobile>div>ul>li { background-color: rgba(224, 224, 224, 1); } .wcfImageViewer>div { background-color: rgba(0, 0, 0, 1); border-bottom: 1px solid rgba(51, 51, 51, 1); border-top: 1px solid rgba(51, 51, 51, 1); } .wcfImageViewer:not(.wcfImageViewerMobile)>div>ul { background-color: rgba(0, 0, 0, 0.9); border: 1px solid rgba(51, 51, 51, 1); } .inputItemList { background-color: rgba(21, 21, 21, 1); border: 1px solid rgba(51, 51, 51, 1); color: rgba(204, 204, 204, 1); } .inputItemList:focus, .inputItemList:hover { background-color: rgba(38, 38, 38, 1); border-color: rgba(135, 174, 210, 1); color: rgba(238, 238, 238, 1) } .inputItemList[disabled], .inputItemList.disabled { background-color: rgba(38, 38, 38, 1) !important; border-color: rgba(250, 242, 204, 1) !important; color: rgba(250, 242, 204, 1) !important } .inputItemList[readonly] { color: rgba(250, 242, 204, 1) !important } .inputItemList>.item { background-color: rgba(68, 68, 68, 1); color: rgba(238, 238, 238, 1); } .inputItemList>.item .icon { color: inherit } .inputItemList>.item.active { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1) } .inputItemList:not(.disabled)>item:hover { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1) } .inputItemList>.input>input { background-color: transparent !important; } .likesSummary { color: rgba(199, 199, 199, 1); } .likesSummary>.icon { color: rgba(199, 199, 199, 1); } .wcfLikeCounter { color: rgba(199, 199, 199, 1) } .wcfLikeCounter .icon { color: inherit !important } .wcfLikeCounter.likeCounterLiked { color: #060 !important } .wcfLikeCounter.likeCounterDisliked { color: #900 !important } html.touch .wcfLikeButton>.button:not(.active):hover, html.touch .wcfDislikeButton>.button:not(.active):hover { background-color: rgba(68, 68, 68, 1) !important; color: rgba(238, 238, 238, 1) !important } .sortableNodeLabel:hover { background-color: rgba(37, 37, 37, 1) } .sortablePlaceholder { background-color: rgba(38, 38, 38, 1); border: 1px solid rgba(253, 196, 0, 1); color: rgba(199, 199, 199, 1); } .sortablePlaceholder.sortableInvalidTarget { background-color: rgba(38, 38, 38, 1); border-color: rgba(255, 0, 0, 1); color: rgba(199, 199, 199, 1) } .structuredList { border: 1px solid #4f81bd; } .structuredList li:not(:first-child) { border-top: 1px solid #eee; } .structuredList li:hover { background-color: rgba(37, 37, 37, 1) } .mediaManagerMediaList>li.jsMarked>.mediaInformation, .mediaManagerMediaList>li.jsMarked>.buttonGroupNavigation { background-color: rgba(3, 113, 164, 0.8); color: rgba(255, 255, 255, 1) } .mediaManagerMediaList>li.jsMarked>.mediaInformation a, .mediaManagerMediaList>li.jsMarked>.buttonGroupNavigation a { color: rgba(255, 255, 255, 1) } .mediaManagerMediaList>li.jsMarked>.mediaInformation .icon, .mediaManagerMediaList>li.jsMarked>.buttonGroupNavigation .icon { color: rgba(255, 255, 255, 1); } .mediaManagerMediaList>li.jsSelected>.mediaInformation, .mediaManagerMediaList>li.jsSelected>.buttonGroupNavigation { background-color: rgba(0, 128, 0, 0.8); color: white; } .mediaManagerMediaList>li.jsSelected>.mediaInformation a, .mediaManagerMediaList>li.jsSelected>.buttonGroupNavigation a { color: white; } .mediaManagerMediaList>li.jsSelected>.mediaInformation .icon, .mediaManagerMediaList>li.jsSelected>.buttonGroupNavigation .icon { color: white; } .mediaManagerMediaList>li.uploadFailed>.mediaInformation { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1); } .mediaManagerMediaList>li>.mediaInformation { background: rgba(0, 0, 0, 0.6); color: #fff; } .mediaManagerMediaList>li>.buttonGroupNavigation { background: rgba(0, 0, 0, 0.6) } .mediaManagerMediaList>li>.buttonGroupNavigation .icon { color: #fff; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8) } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList { background-color: rgba(25, 25, 25, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: rgba(238, 238, 238, 1); } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.dropdownList>li:hover:not(.dropdownDivider), .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.dropdownNavigationItem, .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.active { background-color: rgba(85, 85, 85, 1); color: rgba(238, 238, 238, 1) } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText)>a, .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.dropdownList>li:hover:not(.dropdownDivider)>a, .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.dropdownNavigationItem>a, .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.active>a { color: rgba(238, 238, 238, 1) } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.dropdownDivider { border-top: 1px solid rgba(51, 51, 51, 1); } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.missingValue>span:after { color: rgba(199, 199, 199, 1); } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.disabled { color: rgba(199, 199, 199, 1) } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li.disabled>span { cursor: not-allowed !important } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li>a { color: rgba(238, 238, 238, 1) } .mediaManagerMediaList>li .buttonGroupNavigation>.buttonList li .icon { color: inherit } .menuOverlayMobile { background-color: rgba(59, 59, 59, 1); } .menuOverlayMobileBackdrop { background-color: rgba(0, 0, 0, 0.4); } .menuOverlayItemList { background-color: rgba(59, 59, 59, 1); } .menuOverlayItemLink { background-color: rgba(59, 59, 59, 1); } .menuOverlayItemLink .icon::before { color: rgba(255, 255, 255, 1) } .menuOverlayItemLink:hover { color: rgba(255, 255, 255, 1) } .menuOverlayItemLink.active, .menuOverlayItemLinkIcon.active { background-color: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } .menuOverlayItemLinkIcon.active>.icon::before { color: rgba(255, 255, 255, 1) } .menuOverlayTitle { color: rgba(255, 255, 255, 0.7); } .menuOverlayItemLinkIcon { background-color: rgba(59, 59, 59, 1); } .menuOverlayItemLinkIcon>.icon::before { color: rgba(255, 255, 255, 1) } .menuOverlayBackLink::before { color: rgba(255, 255, 255, 0.7); } .menuOverlayLogoWrapper .menuOverlayLogo { background-size: contain; background-repeat: no-repeat; background-position: center } @media screen and (min-width:769px), print { .messageList:not(.messageReducedList) { border-top: 1px solid rgba(98, 149, 196, 1) } .messageList:not(.messageReducedList)>li { border-bottom: 1px solid rgba(98, 149, 196, 1); } } @media screen and (max-width:768px) { .messageList:not(.messageReducedList) .messageSidebar { border-top: 1px solid rgba(98, 149, 196, 1) } .messageList:not(.messageReducedList)>.messageListPagination { border-top: 1px solid rgba(98, 149, 196, 1); } } .messageCheckboxLabel::after, .message .messageClipboardCheckbox::after, .messageGroupList .columnMark>label::after { color: #009600; } .messageSidebar { background-color: rgba(21, 21, 21, 1); color: rgba(238, 238, 238, 1); } .messageSidebar a { color: rgba(32, 157, 212, 1) } .messageSidebar a:hover { color: rgba(32, 157, 212, 1) } @media screen and (max-width:768px) { .messageSidebar .badgeOnline::before { background-color: inherit; border: 1px solid rgba(255, 255, 255, 1); } } .messageContent.loading>.messageContentLoadingOverlay { background-color: rgba(21, 21, 21, 1); } .messageTitle { color: rgba(199, 199, 199, 1) } .messageTitle a { color: rgba(32, 157, 212, 1) } .messageTitle a:hover { color: rgba(32, 157, 212, 1) } .messageHeaderMetaData .messagePublicationTime { color: rgba(199, 199, 199, 1) } .messageFooterNote { border-left: 5px solid rgba(51, 51, 51, 1); color: rgba(199, 199, 199, 1); } .messageFooterNote a { color: rgba(199, 199, 199, 1) } .messageFooterNote a:hover { color: rgba(199, 199, 199, 1); } @media screen and (min-width:769px), print { .messageSignature { border-top: 1px solid rgba(51, 51, 51, 1); } } @media screen and (max-width:768px) { .messageCollapsed { border-top: 1px solid rgba(51, 51, 51, 1); margin: 0 -10px; padding: 30px 10px 0 } } .messageReduced .messageHeader { background-color: rgba(21, 21, 21, 1); color: rgba(238, 238, 238, 1) } .messageReduced .messageTitle { color: rgba(199, 199, 199, 1) } .messageReduced .messageTitle a { color: rgba(199, 199, 199, 1) } .messageReduced .messageTitle a:hover { color: rgba(199, 199, 199, 1) } .editHistoryDiff>.table td { background-color: #fafafa; color: #2c3e50; } .editHistoryDiff>.table td:last-child:not(:first-child) { border-left: 1px solid rgba(51, 51, 51, 1) } .editHistoryDiff>.table td.diffAdded { background-color: #dff0d8; color: #3c763d } .editHistoryDiff>.table td.diffRemoved { background-color: #f2dede; color: #a94442 } .editHistoryDiff>.table td.diffSection { background-clip: padding-box; background-color: #eceff1; border-bottom: 20px solid transparent; color: #2c3e50; } .messageGroupList .messageDisabled .columnAvatar::before { color: #008c00; } .messageGroupList .messageDeleted .columnAvatar::before { color: #b40000; } .messageGroupList .columnAvatar .myAvatar>img { border: 1px solid rgba(21, 21, 21, 1); } .messageGroupList .columnLastPost time { color: rgba(199, 199, 199, 1) } .messageGroupList .tabularListRow:not(.tabularListRowHead)>.tabularListColumns .columnSubject .messageGroupInfoMobile { color: rgba(199, 199, 199, 1); } .contentHeader.messageGroupContentHeader.messageDisabled>.contentHeaderIcon::before { color: #008c00; } .contentHeader.messageGroupContentHeader.messageDeleted>.contentHeaderIcon::before { color: #b40000; } .pagination>ul>li>a, .pagination>ul>li>span { color: rgba(238, 238, 238, 1); } .pagination>ul>li.disabled>span { color: rgba(199, 199, 199, 1) } .pagination>ul>li.active>a, .pagination>ul>li.active>span, .pagination>ul>li>a:hover { background-color: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1) } .ps-container:hover>.ps-scrollbar-y-rail>.ps-scrollbar-y { background-color: rgba(102, 102, 102, 0.6) } .ps-container>.ps-scrollbar-y-rail { background-color: rgba(102, 102, 102, 0); } .ps-container>.ps-scrollbar-y-rail:hover { background-color: rgba(102, 102, 102, 0.3) } .ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y { background-color: rgba(102, 102, 102, 0); } .pollContainer .formSubmit { border-top: 1px solid rgba(51, 51, 51, 1); } .pollContainer .pollResultItem .pollResultItemCaption>.pollOptionRelativeValue { color: #7d8287; } .pollContainer .pollResultItem .pollMeter { background-color: rgba(51, 51, 51, 1); } .pollContainer .pollResultItem .pollMeter>.pollMeterValue { background-color: rgba(98, 149, 196, 1); } .popover { background-color: rgba(21, 21, 21, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .popoverContent { background-color: rgba(21, 21, 21, 1); border-radius: 3px; color: rgba(238, 238, 238, 1); } .popoverContent a { color: rgba(32, 157, 212, 1) } .popoverContent a:hover { color: rgba(32, 157, 212, 1) } .reactionPopover { background-color: rgba(21, 21, 21, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .reactionSummaryList:hover .reactCountButton { color: rgba(238, 238, 238, 1) } .reactCountButton { color: rgba(199, 199, 199, 1); } .reactionPopoverContent { background-color: rgba(21, 21, 21, 1); border-radius: 3px; color: rgba(238, 238, 238, 1) } .reactionPopoverContent a { color: rgba(32, 157, 212, 1) } .reactionPopoverContent a:hover { color: rgba(32, 157, 212, 1) } @media screen and (max-width:1024px) { .reactionPopoverContent .reactionTypeButton.active { background-color: rgba(51, 51, 51, 1) } } .redactor-box { background-color: rgba(21, 21, 21, 1); } .redactor-layer { border: 1px solid rgba(51, 51, 51, 1); } .redactor-layer.redactor-placeholder::after { color: rgba(199, 199, 199, 1); } .redactor-layer table th { border: 1px solid #ddd; border-bottom: 2px solid currentColor; } .redactor-layer table td { border: 1px solid #ddd; } .redactor-dropdown-menu>li:hover { background-color: transparent !important } .redactor-dropdown-menu a:hover { background-color: rgba(85, 85, 85, 1) } .redactor-dropdown-menu .redactor-dropdown-link-inactive>a:hover { background-color: rgba(25, 25, 25, 1) !important; color: rgba(238, 238, 238, 1) !important; } .redactor-toolbar { background-color: rgba(34, 34, 34, 1); } .redactor-toolbar>li>a.redactor-button-disabled { background-color: transparent !important; color: rgba(68, 68, 68, 1) !important; } .redactor-toolbar>li>a.redactor-act, .redactor-toolbar>li>a.dropact { background-color: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } .redactor-toolbar>li>a .icon { color: inherit; cursor: inherit !important } .redactor-toolbar>li>a .icon.redactorButtonImage { background: no-repeat center center; background-size: contain } @media screen and (min-width:1025px), print { .redactor-toolbar>li>a:hover { background-color: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } } .redactor-toolbar>li>a:focus { background-color: rgba(74, 74, 74, 1); color: rgba(255, 255, 255, 1) } @media screen and (min-width:545px), print { .redactor-toolbar>li.redactor-toolbar-separator::before { border-left: 1px solid rgba(255, 255, 255, 1); } } @media screen and (max-width:544px) { .redactor-toolbar.redactorToolbarOverride>.redactor-toolbar-separator::before { border-left: 1px solid rgba(255, 255, 255, 1); } .redactor-toolbar .redactorToolbarToggle::before { border-left: 1px solid rgba(255, 255, 255, 1); } } .redactorAttachmentContainer { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(238, 238, 238, 1); } .redactor-dropdown-menu-fontcolor>li.redactorColorPallet:hover { background-color: rgba(25, 25, 25, 1) !important } .redactor-dropdown-menu-fontcolor>li.redactorColorPallet>a { border: 2px solid rgba(255, 255, 255, 1); } .redactorDropArea { background-color: rgba(38, 38, 38, 1); border: 5px dashed currentColor; color: rgba(199, 199, 199, 1); } .redactorDropArea.active { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .redactor-link-tooltip { background-color: rgba(0, 0, 0, 0.8); border-radius: 2px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: rgba(255, 255, 255, 1); } .redactor-link-tooltip>a { color: rgba(255, 255, 255, 1) } .redactor-dropdown-menu-woltlabColor .woltlab-color-selection>a { background-color: currentColor !important; } .wysiwygTextarea { background-color: transparent !important; border: 1px solid rgba(51, 51, 51, 1) !important; color: transparent !important; } .messageQuickReplyCollapsed .messageQuickReplyContent { background-color: rgba(21, 21, 21, 1); } .messageQuickReplyCollapsed .messageQuickReplyContent::before { color: rgba(238, 238, 238, 1); } .messageQuickReplyCollapsed .messageQuickReplyContent::after { color: rgba(238, 238, 238, 1); } .redactorAutosaveRestored { background-color: rgba(21, 21, 21, 1); border-top: 1px solid rgba(51, 51, 51, 1); } .redactorAutosaveRestored>a { border-left: 1px solid rgba(51, 51, 51, 1); } .redactorAutosaveRestored>span { color: rgba(199, 199, 199, 1); } @media screen and (min-width:545px), print { .redactorAutosaveRestored { border-left: 1px solid rgba(51, 51, 51, 1); } } .scrollableCheckboxList { background-color: rgba(21, 21, 21, 1); border: 1px solid rgba(51, 51, 51, 1); color: rgba(204, 204, 204, 1); } .highlight { background-color: rgba(255, 214, 30, 1); color: rgba(0, 0, 0, 1); } .messageShareButtons .jsShareFacebook { background-color: rgba(59, 89, 153, 1); color: rgba(255, 255, 255, 1) } .messageShareButtons .jsShareTwitter { background-color: #55acee; color: rgba(255, 255, 255, 1) } .messageShareButtons .jsShareGoogle { background-color: rgba(220, 78, 65, 1); color: rgba(255, 255, 255, 1) } .messageShareButtons .jsShareReddit { background-color: rgba(255, 69, 0, 1); color: rgba(255, 255, 255, 1) } .messageShareButtons .jsShareWhatsApp { background-color: #25d366; color: rgba(255, 255, 255, 1) } .messageShareButtons .jsShareLinkedIn { background-color: rgba(0, 122, 182, 1); color: rgba(255, 255, 255, 1) } .messageShareButtons .jsSharePinterest { background-color: rgba(189, 33, 37, 1); color: rgba(255, 255, 255, 1) } .messageShareButtons .jsShareXing { background-color: rgba(0, 101, 103, 1); color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareFacebook:hover { background-color: rgba(45, 68, 116, 1); color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareTwitter:hover { background-color: #2795e9; color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareGoogle:hover { background-color: rgba(198, 50, 36, 1); color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareReddit:hover { background-color: rgba(204, 55, 0, 1); color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareWhatsApp:hover { background-color: #1da851; color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareLinkedIn:hover { background-color: rgba(0, 88, 131, 1); color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsSharePinterest:hover { background-color: rgba(146, 25, 28, 1); color: rgba(255, 255, 255, 1) } html:not(.touch) .messageShareButtons .jsShareXing:hover { background-color: rgba(0, 51, 52, 1); color: rgba(255, 255, 255, 1) } .slideshowContainer>.slideshowButtonList>li>a>.icon { color: rgba(68, 68, 68, 1) } .slideshowContainer>.slideshowButtonList>li>a>.icon.active { color: rgba(3, 113, 164, 1) } .slideshowContainer>.slideshowButtonList>li:hover>a>.icon { color: rgba(32, 157, 212, 1) } .tabMenu>ul>li::before, .menu>ul>li::before { border-top: 1px solid rgba(32, 157, 212, 1); } @media screen and (min-width:769px), print { .tabMenu>ul, .menu>ul { border-bottom: 1px solid rgba(51, 51, 51, 1) } } .tabMenuOverlayLeft::before, .tabMenuOverlayRight::before { color: rgba(199, 199, 199, 1) } .tabMenuOverlayLeft { background: linear-gradient(to left, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 1) 50%); } .tabMenuOverlayRight { background: linear-gradient(to right, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 1) 50%); } .messageTabMenu>.messageTabMenuContent.active { background-color: rgba(21, 21, 21, 1); } .messageTabMenu:not(.messageTabMenuContent)>.messageTabMenuContent.active { border: 1px solid rgba(51, 51, 51, 1); } .messageTabMenu.messageTabMenuContent>nav { border-bottom: 1px solid rgba(51, 51, 51, 1); } .messageTabMenu.messageTabMenuContent>nav>ul>li.active>a { color: rgba(32, 157, 212, 1) } .messageTabMenu>nav.tabMenu>ul, .messageTabMenuNavigation>ul { background-color: rgba(21, 21, 21, 1); border: 1px solid rgba(51, 51, 51, 1); } .messageTabMenu>nav.tabMenu>ul>li, .messageTabMenuNavigation>ul>li { border-right: 1px solid rgba(51, 51, 51, 1) } .messageTabMenu>nav.tabMenu>ul>li.active>a, .messageTabMenuNavigation>ul>li.active>a { color: rgba(32, 157, 212, 1); } .messageTabMenu>nav.tabMenu>ul>li.active>a::after, .messageTabMenuNavigation>ul>li.active>a::after { border-bottom: 1px solid rgba(21, 21, 21, 1); } .tabularList { border-bottom: 1px solid rgba(98, 149, 196, 1); } .tabularListRow { transition: background-color 0.12s } .tabularListRow.divider+li:not(.divider) { border-top-color: rgba(98, 149, 196, 1) } .tabularListRow:not(.tabularListRowHead):hover { background-color: rgba(37, 37, 37, 1) } .tabularListRowHead { border-bottom: 2px solid currentColor; color: rgba(199, 199, 199, 1) } .tabularListRow:not(.tabularListRowHead) { border-top: 1px solid rgba(51, 51, 51, 1) } .tabularListRowHead>.tabularListColumns>li { color: rgba(199, 199, 199, 1); } .tabularListRowHead>.tabularListColumns>li>a { color: rgba(199, 199, 199, 1); } .tabularListRowHead>.tabularListColumns>li.active>a, .tabularListRowHead>.tabularListColumns>li>a:hover { color: rgba(32, 157, 212, 1) } .tabularBoxTitle>header { border-bottom: 1px solid currentColor; color: rgba(199, 199, 199, 1); } .tabularBoxTitle>header a, .tabularBoxTitle>header .icon { color: rgba(199, 199, 199, 1) } .tabularBoxTitle>header a:hover, .tabularBoxTitle>header .icon:hover { color: rgba(32, 157, 212, 1) } .htmlContent table, .messageBody>.messageText table, .messageSignature>div table, .redactor-layer table, .table { border-bottom: 1px solid rgba(98, 149, 196, 1); } .htmlContent table th, .messageBody>.messageText table th, .messageSignature>div table th, .redactor-layer table th, .table th { border-bottom: 2px solid currentColor; color: rgba(199, 199, 199, 1); } .htmlContent table th>a, .messageBody>.messageText table th>a, .messageSignature>div table th>a, .redactor-layer table th>a, .table th>a { color: rgba(199, 199, 199, 1); } .htmlContent table th.active>a, .messageBody>.messageText table th.active>a, .messageSignature>div table th.active>a, .redactor-layer table th.active>a, .table th.active>a, .htmlContent table th>a:hover, .messageBody>.messageText table th>a:hover, .messageSignature>div table th>a:hover, .redactor-layer table th>a:hover, .table th>a:hover { color: rgba(32, 157, 212, 1) } .htmlContent table tr:hover>td, .messageBody>.messageText table tr:hover>td, .messageSignature>div table tr:hover>td, .redactor-layer table tr:hover>td, .table tr:hover>td { background-color: #f2f2f2 } .htmlContent table tr:not(:last-child)>td, .messageBody>.messageText table tr:not(:last-child)>td, .messageSignature>div table tr:not(:last-child)>td, .redactor-layer table tr:not(:last-child)>td, .table tr:not(:last-child)>td { border-bottom: 1px solid rgba(51, 51, 51, 1) } .htmlContent table tbody:first-child>tr:first-child>td, .messageBody>.messageText table tbody:first-child>tr:first-child>td, .messageSignature>div table tbody:first-child>tr:first-child>td, .redactor-layer table tbody:first-child>tr:first-child>td, .table tbody:first-child>tr:first-child>td { border-top: 1px solid rgba(98, 149, 196, 1) } .tableOfContentsContainer { border: 1px solid rgba(51, 51, 51, 1); } .balloonTooltip, .redactor-toolbar-tooltip { background-color: rgba(0, 0, 0, 0.8); box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: rgba(255, 255, 255, 1); } .balloonTooltip.interactive>span:not(:first-child), .redactor-toolbar-tooltip.interactive>span:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 1); } #trophyIconEditor .colorBox { background-color: #fff; border: 1px solid #ccc; } .selectedImagePreview>img { border: 1px solid #ccc; background-color: #fff; } @media screen and (min-width:769px), print { .ignoredUserMessage { background-color: rgba(38, 38, 38, 1) !important; border-left: 5px solid rgba(25, 121, 162, 1) !important; color: rgba(199, 199, 199, 1) !important; } } @media screen and (max-width:768px) { .ignoredUserMessage { border-top: 1px solid rgba(98, 149, 196, 1); } .ignoredUserMessage::before { background-color: rgba(38, 38, 38, 1) !important; border-left: 5px solid rgba(25, 121, 162, 1) !important; color: rgba(199, 199, 199, 1) !important; } } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton { color: rgba(255, 255, 255, 1); } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.googleLoginButton { background-color: #dd4b39 } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.googleLoginButton:hover { background-color: #ca3523 } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.facebookLoginButton { background-color: #3b5998 } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.facebookLoginButton:hover { background-color: #30487b } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.twitterLoginButton { background-color: #55acee } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.twitterLoginButton:hover { background-color: #309aea } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.githubLoginButton { background-color: #444 } .loginForm>form .thirdPartyLogin .thirdPartyLoginButton.githubLoginButton:hover { background-color: #303030 } .userProfileUserWithCoverPhoto .userProfileCoverPhoto { background: no-repeat center; background-size: cover; } .userProfileUserWithCoverPhoto .userProfileCoverPhoto::after { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%); } .userProfileUserWithCoverPhoto .userProfileUsername { color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) } .userAvatarImage { background-color: #fff; } .userAvatarList.small>li>a>img { border: 1px solid #fff } @media screen and (max-width:768px) { .userProfilePreviewAvatar .badgeOnline, .userProfileUser .contentHeaderIcon .badgeOnline { color: transparent; } .userProfilePreviewAvatar .badgeOnline::before, .userProfileUser .contentHeaderIcon .badgeOnline::before { background-color: inherit; border: 1px solid rgba(255, 255, 255, 1); } } .content>.section, .content>form, .sectionContainer { border: 1px solid rgba(51, 51, 51, 1); background-color: rgba(38, 38, 38, 1); } .mainMenu .boxMenu .boxMenuDepth1 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.23) } .redactor-toolbar { background-color: rgba(0, 0, 0, 1) } .redactor-toolbar>li>a { color: rgba(255, 255, 255, 1) } .redactor-toolbar>li>a.redactor-button-disabled { color: rgba(122, 122, 122, 1) !important } .redactor-toolbar>li>a.redactor-act, .redactor-toolbar>li>a.dropact { background-color: rgba(25, 25, 25, 1); color: rgba(255, 255, 255, 1) } @media screen and (min-width:1025px), print { .redactor-toolbar>li>a:hover { background-color: rgba(25, 25, 25, 1); color: rgba(255, 255, 255, 1) } } @media screen and (min-width:545px), print { .redactor-toolbar>li.redactor-toolbar-separator::before { border-left: 1px solid rgba(255, 255, 255, 1) } } @media screen and (max-width:544px) { .redactor-toolbar.redactorToolbarOverride>.redactor-toolbar-separator::before { border-left: 1px solid rgba(255, 255, 255, 1) } .redactor-toolbar .redactorToolbarToggle::before { border-left: 1px solid rgba(255, 255, 255, 1) } } .redactor-box, .messageTabMenuNavigation>ul, .messageTabMenu>.messageTabMenuContent.active, .messageContent.loading>.messageContentLoadingOverlay { background-color: rgba(38, 38, 38, 1) } .messageTabMenuNavigation>ul>li.active>a::after { border-bottom-color: rgba(38, 38, 38, 1) } .innerError { background-color: rgba(38, 38, 38, 1); color: rgba(199, 199, 199, 1) } .innerError::before { border-bottom-color: rgba(38, 38, 38, 1) } .interactiveDropdownHeader .icon { color: inherit } .sidebar dl:not(.plain)>dt, .messageSidebar dl:not(.plain)>dt, .sidebar dl.dataList>dt, .messageSidebar dl.dataList>dt, .sidebar .separatorLeft::before, .messageSidebar .separatorLeft::before { color: rgba(204, 204, 204, 1) } .messageReduced .messageTitle a { color: rgba(238, 238, 238, 1) } .messageReduced .messageHeaderMetaData .messagePublicationTime, .messageReduced .messageHeaderMetaData>li:not(:last-child)::after { color: rgba(204, 204, 204, 1) } .userMention { color: rgba(32, 157, 212, 1) } .userMention:hover { color: rgba(32, 157, 212, 1) } .boxesSidebarLeft .box.boxError .boxTitle, .boxesSidebarRight .box.boxError .boxTitle, .boxesSidebarLeft .box.boxInfo .boxTitle, .boxesSidebarRight .box.boxInfo .boxTitle, .boxesSidebarLeft .box.boxSuccess .boxTitle, .boxesSidebarRight .box.boxSuccess .boxTitle, .boxesSidebarLeft .box.boxWarning .boxTitle, .boxesSidebarRight .box.boxWarning .boxTitle { color: inherit; } .tabMenuOverlayLeft { background: linear-gradient(to left, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 1) 50%) } .tabMenuOverlayRight { background: linear-gradient(to right, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 1) 50%) } .messageContent.loading>.messageContentLoadingOverlay { background-color: rgba(38, 38, 38, 1) } .htmlContent table tr:hover>td, .messageBody>.messageText table tr:hover>td, .messageSignature>div table tr:hover>td, .redactor-layer table tr:hover>td, .table tr:hover>td { background-color: rgba(37, 37, 37, 1) } .redactor-layer table th, .redactor-layer table td { border-color: rgba(51, 51, 51, 1) !important } body.woltlabPageHomepage .boxesTop .box:nth-child(even), body.woltlabPageFeatures .boxesTop .box:nth-child(even), body.woltlabPageApps .boxesTop .box:nth-child(even), body.woltlabPageServices .boxesTop .box:nth-child(even), body.woltlabPageForum .boxesTop .box:nth-child(even), .websiteOffer, .websiteSaasOffers, .websiteSaasCustom, .diveIntoActionBox .box, .downloadType { background-color: rgba(34, 34, 34, 1) } .userAvatarImage { background: rgba(38, 38, 38, 1) } .userAvatarList>li>a>img { border-color: rgba(51, 51, 51, 1) } .htmlContent table tr:hover>td, .messageBody>.messageText table tr:hover>td, .messageSignature>div table tr:hover>td, .redactor-layer table tr:hover>td, .table tr:hover>td { background-color: rgba(37, 37, 37, 1) } /* ----- Edited ----- */ @media screen and (min-width:1025px), print { .containerList>li .buttonGroupNavigation>ul>li>a>.icon, .containerList>li .buttonGroupNavigation>ul>li>a>.invisible { color: rgba(238, 238, 238, 0.5) } } .inlineCode, kbd { background-color: rgba(33, 33, 33, 1) !important; border-color: rgba(51, 51, 51, 1) !important; color: rgba(238, 238, 238, 1) !important } .redactor-layer pre { background-color: rgba(21, 21, 21, 1) !important; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); color: rgba(204, 204, 204, 1) !important } .redactor-layer table td { border-color: rgba(51, 51, 51, 1) } #main .boxContainer section.box, #main .boxContainer div.box { border: 2px solid #333 } .quoteBoxQuoteSymbol:before { color: #dbdbdb } .wbbLastPost .datetime { color: #8a8a8a } @media screen and (max-width:1024px) { .mainMenu::before, .userPanel:not(.userPanelLoggedIn)::before { color: #c7c7c7 } } aside.messageSidebar.member, aside.messageSidebar.guest { background-color: #151515 } @media screen and (min-width:769px), print { .messageSidebar .userAvatarImage { border: 4px #151515 solid } } .dialogContainer .dialogTitle { color: #c7c7c7 } .dialogContainer .dialogCloseButton .icon { color: #c7c7c7 !important } .messageGroup:not(.new) .columnSubject>h3>a { color: #c7c7c7 } .wbbBoard:not(.new) .containerHeadline>h3>a { color: #c7c7c7 } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { background: rgba(0, 0, 0, 0.5) } .reactButton.active .icon { color: #ee1013 !important } .containerList>li:not(:last-child) { border-bottom: 1px solid #242424 } .containerList>li:first-child { border-top: 1px solid #242424 } .containerList>li.showMore { border-bottom: 1px solid #242424 } .wbbBoardList .wbbBoard:hover { background-color: rgba(21, 21, 21, 1) } [class*="wbbBoardIcon"]:before { color: rgba(238, 238, 238, 1) } .filebaseFileList .filebaseFileFooter { background-color: rgba(37, 37, 37, 1); border-top: 1px solid rgba(51, 51, 51, 1) } .userOnlineGroupMarking9 .messageSidebar .woltlabTeamBadge, .userOnlineGroupMarking12 .messageSidebar .woltlabTeamBadge, .userOnlineGroupMarking13 .messageSidebar .woltlabTeamBadge { background-image: linear-gradient(#2e6399, #254c73) !important } /* END */ } }
Grus,
Andreas -
Hier wäre halt auch eine Lösung von Belarus
https://wbbsupport.de/forum/thread/5…-mode-switcher/Einfachste Lösung...
Mach dein Icon dahin wo du es möchtest und als Verlinkung machst du www.deine-seite/?styleId=XXX XXX ist dann die gewünschte Id
Ich werde mich damit mal beschäftigen und Rückmeldung geben
-
Letztere genannte und zitierte Möglichkeit wäre zwar einfacher, aber wäre letztlich nichts anderes als der bereits vorhandene Stil-Wechsler. Zudem wird dadurch ein reload der Seite durchgeführt, welches beim Dark-/Light-Mode-Switcher nicht der Fall ist. Allerdings bleibt dies ein jeden selbst überlassen für welche Möglichkeit er oder sie sich entscheidet
Gruss,
Andreas -
Belarus , dein ernst, das ist Wahnsinn, ich hänge imo bei den sch... button, ich bekomme es einfach nicht die einzeln anzusprechen.
Ich ändere einen z.b. Thema bearbeiten, dann ändern sich auch die Button Inhalt melden / Verwarnen / bearbeiten / Zitieren
ändere ich den Antwort button (OBEN) ändert sich auch Ein Zitat / Zum Seitenanfang
Blick da echt nicht mehr durch und dann kommst du mit 3000 zeilen, ja ne is klar
-
HTMH
bezüglich den Buttons schau mal in die Entwicklerkonsole nach der jeweiligen Klasse. Die Buttons können zudem, je nach dem auf welche Seite / Box diese enthalten sind, auch mit Beispielsweise [data-application="XXX"] oder [data-page-identifier="com.woltlab.wcf.XXX"] , etc. per CSS angesprochen werden.Blick da echt nicht mehr durch und dann kommst du mit 3000 zeilen, ja ne is klar
Sollst ja auch was zu tun haben
Gruss,
Andreas -
Hallo in die Fröhliche Runde.
Hallo HTMH , wenn Du mal Angenommener weise, nur zwei verschiedene Stile im Angebot hast, benötigt der Jenige der den Stiel Wechseln möchte
genau zwei Klicks um von Stil "Eins" auf Stil "Zwei" zu wechseln. Jede Andere Lösung würde also nur einen Klick Sparen!
Der einzige Vorteil für den "Dark-Mode-Switch" währe, das der User nur noch einmal auf einen neu zu Erstellenden Button Klicken müßte.
Bei mehr als zweil Stilen macht dieser Neue Button meiner Bescheidenen Meinung nach also keinen Sinn. Beinur zwei Möglichen
Wahlmöglichkeiten währe selbst mir der Aufwand für einen "Dark-Mode-Switch" ein wenig zu viel Arbeit um einen Klick Einzusparen.
Soviel zu der Sache. Belarus hätte ich in dem Zusammenhang eine Bescheidene Frage, was mache ich wenn es das Template: pageHeaderUser
wovon in Deinem Vorschlag die Rede ist nicht Gibt, wo füge ich dann den Code{include file='DarkModeSwitcher'} Ein??
Ich glaube das ich da lieber Warte wann es Einfachere Lösungen als "Zweimal Klicken" gibt.
-
Wenn dieses Template in der Tat nicht existiert, würde Deine Installation nicht funktionieren, es muss also vorhanden sein.
Gruß norse
-
HTMH
bezüglich den Buttons schau mal in die Entwicklerkonsole nach der jeweiligen Klasse. Die Buttons können zudem, je nach dem auf welche Seite / Box diese enthalten sind, auch mit Beispielsweise [data-application="XXX"] oder [data-page-identifier="com.woltlab.wcf.XXX"] , etc. per CSS angesprochen werden.Sollst ja auch was zu tun haben
Gruss,
Andreasok, muss ich mal schauen, ne da ist einfach zu viel drin, wüsste bei der Menge gar nicht was für was ist.
-
Hallo in die Fröhliche Runde.
Hallo HTMH , wenn Du mal Angenommener weise, nur zwei verschiedene Stile im Angebot hast, benötigt der Jenige der den Stiel Wechseln möchte
genau zwei Klicks um von Stil "Eins" auf Stil "Zwei" zu wechseln. Jede Andere Lösung würde also nur einen Klick Sparen!
Der einzige Vorteil für den "Dark-Mode-Switch" währe, das der User nur noch einmal auf einen neu zu Erstellenden Button Klicken müßte.
Bei mehr als zweil Stilen macht dieser Neue Button meiner Bescheidenen Meinung nach also keinen Sinn. Beinur zwei Möglichen
Wahlmöglichkeiten währe selbst mir der Aufwand für einen "Dark-Mode-Switch" ein wenig zu viel Arbeit um einen Klick Einzusparen.
Soviel zu der Sache. Belarus hätte ich in dem Zusammenhang eine Bescheidene Frage, was mache ich wenn es das Template: pageHeaderUser
wovon in Deinem Vorschlag die Rede ist nicht Gibt, wo füge ich dann den Code{include file='DarkModeSwitcher'} Ein??
Ich glaube das ich da lieber Warte wann es Einfachere Lösungen als "Zweimal Klicken" gibt.
Hier geht es nicht um Klicks oder so, sondern einfach um die "Technik", je nach Stil kann der Switcher auch bei 10 Stilen Sinn machen.
Alles mögliche hat heutzutage einen Darkmodus, mit 1-2 Klicks, wie soll das einfacher gehen. -
Alles mögliche hat heutzutage einen Darkmodus, mit 1-2 Klicks, wie soll das einfacher gehen.
HTMH , Ich habe nicht Behauptet das ich es Besser kann! Aber wie Du selbst Bemerkt hast,
Blick da echt nicht mehr durch und dann kommst du mit 3000 zeilen, ja ne is klar
Wenn es dann wirklich nur Darum Geht, von einem Hellen Stil in Einen Dunklen Stil um zu Schalten ist bei aller Technik Affinitätk
kein Aufwand gerechtfertigt solch ein Machwerk zu Erschaffen um Abends das Licht Auszuschalten
Sei es mir Erlaubt das Wort nch einmal an norse zu richten. Selbstverständlich hast Du Recht,und ich habe nicht Aufgepasst.
ich Hoffe es wird mir Verziehen. Aber ohne die Anstrengung, ein Standard-Template in die Zu ändernden Stile Einzusetzen,
und sie dann den Sonderwünschen Anzupassen ist selbst mir nicht Sofort und Ohne Deine Hilfe Eingefallen .
Also Danke für den Denkanstoß.
Ich Betrachte dieses Thema für mich als Abgeschlossen, da jetzt ja uch schon gut Gemeinte Hilfsangebote, Kritisch Erwähnt werden.
Viel Erfolg weiterhin inder Forschungsarbeit
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!