Sleazy Fork is available in English.

CSS for coronabuddy

@require library

Tính đến 23-05-2020. Xem phiên bản mới nhất.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.sleazyfork.org/scripts/403974/808214/CSS%20for%20coronabuddy.js 

// CSS rules for coronabuddy
let darkModeSet = false;
let darkModeEnabled = true;
let darkModeInjected = false;


let darkCSS = /*css*/ `
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

::selection {
  background: #B4D5FE;
}

::-moz-selection {
  background: #B4D5FE;
}

blockquote {
  border: 1px solid linen !important;
}

html:not(root) body {
  background-color: #121212 !important;
}

html:not(root) div {
  border: 0px !important;
}

html:not(root) p {
  color: white !important;
}

#af-wrapper a {
  color: lime !important;
  outline: 0;
}

#af-wrapper small .profile-link {
  /* This fixes a critical bug with the forum addon that seems to allow arbitrarily long user names without truncation, breaking UX */
  display: inline-block !important;
  vertical-align: bottom !important;
  max-width: 5vw !important;
  max-height: 2em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#af-wrapper .forum-description {
  color: linen;
}

#af-wrapper #forum-header {
  background-color: #006600 !important;
}

#af-wrapper #forum-navigation a {
  border-color: green !important;
}

#af-wrapper .pages > strong {
  background-color: rgba(50, 255, 50, 0.6) !important;
  color: linen !important;
}

#af-wrapper #profile-content {
  background-color: #232323 !important;
  color: linen !important;
}

#af-wrapper #profile-layer {
  background-color: #232323 !important;
}

#af-wrapper #profile-navigation {
  /* Override random !important in the WP CSS */
  background-color: green !important;
}

#af-wrapper #profile-navigation a.active {
  /* Override random !important in the WP CSS */
  background-color: #006600 !important;
}

#af-wrapper .button-normal {
  /* Override random !important in the WP CSS */
  background-color: #006600 !important;
  border: 0px;
}

#af-wrapper .content-element:nth-child(2n):not(.topic-sticky) {
  background-color: #121212 !important;
}

#af-wrapper .topic-sticky {
  background-color: #121212 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

#af-wrapper .topic-sticky .fa-comments {
  color: tomato !important;
}

#af-wrapper .topic-sticky .topic-name > a {
  color: #d6203b !important;
  font-weight: 700 !important;
}

#af-wrapper .editor-row-subject {
  background-color: black !important;
  color: gray !important;
}

#af-wrapper .editor-row-subject > span > input {
  background-color: #232323 !important;
  color: linen !important;
}


#af-wrapper .forum-post-menu a {
  color: green !important;
}

#af-wrapper .pages {
  background-color: #232323 !important;
  border-color: gray !important;
  border: 1px solid gray !important;
}

#af-wrapper .pages > a {
  border-right: 1px solid gray !important;
  border-left: 1px solid gray !important;
  color: lime !important;
}

#af-wrapper .pages a:hover {
  background-color: lime !important;
  color: black !important;
}

#af-wrapper .pages strong {
  border-right: none;
  color: black !important;
}

#af-wrapper .post-author .topic-author {
  color: red !important;
  font-weight: 900;
  font-size: 1.1em;
  -webkit-text-stroke: 1px black !important;
}

#af-wrapper .post-message > blockquote::after {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(249, 249, 249, .4)) !important;
}

#af-wrapper .post-element {
  border: 2px gray solid !important;
}

#af-wrapper .title-element {
  background-color: #006600 !important;
}

#af-wrapper .topic-sticky .topic-poster {
  border-left: 0px;
  background: none !important;
}

#af-wrapper .unread {
  color: lime !important;
}

#forum-breadcrumbs > span > a > span {
  color: linen;
}

#forum-search {
  background-color: #232323 !important;
}

#poll-panel {
  background-color: #000000 !important;
  color: linen !important;
}

#read-unread {
  display: none !important;
}

.avatar {
  border: none !important;
}

.background-contrast {
  background-color: #232323 !important;
}

.content-container {
  background-color: #232323 !important;
  border-color: black !important;
}

.dark .site-container {
  background-color: #121212 !important;
}

.editor-row {
  background-color: #121212 !important;
}

.forum {
  border-bottom: 0px !important;
}

.forum-editor-button {
  border: none !important;
}

.forum-poster {
  border-left: 0px !important;
}

.forum-post-date:after {
  content: '';
  width: 40vw !important;
  height: 1px !important;
  display: block;
  position: absolute;
  border-bottom: 1px solid gray !important;
}

.forum-post-header {
  border-color: gray !important;
}

.footer-widgets {
  background-color: #232323;
}

.mce-container-body {
  background-color: #121212 !important;
}

.poll-result-numbers {
  color: linen !important;
}

.poll-result-total {
  color: linen !important;
}

.post-counter {
  color: linen;
}

.post-element {
  background-color: #232323 !important;
}

.post-wrapper {
  background-color: #121212 !important;
  color: linen !important;
  border: 0px !important;
  border-right: 1px gray solid !important;
}

.quotetitle {
  color: linen;
}

.reaction.up:hover {
  color: lime !important;
}

.reaction.up > .reaction-icon {
  color: lime !important;
}

.reaction.up > .reaction-icon.reaction-inactive {
  color: gray !important;
}

.reaction.up > .reaction-number {
  color: lime !important;
}

.reaction.down:hover {
  color: red !important;
}

.reaction.down > .reaction-icon {
  color: red !important;
}

.reaction.down > .reaction-icon.reaction-inactive {
  color: gray !important;
}
.reaction.down > .reaction-number {
  color: red !important;
}

.spoiler-head {
  background-color: black !important;
  border: 1px solid linen !important;
}

.topic {
  border-bottom: 0px !important;
}

.topic-poster {
  border-left: 0px !important;
}

.popup {
position: relative;
}

.popup__banner {
  background-color: $black;
  height: 2.5em;
  margin-top: 2em;
  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
}

.popup__banner--text {
  color: lime !important;
  font-size: 0.8em;
  font-family: 'Press Start 2P', cursive;
  text-align: center;
}

.popup__textarea {
  color: lime !important;
  background-color: black !important;
  font-size: 1.1em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  width: 60%;
  height: 20em;
  resize: none;
  margin-bottom: 0.3em;
  margin-top: 1em;
}

.popup__textarea:focus {
 outline: none;
}

.popup__button {
  background-color: rgb(45, 45, 45);
  width: 50%;
  height: 3em;
  border: 0px solid lime !important;
  font-size: 1em;
  display: block;
  margin: 0 auto;
  border: none;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12);
  transition: border 0.3s;

}

.popup__button:focus {
    outline: none;
}

.popup__button:hover {
    border: 4px solid lime !important;
    transition: border 0.3s;
}

.popup__button:active {
    background-color: lime !important;

}

.popup__button--invert {
  background-color: lime !important;
  color: $black !important;
}

.popup__button--black {
  background-color: rgb(45, 45, 45);
}

.popup__button--center {
  display: block;
  text-align: center;
}

.popup__button--text {
  color: lime !important;
  font-weight: 500;
  font-family: 'Press Start 2P', cursive;
  margin: 0;
  font-size: 0.5em;
  &:active {
    color: $black !important;
  }
}

.popup__button--save {
  margin-bottom: 0.5em;
}

.popup__button--clear {
}

.popup__notification {
  color: $red;
  font-weight: 700;
  margin-top: 0.5em;
}

.popup__darkmode {
  margin-top: 1em;
  text-align: center;
}

.popup__darkmode--text {
  display: inline-block;
  color: lime !important;
  font-size: 0.6em;
  font-family: 'Press Start 2P', cursive;
  margin-right: 0.5em;
}

.popup__darkmode--checkbox {
  display: inline-block;
  height: 0.8em;
  width: 0.8em;
  background-color: #555;
  border-radius: 0.1em;
  margin-bottom: -0.08em;
  user-select: none;
}

.popup__darkmode--checkbox--check:after {
  content: '✓';
  position: absolute;
  color: lime !important;
  font-size: 0.6em;
  font-weight: 900;
  margin-left: -0.42em;
  margin-top: 0.1em;
}
`;

