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
+2
-1
@@ -5,11 +5,12 @@
|
||||
node_modules/
|
||||
|
||||
# Corporate-specific stuff
|
||||
scss/themes/theme_corp_*
|
||||
*_corp_*
|
||||
|
||||
# Build Artifacts
|
||||
*.css
|
||||
*.min.html
|
||||
*.html
|
||||
*.7z
|
||||
*.zip
|
||||
*.tar
|
||||
|
||||
Vendored
+1
-1
@@ -32,7 +32,7 @@
|
||||
|
||||
<header class="w-full p-m pl-s">
|
||||
<h1 class="t-size-17 t-w-500">
|
||||
<i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation v0.0.1
|
||||
<i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS v0.0.2
|
||||
<a href="https://github.com/aziascreations/CSS-NibblePoker" class="f-right a-bland"><i class="fa-brands fa-github"></i></a>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
Vendored
+30
-29
@@ -16,45 +16,46 @@ global $root_path;
|
||||
<p class="ml-xs">
|
||||
<i>NibbleCSS</i> was originally conceived for internal use following a bout of performance issues with
|
||||
off-the-shelf stylesheets on low-end and mobile devices.<br>
|
||||
However, it rapidly got used outside its intended environment and was spun-off into a separate a
|
||||
publicly accessible and truly free project.
|
||||
However, it rapidly got used in other public/private/professional projects, and it was spun-off into a
|
||||
separate, publicly accessible, and truly free project.
|
||||
</p>
|
||||
<p class="ml-xs mt-s">
|
||||
<i>NibbleCSS</i> is also released into the public domain as I do not believe forcing people to include licenses
|
||||
or disclaimers is truly free, especially when said licenses propagate themselves like tumorous growths.<br>
|
||||
Following that philosophy, <i>NibbleCSS</i> also makes use of
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>
|
||||
<i>NibbleCSS</i> is also released into the public domain due to personal beliefs, and will always stay
|
||||
that way.<br>
|
||||
This project also uses <a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>,
|
||||
which was also released into the public domain in 2011.
|
||||
</p>
|
||||
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
|
||||
<div class="ml-xs">
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>No implicit sizes, margins or paddings</li>
|
||||
<li>No styles from class-less DOM, except for styling elements</li>
|
||||
<li>Self-sufficient and embeddable as a single file or text blob</li>
|
||||
<li>Competitive minified size</li>
|
||||
<li>Standardized & consistent naming scheme</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Prefabs for common elements</li>
|
||||
<!--<s>
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
|
||||
<div class="ml-xs">
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Bound to specific elements</li>
|
||||
<li>No implicit sizes, margins or paddings</li>
|
||||
<li>No styles from class-less DOM, except for styling elements</li>
|
||||
<li>Self-sufficient and embeddable as a single file or text blob</li>
|
||||
<li>Competitive minified size</li>
|
||||
<li>Standardized & consistent naming scheme</li>
|
||||
</ul>
|
||||
<li>No forced smooth transition</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Tested on an old Chuwi Ubook X internally</li>
|
||||
<li>Prefabs for common elements</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Bound to specific elements</li>
|
||||
</ul>
|
||||
<li>No forced smooth transition</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Tested on an old Chuwi Ubook X internally</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</s>-->
|
||||
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
|
||||
<table class="table-stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
|
||||
|
||||
@@ -17,7 +17,7 @@ spacing and whatnot. \
|
||||
Internally, they are defined after everything else in order to let them override rules
|
||||
applied to the custom elements and site-centric rules.
|
||||
|
||||
**See:** [scss/core/](scss/core)
|
||||
**See:** [scss/core/](scss/old/core)
|
||||
|
||||
### Site
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Borders > Colors */
|
||||
|
||||
.border, code, .code, kbd {
|
||||
border-color: #{$color-border-code};
|
||||
|
||||
@@ -15,7 +18,7 @@ code, .code, kbd {
|
||||
main {
|
||||
.border {
|
||||
border-color: #{$color-border-main};
|
||||
|
||||
|
||||
//&.b-light {
|
||||
// border: 1px solid #{$color-border-light};
|
||||
//}
|
||||
@@ -0,0 +1,23 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Borders > Styles */
|
||||
|
||||
// TODO: Improve if per-side border styles are required.
|
||||
|
||||
@mixin border-style-maker($style-key, $style-css-value) {
|
||||
.border-#{$style-key}, .b-#{$style-key} {
|
||||
border-style: #{$style-css-value};
|
||||
}
|
||||
}
|
||||
|
||||
@include border-style-maker("none", "none");
|
||||
@include border-style-maker("hidden", "hidden");
|
||||
@include border-style-maker("dotted", "dotted");
|
||||
@include border-style-maker("dashed", "dashed");
|
||||
@include border-style-maker("solid", "solid");
|
||||
@include border-style-maker("double", "double");
|
||||
@include border-style-maker("groove", "groove");
|
||||
@include border-style-maker("ridge", "ridge");
|
||||
@include border-style-maker("inset", "inset");
|
||||
@include border-style-maker("outset", "outset");
|
||||
@@ -1,8 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Borders */
|
||||
|
||||
/* Core > Borders > Enabling */
|
||||
/* Borders > Targeting */
|
||||
|
||||
.b, .border {
|
||||
border: 1px solid #{$color-border-default};
|
||||
@@ -30,7 +29,7 @@
|
||||
@include border-maker-enable("r", "right");
|
||||
|
||||
|
||||
/* Core > Borders > Disabling */
|
||||
/* Borders > Disabling */
|
||||
|
||||
.b-0 {
|
||||
border: 0;
|
||||
@@ -56,25 +55,3 @@
|
||||
@include border-maker-disable("b", "bottom");
|
||||
@include border-maker-disable("l", "left");
|
||||
@include border-maker-disable("r", "right");
|
||||
|
||||
|
||||
/* Core > Borders > Styles */
|
||||
|
||||
// TODO: Improve if per-side border styles are required.
|
||||
|
||||
@mixin border-style-maker($style-key, $style-css-value) {
|
||||
.border-#{$style-key}, .b-#{$style-key} {
|
||||
border-style: #{$style-css-value};
|
||||
}
|
||||
}
|
||||
|
||||
@include border-style-maker("none", "none");
|
||||
@include border-style-maker("hidden", "hidden");
|
||||
@include border-style-maker("dotted", "dotted");
|
||||
@include border-style-maker("dashed", "dashed");
|
||||
@include border-style-maker("solid", "solid");
|
||||
@include border-style-maker("double", "double");
|
||||
@include border-style-maker("groove", "groove");
|
||||
@include border-style-maker("ridge", "ridge");
|
||||
@include border-style-maker("inset", "inset");
|
||||
@include border-style-maker("outset", "outset");
|
||||
+5
-4
@@ -1,23 +1,24 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Config > NibbleCSS */
|
||||
|
||||
// Toggles the inclusion of pixel-based sizing utility classes. ("w-000px", "h-000px", ...)
|
||||
// See: core/sizing.scss
|
||||
// See: core/utils-sizing.scss
|
||||
$add-px-sizing-rules: false;
|
||||
|
||||
$nibblepoker-background-root: "./";
|
||||
|
||||
// Toggles the inclusion of the ".bkgd-grid" background rules.
|
||||
// See: site/backgrounds.scss
|
||||
// See: site/elements-backgrounds.scss
|
||||
$include-grid-backgrounds: true;
|
||||
|
||||
$use-b64-backgrounds: true;
|
||||
|
||||
// Toggles the generation of any table cell padding rules.
|
||||
// See: core/table.scss
|
||||
// See: core/tables-modifiers.scss
|
||||
$generate-table-padding-rules: true;
|
||||
|
||||
// Toggles the generation of the header and cell specific padding rules for tables. (Disabled by default)
|
||||
// See: core/table.scss
|
||||
// See: core/tables-modifiers.scss
|
||||
$generate-table-header-cell-padding-rules: true;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Core > Grids */
|
||||
|
||||
.grid, .d-grid {
|
||||
@@ -1,55 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Lists */
|
||||
|
||||
ul {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
&.l-bullet-inside, &.list-bullet-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
&.l-bullet-outside, &.list-bullet-outside {
|
||||
list-style-position: outside;
|
||||
}
|
||||
&.l-bullet-manual, &.list-bullet-manual {
|
||||
list-style-position: outside;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
&.list-bullet-none, &.l-bullet-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
&.list-bullet-disc, &.l-bullet-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
&.list-bullet-square, &.l-bullet-square {
|
||||
list-style-type: square;
|
||||
}
|
||||
&.list-bullet-decimal, &.l-bullet-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
&.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
|
||||
list-style-type: decimal-leading-zero;
|
||||
}
|
||||
&.list-bullet-georgian, &.l-bullet-georgian {
|
||||
list-style-type: georgian;
|
||||
}
|
||||
&.list-bullet-chinese, &.l-bullet-chinese {
|
||||
list-style-type: trad-chinese-informal;
|
||||
}
|
||||
&.list-bullet-kannada, &.l-bullet-kannada {
|
||||
list-style-type: kannada;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Positions */
|
||||
|
||||
.p-relative {
|
||||
position: relative;
|
||||
}
|
||||
@@ -1,177 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Text */
|
||||
|
||||
/* Core > Text > Headings */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: #{$text-header-weight};
|
||||
}
|
||||
|
||||
|
||||
/* Core > Text > Sizes */
|
||||
|
||||
// ".t-size-6", ".t-size-8", ..., "t-size-40"
|
||||
@for $_ from 3 through 20 {
|
||||
$sizeKey: $_ * 2;
|
||||
$sizeValue: $sizeKey / 10;
|
||||
|
||||
.t-size-#{$sizeKey} {
|
||||
font-size: #{$sizeValue}rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Adding special odd values
|
||||
.t-size-11 {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
.t-size-13 {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
.t-size-15 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
.t-size-17 {
|
||||
font-size: 1.7rem !important;
|
||||
}
|
||||
|
||||
// Jumbo sizes
|
||||
// ".t-size-35" & ".t-size-40"
|
||||
@for $_ from 7 through 8 {
|
||||
$size: $_ * 5;
|
||||
|
||||
.t-size-#{$size} {
|
||||
font-size: #{$size / 10}rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Core > Text > Weights */
|
||||
|
||||
.t-w-normal, .t-normal {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
b, .t-w-bold, .t-bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.t-w-bolder, .t-bolder {
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
.t-w-lighter, .t-lighter {
|
||||
font-weight: lighter !important;
|
||||
}
|
||||
|
||||
// ".t-w-100", ".t-w-200", ..., ".t-w-900"
|
||||
@for $_ from 1 through 9 {
|
||||
$size: $_ * 100;
|
||||
|
||||
.t-w-#{$size} {
|
||||
font-weight: #{$size} !important;
|
||||
}
|
||||
}
|
||||
// /!\ Firefox moment /!\
|
||||
// * The ".t-w-200" to ".t-w-500" classes barely any effect on weight...
|
||||
|
||||
|
||||
/* Core > Text > Styles */
|
||||
|
||||
i, .t-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.t-oblique {
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
u, .t-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
s, .t-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.t-overline {
|
||||
text-decoration: overline;
|
||||
}
|
||||
|
||||
// Defined in core/code.scss !
|
||||
//.t-monospace {
|
||||
// font-family: monospace, monospace;
|
||||
//}
|
||||
|
||||
|
||||
/* Core > Text > Alignment */
|
||||
|
||||
.t-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.t-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.t-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.t-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.t-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
|
||||
/* Core > Text > Modifiers */
|
||||
|
||||
.t-ucase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.t-lcase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.t-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
|
||||
/* Core > Text > Misc */
|
||||
|
||||
.t-nowrap {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Core > Text > Helpers */
|
||||
|
||||
.t-half-muted {
|
||||
opacity: 65%;
|
||||
}
|
||||
|
||||
.t-muted {
|
||||
//@if $undefined-toggle-css-variables {
|
||||
// color: var(--color-white-muted);
|
||||
//} @else {
|
||||
// color: #{$color-white-muted};
|
||||
//}
|
||||
//color: #A9A9Aa;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.t-super-muted {
|
||||
// Should be 35% TBH
|
||||
opacity: 45%;
|
||||
}
|
||||
|
||||
.t-noselect {
|
||||
user-select: none;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,17 +1,18 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Code */
|
||||
|
||||
/* Defaults > Code */
|
||||
|
||||
code, .code, kbd, .t-monospace {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
// For large blocks
|
||||
code {
|
||||
//code { }
|
||||
|
||||
}
|
||||
|
||||
// For spans
|
||||
// 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};
|
||||
|
||||
@@ -30,6 +31,7 @@ code {
|
||||
background: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
// FIXME: Makes the inline block ugly !!!
|
||||
code, .code, .code-line {
|
||||
line-height: 1.35;
|
||||
}
|
||||
@@ -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";
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Images */
|
||||
|
||||
.img-text {
|
||||
height: 1em;
|
||||
vertical-align: top;
|
||||
@@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Tables */
|
||||
|
||||
/* Tables > Defaults */
|
||||
|
||||
.table-stylish {
|
||||
border-collapse: separate;
|
||||
@@ -1,83 +1,22 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Text */
|
||||
|
||||
/* Site > Text > Commons */
|
||||
/* Defaults > Text > Basics */
|
||||
|
||||
* {
|
||||
color: #{$color-text-generic};
|
||||
}
|
||||
|
||||
|
||||
/* Site > Text > Paragraphs */
|
||||
nav, footer, header, .bkgd-grid {
|
||||
* {
|
||||
color: #{$color-text-surround};
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
/* Site > 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;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Site > Text > Targeted Rules */
|
||||
|
||||
.t-logo-text {
|
||||
font-size: 1.775em;
|
||||
line-height: 1;
|
||||
@@ -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};
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Misc > Backgrounds */
|
||||
|
||||
/* Elements > Backgrounds */
|
||||
|
||||
.bkgd-dark {
|
||||
background: $color-background-gray-dark;
|
||||
@@ -15,7 +16,7 @@
|
||||
}
|
||||
|
||||
@if($include-grid-backgrounds) {
|
||||
// The element rules override rules in `base.scss ~94`
|
||||
// The element rules override rules in `defaults-elements-backgrounds.scss ~94`
|
||||
.bkgd-grid10, .bkgd-surround, header, nav, footer {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Horizontal Rule */
|
||||
|
||||
/* Elements > Horizontal Rule */
|
||||
|
||||
hr {
|
||||
border-color: #{$color-border-hr};
|
||||
@@ -0,0 +1,64 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Lists */
|
||||
|
||||
ul {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
&.l-bullet-inside, &.list-bullet-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
&.l-bullet-outside, &.list-bullet-outside {
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
&.l-bullet-manual, &.list-bullet-manual {
|
||||
list-style-position: outside;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
&.list-bullet-none, &.l-bullet-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
&.list-bullet-disc, &.l-bullet-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
&.list-bullet-square, &.l-bullet-square {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
&.list-bullet-decimal, &.l-bullet-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
&.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
|
||||
list-style-type: decimal-leading-zero;
|
||||
}
|
||||
|
||||
&.list-bullet-georgian, &.l-bullet-georgian {
|
||||
list-style-type: georgian;
|
||||
}
|
||||
|
||||
&.list-bullet-chinese, &.l-bullet-chinese {
|
||||
list-style-type: trad-chinese-informal;
|
||||
}
|
||||
|
||||
&.list-bullet-kannada, &.l-bullet-kannada {
|
||||
list-style-type: kannada;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Scrollbars */
|
||||
|
||||
/* Elements > Scrollbars */
|
||||
|
||||
//@media (min-width: 769px) {
|
||||
*::-webkit-scrollbar {
|
||||
@@ -1,8 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Video */
|
||||
|
||||
// FIXME: Does not respect the core tenets !
|
||||
/* Elements > Video */
|
||||
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
/* Custom Elements > Wedge */
|
||||
|
||||
wedge, .wedge {
|
||||
.wedge {
|
||||
position: absolute;
|
||||
//top: 0;
|
||||
//right: 0;
|
||||
@@ -25,7 +25,7 @@ wedge, .wedge {
|
||||
}
|
||||
|
||||
&.wedge-shadow {
|
||||
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
|
||||
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@@ -1,5 +1,9 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Extras > NP Website Content */
|
||||
// Overrides all other rules since this style is fixed.
|
||||
|
||||
.content-search-entry {
|
||||
min-height: #{$content-search-image-size};
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Extras > Splide */
|
||||
|
||||
// Zoom-in effect for image galleries
|
||||
@@ -0,0 +1,9 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Fixes > Buttons */
|
||||
|
||||
// Ugly fix for download buttons
|
||||
button + button, .button-link + .button-link > button {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Fixes > Mobile */
|
||||
|
||||
/* Fixes > Mobile */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
// Overrides the ".p-l" class used on "main".
|
||||
@@ -8,12 +9,8 @@
|
||||
padding: calc(#{$margin-base-size} * 0.5) !important;
|
||||
}
|
||||
|
||||
// Overrides a style in "site/content.scss".
|
||||
// Overrides a style in "site/extra-np-content.scss".
|
||||
.content-search-entry > p {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Inputs > Lang Selector */
|
||||
|
||||
#lang-selector {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
> summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
z-index: #{$z-index-lang-dropdown};
|
||||
top: 2rem;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
|
||||
// Visibility transition
|
||||
//height: 0;
|
||||
//transition: height 0.4s;
|
||||
//transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
|
||||
}
|
||||
|
||||
// TODO: Maybe force it to be visible when closes ?
|
||||
|
||||
//&[open] > div {
|
||||
// height: auto;
|
||||
//}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Inputs > Text Area */
|
||||
|
||||
.ta-resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.ta-resize-h {
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.ta-resize-v {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ta-resize-none {
|
||||
resize: none;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Layouts */
|
||||
/* Layouts */
|
||||
|
||||
/* Site > Layouts > Commons */
|
||||
/* Layouts > Commons */
|
||||
|
||||
html, body {
|
||||
// Do not use 100vh, it includes the search bar !
|
||||
@@ -1,8 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Layouts > Generic */
|
||||
/* Layouts > Generic */
|
||||
|
||||
/* Site > Layouts > Generic > Main Grid */
|
||||
/* Layouts > Generic > Main Grid */
|
||||
|
||||
body.layout-generic {
|
||||
display: grid;
|
||||
@@ -51,7 +51,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Mobile Fixes */
|
||||
/* Layouts > Generic > Mobile Fixes */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
body.layout-generic {
|
||||
@@ -72,7 +72,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Sidebar */
|
||||
/* Layouts > Generic > Sidebar */
|
||||
|
||||
body.layout-generic {
|
||||
.sidebar {
|
||||
@@ -96,7 +96,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
|
||||
/* Layouts > Generic > Sidebar > Mobile Fixes */
|
||||
|
||||
// Inverting the sidebar's states for mobile devices
|
||||
@media only screen and (max-width: 768px) {
|
||||
@@ -128,7 +128,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Main Extras */
|
||||
/* Layouts > Generic > Main Extras */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
body.layout-generic {
|
||||
@@ -151,7 +151,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Transitions */
|
||||
/* Layouts > Generic > Transitions */
|
||||
|
||||
body.layout-generic {
|
||||
main, .sidebar {
|
||||
+71
-50
@@ -10,70 +10,91 @@
|
||||
* -----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/* Externals */
|
||||
@import 'externals/reset'; // Doesn't reset checkboxes !
|
||||
|
||||
|
||||
/* Config */
|
||||
@import 'config';
|
||||
|
||||
/* Externals */
|
||||
@import 'external/reset'; // Doesn't reset checkboxes !
|
||||
|
||||
/* Variables */
|
||||
@import 'variables';
|
||||
|
||||
/* Site */
|
||||
|
||||
/* Site > Layouts */
|
||||
@import 'site/layouts/commons'; // Sets up the page's default sizing rules
|
||||
@import 'site/layouts/generic'; // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
|
||||
/* Layouts */
|
||||
@import 'layouts/layout_commons'; // Sets up the page's default sizing rules
|
||||
@import 'layouts/layout_generic'; // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
|
||||
|
||||
/* Site > Styles */
|
||||
@import 'site/base'; // Needs a rework, Defines some basic common broad styling/coloring rules
|
||||
@import 'site/text'; // Has some hardcoded width for font-awesome icons in sidebar and headings
|
||||
|
||||
/* Site > Elements */
|
||||
@import 'site/hr'; // Custom horizontal rulers
|
||||
@import 'site/scrollbar'; // Personalizes the scrollbars (Horizontal is still unfinished !)
|
||||
@import 'site/input'; // Has ugly fix for download buttons
|
||||
@import 'site/table'; // Uses copied paddings for cells & ugly rounding fix
|
||||
@import 'site/code'; // Uses forced borders, roundings and paddings
|
||||
@import 'site/video';
|
||||
/* Defaults */
|
||||
/* Defaults > Text */
|
||||
@import 'defaults/text/defaults-text-basics';
|
||||
@import 'defaults/text/defaults-text-links';
|
||||
@import 'defaults/text/defaults-text-weights';
|
||||
|
||||
/* Site > Misc */
|
||||
@import 'site/borders'; // Applies the colors mostly, the size are in the elements !
|
||||
@import 'site/backgrounds';
|
||||
@import 'defaults/defaults-backgrounds'; // Defines some basic styling/coloring rules
|
||||
@import 'defaults/defaults-fonts';
|
||||
@import 'defaults/defaults-images';
|
||||
@import 'defaults/defaults-inputs'; // Has ugly fix for download buttons
|
||||
@import 'defaults/defaults-code'; // Uses forced borders, roundings and paddings
|
||||
@import 'defaults/defaults-tables'; // Uses copied paddings for cells & ugly rounding fix
|
||||
|
||||
/* Site > Fixes */
|
||||
@import 'site/mobile'; // Has !important overrides for obvious reasons
|
||||
|
||||
/* Site > Unsorted */
|
||||
@import 'site/image';
|
||||
@import 'site/wedge';
|
||||
@import 'site/content'; // Uses fixed sizes and floats
|
||||
@import 'site/modal';
|
||||
|
||||
/* Core */
|
||||
@import 'core/border'; // Border rules (.border, .bt-0, ...)
|
||||
@import 'core/float'; // Floating rules (.f-right, ...)
|
||||
@import 'core/sizing'; // Rules for setting elements size (.w-full, ...)
|
||||
@import 'core/flex'; // /!\ Needs an overhaul !!!
|
||||
@import 'core/grid'; // /!\ Needs an overhaul !!!
|
||||
@import 'core/text'; // Text-related rules (.t-bold, t-ucase, t-size-14, ...)
|
||||
//@import 'core/containers'; // Cannot remember why it was used, if ever
|
||||
@import 'core/display'; // /!\ Needs improvement !!!
|
||||
@import 'core/position'; // /!\ Needs improvement !!!
|
||||
@import 'core/overflow'; // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
|
||||
@import 'core/lists';
|
||||
@import 'core/table';
|
||||
@import 'core/cursor';
|
||||
@import 'core/core-grids'; // /!\ Needs an overhaul, especially for mobile !!!
|
||||
|
||||
/* Core > Rounding */
|
||||
@import 'core/rounding/global';
|
||||
@import 'core/rounding/sided';
|
||||
@import 'core/rounding/corner';
|
||||
/* Elements */
|
||||
@import 'elements/elements-backgrounds';
|
||||
@import 'elements/elements-lists';
|
||||
@import 'elements/elements-wedge'; // Wedges shown in code blocks and other notifications.
|
||||
@import 'elements/elements-hr'; // Custom horizontal rulers
|
||||
@import 'elements/elements-video';
|
||||
@import 'elements/elements-scrollbar'; // /!\ Horizontal unfinished, and thy look bad in some contexts /!\
|
||||
|
||||
/* Core > Spacing */
|
||||
@import 'core/spacing/global';
|
||||
@import 'core/spacing/axis';
|
||||
@import 'core/spacing/sided';
|
||||
/* Inputs */
|
||||
@import 'inputs/inputs-langs';
|
||||
@import 'inputs/inputs-textarea';
|
||||
|
||||
/* Tables */
|
||||
@import 'tables/tables-modifiers';
|
||||
|
||||
/* Borders */
|
||||
@import 'borders/border-targeting'; // Border rules (.border, .bt-0, ...)
|
||||
@import 'borders/border-styles'; // Types of borders
|
||||
@import 'borders/border-colors'; // Default colors for some elements (Overrides global color in border-targeting)
|
||||
|
||||
/* Text */
|
||||
@import 'text/text-sizes';
|
||||
@import 'text/text-weights';
|
||||
@import 'text/text-alignment';
|
||||
@import 'text/text-styling';
|
||||
@import 'text/text-misc';
|
||||
|
||||
/* Spacing */
|
||||
@import 'spacing/spacing_global';
|
||||
@import 'spacing/spacing_axis';
|
||||
@import 'spacing/spacing_sided';
|
||||
|
||||
/* Rounding */
|
||||
@import 'rounding/rounding_global';
|
||||
@import 'rounding/rounding_sided';
|
||||
@import 'rounding/rounding_corner';
|
||||
|
||||
/* Overrides */
|
||||
@import 'utils/utils-float'; // Floating rules (.f-right, ...)
|
||||
@import 'utils/utils-cursor';
|
||||
@import 'utils/utils-text';
|
||||
@import 'utils/utils-display'; // /!\ Needs more classes !
|
||||
@import 'utils/utils-overflow'; // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
|
||||
@import 'utils/utils-flex'; // /!\ Needs an overhaul !!!
|
||||
@import 'utils/utils-sizing'; // Rules for setting elements size (.w-full, ...)
|
||||
@import 'utils/utils-position';
|
||||
@import 'utils/utils-mobile';
|
||||
|
||||
/* Extras */
|
||||
@import 'site/splide';
|
||||
@import 'extra/extra-splide'; // Picture gallery
|
||||
@import 'extra/extra-np-content'; // Uses fixed sizes and floats
|
||||
|
||||
/* Fixes */
|
||||
@import 'fixes/fixes-mobile'; // Hotfixes for mobile-related issues
|
||||
@import 'fixes/fixes-buttons'; // Ugly fix for download buttons
|
||||
|
||||
@@ -94,6 +94,7 @@ $color-border-code: $color-border-normal;
|
||||
|
||||
// Text
|
||||
$color-text-generic: $color-apollo-45;
|
||||
$color-text-surround: $color-text-generic;
|
||||
$color-text-inputs: $color-text-generic;
|
||||
$color-text-muted: #{$color-text-generic}E0;
|
||||
$color-text-muted-super: #{$color-text-generic}C0;
|
||||
@@ -101,6 +102,9 @@ $color-text-muted-super: #{$color-text-generic}C0;
|
||||
$color-text-link: #{$color-apollo-04};
|
||||
$color-text-link-hover: #{$color-apollo-05};
|
||||
|
||||
$color-text-surround-link: #{$color-apollo-04};
|
||||
$color-text-surround-link-hover: #{$color-apollo-05};
|
||||
|
||||
|
||||
// Specials
|
||||
$color-glow-input: $color-apollo-02;
|
||||
@@ -75,6 +75,7 @@ $color-border-code: #00EB6C;
|
||||
|
||||
// Text
|
||||
$color-text-generic: #00EB6C;
|
||||
$color-text-surround: #00EB6C;
|
||||
$color-text-inputs: #00EB6C;
|
||||
$color-text-muted: #{$color-text-generic}E0;
|
||||
$color-text-muted-super: #{$color-text-generic}C0;
|
||||
@@ -82,6 +83,9 @@ $color-text-muted-super: #{$color-text-generic}C0;
|
||||
$color-text-link: #00EB6C;
|
||||
$color-text-link-hover: #00EB6C;
|
||||
|
||||
$color-text-surround-link: #00EB6C;
|
||||
$color-text-surround-link-hover: #00EB6C;
|
||||
|
||||
|
||||
// Specials
|
||||
$color-glow-input: yellow;
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Rounding > Corner */
|
||||
|
||||
/* Rounding > Corner */
|
||||
@mixin corner-rounding-maker($size-key, $size-value) {
|
||||
.rtl-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
@@ -17,7 +18,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > Rounding > Corner > Variable Sizes */
|
||||
/* Rounding > Corner > Variable Sizes */
|
||||
@include corner-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
|
||||
@include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
|
||||
@include corner-rounding-maker("m", #{$border-base-radius});
|
||||
@@ -25,6 +26,6 @@
|
||||
@include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Corner > Fixed Sizes */
|
||||
/* Rounding > Corner > Fixed Sizes */
|
||||
@include corner-rounding-maker("0", 0);
|
||||
@include corner-rounding-maker("r", 50%);
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Rounding > Global */
|
||||
|
||||
/* Rounding > Global */
|
||||
@mixin global-rounding-maker($size-key, $size-value) {
|
||||
//, .rounding-#{$size-key}
|
||||
.r-#{$size-key} {
|
||||
@@ -9,7 +10,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > Rounding > Global > Variable Sizes */
|
||||
/* Rounding > Global > Variable Sizes */
|
||||
@include global-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
|
||||
@include global-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
|
||||
@include global-rounding-maker("m", #{$border-base-radius});
|
||||
@@ -17,6 +18,6 @@
|
||||
@include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Global > Fixed Sizes */
|
||||
/* Rounding > Global > Fixed Sizes */
|
||||
@include global-rounding-maker("0", 0);
|
||||
@include global-rounding-maker("r", 50%);
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Rounding > Sided */
|
||||
|
||||
/* Rounding > Sided */
|
||||
@mixin sided-rounding-maker($size-key, $size-value) {
|
||||
.rt-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
@@ -21,7 +22,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > Rounding > Sided > Variable Sizes */
|
||||
/* Rounding > Sided > Variable Sizes */
|
||||
@include sided-rounding-maker("xs", calc(#{$border-base-radius} * 0.5));
|
||||
@include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
|
||||
@include sided-rounding-maker("m", #{$border-base-radius});
|
||||
@@ -29,6 +30,6 @@
|
||||
@include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Sided > Fixed Sizes */
|
||||
/* Rounding > Sided > Fixed Sizes */
|
||||
@include sided-rounding-maker("0", 0);
|
||||
@include sided-rounding-maker("r", 50%);
|
||||
@@ -1,41 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Styles > Base */
|
||||
|
||||
/* Site > Styles > Base > Coloring & Fonts (TODO: Needs a small rework) */
|
||||
|
||||
body {
|
||||
background-color: #{$color-background-body};
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
// Overridden by a rule in background.scss !
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/* Site > Styles > Base > Trash */
|
||||
|
||||
// FIXME: Move it out too !
|
||||
// Allowed for right-align in headings with 'ml-auto' instead of 'f-right' !
|
||||
/*.heading-main {
|
||||
> h2, > h3, > h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
&.heading-dyn-width-1 {
|
||||
min-width: 75%;
|
||||
}
|
||||
}*/
|
||||
@@ -1,256 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Inputs */
|
||||
|
||||
/* Site > Elements > 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: 0px 0px 3px 0px #{$color-glow-input};
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #{$color-background-input-disabled} !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Site > Elements > 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%;
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Checkbox */
|
||||
|
||||
input[type=checkbox] {
|
||||
&.cb-pretty, &.checkbox-pretty {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "✘";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Site > Elements > 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Site > Elements > 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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ugly fix for download buttons
|
||||
button + button, .button-link + .button-link > button {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Lang Selector */
|
||||
|
||||
#lang-selector {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
> summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
z-index: #{$z-index-lang-dropdown};
|
||||
top: 2rem;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
|
||||
// Visibility transition
|
||||
//height: 0;
|
||||
//transition: height 0.4s;
|
||||
//transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
|
||||
}
|
||||
|
||||
// TODO: Maybe force it to be visible when closes ?
|
||||
|
||||
//&[open] > div {
|
||||
// height: auto;
|
||||
//}
|
||||
}
|
||||
|
||||
|
||||
// TODO: Move to core !
|
||||
.ta-resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.ta-resize-h {
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.ta-resize-v {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ta-resize-none {
|
||||
resize: none;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Spacing > Sided */
|
||||
|
||||
/* Spacing > Sided */
|
||||
@mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}x-#{$size-key} {
|
||||
#{$type-property}-left: #{$size-value};
|
||||
@@ -13,7 +14,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Variable Sizes */
|
||||
/* Spacing > Sided > Variable Sizes */
|
||||
@include axis-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include axis-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include axis-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
|
||||
@@ -29,11 +30,11 @@
|
||||
@include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Fixed Sizes */
|
||||
/* Spacing > Sided > Fixed Sizes */
|
||||
@include axis-spacing-maker("m", "margin", "0", 0);
|
||||
@include axis-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Others */
|
||||
/* Spacing > Sided > Others */
|
||||
@include axis-spacing-maker("m", "margin", "auto", auto);
|
||||
@include axis-spacing-maker("p", "padding", "auto", auto);
|
||||
//@include axis-spacing-maker("p", "padding", "auto", auto);
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Spacing > Global */
|
||||
|
||||
/* Spacing > Global */
|
||||
@mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}-#{$size-key} {
|
||||
#{$type-property}: #{$size-value};
|
||||
@@ -8,7 +9,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Variable Sizes */
|
||||
/* Spacing > Global > Variable Sizes */
|
||||
@include global-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include global-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include global-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
|
||||
@@ -24,17 +25,17 @@
|
||||
@include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Fixed Sizes */
|
||||
/* Spacing > Global > Fixed Sizes */
|
||||
@include global-spacing-maker("m", "margin", "0", 0);
|
||||
@include global-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Others */
|
||||
/* Spacing > Global > Others */
|
||||
@include global-spacing-maker("m", "margin", "auto", auto);
|
||||
@include global-spacing-maker("p", "padding", "auto", auto);
|
||||
//@include global-spacing-maker("p", "padding", "auto", auto);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Manual Extras */
|
||||
/* Spacing > Global > Manual Extras */
|
||||
.p-xxxs {
|
||||
padding: calc(#{$margin-base-size} * 0.125);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Spacing > Sided */
|
||||
|
||||
/* Spacing > Sided */
|
||||
@mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}t-#{$size-key} {
|
||||
#{$type-property}-top: #{$size-value};
|
||||
@@ -17,7 +18,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Variable Sizes */
|
||||
/* Spacing > Sided > Variable Sizes */
|
||||
@include sided-spacing-maker("m", "margin", "xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include sided-spacing-maker("m", "margin", "xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include sided-spacing-maker("m", "margin", "s", calc(#{$margin-base-size} * 0.75));
|
||||
@@ -33,11 +34,11 @@
|
||||
@include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Fixed Sizes */
|
||||
/* Spacing > Sided > Fixed Sizes */
|
||||
@include sided-spacing-maker("m", "margin", "0", 0);
|
||||
@include sided-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Others */
|
||||
/* Spacing > Sided > Others */
|
||||
@include sided-spacing-maker("m", "margin", "auto", auto);
|
||||
@include sided-spacing-maker("p", "padding", "auto", auto);
|
||||
//@include sided-spacing-maker("p", "padding", "auto", auto);
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Tables */
|
||||
|
||||
/* Tables > Modifiers */
|
||||
|
||||
tr, td {
|
||||
vertical-align: top;
|
||||
@@ -0,0 +1,28 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Alignment */
|
||||
|
||||
.t-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.t-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.t-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.t-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.t-end {
|
||||
text-align: end;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Links */
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Misc */
|
||||
|
||||
.t-ucase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.t-lcase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.t-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.t-nowrap {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.t-half-muted {
|
||||
opacity: 65%;
|
||||
}
|
||||
|
||||
.t-muted {
|
||||
//@if $undefined-toggle-css-variables {
|
||||
// color: var(--color-white-muted);
|
||||
//} @else {
|
||||
// color: #{$color-white-muted};
|
||||
//}
|
||||
//color: #A9A9Aa;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.t-super-muted {
|
||||
// Should be 35% TBH
|
||||
opacity: 45%;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Sizes */
|
||||
|
||||
// ".t-size-6", ".t-size-8", ..., "t-size-40"
|
||||
@for $_ from 3 through 20 {
|
||||
$sizeKey: $_ * 2;
|
||||
$sizeValue: $sizeKey / 10;
|
||||
|
||||
.t-size-#{$sizeKey} {
|
||||
font-size: #{$sizeValue}rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Adding special odd values
|
||||
.t-size-11 {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
.t-size-13 {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
.t-size-15 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
.t-size-17 {
|
||||
font-size: 1.7rem !important;
|
||||
}
|
||||
|
||||
// Jumbo sizes
|
||||
// ".t-size-35" & ".t-size-40"
|
||||
@for $_ from 7 through 8 {
|
||||
$size: $_ * 5;
|
||||
|
||||
.t-size-#{$size} {
|
||||
font-size: #{$size / 10}rem !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Styling */
|
||||
|
||||
i, .t-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.t-oblique {
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
u, .t-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
s, .t-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.t-overline {
|
||||
text-decoration: overline;
|
||||
}
|
||||
|
||||
// Defined in core/defaults-code.scss !
|
||||
//.t-monospace {
|
||||
// font-family: monospace, monospace;
|
||||
//}
|
||||
@@ -0,0 +1,32 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Weights */
|
||||
|
||||
.t-w-normal, .t-normal {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
b, .t-w-bold, .t-bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.t-w-bolder, .t-bolder {
|
||||
font-weight: bolder !important;
|
||||
}
|
||||
|
||||
.t-w-lighter, .t-lighter {
|
||||
font-weight: lighter !important;
|
||||
}
|
||||
|
||||
// ".t-w-100", ".t-w-200", ..., ".t-w-900"
|
||||
@for $_ from 1 through 9 {
|
||||
$size: $_ * 100;
|
||||
|
||||
.t-w-#{$size} {
|
||||
font-weight: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
// /!\ Firefox moment /!\
|
||||
// * The ".t-w-200" to ".t-w-500" classes barely have any visible effect...
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Cursors */
|
||||
|
||||
/* Utils > Cursors */
|
||||
|
||||
@mixin cursor-maker($cursor-type) {
|
||||
.c-#{$cursor-type}, .cursor-#{$cursor-type} {
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Display */
|
||||
|
||||
/* Utils > Display */
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
@@ -14,9 +15,5 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.o-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Notes:
|
||||
// * 'core/grid.scss' defines '.d-grid' ! (Add here if grids are disabled !)
|
||||
// * 'core/core-grids.scss' defines '.d-grid' ! (Add here if grids are disabled !)
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Flex */
|
||||
|
||||
/* Utils > Flex */
|
||||
|
||||
// Display properties
|
||||
.d-flex {
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Float */
|
||||
|
||||
/* Utils > Float */
|
||||
|
||||
.fl, .f-left {
|
||||
float: left;
|
||||
@@ -0,0 +1,10 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Mobile */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Overflow */
|
||||
|
||||
/* Utils > Overflow */
|
||||
|
||||
@mixin overflow-maker($overflow-type) {
|
||||
.o-#{$overflow-type} {
|
||||
@@ -0,0 +1,29 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Positions */
|
||||
|
||||
@mixin position-maker($position-type) {
|
||||
.p-#{$position-type} {
|
||||
position: #{$position-type};
|
||||
}
|
||||
}
|
||||
|
||||
@include position-maker(static);
|
||||
@include position-maker(relative);
|
||||
@include position-maker(absolute);
|
||||
@include position-maker(fixed);
|
||||
@include position-maker(sticky);
|
||||
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
.bottom-0 {
|
||||
bottom: 0;
|
||||
}
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
.right-0 {
|
||||
right: 0;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Text */
|
||||
|
||||
.t-noselect {
|
||||
user-select: none;
|
||||
}
|
||||
+9
-2
@@ -1,5 +1,12 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
@use 'sass:color';
|
||||
|
||||
|
||||
/* Variables */
|
||||
|
||||
// If not set to `-1`, will auto define a low-priority size for headers.
|
||||
$text-weight-header: 600;
|
||||
|
||||
|
||||
|
||||
|
||||
$scrollbar-size: 1.25em;
|
||||
@@ -30,4 +37,4 @@ $z-index-modal: 99;
|
||||
|
||||
/* Variables > Themes & Overrides */
|
||||
//@import "themes/theme_unset";
|
||||
@import "themes/theme_nibblepoker";
|
||||
@import "old/parts/theme_nibblepoker";
|
||||
|
||||
Reference in New Issue
Block a user