/*!
* rulue.css - Base layout for future post layouts (Two-tone-themed layout)
* Copyright (C) 2019-2023 Klug Nanahikari
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*/
/*!
* Atom One Light code highlighting from highlight.js
*
*/
/* OH-hohohoho! */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://kamekku14.github.io/smwc-post-layouts/assets/kamekku14_extras.css');
/* Wonder why how I use this... */
.rulue_bg {
background: #FAFAFA /*url('https://yoururlhere') repeat center center*/;
padding: 0;
font-family: "IBM Plex Sans", "Arial Nova", Arial, Arimo, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
line-height: normal;
text-rendering: optimizeLegibility !important;
-moz-font-feature-settings: "liga", "clig", "kern";
-webkit-font-feature-settings: "liga", "clig", "kern";
font-feature-settings: "liga", "clig", "kern";
color: #212121;
text-shadow: none !important;
min-height: 350px;
}
/*.rulue_sideimg {
background: transparent url('https://yoururlhere') no-repeat right bottom;
padding: 0;
}*/
.rulue_post {
background: transparent;
padding: 8px 8px 16px 8px;
color: #212121;
/*margin-right: 200px;*/
word-wrap: break-word;
min-width: 16px;
min-height: 320px; /* This one prevents the post body from getting shorter than the others (post sig, etc.) */
}
.rulue_sig {
background: #2f3640 /*url('https://yoururlhere') repeat center center*/;
padding: 8px;
color: #FFFFFF;
word-wrap: break-word;
min-width: 16px;
min-height: 16px;
}
.rulue_bg .quote, .rulue_bg .code {
background: transparent !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin-top: 8px;
}
.rulue_bg .quote .box {
background-color: rgba(158, 158, 158, 0.1) !important;
text-shadow: inherit !important;
line-height: inherit;
-moz-border-radius: 8px 8px 8px 8px !important;
-webkit-border-radius: 8px 8px 8px 8px !important;
border-radius: 8px 8px 8px 8px !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 0 none #0E1116 !important;
padding: 5px;
word-wrap: break-word;
}
.rulue_bg .quote .boxhead {
display: inline-block;
font-weight: 600;
color: #0E1116;
font-size: 11px;
vertical-align: middle;
background: transparent !important;
border: none !important;
border-bottom: none !important;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
padding: 0 0;
margin: auto;
}
.rulue_bg .quote .box .quote .box {
background-color: transparent !important;
text-shadow: inherit !important;
line-height: inherit;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 2px #2B3444 !important;
border-style: none none none solid !important;
padding: 6px;
color: #2B3444;
word-wrap: break-word;
margin-left: 8px;
}
.rulue_bg .quote .box .quote .boxhead {
display: inline-block;
font-weight: 600;
color: #2B3444;
font-size: 11px;
vertical-align: middle;
background: transparent;
border: none !important;
border-bottom: none !important;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
padding: 0 0;
margin: auto;
}
.rulue_bg .code .box {
background-color: rgba(247, 213, 245, 0.35) !important;
text-shadow: inherit !important;
line-height: inherit;
-moz-border-radius: 8px 8px 8px 8px !important;
-webkit-border-radius: 8px 8px 8px 8px !important;
border-radius: 8px 8px 8px 8px !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 0 none #E91E63 !important;
padding: 5px;
color: #E91E63;
white-space: pre-wrap;
word-wrap: break-word;
}
.rulue_bg .code .box:after {
display: none;
}
.rulue_bg .code .boxhead {
display: inline-block;
font-weight: 600;
color: #E91E63 !important;
font-size: 11px;
vertical-align: middle;
background: transparent !important;
border: none !important;
border-bottom: none !important;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
padding: 0 0;
margin: auto;
}
.rulue_bg .quote .box .code .box {
background-color: transparent !important;
text-shadow: inherit !important;
line-height: inherit;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 2px #E91E63 !important;
border-style: none none none solid !important;
padding: 6px;
color: #E91E63;
white-space: pre-wrap;
word-wrap: break-word;
margin-left: 8px;
}
.rulue_bg .quote .box .code .boxhead {
display: inline-block;
font-weight: 600;
color: #E91E63 !important;
font-size: 11px;
vertical-align: middle;
background: transparent !important;
border: none !important;
border-bottom: none !important;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
padding: 0 0;
margin: auto;
}
.rulue_bg .code br {
display: none;
}
.rulue_bg pre {
font-family: "IBM Plex Mono", Consolas, Menlo, Monaco, Cousine, "Roboto Mono", "Droid Sans Mono", "Lucida Console", "Courier New", monospace !important;
font-size: 12px;
-webkit-font-smoothing: initial;
}
.rulue_bg pre.box {
font-family: "IBM Plex Mono", Consolas, Menlo, Monaco, Cousine, "Roboto Mono", "Droid Sans Mono", "Lucida Console", "Courier New", monospace !important;
font-size: 12px;
-webkit-font-smoothing: initial;
}
.rulue_bg code {
font-family: "IBM Plex Mono", Consolas, Menlo, Monaco, Cousine, "Roboto Mono", "Droid Sans Mono", "Lucida Console", "Courier New", monospace !important;
font-size: 12px;
-webkit-font-smoothing: initial;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
border: 0 none #000000;
background: #E91E63;
color: #FFFFFF;
padding: 1px;
display: inline-block;
}
.rulue_bg hr {
border: 0;
height: 1px;
background: #CFD8DC;
margin: 8px auto !important;
width: 100%;
}
/* Others */
/*!
* Separate link colors for post boxes
*
* Unfortunately, some people with disabilities can't tell difference between the link colors in
* lighter/darker areas, so I made them easy to distinguish.
*/
.rulue_bg > .rulue_post a:link, .rulue_bg > .rulue_post a.collapsed-toggle {
color: #1E88E5;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_post a:visited {
color: #5E35B1;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_post a:hover, .rulue_bg > .rulue_post a.collapsed-toggle:hover {
color: #FFB300;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_post a:active, .rulue_bg > .rulue_post a.collapsed-toggle:active {
color: #e53935;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_sig a:link, .rulue_bg > .rulue_sig a.collapsed-toggle {
color: #81D4FA;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_sig a:visited {
color: #B39DDB;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_sig a:hover, .rulue_bg > .rulue_sig a.collapsed-toggle:hover {
color: #FFE082;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg > .rulue_sig a:active, .rulue_bg > .rulue_sig a.collapsed-toggle:active {
color: #EF9A9A;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/* The rest here are the main link colors. */
.rulue_bg a:link, .rulue_bg a.collapsed-toggle {
color: #03A9F4;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg a:visited {
color: #673AB7;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg a:hover, .rulue_bg a.collapsed-toggle:hover {
color: #FFC107;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg a:active, .rulue_bg a.collapsed-toggle:active {
color: #F44336;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg .code .boxhead a.js-link {
color: #E91E63 !important;
text-shadow: inherit !important;
text-decoration: none;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg .code .boxhead a.js-link:hover {
color: #E91E63 !important;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg .code .boxhead a.js-link:active {
color: #E91E63 !important;
text-shadow: inherit !important;
text-decoration: underline;
font-weight: inherit;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.rulue_bg a.un {
font-weight: bold !important;
}
/* Spoiler tags and miscellaneous. */
.rulue_bg .spoiler {
background-color: #212121 !important;
border: 0 none #212121;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 1px;
color: inherit !important;
-o-transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
transition: all .25s linear;
}
.rulue_bg > .rulue_post .spoiler {
background-color: #212121 !important;
border: 0 none #212121;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 1px;
color: inherit !important;
-o-transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
transition: all .25s linear;
}
.rulue_bg > .rulue_sig .spoiler {
background-color: #E0E0E0 !important;
border: 0 none #E0E0E0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1px;
color: inherit !important;
-o-transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
transition: all .25s linear;
}
.rulue_bg .quote .spoiler {
color: inherit !important;
}
.rulue_bg .quote .quote .spoiler {
color: inherit !important;
}
.rulue_bg .code .spoiler {
color: inherit !important; /* why not? */
}
.rulue_bg .spoiler:hover {
background-color: rgba(33, 33, 33, 0.05) !important;
}
.rulue_bg .spoilerInner {
padding: 0;
transition: visibility .1s linear;
}
.rulue_bg > .rulue_post .spoiler:hover {
background-color: rgba(33, 33, 33, 0.05) !important;
}
.rulue_bg > .rulue_sig .spoiler:hover {
background-color: rgba(224, 224, 224, 0.05) !important;
}
.rulue_bg .collapsed-checkbox {
display: none !important;
}
.rulue_bg .collapsed-content {
margin-left: 0;
padding-left: 0;
border: 1px dashed #CFD8DC;
}
.rulue_bg > .rulue_post .collapsed-content {
margin-left: 0;
padding-left: 0;
border: 1px dashed #CFD8DC;
}
.rulue_bg > .rulue_sig .collapsed-content {
margin-left: 0;
padding-left: 0;
border: 1px dashed #CFD8DC;
}
.rulue_bg ::selection, .rulue_bg .code ::selection {
color: rgb(255, 255, 255);
text-shadow: none;
background: #0091EA;
}
.rulue_bg ::-moz-selection, .rulue_bg .code ::-moz-selection {
color: rgb(255, 255, 255);
text-shadow: none;
background: #0091EA;
}
/*!
* highlight.js shenanigans.
*/
.rulue_bg .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #383a42 !important;
}
.rulue_bg .hljs-comment,
.rulue_bg .hljs-quote {
color: #a0a1a7 !important;
font-style: italic;
}
.rulue_bg .hljs-doctag,
.rulue_bg .hljs-keyword,
.rulue_bg .hljs-formula {
color: #a626a4 !important;
font-style: inherit !important;
}
.rulue_bg .hljs-section,
.rulue_bg .hljs-name,
.rulue_bg .hljs-selector-tag,
.rulue_bg .hljs-deletion,
.rulue_bg .hljs-subst {
color: #e45649 !important;
}
.rulue_bg .hljs-literal {
color: #0184bb !important;
}
.rulue_bg .hljs-string,
.rulue_bg .hljs-regexp,
.rulue_bg .hljs-addition,
.rulue_bg .hljs-attribute,
.rulue_bg .hljs-meta-string {
color: #50a14f !important;
}
.rulue_bg .hljs-built_in,
.rulue_bg .hljs-class .rulue_bg .hljs-title {
color: #c18401 !important;
font-style: inherit !important;
}
.rulue_bg .hljs-attr,
.rulue_bg .hljs-variable,
.rulue_bg .hljs-template-variable,
.rulue_bg .hljs-type,
.rulue_bg .hljs-selector-class,
.rulue_bg .hljs-selector-attr,
.rulue_bg .hljs-selector-pseudo,
.rulue_bg .hljs-number {
color: #986801 !important;
}
.rulue_bg .hljs-symbol,
.rulue_bg .hljs-bullet,
.rulue_bg .hljs-link,
.rulue_bg .hljs-meta,
.rulue_bg .hljs-selector-id,
.rulue_bg .hljs-title {
color: #4078f2 !important;
}
.rulue_bg .hljs-emphasis {
color: inherit !important;
font-style: italic;
}
.rulue_bg .hljs-strong {
color: inherit !important;
font-weight: bold;
}
.rulue_bg .hljs-link {
text-decoration: underline;
}
/* CSS file made with Notepad the right way (a.k.a. Notepad++). */