RSO Component

Link to article: RSO Component.

Module Styles

• 
  
  @keyframes spinny1{
       from {
       -webkit-transform: rotate(0deg);
                webkit-transform: rotate(0deg);
       }
       to {
       -webkit-transform: rotate(359deg);
       transform: rotate(359deg);
       }
  }
  
  .info-container .collapsible-block-folded a{
  color: #FFF;}
  .info-container .collapsible-block-unfolded-link a{
  color: #FFF;
  }
  
  #page-title {
      text-align: center;
  }
  #page-content > .collapsible-block {
      display: block;
      text-align: center;
      padding: 0.75em;
      background-color: lightgrey;
      border-top: 0.125rem dashed slategrey;
      border-bottom: 0.125rem dashed slategrey;
  }
  
  #page-content > .collapsible-block .collapsible-block-content {
      text-align: left;
  }
  
  .addendum {
      border:solid 2px #999999;
      background:#F5F5F5;
      width:84%;
      padding:1px 15px;
      margin: 10px auto;
  }
  
  .crom-thumbnail {
      display: none;
  }
  
  #main-content .page-tags span {
      justify-content: flex-start;
  }
   
  #main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) {
      --wght: 500;
      display: inline;
      position: relative;
      flex-grow: 0;
      width: -webkit-max-content;
      width: max-content;
      height: 1.175em;
      margin: 0 0 0 0.5125rem;
      padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      background: rgb(var(--swatch-menubg-dark-color));
      color: rgb(var(--swatch-menutxt-light-color));
      font-size: 0.6875rem;
      line-height: 0.8125rem;
      text-decoration: none;
      -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
              clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
  }
   
  #main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"]) {
      --wght: 500;
      display: inline;
      position: relative;
      flex-grow: 0;
      width: -moz-max-content;
      width: max-content;
      height: 1.175em;
      margin: 0 0 0 0.5125rem;
      padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      background: rgb(var(--swatch-menubg-dark-color));
      color: rgb(var(--swatch-menutxt-light-color));
      font-size: 0.6875rem;
      line-height: 0.8125rem;
      text-decoration: none;
      clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
  }
   
  #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) {
      --wght: 500;
      display: inline;
      position: relative;
      flex-grow: 0;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      height: 1.175em;
      margin: 0 0 0 0.5125rem;
      padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      background: rgb(var(--swatch-menubg-dark-color));
      color: rgb(var(--swatch-menutxt-light-color));
      font-size: 0.6875rem;
      line-height: 0.8125rem;
      text-decoration: none;
      -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
              clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
  }
   
  #main-content .page-tags span a:hover:not([href^="/system:page-tags/tag/_"]),
  #main-content .page-tags span a:active:not([href^="/system:page-tags/tag/_"]) {
      color: rgb(var(--swatch-menutxt-light-color));
  }
   
  #main-content .page-tags span a:focus-within:not([href^="/system:page-tags/tag/_"]) {
      color: rgb(var(--swatch-menutxt-dark-color));
  }
   
  #main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"])::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0.5rem;
      width: 0.25rem;
      height: 0.25rem;
      transform: translateY(-50%);
      border-radius: 50%;
      background: rgb(var(--swatch-background));
      box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
  }
   
  #main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"])::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0.5rem;
      width: 0.25rem;
      height: 0.25rem;
      transform: translateY(-50%);
      border-radius: 50%;
      background: rgb(var(--swatch-background));
      box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
  }
   
  #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0.5rem;
      width: 0.25rem;
      height: 0.25rem;
      transform: translateY(-50%);
      border-radius: 50%;
      background: rgb(var(--swatch-background));
      box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
  }
   
  .page-tags span {
      border-top: .5rem solid transparent;
  }
  
      /* Navbar CSS */
   
      .flatworm-nav {
          --text-shadow: rgba(var(--black-monochrome), 0.35);
          --box-shadow: rgb(var(--gray-monochrome));
          --border-color: rgb(var(--newpage-color));
          color: rgb(var(--white-monochrome));
          text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow);
          border-radius: 0.0625rem;
          border: double 0.188rem var(--border-color);
          background-color: rgb(var(--bright-accent));
          box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow);
          padding: 0.3rem 0.125rem;
          margin: 0.625rem 0 0.938rem;
          margin-bottom: 1.250rem;
      }
   
      .flatworm-nav a {
          color: rgb(255, 237, 6);
          display: inline-block;
          position: relative;
          width: 100%;
          height: 100%;
          padding-top: 0.45em;
          padding-bottom: 0.35em;
      }
   
      .flatworm-nav a::before {
          display: flex;
          position: absolute;
          align-items: center;
          height: 100%;
          font-size: calc(var(--base-font-size) * 1.1);
          line-height: calc(var(--base-font-size) * 0.7);
          font-weight: 800;
          top: 0;
      }
   
      .flatworm-nav .footer-wikiwalk-nav {
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          letter-spacing: 0.025em;
          font-size: 75%;
      }
   
      .flatworm-nav .footer-wikiwalk-nav * {
          line-height: 1em;
      }
   
      .flatworm-nav .footer-wikiwalk-nav .center {
          flex-basis: 8em;
          text-align: center; 
          font-size: 120%;
      }
   
      .flatworm-nav .footer-wikiwalk-nav .left,
      .flatworm-nav .footer-wikiwalk-nav .right {
          flex-basis: calc(50% - 5em);
          display: inline-flex;
          align-items: center;
          font-size: calc(var(--base-font-size) * 0.8);
          position: relative;
      }
   
      .flatworm-nav .footer-wikiwalk-nav .left {
          text-align: right;
          justify-content: flex-end;
          border-right: 0.0625rem solid rgb(var(--white-monochrome));
          padding-left: 1em;
          padding-right: 0.5em;
          margin: 0.35em 0 0.35em 0.35em;
      }
   
      .flatworm-nav .left>a::before {
          content: "«";
          left: -0.75em;
          transition: left 1s ease-in-out;
          -webkit-animation: bounce-left 1.7s infinite;
          animation: bounce-left 1.7s infinite;
          -webkit-animation-play-state: paused;
          animation-play-state: paused;
      }
   
      .flatworm-nav .left>a:hover::before {
          -webkit-animation-play-state: running;
          animation-play-state: running;
      }
   
      .flatworm-nav .footer-wikiwalk-nav .right {
          text-align: left;
          justify-content: flex-start;
          border-left: 0.0625rem solid rgb(var(--white-monochrome));
          padding-left: 0.5em;
          padding-right: 1em;
          margin: 0.35em 0.35em 0.35em 0;
      }
   
      .flatworm-nav .right>a::before {
          content: "»";
          right: -0.75em;
          transition: left 1s ease-in-out;
          -webkit-animation: bounce-right 1.7s infinite;
          animation: bounce-right 1.7s infinite;
          -webkit-animation-play-state: paused;
          animation-play-state: paused;
      }
   
      .flatworm-nav .right>a:hover::before {
          -webkit-animation-play-state: running;
          animation-play-state: running;
      }
  
  @-webkit-keyframes bounce-left {
          0% {
              left: -0.75em;
          }
   
          50% {
              left: -0.50rem;
          }
   
          100% {
              left: -0.75em;
          }
      }
   
      @keyframes bounce-left {
          0% {
              left: -0.75em;
          }
   
          50% {
              left: -0.50rem;
          }
   
          100% {
              left: -0.75em;
          }
      }
   
      @-webkit-keyframes bounce-right {
          0% {
              right: -0.75em;
          }
   
          50% {
              right: -0.50rem;
          }
   
          100% {
              right: -0.75em;
          }
      }
   
      @keyframes bounce-right {
          0% {
              right: -0.75em;
          }
   
          50% {
              right: -0.50rem;
          }
   
          100% {
              right: -0.75em;
          }
      }

