3 Commits

Author SHA1 Message Date
aziascreations d622f59ba1 Fixed hidden linkes, Changed color palette, may change later
Update index.php, backgrounds.php, and 12 more files...
2026-05-16 18:02:36 +02:00
aziascreations 91098bc437 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"""
2026-05-11 13:32:00 +02:00
aziascreations 95ffb881f9 Added basic theme support for future recoloring
Update .gitignore, border.scss, backgrounds.scss, and 12 more files
2026-05-07 12:47:03 +02:00
76 changed files with 1732 additions and 1329 deletions
+4
View File
@@ -4,9 +4,13 @@
# NodeJS Trash
node_modules/
# Corporate-specific stuff
*_corp_*
# Build Artifacts
*.css
*.min.html
*.html
*.7z
*.zip
*.tar
+2 -2
View File
@@ -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>
@@ -120,7 +120,7 @@
<?php include("./parts/examples/inputs.php"); ?>
<!-- Examples > Tables -->
<?php include("./parts/examples/cards.php"); ?>
<?php /* include("./parts/examples/cards.php"); */ ?>
</main>
<footer class="d-flex flex-align-center w-full p-s py-xs">
+23 -11
View File
@@ -14,23 +14,35 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<section class="p-s">
<h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
<div class="grid grid-col-3 grid-gap-l px-s">
<div class="grid grid-col-2 grid-gap-l px-s">
<div>
<div class="p-l border r-xl bkgd-dark my-xs"></div>
<span class="code mb-s">.bkgd-dark</span>
</div>
<div>
<div class="p-l border r-xl bkgd-grey my-xs"></div>
<span class="code mb-s">.bkgd-grey</span>
<span class="code mb-s">.bkgd-gray</span>
<div class="p-l border r-xl bkgd-lightest my-xs"></div>
<span class="code mb-s">.bkgd-lightest</span>
</div>
<div>
<div class="p-l border r-xl bkgd-light my-xs"></div>
<span class="code mb-s">.bkgd-light</span>
</div>
</div>
<div class="grid grid-col-2 grid-gap-l px-s">
<div>
<div class="p-l border r-xl bkgd-grey my-xs"></div>
<span class="code mb-s">.bkgd-grey</span>
<span class="code mb-s">.bkgd-gray</span>
</div>
</div>
<div class="grid grid-col-2 grid-gap-l px-s">
<div>
<div class="p-l border r-xl bkgd-dark my-xs"></div>
<span class="code mb-s">.bkgd-dark</span>
</div>
<div>
<div class="p-l border r-xl bkgd-darkest my-xs"></div>
<span class="code mb-s">.bkgd-darkest</span>
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
<h3 class="t-w-500 t-size-12 my-s mt-xl">Grid backgrounds</h3>
<div class="grid grid-col-2 grid-gap-l px-s">
<div>
<p class="t-w-500">40% opacity (Title bars)</p>
@@ -56,7 +68,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
<h3 class="t-w-500 t-size-12 my-s mt-xl">Special backgrounds</h3>
<div class="grid grid-col-3 grid-gap-l px-s">
<div>
<p class="t-w-500">Transparent</p>
@@ -65,7 +77,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
</div>
<h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
<h3 class="t-w-500 t-size-12 my-s mt-xl">Colored backgrounds</h3>
<div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s">
<div>
<p class="t-w-500">Blue</p>
+6 -6
View File
@@ -21,7 +21,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="px-s mb-m">
<label for="demo-core-text">Text Input: </label>
<input id="demo-core-text" type="text" value="Lorem ipsum">
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
label+input[type=text]
</code>
</div>
@@ -29,7 +29,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="px-s mb-m">
<label for="demo-core-password">Password Input: </label>
<input id="demo-core-password" type="password" value="12345678">
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
label+input[type=password]
</code>
</div>
@@ -37,7 +37,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="px-s mb-m">
<label for="demo-core-number">Number Input: </label>
<input id="demo-core-number" type="number" value="42">
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
label+input[type=number]
</code>
</div>
@@ -49,7 +49,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<label for="demo-core-radio-2">Radio 2</label><br>
<input type="radio" id="demo-core-radio-3" name="demo-core-radio" disabled>
<label for="demo-core-radio-3">Radio 3</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
(input[type=radio][name=myRadioInput]+label+br)*3
</code>
</div>
@@ -61,7 +61,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<label for="demo-core-combo-2">Checkbox 2</label><br>
<input type="checkbox" id="demo-core-combo-3" disabled>
<label for="demo-core-combo-3">Checkbox 3</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
(input[type=checkbox]+label+br)*3
</code>
</div>
@@ -69,7 +69,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="px-s mb-m">
<label for="demo-core-textarea"></label>
<textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
label+textarea
</code>
</div>
+5 -6
View File
@@ -19,7 +19,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="px-s mb-m">
<label for="demo-core-text">Text Input: </label>
<input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
label+input[type=text]<b>.p-xxs.border.r-m</b>
</code>
</div>
@@ -27,10 +27,9 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<div class="px-s mb-m">
<label for="demo-core-textarea"></label>
<textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
</code>
</div>
@@ -44,7 +43,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border" disabled>
<label for="demo-site-combo-3">Checkbox 3</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
(input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
</code>
</div>
@@ -68,7 +67,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<input type="radio" id="demo-site-radio-5-solid" name="demo-site-radio-solid" class="radio-solid border" disabled>
<label for="demo-site-radio-5-solid">Radio 5</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
(input[type=radio][name=myRadioInput]<b>.radio-solid.border</b>+label+br)*3
</code>
</div>
@@ -89,7 +88,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<input type="radio" id="demo-site-radio-5-3d" name="demo-site-radio-3d" class="radio-3d border" disabled>
<label for="demo-site-radio-5-3d">Radio 5</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
<code class="d-block p-xxs border r-s mt-xs">
(input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
</code>
</div>
+30 -29
View File
@@ -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 &amp; 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 &amp; 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">
+2 -2
View File
@@ -127,11 +127,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
</p>
</a>
<a class="a-hidden" href="#examples-cards">
<!--<a class="a-hidden" href="#examples-cards">
<p class="t-w-500 py-xs sidebar-entry">
<i class="fad fa-address-card pr-xs t-half-muted"></i>Cards
</p>
</a>
</a>-->
</div>
</details>
+1 -24
View File
@@ -1,29 +1,6 @@
# NibblePoker's CSS Theme (W.I.P.)
# NibblePoker's CSS Theme
A simple and minimalist CSS stylesheet used across all my websites and web-based applications.
## Structure
This stylesheet is composed of 4 major parts that all work together towards a common goal
all the while staying independent and usable individually if you ever wished to.
### External
The *External* rules regroup every external CSS stylesheets that are included in this one.\
Currently, [reset.css](https://meyerweb.com/eric/tools/css/reset/) is the only such stylesheet.
**See:** [scss/external/](scss/external)
### Core
The *Core* rules define mostly universal and portable CSS rules and other utilities for text,
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)
### Site
### Custom
## License
The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0)
@@ -1,7 +1,10 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Borders > Colors */
.border, code, .code, kbd {
border-color: #{$color-border-surround};
border-color: #{$color-border-code};
//&.b-light {
// border: 1px solid #{$color-border-light};
@@ -15,7 +18,7 @@ code, .code, kbd {
main {
.border {
border-color: #{$color-border-main};
//&.b-light {
// border: 1px solid #{$color-border-light};
//}
+23
View File
@@ -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");
+57
View File
@@ -0,0 +1,57 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Borders > Targeting */
.b, .border {
border: 1px solid #{$color-border-default};
}
.bx {
border-left: 1px solid #{$color-border-default};
border-right: 1px solid #{$color-border-default};
}
.by {
border-top: 1px solid #{$color-border-default};
border-bottom: 1px solid #{$color-border-default};
}
@mixin border-maker-enable($side-key, $side-css-key) {
.b#{$side-key} {
border-#{$side-css-key}: 1px solid #{$color-border-default};
}
}
@include border-maker-enable("t", "top");
@include border-maker-enable("b", "bottom");
@include border-maker-enable("l", "left");
@include border-maker-enable("r", "right");
/* Borders > Disabling */
.b-0 {
border: 0;
}
.bx-0 {
border-left: 0;
border-right: 0;
}
.by-0 {
border-top: 0;
border-bottom: 0;
}
@mixin border-maker-disable($side-key, $side-css-key) {
.b#{$side-key}-0 {
border-#{$side-css-key}: 0;
}
}
@include border-maker-disable("t", "top");
@include border-maker-disable("b", "bottom");
@include border-maker-disable("l", "left");
@include border-maker-disable("r", "right");
+5 -4
View File
@@ -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;
-80
View File
@@ -1,80 +0,0 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Core > Borders */
/* Core > Borders > Enabling */
.b, .border {
border: 1px solid #{$color-border-all};
}
.bx {
border-left: 1px solid #{$color-border-all};
border-right: 1px solid #{$color-border-all};
}
.by {
border-top: 1px solid #{$color-border-all};
border-bottom: 1px solid #{$color-border-all};
}
@mixin border-maker-enable($side-key, $side-css-key) {
.b#{$side-key} {
border-#{$side-css-key}: 1px solid #{$color-border-all};
}
}
@include border-maker-enable("t", "top");
@include border-maker-enable("b", "bottom");
@include border-maker-enable("l", "left");
@include border-maker-enable("r", "right");
/* Core > Borders > Disabling */
.b-0 {
border: 0;
}
.bx-0 {
border-left: 0;
border-right: 0;
}
.by-0 {
border-top: 0;
border-bottom: 0;
}
@mixin border-maker-disable($side-key, $side-css-key) {
.b#{$side-key}-0 {
border-#{$side-css-key}: 0;
}
}
@include border-maker-disable("t", "top");
@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");
@@ -1,5 +1,6 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Core > Grids */
.grid, .d-grid {
-55
View File
@@ -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;
}
}
-7
View File
@@ -1,7 +0,0 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Core > Positions */
.p-relative {
position: relative;
}
-177
View File
@@ -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;
}
+20
View File
@@ -0,0 +1,20 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Defaults > Backgrounds */
body {
background-color: #{$color-background-body};
}
// Can be overriden in `elements/elements-backgrounds.scss` for the grids.
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,20 +1,22 @@
// 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 { }
.code, kbd, code {
background-color: #{$color-background-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};
border: 1px solid;
// Using '.r-s'
@@ -30,11 +32,15 @@ code {
background: rgba(0,0,0,0) !important;
}
// FIXME: Makes the inline block ugly !!!
code, .code, .code-line {
line-height: 1.35;
line-height: 1.175;
}
// FIXME: Use a proper class !!!
.code:not(code) {
padding: calc(#{$border-base-radius} * 0.625);
//padding: calc(#{$border-base-radius} * 0.625);
padding: calc(#{$border-base-radius} * 0.55);
padding-top: calc(#{$border-base-radius} * 0.25);
padding-bottom: calc(#{$border-base-radius} * 0.25);
}
+9
View File
@@ -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;
+206
View File
@@ -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;
@@ -11,18 +12,18 @@
}
tr {
background-color: #{$color-background-table-dual};
background-color: #{$color-background-table-tr-alt};
}
tr:nth-child(2n), th {
background-color: #{$color-background-table-main};
background-color: #{$color-background-table-tr-main};
}
td:not(:last-of-type), th:not(:last-of-type) {
border-right: 1.5px solid #{$color-table-border};
border-right: 1.5px solid #{$color-border-table};
}
tr:not(:last-of-type) td, th {
border-bottom: 1.5px solid #{$color-table-border};
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,91 @@
// 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-generic};
& * {
//color: #{$color-text-link-hover};
color: #{$color-text-generic};
}
// 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};
}
}
+95
View File
@@ -0,0 +1,95 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Elements > Backgrounds */
.bkgd-darkest {
background: $color-background-gray-darkest;
}
.bkgd-dark {
background: $color-background-gray-dark;
}
.bkgd-grey, .bkgd-gray {
background: $color-background-gray-medium;
}
.bkgd-light {
background: $color-background-gray-light;
}
.bkgd-lightest {
background: $color-background-gray-lightest;
}
@if($include-grid-backgrounds) {
// 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;
} @else {
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
}
}
.bkgd-grid20 {
@if($use-b64-backgrounds) {
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
} @else {
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
}
}
.bkgd-grid30 {
@if($use-b64-backgrounds) {
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
} @else {
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
}
}
.bkgd-grid40, .bkgd-grid {
@if($use-b64-backgrounds) {
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
} @else {
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
}
}
}
.bkgd-transparent {
background: rgba(0, 0, 0, 0);
}
.bkgd-blue {
background-color: #{$color-background-blue};
}
.bkgd-blue-light {
background-color: #{$color-background-blue-light};
}
.bkgd-green {
background-color: #{$color-background-green};
}
.bkgd-green-light {
background-color: #{$color-background-green-light};
}
.bkgd-red {
background-color: #{$color-background-red};
}
.bkgd-red-light {
background-color: #{$color-background-red-light};
}
.bkgd-orange {
background-color: #{$color-background-orange};
}
.bkgd-orange-light {
background-color: #{$color-background-orange-light};
}
@@ -1,9 +1,10 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Site > Elements > Horizontal Rule */
/* Elements > Horizontal Rule */
hr {
border-color: #{$color-border-all};
border-color: #{$color-border-hr};
&.subtle, &.hr-subtle {
//background-color: rgba(0,0,0,0) !important;
@@ -41,7 +42,7 @@ hr {
content: '\002702';
display: inline-block;
position: relative;
color: #{$color-border-all};
color: #{$color-border-hr};
font-size: 18px;
top: -8px;
left: 40px;
+64
View File
@@ -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 {
@@ -10,11 +11,11 @@
}
*::-webkit-scrollbar-track:vertical {
border-left: 1px solid #{$color-scrollbar-border};
border-left: 1px solid #{$color-border-scrollbar};
}
/**::-webkit-scrollbar-track:horizontal {
border-top: 1px solid #{$color-scrollbar-border};
border-top: 1px solid #{$color-border-scrollbar};
}*/
*::-webkit-scrollbar-thumb {
@@ -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,12 +2,12 @@
/* Custom Elements > Wedge */
wedge, .wedge {
.wedge {
position: absolute;
//top: 0;
//right: 0;
color: #{$color-text-regular-normal};
color: #{$color-text-generic};
background-color: #{$color-background-button};
user-select: none;
@@ -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
+9
View File
@@ -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;
}
}
+34
View File
@@ -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;
//}
}
+20
View File
@@ -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,13 +51,13 @@ body.layout-generic {
}
/* Site > Layouts > Generic > Mobile Fixes */
/* Layouts > Generic > Mobile Fixes */
@media only screen and (max-width: 768px) {
body.layout-generic {
& > nav {
//border-right: 1px solid #{$color-border-all};
border-right: 1px solid #{$color-border-main};
border-right: 1px solid #{$color-border-nav};
}
& > header {
@@ -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
View File
@@ -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
+111
View File
@@ -0,0 +1,111 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
@use 'sass:color';
// External palettes
/* Variables > Palettes > Apollo */
// https://lospec.com/palette-list/apollo
$color-apollo-01: #253a5e;
$color-apollo-02: #3c5e8b;
$color-apollo-03: #4f8fba;
$color-apollo-04: #73bed3;
$color-apollo-05: #a4dddb;
$color-apollo-07: #25562e;
$color-apollo-08: #468232;
$color-apollo-20: #884b2b;
$color-apollo-21: #be772b;
$color-apollo-26: #752438;
$color-apollo-27: #a53030;
$color-apollo-45: #ebede9;
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
// Flat colors
$color-background-gray-light: #24252B;
$color-background-gray-dark: #1D1E22;
$color-background-gray-medium: mix($color-background-gray-light, $color-background-gray-dark, 50%);
$color-background-blue: #{$color-apollo-custom-30};
$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
$color-background-green: #{$color-apollo-07};
$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%);
$color-background-red: #{$color-apollo-26};
$color-background-red-light: #{$color-apollo-27};
$color-background-orange: #{$color-apollo-20};
$color-background-orange-light: #{$color-apollo-21};
// Body parts
$color-background-body: $color-background-gray-dark;
$color-background-main: $color-background-gray-medium;
$color-background-surround: $color-background-gray-dark;
$color-background-grid-image: $color-background-surround;
// Cards & Other elements
$color-background-heading: $color-background-surround;
$color-background-code: $color-background-surround;
$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%);
$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%);
$color-background-input: $color-background-surround;
$color-background-input-checked: $color-apollo-08;
$color-background-input-unchecked: $color-apollo-27;
$color-background-input-disabled: $color-background-surround;
$color-background-button: #2d2f36;
$color-background-button-hover: #373841;
$color-background-button-primary: $color-background-blue;
$color-background-button-primary-hover: $color-background-blue-light;
$color-background-button-success: $color-background-green;
$color-background-button-success-hover: $color-background-green-light;
$color-background-button-error: $color-background-red;
$color-background-button-error-hover: $color-background-red-light;
$color-background-button-warning: $color-background-orange;
$color-background-button-warning-hover: $color-background-orange-light;
// Borders
$color-border-light: #141417;
$color-border-normal: #141417;
$color-border-dark: #141417;
$color-border-default: $color-border-normal;
$color-border-main: $color-border-normal;
$color-border-nav: $color-border-normal;
$color-border-hr: $color-border-normal;
$color-border-scrollbar: $color-border-normal;
$color-border-table: $color-border-normal;
$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;
$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;
+237
View File
@@ -0,0 +1,237 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
@use 'sass:color';
// External palettes
/* Variables > Palettes > Apollo */
// https://lospec.com/palette-list/apollo
$color-apollo-00: #172038;
$color-apollo-01: #253a5e;
$color-apollo-02: #3c5e8b;
$color-apollo-03: #4f8fba;
$color-apollo-04: #73bed3;
$color-apollo-05: #a4dddb;
$color-apollo-06: #19332d;
$color-apollo-07: #25562e;
$color-apollo-08: #468232;
$color-apollo-09: #75a743;
$color-apollo-10: #a8ca58;
$color-apollo-11: #d0da91;
$color-apollo-12: #4d2b32;
$color-apollo-13: #7a4841;
$color-apollo-14: #ad7757;
$color-apollo-15: #c09473;
$color-apollo-16: #d7b594;
$color-apollo-17: #e7d5b3;
$color-apollo-18: #341c27;
$color-apollo-19: #602c2c;
$color-apollo-20: #884b2b;
$color-apollo-21: #be772b;
$color-apollo-22: #de9e41;
$color-apollo-23: #e8c170;
$color-apollo-24: #241527;
$color-apollo-25: #411d31;
$color-apollo-26: #752438;
$color-apollo-27: #a53030;
$color-apollo-28: #cf573c;
$color-apollo-29: #da863e;
$color-apollo-30: #1e1d39;
$color-apollo-31: #402751;
$color-apollo-32: #7a367b;
$color-apollo-33: #a23e8c;
$color-apollo-34: #c65197;
$color-apollo-35: #df84a5;
$color-apollo-36: #090a14;
$color-apollo-37: #10141f;
$color-apollo-38: #151d28;
$color-apollo-39: #202e37;
$color-apollo-40: #394a50;
$color-apollo-41: #577277;
$color-apollo-42: #819796;
$color-apollo-43: #a8b5b2;
$color-apollo-44: #c7cfcc;
$color-apollo-45: #ebede9;
// https://lospec.com/palette-list/endesga-32
// https://lospec.com/palette-list/endesga-64
$color-endesga64-00: #ff0040;
$color-endesga64-01: #131313;
$color-endesga64-02: #1b1b1b;
$color-endesga64-03: #272727;
$color-endesga64-04: #3d3d3d;
$color-endesga64-05: #5d5d5d;
$color-endesga64-06: #858585;
$color-endesga64-07: #b4b4b4;
$color-endesga64-08: #ffffff;
$color-endesga64-09: #c7cfdd;
$color-endesga64-10: #92a1b9;
$color-endesga64-11: #657392;
$color-endesga64-12: #424c6e;
$color-endesga64-13: #2a2f4e;
$color-endesga64-14: #1a1932;
$color-endesga64-15: #0e071b;
$color-endesga64-16: #1c121c;
$color-endesga64-17: #391f21;
$color-endesga64-18: #5d2c28;
$color-endesga64-19: #8a4836;
$color-endesga64-20: #bf6f4a;
$color-endesga64-21: #e69c69;
$color-endesga64-22: #f6ca9f;
$color-endesga64-23: #f9e6cf;
$color-endesga64-24: #edab50;
$color-endesga64-25: #e07438;
$color-endesga64-26: #c64524;
$color-endesga64-27: #8e251d;
$color-endesga64-28: #ff5000;
$color-endesga64-29: #ed7614;
$color-endesga64-30: #ffa214;
$color-endesga64-31: #ffc825;
$color-endesga64-32: #ffeb57;
$color-endesga64-33: #d3fc7e;
$color-endesga64-34: #99e65f;
$color-endesga64-35: #5ac54f;
$color-endesga64-36: #33984b;
$color-endesga64-37: #1e6f50;
$color-endesga64-38: #134c4c;
$color-endesga64-39: #0c2e44;
$color-endesga64-40: #00396d;
$color-endesga64-41: #0069aa;
$color-endesga64-42: #0098dc;
$color-endesga64-43: #00cdf9;
$color-endesga64-44: #0cf1ff;
$color-endesga64-45: #94fdff;
$color-endesga64-46: #fdd2ed;
$color-endesga64-47: #f389f5;
$color-endesga64-48: #db3ffd;
$color-endesga64-49: #7a09fa;
$color-endesga64-50: #3003d9;
$color-endesga64-51: #0c0293;
$color-endesga64-52: #03193f;
$color-endesga64-53: #3b1443;
$color-endesga64-54: #622461;
$color-endesga64-55: #93388f;
$color-endesga64-56: #ca52c9;
$color-endesga64-57: #c85086;
$color-endesga64-58: #f68187;
$color-endesga64-59: #f5555d;
$color-endesga64-60: #ea323c;
$color-endesga64-61: #c42430;
$color-endesga64-62: #891e2b;
$color-endesga64-63: #571c27;
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
// Flat colors
//$color-background-gray-light: #404040;
//$color-background-gray-idk01: #2e2e2e;
//$color-background-gray-medium: mix(#232323, #2e2e2e, 33.3%);
//$color-background-gray-dark: #232323;
$color-background-gray-lightest: mix($color-endesga64-05, $color-endesga64-06, 50%);
$color-background-gray-light: mix($color-endesga64-04, $color-endesga64-05, 50%);
$color-background-gray-lm: $color-endesga64-04;
$color-background-gray-medium: mix($color-endesga64-03, $color-endesga64-04, 50%);
$color-background-gray-md: $color-endesga64-03;
$color-background-gray-dark: mix($color-endesga64-02, $color-endesga64-03, 50%);
$color-background-gray-darkest: $color-endesga64-01;
$color-background-light-10: #f7f7f7;
$color-background-light-20: #c4c4c4;
$color-background-light-30: #7f7f7f;
$color-background-purple-10: #3E3546;
$color-background-purple-20: #6B3E75;
$color-background-purple-30: #905EA9;
$color-background-blue: #{$color-apollo-custom-30};
$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
$color-background-green: #{$color-apollo-07};
$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%);
$color-background-red: #{$color-apollo-26};
$color-background-red-light: #{$color-apollo-27};
$color-background-orange: #{$color-apollo-20};
$color-background-orange-light: #{$color-apollo-21};
// Body parts
$color-background-body: $color-background-gray-dark;
$color-background-main: $color-background-gray-medium;
$color-background-surround: $color-background-gray-dark;
$color-background-grid-image: $color-background-surround;
// Cards & Other elements
$color-background-heading: $color-background-surround;
$color-background-code: $color-background-surround;
$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%);
$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%);
$color-background-input: $color-background-surround;
$color-background-input-checked: $color-apollo-08;
$color-background-input-unchecked: $color-apollo-27;
$color-background-input-disabled: $color-background-surround;
//$color-background-button: #2d2f36;
//$color-background-button-hover: #373841;
$color-background-button: $color-background-gray-md;
$color-background-button-hover: $color-background-gray-lm;
$color-background-button-primary: $color-background-blue;
$color-background-button-primary-hover: $color-background-blue-light;
$color-background-button-success: $color-background-green;
$color-background-button-success-hover: $color-background-green-light;
$color-background-button-error: $color-background-red;
$color-background-button-error-hover: $color-background-red-light;
$color-background-button-warning: $color-background-orange;
$color-background-button-warning-hover: $color-background-orange-light;
// Borders
$color-border-light: $color-background-gray-darkest;
$color-border-normal: $color-background-gray-darkest;
$color-border-dark: $color-background-gray-darkest;
$color-border-default: $color-border-normal;
$color-border-main: $color-border-normal;
$color-border-nav: $color-border-normal;
$color-border-hr: $color-border-normal;
$color-border-scrollbar: $color-border-normal;
$color-border-table: $color-border-normal;
$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;
$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;
+91
View File
@@ -0,0 +1,91 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
@use 'sass:color';
// The only goal for this file is to set all colors to `deeppink`.
// Other theme files should override all the colors variables defined in here.
// Flat colors
$color-background-gray-light: deeppink;
$color-background-gray-medium: deeppink;
$color-background-gray-dark: deeppink;
$color-background-blue: deeppink;
$color-background-blue-light: deeppink;
$color-background-green: deeppink;
$color-background-green-light: deeppink;
$color-background-red: deeppink;
$color-background-red-light: deeppink;
$color-background-orange: deeppink;
$color-background-orange-light: deeppink;
// Body parts
$color-background-main: deeppink;
$color-background-surround: deeppink;
$color-background-body: deeppink;
// Cards & Other elements
$color-background-heading: deeppink;
$color-background-code: deeppink;
$color-background-table-tr-main: deeppink;
$color-background-table-tr-alt: deeppink;
$color-background-input: deeppink;
$color-background-input-checked: deeppink;
$color-background-input-unchecked: deeppink;
$color-background-input-disabled: deeppink;
$color-background-button: deeppink;
$color-background-button-hover: deeppink;
$color-background-button-primary: deeppink;
$color-background-button-primary-hover: deeppink;
$color-background-button-success: deeppink;
$color-background-button-success-hover: deeppink;
$color-background-button-error: deeppink;
$color-background-button-error-hover: deeppink;
$color-background-button-warning: deeppink;
$color-background-button-warning-hover: deeppink;
$color-background-grid-image: deeppink;
// Borders
$color-border-light: #00EB6C;
$color-border-normal: #00EB6C;
$color-border-dark: #00EB6C;
$color-border-default: #00EB6C;
$color-border-main: #00EB6C;
$color-border-nav: #00EB6C;
$color-border-hr: #00EB6C;
$color-border-scrollbar: #00EB6C;
$color-border-table: #00EB6C;
$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;
$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;
+113
View File
@@ -0,0 +1,113 @@
@use 'sass:color';
/* Variables > Palettes > Apollo */
// https://lospec.com/palette-list/apollo
$color-apollo-00: #172038;
$color-apollo-01: #253a5e;
$color-apollo-02: #3c5e8b;
$color-apollo-03: #4f8fba;
$color-apollo-04: #73bed3;
$color-apollo-05: #a4dddb;
$color-apollo-06: #19332d;
$color-apollo-07: #25562e;
$color-apollo-08: #468232;
$color-apollo-09: #75a743;
$color-apollo-10: #a8ca58;
$color-apollo-11: #d0da91;
$color-apollo-12: #4d2b32;
$color-apollo-13: #7a4841;
$color-apollo-14: #ad7757;
$color-apollo-15: #c09473;
$color-apollo-16: #d7b594;
$color-apollo-17: #e7d5b3;
$color-apollo-18: #341c27;
$color-apollo-19: #602c2c;
$color-apollo-20: #884b2b;
$color-apollo-21: #be772b;
$color-apollo-22: #de9e41;
$color-apollo-23: #e8c170;
$color-apollo-24: #241527;
$color-apollo-25: #411d31;
$color-apollo-26: #752438;
$color-apollo-27: #a53030;
$color-apollo-28: #cf573c;
$color-apollo-29: #da863e;
$color-apollo-30: #1e1d39;
$color-apollo-31: #402751;
$color-apollo-32: #7a367b;
$color-apollo-33: #a23e8c;
$color-apollo-34: #c65197;
$color-apollo-35: #df84a5;
$color-apollo-36: #090a14;
$color-apollo-37: #10141f;
$color-apollo-38: #151d28;
$color-apollo-39: #202e37;
$color-apollo-40: #394a50;
$color-apollo-41: #577277;
$color-apollo-42: #819796;
$color-apollo-43: #a8b5b2;
$color-apollo-44: #c7cfcc;
$color-apollo-45: #ebede9;
$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%);
$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%);
$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%);
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
/* Variables > Palettes > Material UI */
// https://materialui.co/colors
$color-material-blueGrey-50: #eceff1;
$color-material-blueGrey-100: #cfd8dc;
$color-material-blueGrey-200: #b0bec5;
$color-material-blueGrey-300: #90a4ae;
$color-material-blueGrey-400: #78909c;
$color-material-blueGrey-500: #607d8b;
$color-material-blueGrey-600: #546e7a;
$color-material-blueGrey-700: #455a64;
$color-material-blueGrey-800: #37474f;
$color-material-blueGrey-900: #263238;
$color-material-blueGrey-1000: #151D21;
$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%);
//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%);
$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%);
/* Variables > Palettes > WinUI 3 */
$color-winui-00: #191919;
$color-winui-01: #1D1D1D;
$color-winui-02: #202020;
$color-winui-03: #232323;
$color-winui-04: #272727;
$color-winui-05: #323232;
$color-winui-06: #3E3E3E;
// https://flatuicolors.com/palette/defo
/* Variables > Palettes > Misc */
//$color-test-01: mix(#7b6aa5, #000000, 33%);
//$color-test-02: #007c7d;
/* Variables > Colors Mappings */
$color-unset: $color-apollo-34;
@@ -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%);
-86
View File
@@ -1,86 +0,0 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Site > Misc > Backgrounds */
.bkgd-dark {
background: #{$color-background-main-headings};
}
.bkgd-grey, .bkgd-gray {
background: mix($color-background-main, $color-background-surround, 50%);
}
.bkgd-light {
background: $color-background-main;
}
@if($include-grid-backgrounds) {
// The element rules override rules in `base.scss ~94`
.bkgd-grid10, .bkgd-surround, header, nav, footer {
@if($use-b64-backgrounds) {
background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center;
} @else {
background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
}
}
.bkgd-grid20 {
@if($use-b64-backgrounds) {
background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center;
} @else {
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
}
}
.bkgd-grid30 {
@if($use-b64-backgrounds) {
background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center;
} @else {
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
}
}
.bkgd-grid40, .bkgd-grid {
@if($use-b64-backgrounds) {
background: #{$color-background-surround} url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEUAAABlZWVYWFhTU1NRUVFQUFBPT09PT09OTk4WFhZOTk5OTk5NTU1NTU1IbxM8AAAADnRSTlMABAgMEBQYHCElJSktNNvaVJcAAAjfSURBVHhepVfNdtpIFgZ2tTOwqh3I7pxTu8YC+tytkeRT2wCiK8sAIte9jA0pZz0mSp5gHiC25ZzZdg/dTzDzBvM2813JOPTMapjo5NiBfFX35/u+e1ULdUPXVcY1dcErvnF9n+WffaAbqqPXeWA6OjA1VT13xecis7UTaqqmntiaiuzEr/y1feSNC0xDt8wVB6aFZw/5VHzJL2wtpI450QMnkBmPaePWOCvA2YH62XcA6Kg95JfisRhT7a//85/aPW99j2oq0DXVMcjhJYxb/rJL7NCt3Ibvi5oa2OdvNvkmbwPSNIAZBPISxm+7tU9oYFecund5TW34GbLM732IG0LAuog80HvIE3/gOU/clIZ+i1uGe8gRuezPXPOH3QRFPVETes0XLnZrP7A3/qpoaik1YlCoLX6+QN7tPu1i29BNnbjI9u2YEze0P7tVfqoDXUKMFP4AcpXfFRPbQo9iM3djm9m5jfyq+JAHhP9cFQfg43JJ7Ni+5Usf+6m/95/8W/BA6IMTy7P3z0M+5cSnhN9jm5ilW9rMX/uvLs2H+DAGRFLuHEA2eWInLmRAhu7CLWxECY3cmrcullu4ZII6vOUTJzT2sTsul3PpPNgamK6qHTyxjTmmJUn06JZplawIhNdClnPdAR0b+hByyimN3chlvqYaqma6VEI08hNI2+Cjw2TxvOIFJbjlJ0QvtTstIeCgOSaXlhm6kb2hFPROWGjRI5xkgpf7Jv7XXd/UVYxvSz7X1dq/R6K3ucQvummTyLj5EuZ7/+hfUV1PnED6vhao2Mc0pY++0kybmrqLNL+bxLX/pYjA8IUp73TH6UUoXUUe0jmy6OARnsV85de+umngQtfd2xMgChZhKkhILVPRceMTf5Vvigoy8pmTo/cQI90VSFefC6C8ZeXfu6/5LVeQMRSKz4/W/jpPuAfrmfoZ6vVYPO36LJl09KGnLQl8sI/+geGrn3xCPT3xEzcC5Mvut5207AdEfljoOSCZu8u3HvL7VET2VM3g+NcQ1u/5yo/lFldXwYHnJxaNttBTkdDxPpaiHnX9mjIK9ZAwZXh/fk//l6grSERglc5cygH1aWrf2z1ESF8K4z8h4pO4i0P6kVK+Rl57SFsDgtrJ98d78omack+3aQnRjuDwb3LpwlvX1Gd8YUMjLBhSZFcyLirGneiMTqlnpnbqZnbrtgwI7LWuFhzZHkqx8n1KjOhpVhWlqV7bNrUpomu+dA/+AUJa0A+QVIbTQz12S574JQ6rqRt//Hzp2xoKvBCZmjnHvLArX5KER1ak0Xq2qzVnTsotEGmjmjuxnIRSe8N3uUCm7ozFzlvPRjv0Q8bYEMgFfLKpUyc+HPuhn9MbXyoR9cIxai+tS7ukrmrp43K550fIVW7pkuwuotDYxUZcrW4iJ/2Y+ZShpt3HHQiEX1hG9GsDCgLQLA37hiauX2Yi+cwpJnGxj3zvkR+k46XjAb4KoUSZu9C6C0iMsKWXFubn3kO18IPiNh/aY3KZFUJ9IXlgpIQi2YhxYn7rM45ZZvQr13c/UsIRX9qVq31mIQjCA0Q8TMowBuyb/y1fcGID1VQygntmgY7NPei5yStl96EYyQSxKvGad/yQL+yrSno0BNtnnPqpu+Vjcomog3Nie0rVTTWd8IS7Gp5j5/yGm0Y60ia4pUa2Qp3EtUxTnZlzyac0jQVlHIBA13bsHoquWjtx6wF19yM4sl3UZGh/FD/klj7RYxq7hhpDjQN68J1y12hS4gAA6Di9/O0fzVItmLkaiwm/55m74Y5pmzYC7KgO/GXNB5OaAJHKS1faIMdPfu5+9+98YELq0dLIvhyY2H2HTLn2z3/JnnyOjFq04LWb23t+xx19Sl3E3y03mSl9hyRH9aVrHr3UW1wxUFDLwYafeZgtz2BXD6VAwAuECMj9Duyqll6k+n3pffR/7Pou9Aseuhl/zQWyEsiJ+roDHVWv3B4PN71v/nOemqkb85Ju/bvylgUfvycvbJ/67sknssHiXyLglBO/LI0q0MKyxGGbqmKoIFOa0ham19JNPWEpxNAt7RTghpIeiYYANo39fEnA47X76IfUgaP1CRCd0NqHVG1g4qRDK3key7HXPHFNqKFvF2bLX8qoQ2rplj58MUl541/Zmbsk3BhB06cYCTN3QZ956eFabum7Go/pvvTo3Ga7zKb2J4dMI54ik9RJp9f5FSDXfs1hucl8b+vc/FqEdsE3bnEUx0ISmoNlB33/XPyxy+ApA3fpxiXxO88Doyv226O2ljBapv4C+YW/FXPXI4w+u6ggz6tC05zIat2mDjX+xK673R/5K3OuVvbajlgg+7kvsRzFMbP0M1rzzz6AVuSukLCLHbzmRvLm4TDs8RPE4Vpg+v7SzuxTgfaZRgkJ1GGYUwc7d0392mYGIgMEES95CojMXsQK1TdU96AnA5cynFqPzJkDD47ax8TtT57DiDnEDeh6dbZ9U8Smeg+b85Rf9uS6+p7qhT1FQM3ygBGNeZZHtoRwCg5ixapCBV9fehJyW3dUA3/BZ5/6R85YIDMf0Y2X0hy/J/f5zK5owNgm+NtuQhltfUx/frt48pC7+3tevkBueWkjgqx45lFqTuEDG38D42gdEpVh4O4JxoTsHvPEvsX4HNLYTfkWvh+ZrR+4P3P7YSfr0cdcynKcj8X2Sz5mTBk158CACW7j1/6huOM2ychrkszqhj5YepfuQ/FW9mA9sg2TcEoRpHWVy2gFRIelpOvmADJAJRYcaPgkBTozmb+GYVz5rCitvaQpWKf+nz25rkM7kE0fTjbgDXL4AfVrqDo+CenUrNwlMlvzhZmWkpZFER585tp0yROf+S0/+ZTOqIuROyjnJfZnmyHIC77mUsoat0Q8wpd9FzPE5O6KiEOCeUA35xQafMt9+5SndkKVcRznY0sG4VUqk4yW7oYiCpDB/oU3eClwU49YPBSmdObQJp3aOsKbCMNAlrU7AaCyI3EEgbRwYCCzNKR5tVqzGEXo1nYNE/8L7/nVVfVn2+vR3HWOy+XfT93jnVJm+GEAAAAASUVORK5CYII=") repeat scroll center center;
} @else {
background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
}
}
}
.bkgd-transparent {
background: rgba(0, 0, 0, 0);
}
.bkgd-blue {
background-color: #{$color-background-button-primary};
}
.bkgd-blue-light {
background-color: #{$color-background-button-primary-hover};
}
.bkgd-green {
background-color: #{$color-background-button-success};
}
.bkgd-green-light {
background-color: #{$color-background-button-success-hover};
}
.bkgd-red {
background-color: #{$color-background-button-error};
}
.bkgd-red-light {
background-color: #{$color-background-button-error-hover};
}
.bkgd-orange {
background-color: #{$color-background-button-warning};
}
.bkgd-orange-light {
background-color: #{$color-background-button-warning-hover};
}
-41
View File
@@ -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%;
}
}*/
-256
View File
@@ -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-inputs};
&:not(.no-focus) {
&:focus {
box-shadow: 0px 0px 3px 0px #{$color-input-glow};
}
}
&:disabled {
cursor: not-allowed;
background-color: #{$color-background-code} !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-checkbox-unchecked};
&:checked {
background-color: #{$color-background-checkbox-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;
}
-122
View File
@@ -1,122 +0,0 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Site > Text */
/* Site > Text > Commons */
* {
color: #{$color-text-regular-normal};
}
/* Site > Text > Paragraphs */
p {
line-height: 1.2;
}
/* Site > Text > Links */
a, .a {
// Base
text-decoration: underline;
color: #{$color-link-blue};
& * {
color: #{$color-link-blue};
}
&:hover {
color: #{$color-link-blue-hover};
cursor: pointer;
& * {
color: #{$color-link-blue-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-regular-normal};
& * {
color: #{$color-text-regular-normal};
}
&:hover {
text-decoration: underline;
color: #{$color-link-hover};
& * {
color: #{$color-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;
}
/* 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;
}
}
}
@@ -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;
+28
View File
@@ -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;
}
+5
View File
@@ -0,0 +1,5 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Text > Links */
+40
View File
@@ -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%;
}
+38
View File
@@ -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;
}
}
+29
View File
@@ -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;
//}
+32
View File
@@ -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;
+10
View File
@@ -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} {
+29
View File
@@ -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;
}
+8
View File
@@ -0,0 +1,8 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Utils > Text */
.t-noselect {
user-select: none;
}
+9 -289
View File
@@ -1,299 +1,13 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
@use 'sass:color';
/* Variables > Palettes */
/* Variables > Palettes > Apollo */
// https://lospec.com/palette-list/apollo
$color-apollo-00: #172038;
$color-apollo-01: #253a5e;
$color-apollo-02: #3c5e8b;
$color-apollo-03: #4f8fba;
$color-apollo-04: #73bed3;
$color-apollo-05: #a4dddb;
$color-apollo-06: #19332d;
$color-apollo-07: #25562e;
$color-apollo-08: #468232;
$color-apollo-09: #75a743;
$color-apollo-10: #a8ca58;
$color-apollo-11: #d0da91;
$color-apollo-12: #4d2b32;
$color-apollo-13: #7a4841;
$color-apollo-14: #ad7757;
$color-apollo-15: #c09473;
$color-apollo-16: #d7b594;
$color-apollo-17: #e7d5b3;
$color-apollo-18: #341c27;
$color-apollo-19: #602c2c;
$color-apollo-20: #884b2b;
$color-apollo-21: #be772b;
$color-apollo-22: #de9e41;
$color-apollo-23: #e8c170;
$color-apollo-24: #241527;
$color-apollo-25: #411d31;
$color-apollo-26: #752438;
$color-apollo-27: #a53030;
$color-apollo-28: #cf573c;
$color-apollo-29: #da863e;
$color-apollo-30: #1e1d39;
$color-apollo-31: #402751;
$color-apollo-32: #7a367b;
$color-apollo-33: #a23e8c;
$color-apollo-34: #c65197;
$color-apollo-35: #df84a5;
$color-apollo-36: #090a14;
$color-apollo-37: #10141f;
$color-apollo-38: #151d28;
$color-apollo-39: #202e37;
$color-apollo-40: #394a50;
$color-apollo-41: #577277;
$color-apollo-42: #819796;
$color-apollo-43: #a8b5b2;
$color-apollo-44: #c7cfcc;
$color-apollo-45: #ebede9;
$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%);
$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%);
$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%);
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
/* Variables > Palettes > Material UI */
// https://materialui.co/colors
$color-material-blueGrey-50: #eceff1;
$color-material-blueGrey-100: #cfd8dc;
$color-material-blueGrey-200: #b0bec5;
$color-material-blueGrey-300: #90a4ae;
$color-material-blueGrey-400: #78909c;
$color-material-blueGrey-500: #607d8b;
$color-material-blueGrey-600: #546e7a;
$color-material-blueGrey-700: #455a64;
$color-material-blueGrey-800: #37474f;
$color-material-blueGrey-900: #263238;
$color-material-blueGrey-1000: #151D21;
$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%);
//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%);
$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%);
/* Variables > Palettes > WinUI 3 */
$color-winui-00: #191919;
$color-winui-01: #1D1D1D;
$color-winui-02: #202020;
$color-winui-03: #232323;
$color-winui-04: #272727;
$color-winui-05: #323232;
$color-winui-06: #3E3E3E;
// https://flatuicolors.com/palette/defo
/* Variables > Palettes > Misc */
//$color-test-01: mix(#7b6aa5, #000000, 33%);
//$color-test-02: #007c7d;
/* Variables > Colors Mappings */
$color-unset: $color-apollo-34;
/* Variables > Theme selection */
// Available themes:
// * Teal Supreme (teal)
// * WinUI 3 (winui)
// * La Moiti Leune (moon)
// * NibblePoker (nibblepoker)
$theme: nibblepoker;
/* Variables > Colors Mappings > Backgrounds & Borders */
$color-background-main: map-get((
teal: $color-apollo-custom-02,
winui: $color-winui-04,
moon: $color-unset,
nibblepoker: #24252B,
), $theme);
$color-background-surround: map-get((
teal: $color-apollo-custom-00,
winui: $color-winui-02,
moon: $color-unset,
nibblepoker: #1D1E22,
), $theme);
// Used as the background-color in the main's rounded corners
$color-background-body: $color-background-surround;
// Used in stylized headings
$color-background-main-headings: map-get((
teal: $color-background-surround,
winui: $color-unset,
moon: $color-unset,
nibblepoker: $color-background-surround,
), $theme);
// FIXME: Remove its usage !
// Left: Code, Kbd, Scrollbar ???
$color-border-all: $color-unset; // Default border
$color-border-light: $color-unset; // For .b-light class (No longer exists !)
/* Variables */
// Used to separate the 'main' from the 'surround'.
$color-border-surround: map-get((
teal: $color-apollo-38,
winui: $color-winui-01,
moon: $color-unset,
nibblepoker: #141417,
), $theme);
// Used as the border for all element inside the "main".
// It probably influences more stuff, but I can't be bothered to fix this...
$color-border-main: map-get((
teal: $color-apollo-38, // $color-apollo-custom-20;
winui: $color-winui-03,
moon: $color-unset,
nibblepoker: $color-border-surround,
), $theme);
// TEMP !!!
$color-border-all: $color-border-main;
$color-background-code: map-get((
teal: $color-apollo-custom-20,
winui: $color-unset,
moon: $color-unset,
nibblepoker: mix($color-background-main, $color-background-surround, 25%),
), $theme);
$color-border-code: map-get((
teal: #{$color-border-surround}CF,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #{$color-border-surround}CF,
), $theme);
$color-background-table-main: map-get((
teal: $color-apollo-custom-01,
winui: $color-unset,
moon: $color-unset,
nibblepoker: mix($color-background-main, $color-background-surround, 50%),
), $theme);
$color-background-table-dual: map-get((
teal: $color-apollo-custom-00,
winui: $color-unset,
moon: $color-unset,
nibblepoker: mix($color-background-main, $color-background-surround, 12.5%),
), $theme);
$color-table-border: map-get((
teal: $color-apollo-39,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #{$color-border-surround}CF,
), $theme);
$color-background-inputs: map-get((
teal: $color-apollo-40,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #2d2f36,
), $theme);
// TODO: Implement better ones !
$color-background-button: map-get((
teal: $color-apollo-40,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #2d2f36,
), $theme);
$color-background-button-hover: map-get((
teal: $color-apollo-custom-10,
winui: $color-unset,
moon: $color-unset,
nibblepoker: #373841,
), $theme);
$color-background-checkbox-checked: $color-apollo-08;
$color-background-checkbox-unchecked: $color-apollo-27;
//$color-background-checkbox-disabled: $color-background-button;
$color-background-radio-checked: $color-apollo-08;
$color-background-radio-unchecked: $color-apollo-27;
//$color-background-radio-disabled: $color-background-button-hover;
$color-background-button-primary: #{$color-apollo-custom-30};
$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
$color-background-button-success: #{$color-apollo-07};
$color-background-button-success-hover: mix($color-apollo-07, $color-apollo-08, 50%);
$color-background-button-error: #{$color-apollo-26};
$color-background-button-error-hover: #{$color-apollo-27};
$color-background-button-warning: #{$color-apollo-20};
$color-background-button-warning-hover: #{$color-apollo-21};
// If not set to `-1`, will auto define a low-priority size for headers.
$text-weight-header: 600;
/* Variables > Colors Mappings > Text */
$color-text-regular-normal: $color-apollo-45;
$color-text-inputs: $color-apollo-45;
$color-text-muted: #{$color-apollo-45}E0;
$color-text-muted-super: #{$color-apollo-45}C0;
$color-link-hover: rgb(253, 255, 251);
// Should be a mix of 03-04 and 04-05.
$color-link-blue: #{$color-apollo-04};
$color-link-blue-hover: #{$color-apollo-05};
//$color-border-all: $color-apollo-38;
//$color-border-light: $color-apollo-custom-20;
$color-input-glow: $color-apollo-02;
//$color-wedge-blue-background: $color-apollo-03;
// Still used for wedges !!! - Nope, it looked bad with the new colors !
//$color-wedge-blue-border: $color-apollo-02;
//$color-background-body: $color-apollo-custom-00;
//$color-background-main: $color-apollo-custom-02;
//$color-background-surround: $color-apollo-custom-00;
//
//// TMP V2
//$color-background-body: $color-material-blueGrey-900;
//$color-background-main: $color-material-blueGrey-950;
//$color-background-surround: $color-material-blueGrey-900;
/* Variables > Scrollbar */
//$color-scrollbar-border: rgba(0, 0, 0, 0.15);
$color-scrollbar-border: $color-border-surround;
$scrollbar-size: 1.25em;
@@ -319,3 +33,9 @@ $content-search-image-size: 128px;
$z-index-sidebar: 5;
$z-index-lang-dropdown: 10;
$z-index-modal: 99;
/* Variables > Themes & Overrides */
//@import "themes/theme_unset";
//@import "old/parts/theme_nibblepoker_v2";
@import "old/parts/theme_nibblepoker_v3";
-4
View File
@@ -1,18 +1,14 @@
floats
grids mobile sizes
inputs
composed element gallery
body layout
display utilities
size utilities
scrolling utilities
media
modal
code
borders
custom elements
* wedge
* ???
bkgd color if grid disabled