Initial commit
Update .gitignore, LICENSE-CC0, and 70 more files...
This commit is contained in:
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user