Inline Styles

• display: none;

• display: none

Includes

• :scp-wiki:component:fade-in [info]
• :scp-wiki:component:rso [info]

CSS Classes

• addendum

Page Source

[[module CSS]]


@keyframes spinny1{
     from {
     -webkit-transform: rotate(0deg);
              webkit-transform: rotate(0deg);
     }
     to {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
     }
}

.info-container .collapsible-block-folded a{
color: #FFF;}
.info-container .collapsible-block-unfolded-link a{
color: #FFF;
}

#page-title {
    text-align: center;
}
#page-content > .collapsible-block {
    display: block;
    text-align: center;
    padding: 0.75em;
    background-color: lightgrey;
    border-top: 0.125rem dashed slategrey;
    border-bottom: 0.125rem dashed slategrey;
}

#page-content > .collapsible-block .collapsible-block-content {
    text-align: left;
}

.addendum {
    border:solid 2px #999999;
    background:#F5F5F5;
    width:84%;
    padding:1px 15px;
    margin: 10px auto;
}

.crom-thumbnail {
    display: none;
}

#main-content .page-tags span {
    justify-content: flex-start;
}
 
#main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) {
    --wght: 500;
    display: inline;
    position: relative;
    flex-grow: 0;
    width: -webkit-max-content;
    width: max-content;
    height: 1.175em;
    margin: 0 0 0 0.5125rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-size: 0.6875rem;
    line-height: 0.8125rem;
    text-decoration: none;
    -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
            clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}
 
#main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"]) {
    --wght: 500;
    display: inline;
    position: relative;
    flex-grow: 0;
    width: -moz-max-content;
    width: max-content;
    height: 1.175em;
    margin: 0 0 0 0.5125rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-size: 0.6875rem;
    line-height: 0.8125rem;
    text-decoration: none;
    clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}
 
#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) {
    --wght: 500;
    display: inline;
    position: relative;
    flex-grow: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 1.175em;
    margin: 0 0 0 0.5125rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-size: 0.6875rem;
    line-height: 0.8125rem;
    text-decoration: none;
    -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
            clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}
 
