Initial commit
Update .gitignore, LICENSE-CC0, and 70 more files...
This commit is contained in:
8
scss/config.scss
Normal file
8
scss/config.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
// Add the "w-000px"/"h-000px" classes.
|
||||
$add-px-sizing-rules: false;
|
||||
|
||||
$nibblepoker-background-root: "./";
|
||||
|
||||
$use-b64-backgrounds: true;
|
||||
64
scss/core/border.scss
Normal file
64
scss/core/border.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Borders */
|
||||
|
||||
.b, .border {
|
||||
border: 1px solid #{$color-border-all};
|
||||
}
|
||||
|
||||
.b-0 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@mixin border-maker($side-key, $side-css-key) {
|
||||
.b#{$side-key} {
|
||||
border-#{$side-css-key}: 1px solid #{$color-border-all};
|
||||
}
|
||||
.b#{$side-key}-0 {
|
||||
border-#{$side-css-key}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include border-maker("t", "top");
|
||||
@include border-maker("b", "bottom");
|
||||
@include border-maker("l", "left");
|
||||
@include border-maker("r", "right");
|
||||
|
||||
.bx {
|
||||
border-left: 1px solid #{$color-border-all};
|
||||
border-right: 1px solid #{$color-border-all};
|
||||
}
|
||||
.bx-0 {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.by {
|
||||
border-top: 1px solid #{$color-border-all};
|
||||
border-bottom: 1px solid #{$color-border-all};
|
||||
}
|
||||
.by-0 {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
//.border {
|
||||
// border: 1px solid;
|
||||
//
|
||||
// //&.b-light {
|
||||
// // border: 1px solid #{$color-border-light};
|
||||
// //}
|
||||
//}
|
||||
|
||||
//main {
|
||||
// .border {
|
||||
// border: 1px solid #{$color-border-main};
|
||||
// }
|
||||
//}
|
||||
|
||||
//* {
|
||||
// .dark-mode & {
|
||||
// border-color: #{$color-border-all};
|
||||
// }
|
||||
//}
|
||||
|
||||
19
scss/core/containers.scss
Normal file
19
scss/core/containers.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
18
scss/core/display.scss
Normal file
18
scss/core/display.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Display */
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.o-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Notes:
|
||||
// * 'core/grid.scss' defines '.d-grid' ! (Add here if grids are disabled !)
|
||||
77
scss/core/flex.scss
Normal file
77
scss/core/flex.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Flex */
|
||||
|
||||
// Display properties
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.d-inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
// Content justification
|
||||
.flex-justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex-justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex-justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.flex-justify-left {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.flex-justify-right {
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
// ???
|
||||
|
||||
.flex-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// Missing: start | end
|
||||
|
||||
.flex-direction-row, .flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-direction-row-reverse, .flex-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.flex-direction-column, .flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-direction-column-reverse, .flex-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flex-fill {
|
||||
-ms-flex: 1 1 auto !important;
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
17
scss/core/float.scss
Normal file
17
scss/core/float.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Float */
|
||||
|
||||
.fl, .f-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr, .f-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fn, .f-none {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// TODO: Add more types
|
||||
45
scss/core/grid.scss
Normal file
45
scss/core/grid.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Grids */
|
||||
|
||||
.grid, .d-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@mixin grid-col-maker($col-count, $middle-part) {
|
||||
.grid-col-#{$middle-part}#{$col-count}, .col-#{$middle-part}#{$col-count} {
|
||||
grid-template-columns: repeat(#{$col-count}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-gap-maker($gap-size-key, $gap-size-value) {
|
||||
.grid-gap-#{$gap-size-key}, .gap-#{$gap-size-key} {
|
||||
grid-gap: #{$gap-size-value};
|
||||
}
|
||||
}
|
||||
|
||||
// Defining rules for all devices.
|
||||
@include grid-col-maker("1", "");
|
||||
@include grid-col-maker("2", "");
|
||||
@include grid-col-maker("3", "");
|
||||
@include grid-col-maker("4", "");
|
||||
@include grid-col-maker("6", "");
|
||||
@include grid-col-maker("8", "");
|
||||
|
||||
@include grid-gap-maker("xs", calc(#{$grid-gap-base-size} * 0.5));
|
||||
@include grid-gap-maker("s", calc(#{$grid-gap-base-size} * 0.75));
|
||||
@include grid-gap-maker("m", #{$grid-gap-base-size});
|
||||
@include grid-gap-maker("l", calc(#{$grid-gap-base-size} * 1.5));
|
||||
@include grid-gap-maker("xl", calc(#{$grid-gap-base-size} * 2.0));
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
@include grid-col-maker("1", "medium-");
|
||||
@include grid-col-maker("2", "medium-");
|
||||
@include grid-col-maker("3", "medium-");
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@include grid-col-maker("1", "mobile-");
|
||||
@include grid-col-maker("2", "mobile-");
|
||||
@include grid-col-maker("3", "mobile-");
|
||||
}
|
||||
29
scss/core/lists.scss
Normal file
29
scss/core/lists.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Lists */
|
||||
|
||||
ul:not(.no-bullet) {
|
||||
padding-left: 1.5rem;
|
||||
|
||||
&> li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
ol:not(.no-bullet) {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
//list-style-type: disc;
|
||||
|
||||
/*&> li {
|
||||
list-style-type: circle;
|
||||
}*/
|
||||
}
|
||||
|
||||
/*ul.no-bullet, ol.no-bullet {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}*/
|
||||
20
scss/core/overflow.scss
Normal file
20
scss/core/overflow.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Overflow */
|
||||
|
||||
@mixin overflow-maker($overflow-type) {
|
||||
.o-#{$overflow-type} {
|
||||
overflow: #{$overflow-type};
|
||||
}
|
||||
.ox-#{$overflow-type} {
|
||||
overflow-x: #{$overflow-type};
|
||||
}
|
||||
.oy-#{$overflow-type} {
|
||||
overflow-y: #{$overflow-type};
|
||||
}
|
||||
}
|
||||
|
||||
@include overflow-maker(auto);
|
||||
@include overflow-maker(scroll);
|
||||
@include overflow-maker(clip);
|
||||
@include overflow-maker(hidden);
|
||||
7
scss/core/position.scss
Normal file
7
scss/core/position.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Positions */
|
||||
|
||||
.p-relative {
|
||||
position: relative;
|
||||
}
|
||||
29
scss/core/rounding/corner.scss
Normal file
29
scss/core/rounding/corner.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Rounding > Corner */
|
||||
@mixin corner-rounding-maker($size-key, $size-value) {
|
||||
.rtl-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
}
|
||||
.rtr-#{$size-key} {
|
||||
border-top-right-radius: #{$size-value};
|
||||
}
|
||||
.rbl-#{$size-key} {
|
||||
border-bottom-left-radius: #{$size-value};
|
||||
}
|
||||
.rbr-#{$size-key} {
|
||||
border-bottom-right-radius: #{$size-value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > 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});
|
||||
@include corner-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Corner > Fixed Sizes */
|
||||
@include corner-rounding-maker("0", 0);
|
||||
@include corner-rounding-maker("r", 50%);
|
||||
22
scss/core/rounding/global.scss
Normal file
22
scss/core/rounding/global.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Rounding > Global */
|
||||
@mixin global-rounding-maker($size-key, $size-value) {
|
||||
//, .rounding-#{$size-key}
|
||||
.r-#{$size-key} {
|
||||
border-radius: #{$size-value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > 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});
|
||||
@include global-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
|
||||
@include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Global > Fixed Sizes */
|
||||
@include global-rounding-maker("0", 0);
|
||||
@include global-rounding-maker("r", 50%);
|
||||
33
scss/core/rounding/sided.scss
Normal file
33
scss/core/rounding/sided.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Rounding > Sided */
|
||||
@mixin sided-rounding-maker($size-key, $size-value) {
|
||||
.rt-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
border-top-right-radius: #{$size-value};
|
||||
}
|
||||
.rb-#{$size-key} {
|
||||
border-bottom-left-radius: #{$size-value};
|
||||
border-bottom-right-radius: #{$size-value};
|
||||
}
|
||||
.rl-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
border-bottom-left-radius: #{$size-value};
|
||||
}
|
||||
.rr-#{$size-key} {
|
||||
border-top-right-radius: #{$size-value};
|
||||
border-bottom-right-radius: #{$size-value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > 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});
|
||||
@include sided-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Sided > Fixed Sizes */
|
||||
@include sided-rounding-maker("0", 0);
|
||||
@include sided-rounding-maker("r", 50%);
|
||||
56
scss/core/sizing.scss
Normal file
56
scss/core/sizing.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Sizing */
|
||||
|
||||
// 100 %
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.wm-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.hm-full {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// 50 %
|
||||
.w-half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.h-half {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
// Pixels Sizing (Deprecated, disabled by default, use custom rules !)
|
||||
@if($add-px-sizing-rules) {
|
||||
// 50, 100, ..., 250 px
|
||||
@for $_ from 1 through 5 {
|
||||
$pxSize: $_ * 50;
|
||||
|
||||
.w-#{$pxSize} {
|
||||
width: #{$pxSize}px;
|
||||
}
|
||||
|
||||
.h-#{$pxSize} {
|
||||
height: #{$pxSize}px;
|
||||
}
|
||||
}
|
||||
|
||||
// 300, 400, ..., 900 px
|
||||
@for $_ from 3 through 9 {
|
||||
$pxSize: $_ * 100;
|
||||
|
||||
.w-#{$pxSize} {
|
||||
width: #{$pxSize}px;
|
||||
}
|
||||
|
||||
.h-#{$pxSize} {
|
||||
height: #{$pxSize}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
scss/core/spacing/axis.scss
Normal file
39
scss/core/spacing/axis.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Spacing > Sided */
|
||||
@mixin axis-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}x-#{$size-key} {
|
||||
#{$type-property}-left: #{$size-value};
|
||||
#{$type-property}-right: #{$size-value};
|
||||
}
|
||||
.#{$type-key}y-#{$size-key} {
|
||||
#{$type-property}-top: #{$size-value};
|
||||
#{$type-property}-bottom: #{$size-value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > 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));
|
||||
@include axis-spacing-maker("m", "margin", "m", #{$margin-base-size});
|
||||
@include axis-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
|
||||
@include axis-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
@include axis-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include axis-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include axis-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
|
||||
@include axis-spacing-maker("p", "padding", "m", #{$margin-base-size});
|
||||
@include axis-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
|
||||
@include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Fixed Sizes */
|
||||
@include axis-spacing-maker("m", "margin", "0", 0);
|
||||
@include axis-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Others */
|
||||
@include axis-spacing-maker("m", "margin", "auto", auto);
|
||||
@include axis-spacing-maker("p", "padding", "auto", auto);
|
||||
46
scss/core/spacing/global.scss
Normal file
46
scss/core/spacing/global.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Spacing > Global */
|
||||
@mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}-#{$size-key} {
|
||||
#{$type-property}: #{$size-value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > 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));
|
||||
@include global-spacing-maker("m", "margin", "m", #{$margin-base-size});
|
||||
@include global-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
|
||||
@include global-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
@include global-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include global-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include global-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
|
||||
@include global-spacing-maker("p", "padding", "m", #{$margin-base-size});
|
||||
@include global-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
|
||||
@include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Fixed Sizes */
|
||||
@include global-spacing-maker("m", "margin", "0", 0);
|
||||
@include global-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Others */
|
||||
@include global-spacing-maker("m", "margin", "auto", auto);
|
||||
@include global-spacing-maker("p", "padding", "auto", auto);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Global > Manual Extras */
|
||||
.p-xxxs {
|
||||
padding: calc(#{$margin-base-size} * 0.125);
|
||||
}
|
||||
.p-mxs {
|
||||
padding: calc(#{$margin-base-size} * 0.375);
|
||||
}
|
||||
.p-ms {
|
||||
padding: calc(#{$margin-base-size} * 0.625);
|
||||
}
|
||||
43
scss/core/spacing/sided.scss
Normal file
43
scss/core/spacing/sided.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Utilities > Spacing > Sided */
|
||||
@mixin sided-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}t-#{$size-key} {
|
||||
#{$type-property}-top: #{$size-value};
|
||||
}
|
||||
.#{$type-key}b-#{$size-key} {
|
||||
#{$type-property}-bottom: #{$size-value};
|
||||
}
|
||||
.#{$type-key}l-#{$size-key} {
|
||||
#{$type-property}-left: #{$size-value};
|
||||
}
|
||||
.#{$type-key}r-#{$size-key} {
|
||||
#{$type-property}-right: #{$size-value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Utilities > 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));
|
||||
@include sided-spacing-maker("m", "margin", "m", #{$margin-base-size});
|
||||
@include sided-spacing-maker("m", "margin", "l", calc(#{$margin-base-size} * 1.5));
|
||||
@include sided-spacing-maker("m", "margin", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
@include sided-spacing-maker("p", "padding", "xxs", calc(#{$margin-base-size} * 0.25));
|
||||
@include sided-spacing-maker("p", "padding", "xs", calc(#{$margin-base-size} * 0.5));
|
||||
@include sided-spacing-maker("p", "padding", "s", calc(#{$margin-base-size} * 0.75));
|
||||
@include sided-spacing-maker("p", "padding", "m", #{$margin-base-size});
|
||||
@include sided-spacing-maker("p", "padding", "l", calc(#{$margin-base-size} * 1.5));
|
||||
@include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Fixed Sizes */
|
||||
@include sided-spacing-maker("m", "margin", "0", 0);
|
||||
@include sided-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Utilities > Spacing > Sided > Others */
|
||||
@include sided-spacing-maker("m", "margin", "auto", auto);
|
||||
@include sided-spacing-maker("p", "padding", "auto", auto);
|
||||
168
scss/core/text.scss
Normal file
168
scss/core/text.scss
Normal file
@@ -0,0 +1,168 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
17
scss/debugger.scss
Normal file
17
scss/debugger.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
// NibblePoker CSS Debugger - CC0 1.0 (Public Domain)
|
||||
|
||||
.debug {
|
||||
border: 1px dotted deeppink !important;
|
||||
& *.debug {
|
||||
border: 1px dotted yellow !important;
|
||||
& *.debug {
|
||||
border: 1px dotted cyan !important;
|
||||
& *.debug {
|
||||
border: 1px dotted lime !important;
|
||||
& *.debug {
|
||||
border: 1px dotted red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
scss/external/reset.scss
vendored
Normal file
60
scss/external/reset.scss
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
* -----------------------------------------------------------------------------
|
||||
* Reset.css
|
||||
* -----------------------------------------------------------------------------
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
* -----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/* External > Reset.css */
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small,
|
||||
strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th,
|
||||
td, main, canvas, embed, footer, header, nav, section, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
footer, header, nav, section, main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after, q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
75
scss/nibblepoker.scss
Normal file
75
scss/nibblepoker.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* -----------------------------------------------------------------------------
|
||||
* NibblePoker CSS Theme
|
||||
* -----------------------------------------------------------------------------
|
||||
* Author: Herwin Bozet
|
||||
* License: CC0 1.0 (Public Domain)
|
||||
* Source: ???
|
||||
* -----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/* Config */
|
||||
@import 'config';
|
||||
|
||||
/* Externals */
|
||||
@import 'external/reset'; // Doesn't reset checkboxes !
|
||||
|
||||
/* Variables */
|
||||
@import 'variables';
|
||||
|
||||
/* 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';
|
||||
|
||||
/* Core > Rounding */
|
||||
@import 'core/rounding/global';
|
||||
@import 'core/rounding/sided';
|
||||
@import 'core/rounding/corner';
|
||||
|
||||
/* Core > Spacing */
|
||||
@import 'core/spacing/global';
|
||||
@import 'core/spacing/axis';
|
||||
@import 'core/spacing/sided';
|
||||
|
||||
/* 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)
|
||||
|
||||
/* 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';
|
||||
|
||||
/* Site > Misc */
|
||||
@import 'site/borders'; // Applies the colors mostly, the size are in the elements !
|
||||
@import 'site/backgrounds';
|
||||
|
||||
/* 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';
|
||||
|
||||
/* Extras */
|
||||
@import 'site/splide';
|
||||
31
scss/site/backgrounds.scss
Normal file
31
scss/site/backgrounds.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Misc > Backgrounds */
|
||||
|
||||
.bkgd-blank {
|
||||
background: #{$color-background-main-headings};
|
||||
}
|
||||
|
||||
// The element rules override rules in `base.scss ~94`
|
||||
.bkgd-surround, header, nav, footer {
|
||||
//background: #{$color-background-surround};
|
||||
background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-blank-dark {
|
||||
background: mix($color-background-main, $color-background-surround, 50%);
|
||||
}
|
||||
|
||||
.bkgd-grid {
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-squares {
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/bright-squares-p100-0.125.png") repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-math {
|
||||
//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
|
||||
// FIXME: Fix the code using this class !!!
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
|
||||
}
|
||||
41
scss/site/base.scss
Normal file
41
scss/site/base.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
// 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%;
|
||||
}
|
||||
}*/
|
||||
36
scss/site/borders.scss
Normal file
36
scss/site/borders.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
|
||||
.border, code, .code, kbd {
|
||||
border-color: #{$color-border-surround};
|
||||
|
||||
//&.b-light {
|
||||
// border: 1px solid #{$color-border-light};
|
||||
//}
|
||||
}
|
||||
|
||||
code, .code, kbd {
|
||||
border-color: #{$color-border-code};
|
||||
}
|
||||
|
||||
main {
|
||||
.border {
|
||||
border-color: #{$color-border-main};
|
||||
|
||||
//&.b-light {
|
||||
// border: 1px solid #{$color-border-light};
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
table.stylish {
|
||||
// Fixing border issues when using rounded corners by using a "fake" one using the background's color.
|
||||
// It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently.
|
||||
// I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit.
|
||||
&.border {
|
||||
background-color: #{$color-border-main};
|
||||
}
|
||||
}
|
||||
|
||||
// Special fix for select inputs' dropdown menu
|
||||
//select.border option::before {
|
||||
// border: 1px solid deeppink !important;
|
||||
//}
|
||||
38
scss/site/code.scss
Normal file
38
scss/site/code.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
code, .code, kbd {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
// For large blocks
|
||||
code {
|
||||
|
||||
}
|
||||
|
||||
// For spans
|
||||
.code, kbd {
|
||||
background-color: #{$color-background-code};
|
||||
|
||||
border: 1px solid;
|
||||
|
||||
// Using '.r-s'
|
||||
border-radius: calc(#{$border-base-radius} * 0.75);
|
||||
|
||||
// Using the middle of '.px-xs' and '.px-s'
|
||||
padding-left: calc(#{$border-base-radius} * 0.625);
|
||||
padding-right: calc(#{$border-base-radius} * 0.625);
|
||||
}
|
||||
|
||||
// Removes the background added by highlight.js
|
||||
.code-line {
|
||||
background: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
code, .code, .code-line {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
// FIXME: Use a proper class !!!
|
||||
.code:not(code) {
|
||||
padding: calc(#{$border-base-radius} * 0.625);
|
||||
}
|
||||
37
scss/site/content.scss
Normal file
37
scss/site/content.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.content-search-entry {
|
||||
min-height: #{$content-search-image-size};
|
||||
}
|
||||
|
||||
.content-search-image {
|
||||
width: #{$content-search-image-size};
|
||||
height: #{$content-search-image-size};
|
||||
float: left;
|
||||
filter: drop-shadow(0 0 0.2rem #000000CF);
|
||||
}
|
||||
|
||||
.content-search-entry > p {
|
||||
width: 90%;
|
||||
//max-width: 800px;
|
||||
}
|
||||
|
||||
.content-error-text {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
// Image shown in the smaller inline content cards
|
||||
.content-card-image {
|
||||
width: calc(#{$content-search-image-size} * 0.75);
|
||||
height: calc(#{$content-search-image-size} * 0.75);
|
||||
float: left;
|
||||
//filter: drop-shadow(0 0 0.2rem #000000CF);
|
||||
//box-shadow: 0px 0px 20px 2px #000000CF inset;
|
||||
}
|
||||
|
||||
// Should be a span with IMG tags inside it.
|
||||
.app-card-icons {
|
||||
&>img {
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
54
scss/site/hr.scss
Normal file
54
scss/site/hr.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Horizontal Rule */
|
||||
|
||||
hr {
|
||||
border-color: #{$color-border-all};
|
||||
|
||||
&.subtle, &.hr-subtle {
|
||||
//background-color: rgba(0,0,0,0) !important;
|
||||
//background: #5d5f61;
|
||||
//background: radial-gradient(circle, rgba(83, 85, 87, 0.8) 0%, rgba(65, 67, 69, 0.65) 75%, rgba(17, 20, 23, 0) 100%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&.dashed, &.hr-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
&.dotted, &.hr-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
&.double, &.hr-double, &.thick, &.hr-thick {
|
||||
border-style: double;
|
||||
}
|
||||
|
||||
// Default !
|
||||
//&.inset, &.inset {
|
||||
// border-style: inset;
|
||||
//}
|
||||
|
||||
&.outset, &.hr-outset {
|
||||
border-style: outset;
|
||||
}
|
||||
|
||||
&.cut-here, &.ht-cut-here {
|
||||
border-width: 1px 0 0 0;
|
||||
height: 9px;
|
||||
|
||||
&:after {
|
||||
content: '\002702';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #{$color-border-all};
|
||||
font-size: 18px;
|
||||
top: -8px;
|
||||
left: 40px;
|
||||
|
||||
font-family: serif;
|
||||
//filter: grayscale(1);
|
||||
//transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
127
scss/site/image.scss
Normal file
127
scss/site/image.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.img-text {
|
||||
height: 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.btn-img {
|
||||
display: flex;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.img-showcase {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.img-profile {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
.img-contributor, .img-contributor > img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
transition: width 0.175s ease-in-out, height 0.175s ease-in-out, opacity 0.175s ease-in-out;
|
||||
|
||||
&:hover, &:hover > img {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
}
|
||||
|
||||
&.kitty {
|
||||
cursor: grab;
|
||||
}
|
||||
}
|
||||
|
||||
.img-contributor {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 6px 0 rgba(0,0,0,0.75);
|
||||
|
||||
&>img {
|
||||
position: absolute;
|
||||
|
||||
&:last-child {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
opacity: 0.0;
|
||||
}
|
||||
&>img:last-child {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//.align-v-t
|
||||
|
||||
#logo-sidebar, .logo-sidebar {
|
||||
filter: brightness(110%) grayscale(100%);
|
||||
//mix-blend-mode: multiply;
|
||||
//opacity: 40%;
|
||||
// Fixes the width to the size of the sidebar minus its padding. (15rem - 1rem * 2)
|
||||
width: 13rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Based on '#logo-sidebar'
|
||||
.logo-sidebar-v2 {
|
||||
filter: drop-shadow(0 0 0.15rem #0000007F) saturate(75%);
|
||||
width: 13rem;
|
||||
height: auto;
|
||||
|
||||
transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter;
|
||||
transition-duration: 0.4s;
|
||||
transition-timing-function: cubic-bezier(.25, .8, .25, 1.1);
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 0.15rem #0000007F) saturate(100%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#logo-footer {
|
||||
filter: brightness(110%) grayscale(100%);
|
||||
opacity: 40%;
|
||||
height: 1.8em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#error-page-skit {
|
||||
max-width: 40%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
filter: drop-shadow(0 0 0.25rem #0000007F);
|
||||
//opacity: 0.25;
|
||||
|
||||
//mix-blend-mode: multiply;
|
||||
//opacity: 0.2;
|
||||
|
||||
opacity: 0.4;
|
||||
|
||||
// Preventing the selection and dragging of the image for aesthetic reasons.
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Logo colors
|
||||
//.npl1, .npl6 {
|
||||
//}
|
||||
//
|
||||
//.npl2, .npl5 {
|
||||
//}
|
||||
//
|
||||
//.npl3, .npl4 {
|
||||
//}
|
||||
|
||||
140
scss/site/input.scss
Normal file
140
scss/site/input.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Checkbox */
|
||||
|
||||
input[type=checkbox] {
|
||||
width: 1.65em;
|
||||
height: 1.65em;
|
||||
background-color: #{$color-background-checkbox-unchecked};
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:checked {
|
||||
background-color: #{$color-background-checkbox-checked};
|
||||
}
|
||||
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Buttons */
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: #{$color-background-button};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-hover};
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: #{$color-background-button-primary};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-primary-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: #{$color-background-button-success};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-success-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: #{$color-background-button-error};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-error-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
//}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
&.no-resize {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
15
scss/site/layouts/commons.scss
Normal file
15
scss/site/layouts/commons.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Layouts */
|
||||
|
||||
/* Site > Layouts > Commons */
|
||||
|
||||
html, body {
|
||||
// Do not use 100vh, it includes the search bar !
|
||||
min-width: 100vw;
|
||||
min-height: 100%;
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
max-width: 100vw;
|
||||
max-height: 100%;
|
||||
}
|
||||
161
scss/site/layouts/generic.scss
Normal file
161
scss/site/layouts/generic.scss
Normal file
@@ -0,0 +1,161 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Layouts > Generic */
|
||||
|
||||
/* Site > Layouts > Generic > Main Grid */
|
||||
|
||||
body.layout-generic {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
gap: 0;
|
||||
|
||||
& > nav {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: #{$z-index-sidebar};
|
||||
}
|
||||
|
||||
& > header {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
|
||||
// Inner content
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
grid-template-rows: min-content;
|
||||
|
||||
& > h1 {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
& > #lang-selector {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
& > main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative; // Helps with some absolute alignments inside it
|
||||
}
|
||||
|
||||
& > footer {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Site > 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};
|
||||
}
|
||||
|
||||
& > header {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
& > main {
|
||||
grid-column: 1 / span 2;
|
||||
// TODO: Remove scrolling here
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Sidebar */
|
||||
|
||||
body.layout-generic {
|
||||
.sidebar {
|
||||
width: #{$size-sidebar};
|
||||
max-width: #{$size-sidebar};
|
||||
min-height: 100%;
|
||||
|
||||
&.retracted {
|
||||
width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
|
||||
|
||||
// Inverting the sidebar's states for mobile devices
|
||||
@media only screen and (max-width: 768px) {
|
||||
body.layout-generic {
|
||||
.sidebar {
|
||||
width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.retracted {
|
||||
width: #{$size-sidebar};
|
||||
max-width: #{$size-sidebar};
|
||||
min-height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
// Inherited from .p-m
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Main Extras */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
body.layout-generic {
|
||||
main {
|
||||
border-left: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
body.layout-generic {
|
||||
main {
|
||||
&.expanded {
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Site > Layouts > Generic > Transitions */
|
||||
|
||||
body.layout-generic {
|
||||
main, .sidebar {
|
||||
transition: width 0.4s, padding 0.4s, border-width 0.4s, border-radius 0.4s;
|
||||
transition-timing-function: cubic-bezier(.25, .8, .25, 1.1);
|
||||
}
|
||||
}
|
||||
19
scss/site/mobile.scss
Normal file
19
scss/site/mobile.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Fixes > Mobile */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
// Overrides the ".p-l" class used on "main".
|
||||
main {
|
||||
padding: calc(#{$margin-base-size} * 0.5) !important;
|
||||
}
|
||||
|
||||
// Overrides a style in "site/content.scss".
|
||||
.content-search-entry > p {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
34
scss/site/modal.scss
Normal file
34
scss/site/modal.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.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%;
|
||||
}
|
||||
62
scss/site/scrollbar.scss
Normal file
62
scss/site/scrollbar.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Elements > Scrollbars */
|
||||
|
||||
//@media (min-width: 769px) {
|
||||
*::-webkit-scrollbar {
|
||||
width: #{$scrollbar-size};
|
||||
height: #{$scrollbar-size};
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track:vertical {
|
||||
border-left: 1px solid #{$color-scrollbar-border};
|
||||
}
|
||||
|
||||
/**::-webkit-scrollbar-track:horizontal {
|
||||
border-top: 1px solid #{$color-scrollbar-border};
|
||||
}*/
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
border: 0.4rem solid transparent;
|
||||
background-clip: content-box;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
//* {
|
||||
// scrollbar-width: thin;
|
||||
// scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
|
||||
//}
|
||||
//*::-webkit-scrollbar-track {
|
||||
// border-color: rgba(255, 255, 255, 0.05);
|
||||
//}
|
||||
//*::-webkit-scrollbar-corner {
|
||||
// background-color: transparent;
|
||||
// border-color: rgba(255, 255, 255, 0.05);
|
||||
//}
|
||||
//* {
|
||||
// scrollbar-color: rgba(255, 255, 255, 0.25) #25282c;
|
||||
//}
|
||||
//}
|
||||
|
||||
/*.hide-scrollbar {
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
width: 0px;
|
||||
}
|
||||
}*/
|
||||
16
scss/site/splide.scss
Normal file
16
scss/site/splide.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Extras > Splide */
|
||||
|
||||
// Zoom-in effect for image galleries
|
||||
.splide li {
|
||||
transition: all 0.20s ease-in-out;
|
||||
}
|
||||
.splide li:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
// Generic max-height rule
|
||||
.splide, .splide * {
|
||||
max-height: 400px;
|
||||
}
|
||||
56
scss/site/table.scss
Normal file
56
scss/site/table.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
tr, td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table.stylish {
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #{$color-background-table-dual};
|
||||
}
|
||||
|
||||
tr:not(:last-of-type), th {
|
||||
border-bottom: 1.5px solid #{$color-table-border};
|
||||
}
|
||||
|
||||
tr:nth-child(2n), th {
|
||||
background-color: #{$color-background-table-main};
|
||||
}
|
||||
|
||||
td:not(:last-of-type), th:not(:last-of-type) {
|
||||
border-right: 1.5px solid #{$color-table-border};
|
||||
}
|
||||
|
||||
// See 'site/border.scss' for border fix.
|
||||
}
|
||||
|
||||
// Applying .p-xs and .p-s to all cells if needed
|
||||
// See 'core/spacing' for more info.
|
||||
.table-p-xs {
|
||||
td, th {
|
||||
padding: calc(#{$margin-base-size} * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.table-h-p-s {
|
||||
th {
|
||||
padding: calc(#{$margin-base-size} * 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.table-p-s {
|
||||
td, th {
|
||||
padding: calc(#{$margin-base-size} * 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
// Centers the cells' content vertically
|
||||
.table-v-center {
|
||||
tr, td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
122
scss/site/text.scss
Normal file
122
scss/site/text.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
// NibblePoker.lu CSS - MIT (C) 2023-2024 Bozet Herwin
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
scss/site/video.scss
Normal file
9
scss/site/video.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Video */
|
||||
|
||||
// FIXME: Does not respect the core tenets !
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
78
scss/site/wedge.scss
Normal file
78
scss/site/wedge.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Custom Elements > Wedge */
|
||||
|
||||
.wedge {
|
||||
position: absolute;
|
||||
//top: 0;
|
||||
//right: 0;
|
||||
|
||||
color: #{$color-text-regular-normal};
|
||||
background-color: #{$color-background-button};
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
//opacity: 0.875;
|
||||
|
||||
// https://codepen.io/setswon/pen/VJeXXq
|
||||
// Using a value of ~0.35 feels sluggish.
|
||||
//transition: color 0.25s ease;
|
||||
//transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
|
||||
|
||||
&:hover:not(.no-hover) {
|
||||
background-color: #{$color-background-button-hover};
|
||||
}
|
||||
|
||||
&.wedge-shadow {
|
||||
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: #{$color-background-button-primary};
|
||||
&:hover:not(.no-hover) {
|
||||
background-color: #{$color-background-button-primary-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: #{$color-background-button-success};
|
||||
&:hover:not(.no-hover) {
|
||||
background-color: #{$color-background-button-success-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: #{$color-background-button-error};
|
||||
&:hover:not(.no-hover) {
|
||||
background-color: #{$color-background-button-error-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: #{$color-background-button-warning};
|
||||
&:hover:not(.no-hover) {
|
||||
background-color: #{$color-background-button-warning-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.wedge-tr {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.wedge-br {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.wedge-tl {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.wedge-bl {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
315
scss/variables.scss
Normal file
315
scss/variables.scss
Normal file
@@ -0,0 +1,315 @@
|
||||
// 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 !)
|
||||
|
||||
// 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-checkbox-checked: $color-apollo-08;
|
||||
$color-background-checkbox-unchecked: $color-apollo-27;
|
||||
|
||||
$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-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};
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
|
||||
/* Variables > Others */
|
||||
|
||||
$border-base-radius: 5px;
|
||||
|
||||
$margin-base-size: 1rem;
|
||||
|
||||
$grid-gap-base-size: 1rem;
|
||||
|
||||
//$hr-base-height: 0.5rem; // Nope
|
||||
|
||||
$text-header-weight: 600;
|
||||
|
||||
$size-sidebar: 15rem;
|
||||
//$size-sidebar: 30rem;
|
||||
|
||||
$content-search-image-size: 128px;
|
||||
|
||||
/* Variables > Z Indexes */
|
||||
|
||||
$z-index-sidebar: 5;
|
||||
$z-index-lang-dropdown: 10;
|
||||
$z-index-modal: 99;
|
||||
Reference in New Issue
Block a user