Updated a couple pages, Finished new basic style, Removed tools from menu, Updated formula wizard, Other minor changes
Update .gitignore, .htaccess, and 32 more files...
This commit is contained in:
@@ -6,8 +6,10 @@
|
||||
background: #{$color-background-main-headings};
|
||||
}
|
||||
|
||||
.bkgd-surround {
|
||||
background: #{$color-background-surround};
|
||||
// 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 {
|
||||
@@ -23,5 +25,7 @@
|
||||
}
|
||||
|
||||
.bkgd-math {
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
|
||||
//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;
|
||||
}
|
||||
|
@@ -67,7 +67,8 @@ body {
|
||||
@media only screen and (max-width: 768px) {
|
||||
body {
|
||||
& > nav {
|
||||
border-right: 1px solid #{$color-border-all};
|
||||
//border-right: 1px solid #{$color-border-all};
|
||||
border-right: 1px solid #{$color-border-main};
|
||||
}
|
||||
|
||||
& > header {
|
||||
@@ -90,18 +91,19 @@ body {
|
||||
"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 !
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
|
||||
}
|
||||
|
||||
/* Site > Base > Sidebar */
|
||||
|
||||
// FIXME: For mobile, just use 2 media queries to define normal behaviour and inverted mobile behaviour.
|
||||
|
||||
// FIXME: Might be easier to have it as absolute, shift it left when closing and using a blank spacing div tbh...
|
||||
// Or nest content in div, and when retracted move it out at the same speed, idk...
|
||||
.sidebar {
|
||||
@@ -123,6 +125,34 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
// Inverting the sidebar's states for mobile devices
|
||||
@media only screen and (max-width: 768px) {
|
||||
.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 > Base > Main */
|
||||
|
||||
main {
|
||||
|
@@ -17,16 +17,17 @@
|
||||
//.align-v-t
|
||||
|
||||
#logo-sidebar {
|
||||
filter: grayscale(100%);
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 40%;
|
||||
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;
|
||||
}
|
||||
|
||||
#logo-footer {
|
||||
filter: grayscale(100%);
|
||||
filter: brightness(110%) grayscale(100%);
|
||||
opacity: 40%;
|
||||
height: 1.8em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
78
resources/NibblePoker/scss/site/scrollbar.scss
Normal file
78
resources/NibblePoker/scss/site/scrollbar.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
//@mixin overflow-maker($size-key, $value) {
|
||||
// .overflow-#{$size-key}-#{$value} {
|
||||
// overflow: auto;
|
||||
// }
|
||||
// .overflow-x-#{$size-key}-#{$value} {
|
||||
// border-top-left-radius: #{$value};
|
||||
// }
|
||||
// .overflow-y-#{$size-key}-#{$value} {
|
||||
// border-top-left-radius: #{$value};
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@include overflow-maker("0", auto);
|
||||
|
||||
/* Site > Elements > Scrollbars */
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.overflow-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}*/
|
Reference in New Issue
Block a user