#main-content .page-tags span a:hover:not([href^="/system:page-tags/tag/_"]),
#main-content .page-tags span a:active:not([href^="/system:page-tags/tag/_"]) {
    color: rgb(var(--swatch-menutxt-light-color));
}
 
#main-content .page-tags span a:focus-within:not([href^="/system:page-tags/tag/_"]) {
    color: rgb(var(--swatch-menutxt-dark-color));
}
 
#main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(var(--swatch-background));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
}
 
#main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(var(--swatch-background));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
}
 
#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(var(--swatch-background));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
}
 
.page-tags span {
    border-top: .5rem solid transparent;
}

    /* Navbar CSS */
 
    .flatworm-nav {
        --text-shadow: rgba(var(--black-monochrome), 0.35);
        --box-shadow: rgb(var(--gray-monochrome));
        --border-color: rgb(var(--newpage-color));
        color: rgb(var(--white-monochrome));
        text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow);
        border-radius: 0.0625rem;
        border: double 0.188rem var(--border-color);
        background-color: rgb(var(--bright-accent));
        box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow);
        padding: 0.3rem 0.125rem;
        margin: 0.625rem 0 0.938rem;
        margin-bottom: 1.250rem;
    }
 
    .flatworm-nav a {
        color: rgb(255, 237, 6);
        display: inline-block;
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 0.45em;
        padding-bottom: 0.35em;
    }
 
    .flatworm-nav a::before {
        display: flex;
        position: absolute;
        align-items: center;
        height: 100%;
        font-size: calc(var(--base-font-size) * 1.1);
        line-height: calc(var(--base-font-size) * 0.7);
        font-weight: 800;
        top: 0;
    }
 
    .flatworm-nav .footer-wikiwalk-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        letter-spacing: 0.025em;
        font-size: 75%;
    }
 
    .flatworm-nav .footer-wikiwalk-nav * {
        line-height: 1em;
    }
 
    .flatworm-nav .footer-wikiwalk-nav .center {
        flex-basis: 8em;
        text-align: center; 
        font-size: 120%;
    }
 
    .flatworm-nav .footer-wikiwalk-nav .left,
    .flatworm-nav .footer-wikiwalk-nav .right {
        flex-basis: calc(50% - 5em);
        display: inline-flex;
        align-items: center;
        font-size: calc(var(--base-font-size) * 0.8);
        position: relative;
    }
 
    .flatworm-nav .footer-wikiwalk-nav .left {
        text-align: right;
        justify-content: flex-end;
        border-right: 0.0625rem solid rgb(var(--white-monochrome));
        padding-left: 1em;
        padding-right: 0.5em;
        margin: 0.35em 0 0.35em 0.35em;
    }
 
    .flatworm-nav .left>a::before {
        content: "«";
        left: -0.75em;
        transition: left 1s ease-in-out;
        -webkit-animation: bounce-left 1.7s infinite;
        animation: bounce-left 1.7s infinite;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
 
    .flatworm-nav .left>a:hover::before {
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }
 
    .flatworm-nav .footer-wikiwalk-nav .right {
        text-align: left;
        justify-content: flex-start;
        border-left: 0.0625rem solid rgb(var(--white-monochrome));
        padding-left: 0.5em;
        padding-right: 1em;
        margin: 0.35em 0.35em 0.35em 0;
    }
 
    .flatworm-nav .right>a::before {
        content: "»";
        right: -0.75em;
        transition: left 1s ease-in-out;
        -webkit-animation: bounce-right 1.7s infinite;
        animation: bounce-right 1.7s infinite;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
 
    .flatworm-nav .right>a:hover::before {
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }

@-webkit-keyframes bounce-left {
        0% {
            left: -0.75em;
        }
 
        50% {
            left: -0.50rem;
        }
 
        100% {
            left: -0.75em;
        }
    }
 
    @keyframes bounce-left {
        0% {
            left: -0.75em;
        }
 
        50% {
            left: -0.50rem;
        }
 
        100% {
            left: -0.75em;
        }
    }
 
    @-webkit-keyframes bounce-right {
        0% {
            right: -0.75em;
        }
 
        50% {
            right: -0.50rem;
        }
 
        100% {
            right: -0.75em;
        }
    }
 
    @keyframes bounce-right {
        0% {
            right: -0.75em;
        }
 
        50% {
            right: -0.50rem;
        }
 
        100% {
            right: -0.75em;
        }
    }
[[/module]]

[[div style="display: none;"]]
[[include :scp-wiki:component:fade-in speed=1]]
[[/div]]


[!-- don't show this component's usage bar --]
[[iftags +component]]
[[div style="display: none"]]
[[/iftags]]

[[iftags +component]]
[[/div]]

[[>]]
[[module Rate]]
[[/>]]

On any wiki:
> {{@@[[include :scp-wiki:component:rso]]@@}}
[[div class="addendum"]]
This is a component I use to easily change the formatting on all my articles. I update it all the time according to my tastes and what I want my articles to look like. If you use it and it breaks your page, I am not responsible.
[[/div]]
[[/iftags]]