const OBSERVER = new MutationObserver(parseNodes);

OBSERVER.observe(document, {
  attributes: true,
  childList: true,
  subtree: true,
});

function parseNodes(mutations) {
  if (darkModeEnabled && document.head && darkModeSet === false) {
    darkModeSet = true;
    document.head.lastChild.after(
      templateDOMElement({
        tag: "style",
        innerHTML: darkCSS,
        id: "coronaBuddyDarkMode__selector",
        classList: "",
        style: "",
      })
    );
  }
  // sloppy injection fix for iframes
  try {
    if (
      document.querySelector("#message_ifr") &&
      document.querySelector("#message_ifr").contentWindow.document.body &&
      !darkModeInjected &&
      darkModeEnabled
    ) {
      document.head.lastChild.after(
        templateDOMElement({
          tag: "style",
          innerHTML: darkCSS,
          id: "coronaBuddyDarkMode__selector",
          classList: "",
          style: "",
        })
      );

      console.log("Injected darkmode.");
      darkModeInjected = true;
      document
        .querySelector("#message_ifr")
        .contentWindow.document.head.querySelector("style").innerHTML +=
        "body {background-color: #121212 !important; color: white !important;} blockquote {border: 1px solid linen !important;}";
    }
  } catch (error) {
    console.log(error);
  }
}