aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Fixed hidden linkes, Changed color palette, may change later

Browse Source 
Update index.php, backgrounds.php, and 12 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2026-05-16 18:02:36 +02:00
parent 91098bc437
commit d622f59ba1
13 changed files with 303 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
htdocs/index.php
Vendored
+1 -1
View File
@@ -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">
htdocs/parts/backgrounds.php
Vendored
+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>
htdocs/parts/core/inputs.php
Vendored
+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>
htdocs/parts/examples/inputs.php
Vendored
+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>
htdocs/parts/sidebar.php
Vendored
+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>
readme.md
+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/old/core)
### Site
### Custom
## License
The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0)
scss/defaults/defaults-backgrounds.scss
+1
View File
@@ -6,6 +6,7 @@ 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};
}
scss/defaults/defaults-code.scss
+8 -4
View File
@@ -9,13 +9,14 @@ code, .code, kbd, .t-monospace {
// For large blocks
//code { }
.code, kbd, code {
background-color: #{$color-background-code};
}
// For inline spans
// We're applying the equivalent of `.r-s.px-xs.px-s`
// Kinda goes against the core ideas, but it would be annoying without it.
.code, kbd {
background-color: #{$color-background-code};
border: 1px solid;
// Using '.r-s'
@@ -33,10 +34,13 @@ code, .code, kbd, .t-monospace {
// 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);
}
scss/defaults/text/defaults-text-links.scss
+4 -2
View File
@@ -46,10 +46,12 @@ a, .a {
&:hover {
text-decoration: underline;
color: #{$color-text-link-hover};
//color: #{$color-text-link-hover};
color: #{$color-text-generic};
& * {
color: #{$color-text-link-hover};
//color: #{$color-text-link-hover};
color: #{$color-text-generic};
}
// FIXME: Not working, big F
scss/elements/elements-backgrounds.scss
+8
View File
@@ -3,6 +3,10 @@
/* Elements > Backgrounds */
.bkgd-darkest {
background: $color-background-gray-darkest;
}
.bkgd-dark {
background: $color-background-gray-dark;
}
@@ -15,6 +19,10 @@
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 {
scss/old/parts/theme_nibblepoker.scss → scss/old/parts/theme_nibblepoker_v2.scss
+5 -4
View File
@@ -42,9 +42,12 @@ $color-background-orange-light: #{$color-apollo-21};
// Body parts
$color-background-main: $color-background-gray-light;
$color-background-body: $color-background-gray-dark;
$color-background-main: $color-background-gray-medium;
$color-background-surround: $color-background-gray-dark;
$color-background-body: $color-background-surround;
$color-background-grid-image: $color-background-surround;
// Cards & Other elements
@@ -74,8 +77,6 @@ $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;
$color-background-grid-image: $color-background-gray-medium;
// Borders
$color-border-light: #141417;
scss/old/parts/theme_nibblepoker_v3.scss
+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;
scss/variables.scss
+2 -1
View File
@@ -37,4 +37,5 @@ $z-index-modal: 99;
/* Variables > Themes & Overrides */
//@import "themes/theme_unset";
@import "old/parts/theme_nibblepoker";
//@import "old/parts/theme_nibblepoker_v2";
@import "old/parts/theme_nibblepoker_v3";