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

Split and re-ordered SCSS files for easier overrides of defaults (#4)

Browse Source 
* Split SCSS for easier changes
* Re-ordered SCSS files for easier overrides of defaults
* Fixed padding classes with auto value
* Added theme """stub"""
This commit is contained in:
Herwin Bozet (NibblePoker)
2026-05-11 13:32:00 +02:00
committed by GitHub
parent 95ffb881f9
commit 91098bc437
68 changed files with 926 additions and 786 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/old/parts/theme_nibblepoker.scss
+110
View File
@@ -0,0 +1,110 @@
// 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-main: $color-background-gray-light;
$color-background-surround: $color-background-gray-dark;
$color-background-body: $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;
$color-background-grid-image: $color-background-gray-medium;
// 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;
scss/old/parts/theme_unset.scss
+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;
scss/old/trash/containers.scss
+19
View File
@@ -0,0 +1,19 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
/* Core > Containers */
.fluid-container {
position: relative;
width: 100%;
height: 100%;
// First children, or all, don't care tbh.
& > * {
position: absolute;
width: inherit;
height: inherit;
max-height: inherit;
overflow-y: auto;
overflow-x: hidden;
}
}
scss/old/trash/modal.scss
+34
View File
@@ -0,0 +1,34 @@
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
.modal {
position: absolute;
top: 0;
left: 0;
z-index: #{$z-index-modal};
background-color: #000000CF;
width: 100vw;
height: 100vh;
> #modal-content-cross {
cursor: pointer;
}
> #modal-content-inner {
position: absolute;
//background-color: #00aaaa;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 75vw;
margin-left: auto;
margin-right: auto;
display: grid;
place-items: center;
}
}
.modal-inner-image {
max-width: 100%;
max-height: 100%;
}
scss/old/trash/palettes.scss
+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;