Split and re-ordered SCSS files for easier overrides of defaults (#4)
* Split SCSS for easier changes * Re-ordered SCSS files for easier overrides of defaults * Fixed padding classes with auto value * Added theme """stub"""
This commit is contained in:
GitHub
@@ -0,0 +1,19 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Defaults > Backgrounds */
|
||||
|
||||
body {
|
||||
background-color: #{$color-background-body};
|
||||
}
|
||||
|
||||
header, nav, footer {
|
||||
background-color: #{$color-background-surround};
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #{$color-background-main};
|
||||
|
||||
// FIXME: Adapt when sidebar is closed !
|
||||
// FIXME: Move it to the proper layout file then !!!
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Code */
|
||||
|
||||
code, .code, kbd, .t-monospace {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
// For large blocks
|
||||
//code { }
|
||||
|
||||
// For inline spans
|
||||
// We're applying the equivalent of `.r-s.px-xs.px-s`
|
||||
// Kinda goes against the core ideas, but it would be annoying without it.
|
||||
.code, kbd {
|
||||
background-color: #{$color-background-code};
|
||||
|
||||
border: 1px solid;
|
||||
|
||||
// Using '.r-s'
|
||||
border-radius: calc(#{$border-base-radius} * 0.75);
|
||||
|
||||
// Using the middle of '.px-xs' and '.px-s'
|
||||
padding-left: calc(#{$border-base-radius} * 0.625);
|
||||
padding-right: calc(#{$border-base-radius} * 0.625);
|
||||
}
|
||||
|
||||
// Removes the background added by highlight.js
|
||||
.code-line {
|
||||
background: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
// FIXME: Makes the inline block ugly !!!
|
||||
code, .code, .code-line {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
// FIXME: Use a proper class !!!
|
||||
.code:not(code) {
|
||||
padding: calc(#{$border-base-radius} * 0.625);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Fonts */
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Images */
|
||||
|
||||
.img-text {
|
||||
height: 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.btn-img {
|
||||
display: flex;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.img-showcase {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.img-profile {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
.img-contributor, .img-contributor > img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
transition: width 0.175s ease-in-out, height 0.175s ease-in-out, opacity 0.175s ease-in-out;
|
||||
|
||||
&:hover, &:hover > img {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
&.kitty {
|
||||
cursor: grab;
|
||||
}
|
||||
}
|
||||
|
||||
.img-contributor {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 6px 0 rgba(0,0,0,0.75);
|
||||
|
||||
&>img {
|
||||
position: absolute;
|
||||
|
||||
&:last-child {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
opacity: 0.0;
|
||||
}
|
||||
&>img:last-child {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//.align-v-t
|
||||
|
||||
#logo-sidebar, .logo-sidebar {
|
||||
filter: brightness(110%) grayscale(100%);
|
||||
//mix-blend-mode: multiply;
|
||||
//opacity: 40%;
|
||||
// Fixes the width to the size of the sidebar minus its padding. (15rem - 1rem * 2)
|
||||
width: 13rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Based on '#logo-sidebar'
|
||||
.logo-sidebar-v2 {
|
||||
filter: drop-shadow(0 0 0.15rem #0000007F) saturate(75%);
|
||||
width: 13rem;
|
||||
height: auto;
|
||||
|
||||
transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter;
|
||||
transition-duration: 0.4s;
|
||||
transition-timing-function: cubic-bezier(.25, .8, .25, 1.1);
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 0.15rem #0000007F) saturate(100%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#logo-footer {
|
||||
filter: brightness(110%) grayscale(100%);
|
||||
opacity: 40%;
|
||||
height: 1.8em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#error-page-skit {
|
||||
max-width: 40%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
filter: drop-shadow(0 0 0.25rem #0000007F);
|
||||
//opacity: 0.25;
|
||||
|
||||
//mix-blend-mode: multiply;
|
||||
//opacity: 0.2;
|
||||
|
||||
opacity: 0.4;
|
||||
|
||||
// Preventing the selection and dragging of the image for aesthetic reasons.
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Logo colors
|
||||
//.npl1, .npl6 {
|
||||
//}
|
||||
//
|
||||
//.npl2, .npl5 {
|
||||
//}
|
||||
//
|
||||
//.npl3, .npl4 {
|
||||
//}
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Inputs */
|
||||
|
||||
/* Defaults > Inputs > Commons */
|
||||
|
||||
button, input, textarea, select {
|
||||
border: 0;
|
||||
|
||||
// Removing ugly-ass white glow when editing text-related inputs.
|
||||
// Shit looks straight out of winforms in 2023...
|
||||
outline: none;
|
||||
|
||||
color: #{$color-text-inputs};
|
||||
background-color: #{$color-background-input};
|
||||
|
||||
&:not(.no-focus) {
|
||||
&:focus {
|
||||
box-shadow: 0 0 3px 0 #{$color-glow-input};
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #{$color-background-input-disabled} !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Checkbox & Radio */
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
width: 1.65em;
|
||||
height: 1.65em;
|
||||
background-color: #{$color-background-input-unchecked};
|
||||
|
||||
&:checked {
|
||||
background-color: #{$color-background-input-checked};
|
||||
}
|
||||
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:disabled {
|
||||
&:before {
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] + label, input[type="radio"] + label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
|
||||
cursor: not-allowed;
|
||||
opacity: 60%;
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Checkbox */
|
||||
|
||||
input[type=checkbox] {
|
||||
&.cb-pretty, &.checkbox-pretty {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "✘";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Radio */
|
||||
|
||||
input[type=radio] {
|
||||
border-radius: 50%;
|
||||
|
||||
// Special fix required for standalone pages.
|
||||
// This rule somehow gets ignored if the stylesheet is placed in the DOM.
|
||||
// Even tho it is present in reset.css and if it get marked as important...
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.radio-solid, &.radio-3d {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-solid {
|
||||
&:before {
|
||||
border-style: double;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-3d {
|
||||
&:before {
|
||||
border-style: inset;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border-style: outset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-unchecked-subtle {
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-unchecked-dashed {
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
opacity: 75%;
|
||||
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Buttons */
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: #{$color-background-button};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-hover};
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-color: #{$color-background-button-primary};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-primary-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background-color: #{$color-background-button-success};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-success-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
background-color: #{$color-background-button-error};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-error-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background-color: #{$color-background-button-warning};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-warning-hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Tables > Defaults */
|
||||
|
||||
.table-stylish {
|
||||
border-collapse: separate;
|
||||
overflow: hidden;
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #{$color-background-table-tr-alt};
|
||||
}
|
||||
|
||||
tr:nth-child(2n), th {
|
||||
background-color: #{$color-background-table-tr-main};
|
||||
}
|
||||
|
||||
td:not(:last-of-type), th:not(:last-of-type) {
|
||||
border-right: 1.5px solid #{$color-border-table};
|
||||
}
|
||||
|
||||
tr:not(:last-of-type) td, th {
|
||||
border-bottom: 1.5px solid #{$color-border-table};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Text > Basics */
|
||||
|
||||
* {
|
||||
color: #{$color-text-generic};
|
||||
}
|
||||
|
||||
nav, footer, header, .bkgd-grid {
|
||||
* {
|
||||
color: #{$color-text-surround};
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.t-logo-text {
|
||||
font-size: 1.775em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Site > Text > Targeted Rules > Sidebar */
|
||||
// Special rules for the sidebar and FontAwesome icons
|
||||
|
||||
.sidebar-entry {
|
||||
i {
|
||||
width: 1.9rem !important;
|
||||
// Required to prevent a size flicker when hiding/showing the sidebar.
|
||||
// The about link is the most visible one.
|
||||
min-width: 1.9rem !important;
|
||||
}
|
||||
|
||||
// Preventing a subtle line break when hiding/showing the sidebar.
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// Doesn't work, even with hyper-specific parent selectors...
|
||||
//> i, > i:hover {
|
||||
// text-decoration: none !important;
|
||||
//}
|
||||
}
|
||||
|
||||
/* Site > Text > Targeted Rules > Headings */
|
||||
|
||||
// And now for the headings, the exceptions keep popping up :,)
|
||||
// TODO: Add a simple and nicer divider.
|
||||
.heading-main {
|
||||
> h2, > h3, >h4 {
|
||||
> i {
|
||||
//margin-left: 0.25rem;
|
||||
margin-right: 0.4rem;
|
||||
padding-right: 0.1rem;
|
||||
width: 1.75rem !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Text > Links */
|
||||
|
||||
a, .a {
|
||||
// Base
|
||||
text-decoration: underline;
|
||||
color: #{$color-text-link};
|
||||
|
||||
& * {
|
||||
color: #{$color-text-link};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #{$color-text-link-hover};
|
||||
cursor: pointer;
|
||||
|
||||
& * {
|
||||
color: #{$color-text-link-hover};
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Special case for buttons
|
||||
//&.casper-link, &.button-link, &.text-link {
|
||||
&.a-bland {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: none; // Only really applies to content listing entries...
|
||||
& * {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bland links
|
||||
//&.casper-link, &.bland-link {
|
||||
&.a-hidden {
|
||||
text-decoration: none;
|
||||
color: #{$color-text-generic};
|
||||
|
||||
& * {
|
||||
color: #{$color-text-generic};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: #{$color-text-link-hover};
|
||||
|
||||
& * {
|
||||
color: #{$color-text-link-hover};
|
||||
}
|
||||
|
||||
// FIXME: Not working, big F
|
||||
//i {
|
||||
// text-decoration: none !important;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav, footer, header {
|
||||
a, .a {
|
||||
color: #{$color-text-surround-link};
|
||||
& * {
|
||||
color: #{$color-text-surround-link};
|
||||
}
|
||||
&:hover {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
& * {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
}
|
||||
}
|
||||
&.a-hidden {
|
||||
text-decoration: none;
|
||||
color: #{$color-text-surround};
|
||||
& * {
|
||||
color: #{$color-text-surround};
|
||||
}
|
||||
&:hover {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
& * {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Text > Weights */
|
||||
|
||||
@if $text-weight-header != -1 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: #{$text-weight-header};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user