Compare commits
4 Commits
master
..
3fbf08aea6
| Author | SHA1 | Date | |
|---|---|---|---|
 aziascreations
|
3fbf08aea6 | ||
|
aziascreations
|
f2833469dc | ||
|
aziascreations
|
fba4c20b47 | ||
|
aziascreations
|
ecf86920e7 |
@@ -1,2 +0,0 @@
|
||||
# Preventing this repo from turning into a PHP repository
|
||||
*.php linguist-vendored
|
||||
@@ -1,11 +1,11 @@
|
||||
name: Build Everything
|
||||
name: Compile SASS
|
||||
|
||||
on:
|
||||
push:
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
sass_compile:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
@@ -21,12 +21,6 @@ jobs:
|
||||
submodules: true
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Setup PHP
|
||||
uses: shivammathur/setup-php@v2
|
||||
with:
|
||||
php-version: '8.4'
|
||||
extensions: none
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
@@ -34,7 +28,7 @@ jobs:
|
||||
|
||||
- name: Install SASS Compiler
|
||||
run: |
|
||||
npm install -g sass
|
||||
npm install -g html-minifier sass
|
||||
|
||||
- name: Compile SASS
|
||||
run: |
|
||||
@@ -63,21 +57,3 @@ jobs:
|
||||
if-no-files-found: error
|
||||
retention-days: 90
|
||||
compression-level: 9
|
||||
|
||||
- name: Pre-render PHP File
|
||||
run: |
|
||||
cd htdocs
|
||||
php ./index.php > ./index.html
|
||||
|
||||
- name: Remove trash
|
||||
run: |
|
||||
cd htdocs
|
||||
rm -rf parts/
|
||||
rm *.php
|
||||
|
||||
- name: Deploy demo page to gh-pages
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
if: ${{ github.ref == 'refs/heads/master' }}
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./htdocs
|
||||
@@ -4,13 +4,9 @@
|
||||
# NodeJS Trash
|
||||
node_modules/
|
||||
|
||||
# Corporate-specific stuff
|
||||
*_corp_*
|
||||
|
||||
# Build Artifacts
|
||||
*.css
|
||||
*.min.html
|
||||
*.html
|
||||
*.7z
|
||||
*.zip
|
||||
*.tar
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<component name="ProjectRunConfigurationManager">
|
||||
<configuration default="false" name="Docker - Local demo" type="docker-deploy" factoryName="docker-compose.yml" server-name="Docker">
|
||||
<deployment type="docker-compose.yml">
|
||||
<settings>
|
||||
<option name="envFilePath" value="" />
|
||||
<option name="services">
|
||||
<list>
|
||||
<option value="nibblepoker_css" />
|
||||
</list>
|
||||
</option>
|
||||
<option name="sourceFilePath" value="docker-compose.yml" />
|
||||
</settings>
|
||||
</deployment>
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
</component>
|
||||
@@ -0,0 +1,21 @@
|
||||
@echo off
|
||||
setlocal enabledelayedexpansion
|
||||
|
||||
:: Going into the script's directory
|
||||
cd /D "%~dp0"
|
||||
|
||||
|
||||
:dockerize
|
||||
echo.
|
||||
echo Preparing the container
|
||||
echo -----------------------
|
||||
|
||||
:dockerize-up
|
||||
pushd %CD%
|
||||
docker-compose -f docker-compose.dev.yml up -d --force-recreate
|
||||
popd
|
||||
|
||||
:dockerize-end
|
||||
|
||||
|
||||
:end
|
||||
+33
-46
@@ -7,22 +7,21 @@
|
||||
<!--<meta name="viewport" content="width=device-width"/>-->
|
||||
<meta name="author" content="Herwin Bozet">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
||||
<link rel="alternate icon" href="./favicon.ico">
|
||||
<link rel="stylesheet" href="./css/nibblepoker.css">
|
||||
<!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
|
||||
<link rel="stylesheet" href="./css/debugger.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/css/all.min.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="alternate icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="/css/nibblepoker.min.css">
|
||||
<link rel="stylesheet" href="/css/debugger.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<title>NibblePoker's CSS Theme</title>
|
||||
<meta name="description"
|
||||
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
|
||||
<meta name="description" content="...">
|
||||
<meta property="og:title" content="NibblePoker"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content="https://css.nibblepoker.com/"/>
|
||||
<meta property="og:image" content="???"/>
|
||||
<meta property="og:image:type" content="image/png"/>
|
||||
<meta property="og:description"
|
||||
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
|
||||
<meta property="og:description" content="..."/>
|
||||
</head>
|
||||
|
||||
<body class="layout-generic">
|
||||
@@ -32,7 +31,7 @@
|
||||
|
||||
<header class="w-full p-m pl-s">
|
||||
<h1 class="t-size-17 t-w-500">
|
||||
<i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS v0.0.2
|
||||
<i class="fa-brands fa-css3-alt mr-s"></i>NibbleCSS Documentation v0.0.1
|
||||
<a href="https://github.com/aziascreations/CSS-NibblePoker" class="f-right a-bland"><i class="fa-brands fa-github"></i></a>
|
||||
</h1>
|
||||
</header>
|
||||
@@ -59,68 +58,56 @@
|
||||
<!-- Introduction -->
|
||||
<?php include("./parts/intro.php"); ?>
|
||||
|
||||
|
||||
<!-- Core > Text > Weights -->
|
||||
<!-- Text > Weights -->
|
||||
<?php include("./parts/text_weights.php"); ?>
|
||||
|
||||
<!-- Core > Text > Styles -->
|
||||
<!-- Text > Styles -->
|
||||
<?php include("./parts/text_styles.php"); ?>
|
||||
|
||||
<!-- Core > Text > Alignment -->
|
||||
<!-- Text > Alignment -->
|
||||
<?php include("./parts/text_alignment.php"); ?>
|
||||
|
||||
<!-- Core > Text > Modifiers -->
|
||||
<!-- Text > Modifiers -->
|
||||
<?php include("./parts/text_modifiers.php"); ?>
|
||||
|
||||
<!-- Core > Text > Links -->
|
||||
<!-- Text > Links -->
|
||||
<?php include("./parts/text_links.php"); ?>
|
||||
|
||||
<!-- Core > Text > Misc -->
|
||||
<!-- Text > Misc -->
|
||||
<?php include("./parts/text_misc.php"); ?>
|
||||
|
||||
<!-- Core > Spacing -->
|
||||
<!-- Spacing -->
|
||||
<?php include("./parts/spacing.php"); ?>
|
||||
|
||||
<!-- Core > Rounding -->
|
||||
<!-- Rounding -->
|
||||
<?php include("./parts/rounding.php"); ?>
|
||||
|
||||
<!-- Core > Borders -->
|
||||
<?php include("./parts/core/borders.php"); ?>
|
||||
|
||||
<!-- Core > Lists > Base -->
|
||||
<!-- Lists > Base -->
|
||||
<?php include("./parts/lists_base.php"); ?>
|
||||
|
||||
<!-- Core > Lists > Composed
|
||||
<!-- Lists > Composed
|
||||
<?php include("./parts/lists_composed.php"); ?>-->
|
||||
|
||||
<!-- Core > Grids -->
|
||||
<!-- Grids -->
|
||||
<?php include("./parts/grids.php"); ?>
|
||||
|
||||
<!-- Core > Tables -->
|
||||
<?php include("./parts/core/tables.php"); ?>
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/tables_core.php"); ?>
|
||||
|
||||
<!-- Core > Inputs -->
|
||||
<?php include("./parts/core/inputs.php"); ?>
|
||||
|
||||
|
||||
<!-- Site > Horizontal Rulers -->
|
||||
<!-- Horizontal Rulers -->
|
||||
<?php include("./parts/horizontal_rulers.php"); ?>
|
||||
|
||||
<!-- Site > Backgrounds -->
|
||||
<!-- Backgrounds -->
|
||||
<?php include("./parts/backgrounds.php"); ?>
|
||||
|
||||
<!-- Site > Buttons -->
|
||||
<!-- Buttons -->
|
||||
<?php include("./parts/buttons.php"); ?>
|
||||
|
||||
<!-- Site > Tables -->
|
||||
<?php include("./parts/examples/tables.php"); ?>
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/tables_site.php"); ?>
|
||||
|
||||
|
||||
<!-- Examples > Inputs -->
|
||||
<?php include("./parts/examples/inputs.php"); ?>
|
||||
|
||||
<!-- Examples > Tables -->
|
||||
<?php /* include("./parts/examples/cards.php"); */ ?>
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/examples/cards.php"); ?>
|
||||
</main>
|
||||
|
||||
<footer class="d-flex flex-align-center w-full p-s py-xs">
|
||||
@@ -137,8 +124,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="./js/sidebar.js"></script>
|
||||
<script src="./js/text-direction-switch.js"></script>
|
||||
<script src="./js/anchor-fix.js"></script>
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script src="/js/text-direction-switch.js"></script>
|
||||
<script src="/js/anchor-fix.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -14,35 +14,23 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<section class="p-s">
|
||||
|
||||
<h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
|
||||
<div class="grid grid-col-2 grid-gap-l px-s">
|
||||
<div class="grid grid-col-3 grid-gap-l px-s">
|
||||
<div>
|
||||
<div class="p-l border r-xl bkgd-lightest my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-lightest</span>
|
||||
<div class="p-l border r-xl bkgd-dark my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-dark</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-l border r-xl bkgd-grey my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-grey</span>
|
||||
<span class="code mb-s">.bkgd-gray</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-l border r-xl bkgd-light my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-light</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-col-2 grid-gap-l px-s">
|
||||
<div>
|
||||
<div class="p-l border r-xl bkgd-grey my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-grey</span>
|
||||
<span class="code mb-s">.bkgd-gray</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-col-2 grid-gap-l px-s">
|
||||
<div>
|
||||
<div class="p-l border r-xl bkgd-dark my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-dark</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-l border r-xl bkgd-darkest my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-darkest</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xl">Grid backgrounds</h3>
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
|
||||
<div class="grid grid-col-2 grid-gap-l px-s">
|
||||
<div>
|
||||
<p class="t-w-500">40% opacity (Title bars)</p>
|
||||
@@ -68,7 +56,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xl">Special backgrounds</h3>
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
|
||||
<div class="grid grid-col-3 grid-gap-l px-s">
|
||||
<div>
|
||||
<p class="t-w-500">Transparent</p>
|
||||
@@ -77,7 +65,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xl">Colored backgrounds</h3>
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
|
||||
<div class="grid grid-col-4 grid-col-medium-2 grid-gap-l px-s">
|
||||
<div>
|
||||
<p class="t-w-500">Blue</p>
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden');
|
||||
die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="core-borders"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Borders
|
||||
<i class="fa-solid fa-border-inner f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s">Border selection</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
Borders can be applied on a global/axis/sided basis using the standard size suffixes.<br>
|
||||
The table below details them in order of application and definition at the CSS-level.
|
||||
</p>
|
||||
|
||||
<table class="table-stylish table-p-xs border r-l table-v-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Border Style</th>
|
||||
<th>Enabling class</th>
|
||||
<th>Disabling class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><b>Global</b></td>
|
||||
<td><span class="code">.b</span>, <span class="code">.border</span></td>
|
||||
<td><span class="code">.b-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Horizontal</b></td>
|
||||
<td><span class="code">.bx</span></td>
|
||||
<td><span class="code">.bx-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Vertical</b></td>
|
||||
<td><span class="code">.by</span></td>
|
||||
<td><span class="code">.by-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Top</b></td>
|
||||
<td><span class="code">.bt</span></td>
|
||||
<td><span class="code">.bt-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Down</b></td>
|
||||
<td><span class="code">.bb</span></td>
|
||||
<td><span class="code">.bb-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Left</b></td>
|
||||
<td><span class="code">.bl</span></td>
|
||||
<td><span class="code">.bl-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Right</b></td>
|
||||
<td><span class="code">.br</span></td>
|
||||
<td><span class="code">.br-0</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Border styles</h3>
|
||||
<div class="px-s">
|
||||
<table class="table-stylish table-p-xs border r-l table-v-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Border style</th>
|
||||
<th>Class</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><b>None</b></td><td><span class="code">.b-none</span></td><td><div class="bkgd-light b b-none p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Hidden</b></td><td><span class="code">.b-hidden</span></td><td><div class="bkgd-light b b-hidden p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Dotted</b></td><td><span class="code">.b-dotted</span></td><td><div class="bkgd-light b b-dotted p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Dashed</b></td><td><span class="code">.b-dashed</span></td><td><div class="bkgd-light b b-dashed p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Solid</b></td><td><span class="code">.b-solid</span></td><td><div class="bkgd-light b b-solid p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Double</b></td><td><span class="code">.b-double</span></td><td><div class="bkgd-light b b-double p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Groove</b></td><td><span class="code">.b-groove</span></td><td><div class="bkgd-light b b-groove p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Ridge</b></td><td><span class="code">.b-ridge</span></td><td><div class="bkgd-light b b-ridge p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Inset</b></td><td><span class="code">.b-inset</span></td><td><div class="bkgd-light b b-inset p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Outset</b></td><td><span class="code">.b-outset</span></td><td><div class="bkgd-light b b-outset p-xxs"> </div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -1,77 +0,0 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden');
|
||||
die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="core-inputs"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Inputs
|
||||
<i class="fa-solid fa-pen-to-square f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
ℹ️ Check the <a href="#examples-inputs">Examples > Inputs</a> section for styled examples.
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-text">Text Input: </label>
|
||||
<input id="demo-core-text" type="text" value="Lorem ipsum">
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
label+input[type=text]
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-password">Password Input: </label>
|
||||
<input id="demo-core-password" type="password" value="12345678">
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
label+input[type=password]
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-number">Number Input: </label>
|
||||
<input id="demo-core-number" type="number" value="42">
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
label+input[type=number]
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="radio" id="demo-core-radio-1" name="demo-core-radio" checked>
|
||||
<label for="demo-core-radio-1">Radio 1</label><br>
|
||||
<input type="radio" id="demo-core-radio-2" name="demo-core-radio">
|
||||
<label for="demo-core-radio-2">Radio 2</label><br>
|
||||
<input type="radio" id="demo-core-radio-3" name="demo-core-radio" disabled>
|
||||
<label for="demo-core-radio-3">Radio 3</label>
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
(input[type=radio][name=myRadioInput]+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="checkbox" id="demo-core-combo-1" checked>
|
||||
<label for="demo-core-combo-1">Checkbox 1</label><br>
|
||||
<input type="checkbox" id="demo-core-combo-2">
|
||||
<label for="demo-core-combo-2">Checkbox 2</label><br>
|
||||
<input type="checkbox" id="demo-core-combo-3" disabled>
|
||||
<label for="demo-core-combo-3">Checkbox 3</label>
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
(input[type=checkbox]+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-textarea"></label>
|
||||
<textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
label+textarea
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -22,7 +22,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<div class="my-s border r-l bkgd-dark grid d-inline-block">
|
||||
<div class="bb">
|
||||
<img src="./img/maki-03.jpg" alt="Hungry Kitty Cat" class="r-r p-s px-l" height="128px">
|
||||
<img src="/img/maki-03.jpg" alt="Hungry Kitty Cat" class="r-r p-s px-l" height="128px">
|
||||
</div>
|
||||
<div class="bkgd-gray t-center">
|
||||
<p>Hungry Cat</p>
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden');
|
||||
die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="examples-inputs"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Inputs
|
||||
<i class="fa-solid fa-pen-to-square f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Text inputs</h3>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-text">Text Input: </label>
|
||||
<input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
label+input[type=text]<b>.p-xxs.border.r-m</b>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-textarea"></label>
|
||||
<textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Checkboxes</h3>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="checkbox" id="demo-site-combo-1" class="cb-pretty r-m border" checked>
|
||||
<label for="demo-site-combo-1">Checkbox 1</label><br>
|
||||
<input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border">
|
||||
<label for="demo-site-combo-2">Checkbox 2</label><br>
|
||||
<input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border" disabled>
|
||||
<label for="demo-site-combo-3">Checkbox 3</label>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
(input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Radio inputs</h3>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="radio" id="demo-site-radio-1-solid" name="demo-site-radio-solid" class="radio-solid border" checked>
|
||||
<label for="demo-site-radio-1-solid">Radio 1</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-2-solid" name="demo-site-radio-solid" class="radio-solid border">
|
||||
<label for="demo-site-radio-2-solid">Radio 2</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-3-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-subtle">
|
||||
<label for="demo-site-radio-3-solid">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-4-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-dashed">
|
||||
<label for="demo-site-radio-4-solid">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-5-solid" name="demo-site-radio-solid" class="radio-solid border" disabled>
|
||||
<label for="demo-site-radio-5-solid">Radio 5</label>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
(input[type=radio][name=myRadioInput]<b>.radio-solid.border</b>+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="radio" id="demo-site-radio-1-3d" name="demo-site-radio-3d" class="radio-3d border" checked>
|
||||
<label for="demo-site-radio-1-3d">Radio 1</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-2-3d" name="demo-site-radio-3d" class="radio-3d border">
|
||||
<label for="demo-site-radio-2-3d">Radio 2</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-3-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-subtle">
|
||||
<label for="demo-site-radio-3-3d">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-4-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-dashed">
|
||||
<label for="demo-site-radio-4-3d">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-5-3d" name="demo-site-radio-3d" class="radio-3d border" disabled>
|
||||
<label for="demo-site-radio-5-3d">Radio 5</label>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-xs">
|
||||
(input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -1,126 +0,0 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="tables-site"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Tables
|
||||
<i class="fa-solid fa-table f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles have specific limitations you should be aware of ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
|
||||
<div class="px-s mb-m">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
|
||||
</p>
|
||||
<p class="mb-xs">
|
||||
However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
|
||||
Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
|
||||
A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
|
||||
</p>
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Head 1</th>
|
||||
<th>Head 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1.1</td>
|
||||
<td>Cell 1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 2.1</td>
|
||||
<td>Cell 2.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
table<b>.table-stylish.table-p-s.border.r-l</b><br>
|
||||
thead>tr>th*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Scrollable table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs mb-m">
|
||||
Scrollable tables can be obtained by combining the overflow utility classes and the
|
||||
<span class="code">.table-no-wrap</span> class to prevent cell from collapsing before scrolling.
|
||||
</p>
|
||||
<p class="mb-xxs mb-m">
|
||||
This special class can be applied to the following elements: <br>
|
||||
<span class="ml-s">
|
||||
<span class="code">table</span>,
|
||||
<span class="code">thead</span>,
|
||||
<span class="code">tbody</span>,
|
||||
<span class="code">tr</span>,
|
||||
<span class="code">th</span>,
|
||||
<span class="code">td</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="mb-xxs mb-m">
|
||||
In turn, every <span class="code">td</span> element under one of these elements will no longer wrap text.
|
||||
</p>
|
||||
|
||||
<div class="w-full ox-scroll">
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table without the <span class="code">.table-no-wrap</span> class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
|
||||
In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
|
||||
Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
|
||||
In hac habitasse platea dictumst.
|
||||
Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="w-full ox-scroll">
|
||||
<table class="table-stylish table-p-s border r-l table-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table with the <span class="code">.table-no-wrap</span> class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
|
||||
In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
|
||||
Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
|
||||
In hac habitasse platea dictumst.
|
||||
Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
<b>div.w-full.ox-scroll</b><br>
|
||||
table.table-stylish.table-p-s.border.r-l<b>.table-no-wrap</b><br>
|
||||
thead>tr>th*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
+32
-34
@@ -7,7 +7,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
global $root_path;
|
||||
?>
|
||||
|
||||
<a id="intro"></a>
|
||||
<div class="p-xs b r-s bkgd-grid">
|
||||
<h2 class="t-w-500 t-size-14">Introduction</h2>
|
||||
</div>
|
||||
@@ -16,46 +15,45 @@ global $root_path;
|
||||
<p class="ml-xs">
|
||||
<i>NibbleCSS</i> was originally conceived for internal use following a bout of performance issues with
|
||||
off-the-shelf stylesheets on low-end and mobile devices.<br>
|
||||
However, it rapidly got used in other public/private/professional projects, and it was spun-off into a
|
||||
separate, publicly accessible, and truly free project.
|
||||
However, it rapidly got used outside its intended environment and was spun-off into a separate a
|
||||
publicly accessible and truly free project.
|
||||
</p>
|
||||
<p class="ml-xs mt-s">
|
||||
<i>NibbleCSS</i> is also released into the public domain due to personal beliefs, and will always stay
|
||||
that way.<br>
|
||||
This project also uses <a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>,
|
||||
<i>NibbleCSS</i> is also released into the public domain as I do not believe forcing people to include licenses
|
||||
or disclaimers is truly free, especially when said licenses propagate themselves like tumorous growths.<br>
|
||||
Following that philosophy, <i>NibbleCSS</i> also makes use of
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">Eric A. Meyer's Reset.css</a>
|
||||
which was also released into the public domain in 2011.
|
||||
</p>
|
||||
|
||||
<!--<s>
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
|
||||
<div class="ml-xs">
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>No implicit sizes, margins or paddings</li>
|
||||
<li>No styles from class-less DOM, except for styling elements</li>
|
||||
<li>Self-sufficient and embeddable as a single file or text blob</li>
|
||||
<li>Competitive minified size</li>
|
||||
<li>Standardized & consistent naming scheme</li>
|
||||
</ul>
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
|
||||
<div class="ml-xs">
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>No implicit sizes, margins or paddings</li>
|
||||
<li>No styles from class-less DOM, except for styling elements</li>
|
||||
<li>Self-sufficient and embeddable as a single file or text blob</li>
|
||||
<li>Competitive minified size</li>
|
||||
<li>Standardized & consistent naming scheme</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
|
||||
<h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Prefabs for common elements</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Prefabs for common elements</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Bound to specific elements</li>
|
||||
</ul>
|
||||
<li>No forced smooth transition</li>
|
||||
<li>Bound to specific elements</li>
|
||||
</ul>
|
||||
<li>No forced smooth transition</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
|
||||
<h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Tested on an old Chuwi Ubook X internally</li>
|
||||
</ul>
|
||||
<li>Tested on an old Chuwi Ubook X internally</li>
|
||||
</ul>
|
||||
</div>
|
||||
</s>-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
|
||||
<table class="table-stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
|
||||
@@ -68,7 +66,7 @@ global $root_path;
|
||||
<tr>
|
||||
<td>NibbleCSS</td>
|
||||
<td>
|
||||
<a href="./css/nibblepoker.min.css"
|
||||
<a href="/css/nibblepoker.min.css"
|
||||
title="Download the minified full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
@@ -80,7 +78,7 @@ global $root_path;
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="./css/nibblepoker.css"
|
||||
<a href="/css/nibblepoker.css"
|
||||
title="Download the full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
@@ -95,7 +93,7 @@ global $root_path;
|
||||
<tr>
|
||||
<td>Debugger</td>
|
||||
<td>
|
||||
<a href="./css/debugger.min.css"
|
||||
<a href="/css/debugger.min.css"
|
||||
title="Download the minified debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
@@ -107,7 +105,7 @@ global $root_path;
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="./css/debugger.css"
|
||||
<a href="/css/debugger.css"
|
||||
title="Download the debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
|
||||
+19
-34
@@ -8,9 +8,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<nav id="sidebar" class="sidebar">
|
||||
|
||||
<div class="p-m pt-l">
|
||||
<a href="#intro" class="no-select">
|
||||
<a href="/" class="no-select">
|
||||
<img class="logo-sidebar-v2"
|
||||
src="./img/logo-large-fluent-unshaded.svg"
|
||||
src="/img/logo-large-fluent-unshaded.svg"
|
||||
alt="Website's logo"
|
||||
draggable="false">
|
||||
</a>
|
||||
@@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#text-weights">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-text-height pr-xs t-half-muted"></i>Weights
|
||||
<i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-styles">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-italic pr-xs t-half-muted"></i>Styles
|
||||
<i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-alignment">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-text-width pr-xs t-half-muted"></i>Alignment
|
||||
<i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-modifiers">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-subscript pr-xs t-half-muted"></i>Modifiers
|
||||
<i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-links">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-link pr-xs t-half-muted"></i>Links
|
||||
<i class="fa-solid fa-link pr-xs t-half-muted"></i>Links
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-misc">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -54,17 +54,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#spacing">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-ellipsis pr-xs t-half-muted"></i>Spacing
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#rounding">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-bezier-curve pr-xs t-half-muted"></i>Rounding
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#core-borders">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-border-inner pr-xs t-half-muted"></i>Borders
|
||||
<i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -72,22 +67,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#lists-basic">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-list pr-xs t-half-muted"></i>Lists
|
||||
<i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#grids">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-table-cells-large pr-xs t-half-muted"></i>Grids
|
||||
<i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-core">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#core-inputs">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -98,22 +88,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#horizontal-rulers">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
|
||||
<i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#backgrounds">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
|
||||
<i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#buttons">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-stop pr-xs t-half-muted"></i>Buttons
|
||||
<i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-site">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-table pr-xs t-half-muted"></i>Tables
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -122,16 +112,11 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<details class="by t-noselect" open>
|
||||
<summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#examples-inputs">
|
||||
<a class="a-hidden" href="#examples-cards">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
<i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
|
||||
</p>
|
||||
</a>
|
||||
<!--<a class="a-hidden" href="#examples-cards">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-address-card pr-xs t-half-muted"></i>Cards
|
||||
</p>
|
||||
</a>-->
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
@@ -13,8 +13,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
ℹ️ Check the <a href="#tables-site">Examples > Tables</a> section for styled examples.
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles may slightly change again before the 1.0.0 release ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>
|
||||
@@ -0,0 +1,53 @@
|
||||
<?php
|
||||
// Making sure the file is included and not accessed directly.
|
||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
header('HTTP/1.1 403 Forbidden'); die();
|
||||
}
|
||||
?>
|
||||
|
||||
<a id="tables-site"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Tables
|
||||
<i class="fa-solid fa-table f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles require a special workaround to work properly ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
|
||||
</p>
|
||||
<p class="mb-xs">
|
||||
However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
|
||||
Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
|
||||
A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
|
||||
</p>
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<th>Head 1</th>
|
||||
<th>Head 2</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1.1</td>
|
||||
<td>Cell 1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 2.1</td>
|
||||
<td>Cell 2.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
table<b>.table-stylish.table-p-s.border.r-l</b><br>
|
||||
thead>th>td*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -49,12 +49,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<td><span class="code">.t-overline</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Monospace</p></td>
|
||||
<td><p class="t-monospace">monospace text</p></td>
|
||||
<td><span class="code">.t-monospace</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,29 @@
|
||||
# NibblePoker's CSS Theme
|
||||
# NibblePoker's CSS Theme (W.I.P.)
|
||||
A simple and minimalist CSS stylesheet used across all my websites and web-based applications.
|
||||
|
||||
## Structure
|
||||
This stylesheet is composed of 4 major parts that all work together towards a common goal
|
||||
all the while staying independent and usable individually if you ever wished to.
|
||||
|
||||
### External
|
||||
The *External* rules regroup every external CSS stylesheets that are included in this one.\
|
||||
Currently, [reset.css](https://meyerweb.com/eric/tools/css/reset/) is the only such stylesheet.
|
||||
|
||||
**See:** [scss/external/](scss/external)
|
||||
|
||||
### Core
|
||||
The *Core* rules define mostly universal and portable CSS rules and other utilities for text,
|
||||
spacing and whatnot. \
|
||||
Internally, they are defined after everything else in order to let them override rules
|
||||
applied to the custom elements and site-centric rules.
|
||||
|
||||
**See:** [scss/core/](scss/core)
|
||||
|
||||
### Site
|
||||
|
||||
### Custom
|
||||
|
||||
|
||||
|
||||
## License
|
||||
The code in this repository is released under [CC0 1.0 Universal (CC0 1.0) (Public Domain)](LICENSE-CC0)
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Borders > Styles */
|
||||
|
||||
// TODO: Improve if per-side border styles are required.
|
||||
|
||||
@mixin border-style-maker($style-key, $style-css-value) {
|
||||
.border-#{$style-key}, .b-#{$style-key} {
|
||||
border-style: #{$style-css-value};
|
||||
}
|
||||
}
|
||||
|
||||
@include border-style-maker("none", "none");
|
||||
@include border-style-maker("hidden", "hidden");
|
||||
@include border-style-maker("dotted", "dotted");
|
||||
@include border-style-maker("dashed", "dashed");
|
||||
@include border-style-maker("solid", "solid");
|
||||
@include border-style-maker("double", "double");
|
||||
@include border-style-maker("groove", "groove");
|
||||
@include border-style-maker("ridge", "ridge");
|
||||
@include border-style-maker("inset", "inset");
|
||||
@include border-style-maker("outset", "outset");
|
||||
@@ -1,57 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Borders > Targeting */
|
||||
|
||||
.b, .border {
|
||||
border: 1px solid #{$color-border-default};
|
||||
}
|
||||
|
||||
.bx {
|
||||
border-left: 1px solid #{$color-border-default};
|
||||
border-right: 1px solid #{$color-border-default};
|
||||
}
|
||||
|
||||
.by {
|
||||
border-top: 1px solid #{$color-border-default};
|
||||
border-bottom: 1px solid #{$color-border-default};
|
||||
}
|
||||
|
||||
@mixin border-maker-enable($side-key, $side-css-key) {
|
||||
.b#{$side-key} {
|
||||
border-#{$side-css-key}: 1px solid #{$color-border-default};
|
||||
}
|
||||
}
|
||||
|
||||
@include border-maker-enable("t", "top");
|
||||
@include border-maker-enable("b", "bottom");
|
||||
@include border-maker-enable("l", "left");
|
||||
@include border-maker-enable("r", "right");
|
||||
|
||||
|
||||
/* Borders > Disabling */
|
||||
|
||||
.b-0 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bx-0 {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.by-0 {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@mixin border-maker-disable($side-key, $side-css-key) {
|
||||
.b#{$side-key}-0 {
|
||||
border-#{$side-css-key}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include border-maker-disable("t", "top");
|
||||
@include border-maker-disable("b", "bottom");
|
||||
@include border-maker-disable("l", "left");
|
||||
@include border-maker-disable("r", "right");
|
||||
+4
-5
@@ -1,24 +1,23 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Config > NibbleCSS */
|
||||
|
||||
// Toggles the inclusion of pixel-based sizing utility classes. ("w-000px", "h-000px", ...)
|
||||
// See: core/utils-sizing.scss
|
||||
// See: core/sizing.scss
|
||||
$add-px-sizing-rules: false;
|
||||
|
||||
$nibblepoker-background-root: "./";
|
||||
|
||||
// Toggles the inclusion of the ".bkgd-grid" background rules.
|
||||
// See: site/elements-backgrounds.scss
|
||||
// See: site/backgrounds.scss
|
||||
$include-grid-backgrounds: true;
|
||||
|
||||
$use-b64-backgrounds: true;
|
||||
|
||||
// Toggles the generation of any table cell padding rules.
|
||||
// See: core/tables-modifiers.scss
|
||||
// See: core/table.scss
|
||||
$generate-table-padding-rules: true;
|
||||
|
||||
// Toggles the generation of the header and cell specific padding rules for tables. (Disabled by default)
|
||||
// See: core/tables-modifiers.scss
|
||||
// See: core/table.scss
|
||||
$generate-table-header-cell-padding-rules: true;
|
||||
|
||||
@@ -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};
|
||||
// }
|
||||
//}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Core > Containers */
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Display */
|
||||
/* Core > Display */
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
@@ -15,5 +14,9 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.o-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Notes:
|
||||
// * 'core/core-grids.scss' defines '.d-grid' ! (Add here if grids are disabled !)
|
||||
// * 'core/grid.scss' defines '.d-grid' ! (Add here if grids are disabled !)
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Flex */
|
||||
/* Core > Flex */
|
||||
|
||||
// Display properties
|
||||
.d-flex {
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Float */
|
||||
/* Core > Float */
|
||||
|
||||
.fl, .f-left {
|
||||
float: left;
|
||||
@@ -1,6 +1,5 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Core > Grids */
|
||||
|
||||
.grid, .d-grid {
|
||||
@@ -0,0 +1,55 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Lists */
|
||||
|
||||
ul {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
&.l-bullet-inside, &.list-bullet-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
&.l-bullet-outside, &.list-bullet-outside {
|
||||
list-style-position: outside;
|
||||
}
|
||||
&.l-bullet-manual, &.list-bullet-manual {
|
||||
list-style-position: outside;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
&.list-bullet-none, &.l-bullet-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
&.list-bullet-disc, &.l-bullet-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
&.list-bullet-square, &.l-bullet-square {
|
||||
list-style-type: square;
|
||||
}
|
||||
&.list-bullet-decimal, &.l-bullet-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
&.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
|
||||
list-style-type: decimal-leading-zero;
|
||||
}
|
||||
&.list-bullet-georgian, &.l-bullet-georgian {
|
||||
list-style-type: georgian;
|
||||
}
|
||||
&.list-bullet-chinese, &.l-bullet-chinese {
|
||||
list-style-type: trad-chinese-informal;
|
||||
}
|
||||
&.list-bullet-kannada, &.l-bullet-kannada {
|
||||
list-style-type: kannada;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Overflow */
|
||||
/* Core > Overflow */
|
||||
|
||||
@mixin overflow-maker($overflow-type) {
|
||||
.o-#{$overflow-type} {
|
||||
@@ -0,0 +1,7 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Positions */
|
||||
|
||||
.p-relative {
|
||||
position: relative;
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Rounding > Corner */
|
||||
/* Utilities > Rounding > Corner */
|
||||
@mixin corner-rounding-maker($size-key, $size-value) {
|
||||
.rtl-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
@@ -18,7 +17,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Rounding > Corner > Variable Sizes */
|
||||
/* 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});
|
||||
@@ -26,6 +25,6 @@
|
||||
@include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Rounding > Corner > Fixed Sizes */
|
||||
/* Utilities > Rounding > Corner > Fixed Sizes */
|
||||
@include corner-rounding-maker("0", 0);
|
||||
@include corner-rounding-maker("r", 50%);
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Rounding > Global */
|
||||
/* Utilities > Rounding > Global */
|
||||
@mixin global-rounding-maker($size-key, $size-value) {
|
||||
//, .rounding-#{$size-key}
|
||||
.r-#{$size-key} {
|
||||
@@ -10,7 +9,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Rounding > Global > Variable Sizes */
|
||||
/* 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});
|
||||
@@ -18,6 +17,6 @@
|
||||
@include global-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Rounding > Global > Fixed Sizes */
|
||||
/* Utilities > Rounding > Global > Fixed Sizes */
|
||||
@include global-rounding-maker("0", 0);
|
||||
@include global-rounding-maker("r", 50%);
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Rounding > Sided */
|
||||
/* Utilities > Rounding > Sided */
|
||||
@mixin sided-rounding-maker($size-key, $size-value) {
|
||||
.rt-#{$size-key} {
|
||||
border-top-left-radius: #{$size-value};
|
||||
@@ -22,7 +21,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Rounding > Sided > Variable Sizes */
|
||||
/* 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});
|
||||
@@ -30,6 +29,6 @@
|
||||
@include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Rounding > Sided > Fixed Sizes */
|
||||
/* Utilities > Rounding > Sided > Fixed Sizes */
|
||||
@include sided-rounding-maker("0", 0);
|
||||
@include sided-rounding-maker("r", 50%);
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Spacing > Sided */
|
||||
/* 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};
|
||||
@@ -14,7 +13,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Spacing > Sided > Variable Sizes */
|
||||
/* 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));
|
||||
@@ -30,11 +29,11 @@
|
||||
@include axis-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Spacing > Sided > Fixed Sizes */
|
||||
/* Utilities > Spacing > Sided > Fixed Sizes */
|
||||
@include axis-spacing-maker("m", "margin", "0", 0);
|
||||
@include axis-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Spacing > Sided > Others */
|
||||
/* Utilities > Spacing > Sided > Others */
|
||||
@include axis-spacing-maker("m", "margin", "auto", auto);
|
||||
//@include axis-spacing-maker("p", "padding", "auto", auto);
|
||||
@include axis-spacing-maker("p", "padding", "auto", auto);
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Spacing > Global */
|
||||
/* Utilities > Spacing > Global */
|
||||
@mixin global-spacing-maker($type-key, $type-property, $size-key, $size-value) {
|
||||
.#{$type-key}-#{$size-key} {
|
||||
#{$type-property}: #{$size-value};
|
||||
@@ -9,7 +8,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Spacing > Global > Variable Sizes */
|
||||
/* 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));
|
||||
@@ -25,17 +24,17 @@
|
||||
@include global-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Spacing > Global > Fixed Sizes */
|
||||
/* Utilities > Spacing > Global > Fixed Sizes */
|
||||
@include global-spacing-maker("m", "margin", "0", 0);
|
||||
@include global-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Spacing > Global > Others */
|
||||
/* Utilities > Spacing > Global > Others */
|
||||
@include global-spacing-maker("m", "margin", "auto", auto);
|
||||
//@include global-spacing-maker("p", "padding", "auto", auto);
|
||||
@include global-spacing-maker("p", "padding", "auto", auto);
|
||||
|
||||
|
||||
/* Spacing > Global > Manual Extras */
|
||||
/* Utilities > Spacing > Global > Manual Extras */
|
||||
.p-xxxs {
|
||||
padding: calc(#{$margin-base-size} * 0.125);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Spacing > Sided */
|
||||
/* 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};
|
||||
@@ -18,7 +17,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* Spacing > Sided > Variable Sizes */
|
||||
/* 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));
|
||||
@@ -34,11 +33,11 @@
|
||||
@include sided-spacing-maker("p", "padding", "xl", calc(#{$margin-base-size} * 2.0));
|
||||
|
||||
|
||||
/* Spacing > Sided > Fixed Sizes */
|
||||
/* Utilities > Spacing > Sided > Fixed Sizes */
|
||||
@include sided-spacing-maker("m", "margin", "0", 0);
|
||||
@include sided-spacing-maker("p", "padding", "0", 0);
|
||||
|
||||
|
||||
/* Spacing > Sided > Others */
|
||||
/* Utilities > Spacing > Sided > Others */
|
||||
@include sided-spacing-maker("m", "margin", "auto", auto);
|
||||
//@include sided-spacing-maker("p", "padding", "auto", auto);
|
||||
@include sided-spacing-maker("p", "padding", "auto", auto);
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Tables > Modifiers */
|
||||
/* Core > Tables */
|
||||
|
||||
tr, td {
|
||||
vertical-align: top;
|
||||
@@ -19,15 +18,6 @@ tr, td {
|
||||
}
|
||||
}
|
||||
|
||||
.table-no-wrap,
|
||||
.table-no-wrap > td, .table-no-wrap > th,
|
||||
.table-no-wrap > tr > td, .table-no-wrap > tr > th,
|
||||
.table-no-wrap > thead > tr > td, .table-no-wrap > thead > tr > th,
|
||||
.table-no-wrap > tbody > tr > td, .table-no-wrap > tbody > tr > th {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Core > Tables > Cell Padding */
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
// 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%;
|
||||
}
|
||||
|
||||
.t-noselect {
|
||||
user-select: none;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Defaults > Backgrounds */
|
||||
|
||||
body {
|
||||
background-color: #{$color-background-body};
|
||||
}
|
||||
|
||||
// Can be overriden in `elements/elements-backgrounds.scss` for the grids.
|
||||
header, nav, footer {
|
||||
background-color: #{$color-background-surround};
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Fonts */
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
@@ -1,206 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Inputs */
|
||||
|
||||
/* Defaults > 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-input};
|
||||
|
||||
&:not(.no-focus) {
|
||||
&:focus {
|
||||
box-shadow: 0 0 3px 0 #{$color-glow-input};
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #{$color-background-input-disabled} !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Checkbox & Radio */
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
width: 1.65em;
|
||||
height: 1.65em;
|
||||
background-color: #{$color-background-input-unchecked};
|
||||
|
||||
&:checked {
|
||||
background-color: #{$color-background-input-checked};
|
||||
}
|
||||
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:disabled {
|
||||
&:before {
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] + label, input[type="radio"] + label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
|
||||
cursor: not-allowed;
|
||||
opacity: 60%;
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Checkbox */
|
||||
|
||||
input[type=checkbox] {
|
||||
&.cb-pretty, &.checkbox-pretty {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "✘";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Radio */
|
||||
|
||||
input[type=radio] {
|
||||
border-radius: 50%;
|
||||
|
||||
// Special fix required for standalone pages.
|
||||
// This rule somehow gets ignored if the stylesheet is placed in the DOM.
|
||||
// Even tho it is present in reset.css and if it get marked as important...
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.radio-solid, &.radio-3d {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-solid {
|
||||
&:before {
|
||||
border-style: double;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-3d {
|
||||
&:before {
|
||||
border-style: inset;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border-style: outset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-unchecked-subtle {
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-unchecked-dashed {
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
opacity: 75%;
|
||||
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Defaults > Inputs > Buttons */
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: #{$color-background-button};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-hover};
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-color: #{$color-background-button-primary};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-primary-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background-color: #{$color-background-button-success};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-success-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
background-color: #{$color-background-button-error};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-error-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background-color: #{$color-background-button-warning};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-warning-hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Text > Basics */
|
||||
|
||||
* {
|
||||
color: #{$color-text-generic};
|
||||
}
|
||||
|
||||
nav, footer, header, .bkgd-grid {
|
||||
* {
|
||||
color: #{$color-text-surround};
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Text > Links */
|
||||
|
||||
a, .a {
|
||||
// Base
|
||||
text-decoration: underline;
|
||||
color: #{$color-text-link};
|
||||
|
||||
& * {
|
||||
color: #{$color-text-link};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #{$color-text-link-hover};
|
||||
cursor: pointer;
|
||||
|
||||
& * {
|
||||
color: #{$color-text-link-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-generic};
|
||||
|
||||
& * {
|
||||
color: #{$color-text-generic};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
//color: #{$color-text-link-hover};
|
||||
color: #{$color-text-generic};
|
||||
|
||||
& * {
|
||||
//color: #{$color-text-link-hover};
|
||||
color: #{$color-text-generic};
|
||||
}
|
||||
|
||||
// FIXME: Not working, big F
|
||||
//i {
|
||||
// text-decoration: none !important;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav, footer, header {
|
||||
a, .a {
|
||||
color: #{$color-text-surround-link};
|
||||
& * {
|
||||
color: #{$color-text-surround-link};
|
||||
}
|
||||
&:hover {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
& * {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
}
|
||||
}
|
||||
&.a-hidden {
|
||||
text-decoration: none;
|
||||
color: #{$color-text-surround};
|
||||
& * {
|
||||
color: #{$color-text-surround};
|
||||
}
|
||||
&:hover {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
& * {
|
||||
color: #{$color-text-surround-link-hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Text > Weights */
|
||||
|
||||
@if $text-weight-header != -1 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: #{$text-weight-header};
|
||||
}
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Elements > Backgrounds */
|
||||
|
||||
.bkgd-darkest {
|
||||
background: $color-background-gray-darkest;
|
||||
}
|
||||
|
||||
.bkgd-dark {
|
||||
background: $color-background-gray-dark;
|
||||
}
|
||||
|
||||
.bkgd-grey, .bkgd-gray {
|
||||
background: $color-background-gray-medium;
|
||||
}
|
||||
|
||||
.bkgd-light {
|
||||
background: $color-background-gray-light;
|
||||
}
|
||||
|
||||
.bkgd-lightest {
|
||||
background: $color-background-gray-lightest;
|
||||
}
|
||||
|
||||
@if($include-grid-backgrounds) {
|
||||
// The element rules override rules in `defaults-elements-backgrounds.scss ~94`
|
||||
.bkgd-grid10, .bkgd-surround, header, nav, footer {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-grid20 {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-grid-image} url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEUAAABlZWVYWFhTU1NRUVFQUFBPT09PT09OTk4WFhZOTk5OTk5NTU1NTU1IbxM8AAAADnRSTlMAAgQGCAoMDhASEhQWGSBUwY4AAAjfSURBVHhepVfNdtpIFgZ2tTOwqh3I7pxTu8YC+tytkeRT2wCiK8sAIte9jA0pZz0mSp5gHiC25ZzZdg/dTzDzBvM2813JOPTMapjo5NiBfFX35/u+e1ULdUPXVcY1dcErvnF9n+WffaAbqqPXeWA6OjA1VT13xecis7UTaqqmntiaiuzEr/y1feSNC0xDt8wVB6aFZw/5VHzJL2wtpI450QMnkBmPaePWOCvA2YH62XcA6Kg95JfisRhT7a//85/aPW99j2oq0DXVMcjhJYxb/rJL7NCt3Ibvi5oa2OdvNvkmbwPSNIAZBPISxm+7tU9oYFecund5TW34GbLM732IG0LAuog80HvIE3/gOU/clIZ+i1uGe8gRuezPXPOH3QRFPVETes0XLnZrP7A3/qpoaik1YlCoLX6+QN7tPu1i29BNnbjI9u2YEze0P7tVfqoDXUKMFP4AcpXfFRPbQo9iM3djm9m5jfyq+JAHhP9cFQfg43JJ7Ni+5Usf+6m/95/8W/BA6IMTy7P3z0M+5cSnhN9jm5ilW9rMX/uvLs2H+DAGRFLuHEA2eWInLmRAhu7CLWxECY3cmrcullu4ZII6vOUTJzT2sTsul3PpPNgamK6qHTyxjTmmJUn06JZplawIhNdClnPdAR0b+hByyimN3chlvqYaqma6VEI08hNI2+Cjw2TxvOIFJbjlJ0QvtTstIeCgOSaXlhm6kb2hFPROWGjRI5xkgpf7Jv7XXd/UVYxvSz7X1dq/R6K3ucQvummTyLj5EuZ7/+hfUV1PnED6vhao2Mc0pY++0kybmrqLNL+bxLX/pYjA8IUp73TH6UUoXUUe0jmy6OARnsV85de+umngQtfd2xMgChZhKkhILVPRceMTf5Vvigoy8pmTo/cQI90VSFefC6C8ZeXfu6/5LVeQMRSKz4/W/jpPuAfrmfoZ6vVYPO36LJl09KGnLQl8sI/+geGrn3xCPT3xEzcC5Mvut5207AdEfljoOSCZu8u3HvL7VET2VM3g+NcQ1u/5yo/lFldXwYHnJxaNttBTkdDxPpaiHnX9mjIK9ZAwZXh/fk//l6grSERglc5cygH1aWrf2z1ESF8K4z8h4pO4i0P6kVK+Rl57SFsDgtrJ98d78omack+3aQnRjuDwb3LpwlvX1Gd8YUMjLBhSZFcyLirGneiMTqlnpnbqZnbrtgwI7LWuFhzZHkqx8n1KjOhpVhWlqV7bNrUpomu+dA/+AUJa0A+QVIbTQz12S574JQ6rqRt//Hzp2xoKvBCZmjnHvLArX5KER1ak0Xq2qzVnTsotEGmjmjuxnIRSe8N3uUCm7ozFzlvPRjv0Q8bYEMgFfLKpUyc+HPuhn9MbXyoR9cIxai+tS7ukrmrp43K550fIVW7pkuwuotDYxUZcrW4iJ/2Y+ZShpt3HHQiEX1hG9GsDCgLQLA37hiauX2Yi+cwpJnGxj3zvkR+k46XjAb4KoUSZu9C6C0iMsKWXFubn3kO18IPiNh/aY3KZFUJ9IXlgpIQi2YhxYn7rM45ZZvQr13c/UsIRX9qVq31mIQjCA0Q8TMowBuyb/y1fcGID1VQygntmgY7NPei5yStl96EYyQSxKvGad/yQL+yrSno0BNtnnPqpu+Vjcomog3Nie0rVTTWd8IS7Gp5j5/yGm0Y60ia4pUa2Qp3EtUxTnZlzyac0jQVlHIBA13bsHoquWjtx6wF19yM4sl3UZGh/FD/klj7RYxq7hhpDjQN68J1y12hS4gAA6Di9/O0fzVItmLkaiwm/55m74Y5pmzYC7KgO/GXNB5OaAJHKS1faIMdPfu5+9+98YELq0dLIvhyY2H2HTLn2z3/JnnyOjFq04LWb23t+xx19Sl3E3y03mSl9hyRH9aVrHr3UW1wxUFDLwYafeZgtz2BXD6VAwAuECMj9Duyqll6k+n3pffR/7Pou9Aseuhl/zQWyEsiJ+roDHVWv3B4PN71v/nOemqkb85Ju/bvylgUfvycvbJ/67sknssHiXyLglBO/LI0q0MKyxGGbqmKoIFOa0ham19JNPWEpxNAt7RTghpIeiYYANo39fEnA47X76IfUgaP1CRCd0NqHVG1g4qRDK3key7HXPHFNqKFvF2bLX8qoQ2rplj58MUl541/Zmbsk3BhB06cYCTN3QZ956eFabum7Go/pvvTo3Ga7zKb2J4dMI54ik9RJp9f5FSDXfs1hucl8b+vc/FqEdsE3bnEUx0ISmoNlB33/XPyxy+ApA3fpxiXxO88Doyv226O2ljBapv4C+YW/FXPXI4w+u6ggz6tC05zIat2mDjX+xK673R/5K3OuVvbajlgg+7kvsRzFMbP0M1rzzz6AVuSukLCLHbzmRvLm4TDs8RPE4Vpg+v7SzuxTgfaZRgkJ1GGYUwc7d0392mYGIgMEES95CojMXsQK1TdU96AnA5cynFqPzJkDD47ax8TtT57DiDnEDeh6dbZ9U8Smeg+b85Rf9uS6+p7qhT1FQM3ygBGNeZZHtoRwCg5ixapCBV9fehJyW3dUA3/BZ5/6R85YIDMf0Y2X0hy/J/f5zK5owNgm+NtuQhltfUx/frt48pC7+3tevkBueWkjgqx45lFqTuEDG38D42gdEpVh4O4JxoTsHvPEvsX4HNLYTfkWvh+ZrR+4P3P7YSfr0cdcynKcj8X2Sz5mTBk158CACW7j1/6huOM2ychrkszqhj5YepfuQ/FW9mA9sg2TcEoRpHWVy2gFRIelpOvmADJAJRYcaPgkBTozmb+GYVz5rCitvaQpWKf+nz25rkM7kE0fTjbgDXL4AfVrqDo+CenUrNwlMlvzhZmWkpZFER585tp0yROf+S0/+ZTOqIuROyjnJfZnmyHIC77mUsoat0Q8wpd9FzPE5O6KiEOCeUA35xQafMt9+5SndkKVcRznY0sG4VUqk4yW7oYiCpDB/oU3eClwU49YPBSmdObQJp3aOsKbCMNAlrU7AaCyI3EEgbRwYCCzNKR5tVqzGEXo1nYNE/8L7/nVVfVn2+vR3HWOy+XfT93jnVJm+GEAAAAASUVORK5CYII=") repeat scroll center center;
|
||||
} @else {
|
||||
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-grid30 {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-grid40, .bkgd-grid {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-grid-image} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
background: #{$color-background-grid-image} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-transparent {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.bkgd-blue {
|
||||
background-color: #{$color-background-blue};
|
||||
}
|
||||
|
||||
.bkgd-blue-light {
|
||||
background-color: #{$color-background-blue-light};
|
||||
}
|
||||
|
||||
.bkgd-green {
|
||||
background-color: #{$color-background-green};
|
||||
}
|
||||
|
||||
.bkgd-green-light {
|
||||
background-color: #{$color-background-green-light};
|
||||
}
|
||||
|
||||
.bkgd-red {
|
||||
background-color: #{$color-background-red};
|
||||
}
|
||||
|
||||
.bkgd-red-light {
|
||||
background-color: #{$color-background-red-light};
|
||||
}
|
||||
|
||||
.bkgd-orange {
|
||||
background-color: #{$color-background-orange};
|
||||
}
|
||||
|
||||
.bkgd-orange-light {
|
||||
background-color: #{$color-background-orange-light};
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Lists */
|
||||
|
||||
ul {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
&.l-bullets, &.list-bullets {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
&.l-bullet-inside, &.list-bullet-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
&.l-bullet-outside, &.list-bullet-outside {
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
&.l-bullet-manual, &.list-bullet-manual {
|
||||
list-style-position: outside;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
&.list-bullet-none, &.l-bullet-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
&.list-bullet-disc, &.l-bullet-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
&.list-bullet-square, &.l-bullet-square {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
&.list-bullet-decimal, &.l-bullet-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
&.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
|
||||
list-style-type: decimal-leading-zero;
|
||||
}
|
||||
|
||||
&.list-bullet-georgian, &.l-bullet-georgian {
|
||||
list-style-type: georgian;
|
||||
}
|
||||
|
||||
&.list-bullet-chinese, &.l-bullet-chinese {
|
||||
list-style-type: trad-chinese-informal;
|
||||
}
|
||||
|
||||
&.list-bullet-kannada, &.l-bullet-kannada {
|
||||
list-style-type: kannada;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Fixes > Buttons */
|
||||
|
||||
// Ugly fix for download buttons
|
||||
button + button, .button-link + .button-link > button {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* 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;
|
||||
//}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Inputs > Text Area */
|
||||
|
||||
.ta-resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.ta-resize-h {
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.ta-resize-v {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ta-resize-none {
|
||||
resize: none;
|
||||
}
|
||||
+51
-75
@@ -2,99 +2,75 @@
|
||||
* -----------------------------------------------------------------------------
|
||||
* NibblePoker CSS Theme
|
||||
* -----------------------------------------------------------------------------
|
||||
* Author: Herwin Bozet (@NibblePoker)
|
||||
* Author: Herwin Bozet
|
||||
* License: CC0 1.0 (Public Domain)
|
||||
* Sources:
|
||||
* - https://github.com/aziascreations/CSS-NibblePoker/
|
||||
* - https://git.nibblepoker.lu/aziascreations/CSS-NibblePoker
|
||||
* Source: ???
|
||||
* -----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/* Externals */
|
||||
@import 'externals/reset'; // Doesn't reset checkboxes !
|
||||
|
||||
|
||||
/* Config */
|
||||
@import 'config';
|
||||
|
||||
/* Externals */
|
||||
@import 'external/reset'; // Doesn't reset checkboxes !
|
||||
|
||||
/* Variables */
|
||||
@import 'variables';
|
||||
|
||||
/* Site */
|
||||
|
||||
/* Layouts */
|
||||
@import 'layouts/layout_commons'; // Sets up the page's default sizing rules
|
||||
@import 'layouts/layout_generic'; // Theme used for websites with a toggleable sidebar (Similar to WinUI apps)
|
||||
/* 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
|
||||
|
||||
/* Defaults */
|
||||
/* Defaults > Text */
|
||||
@import 'defaults/text/defaults-text-basics';
|
||||
@import 'defaults/text/defaults-text-links';
|
||||
@import 'defaults/text/defaults-text-weights';
|
||||
/* 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';
|
||||
|
||||
@import 'defaults/defaults-backgrounds'; // Defines some basic styling/coloring rules
|
||||
@import 'defaults/defaults-fonts';
|
||||
@import 'defaults/defaults-images';
|
||||
@import 'defaults/defaults-inputs'; // Has ugly fix for download buttons
|
||||
@import 'defaults/defaults-code'; // Uses forced borders, roundings and paddings
|
||||
@import 'defaults/defaults-tables'; // Uses copied paddings for cells & ugly rounding fix
|
||||
/* 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';
|
||||
|
||||
/* Core */
|
||||
@import 'core/core-grids'; // /!\ Needs an overhaul, especially for mobile !!!
|
||||
@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';
|
||||
@import 'core/table';
|
||||
|
||||
/* Elements */
|
||||
@import 'elements/elements-backgrounds';
|
||||
@import 'elements/elements-lists';
|
||||
@import 'elements/elements-wedge'; // Wedges shown in code blocks and other notifications.
|
||||
@import 'elements/elements-hr'; // Custom horizontal rulers
|
||||
@import 'elements/elements-video';
|
||||
@import 'elements/elements-scrollbar'; // /!\ Horizontal unfinished, and thy look bad in some contexts /!\
|
||||
/* Core > Rounding */
|
||||
@import 'core/rounding/global';
|
||||
@import 'core/rounding/sided';
|
||||
@import 'core/rounding/corner';
|
||||
|
||||
/* Inputs */
|
||||
@import 'inputs/inputs-langs';
|
||||
@import 'inputs/inputs-textarea';
|
||||
|
||||
/* Tables */
|
||||
@import 'tables/tables-modifiers';
|
||||
|
||||
/* Borders */
|
||||
@import 'borders/border-targeting'; // Border rules (.border, .bt-0, ...)
|
||||
@import 'borders/border-styles'; // Types of borders
|
||||
@import 'borders/border-colors'; // Default colors for some elements (Overrides global color in border-targeting)
|
||||
|
||||
/* Text */
|
||||
@import 'text/text-sizes';
|
||||
@import 'text/text-weights';
|
||||
@import 'text/text-alignment';
|
||||
@import 'text/text-styling';
|
||||
@import 'text/text-misc';
|
||||
|
||||
/* Spacing */
|
||||
@import 'spacing/spacing_global';
|
||||
@import 'spacing/spacing_axis';
|
||||
@import 'spacing/spacing_sided';
|
||||
|
||||
/* Rounding */
|
||||
@import 'rounding/rounding_global';
|
||||
@import 'rounding/rounding_sided';
|
||||
@import 'rounding/rounding_corner';
|
||||
|
||||
/* Overrides */
|
||||
@import 'utils/utils-float'; // Floating rules (.f-right, ...)
|
||||
@import 'utils/utils-cursor';
|
||||
@import 'utils/utils-text';
|
||||
@import 'utils/utils-display'; // /!\ Needs more classes !
|
||||
@import 'utils/utils-overflow'; // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
|
||||
@import 'utils/utils-flex'; // /!\ Needs an overhaul !!!
|
||||
@import 'utils/utils-sizing'; // Rules for setting elements size (.w-full, ...)
|
||||
@import 'utils/utils-position';
|
||||
@import 'utils/utils-mobile';
|
||||
/* Core > Spacing */
|
||||
@import 'core/spacing/global';
|
||||
@import 'core/spacing/axis';
|
||||
@import 'core/spacing/sided';
|
||||
|
||||
/* Extras */
|
||||
@import 'extra/extra-splide'; // Picture gallery
|
||||
@import 'extra/extra-np-content'; // Uses fixed sizes and floats
|
||||
|
||||
/* Fixes */
|
||||
@import 'fixes/fixes-mobile'; // Hotfixes for mobile-related issues
|
||||
@import 'fixes/fixes-buttons'; // Ugly fix for download buttons
|
||||
@import 'site/splide';
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
@use 'sass:color';
|
||||
|
||||
|
||||
// External palettes
|
||||
|
||||
/* Variables > Palettes > Apollo */
|
||||
// https://lospec.com/palette-list/apollo
|
||||
$color-apollo-01: #253a5e;
|
||||
$color-apollo-02: #3c5e8b;
|
||||
$color-apollo-03: #4f8fba;
|
||||
$color-apollo-04: #73bed3;
|
||||
$color-apollo-05: #a4dddb;
|
||||
$color-apollo-07: #25562e;
|
||||
$color-apollo-08: #468232;
|
||||
$color-apollo-20: #884b2b;
|
||||
$color-apollo-21: #be772b;
|
||||
$color-apollo-26: #752438;
|
||||
$color-apollo-27: #a53030;
|
||||
$color-apollo-45: #ebede9;
|
||||
|
||||
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
|
||||
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
|
||||
|
||||
|
||||
// Flat colors
|
||||
$color-background-gray-light: #24252B;
|
||||
$color-background-gray-dark: #1D1E22;
|
||||
$color-background-gray-medium: mix($color-background-gray-light, $color-background-gray-dark, 50%);
|
||||
|
||||
$color-background-blue: #{$color-apollo-custom-30};
|
||||
$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
|
||||
|
||||
$color-background-green: #{$color-apollo-07};
|
||||
$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%);
|
||||
|
||||
$color-background-red: #{$color-apollo-26};
|
||||
$color-background-red-light: #{$color-apollo-27};
|
||||
|
||||
$color-background-orange: #{$color-apollo-20};
|
||||
$color-background-orange-light: #{$color-apollo-21};
|
||||
|
||||
|
||||
// Body parts
|
||||
$color-background-body: $color-background-gray-dark;
|
||||
|
||||
$color-background-main: $color-background-gray-medium;
|
||||
$color-background-surround: $color-background-gray-dark;
|
||||
|
||||
$color-background-grid-image: $color-background-surround;
|
||||
|
||||
|
||||
// Cards & Other elements
|
||||
$color-background-heading: $color-background-surround;
|
||||
$color-background-code: $color-background-surround;
|
||||
|
||||
$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%);
|
||||
$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%);
|
||||
|
||||
$color-background-input: $color-background-surround;
|
||||
$color-background-input-checked: $color-apollo-08;
|
||||
$color-background-input-unchecked: $color-apollo-27;
|
||||
$color-background-input-disabled: $color-background-surround;
|
||||
|
||||
$color-background-button: #2d2f36;
|
||||
$color-background-button-hover: #373841;
|
||||
|
||||
$color-background-button-primary: $color-background-blue;
|
||||
$color-background-button-primary-hover: $color-background-blue-light;
|
||||
|
||||
$color-background-button-success: $color-background-green;
|
||||
$color-background-button-success-hover: $color-background-green-light;
|
||||
|
||||
$color-background-button-error: $color-background-red;
|
||||
$color-background-button-error-hover: $color-background-red-light;
|
||||
|
||||
$color-background-button-warning: $color-background-orange;
|
||||
$color-background-button-warning-hover: $color-background-orange-light;
|
||||
|
||||
|
||||
// Borders
|
||||
$color-border-light: #141417;
|
||||
$color-border-normal: #141417;
|
||||
$color-border-dark: #141417;
|
||||
|
||||
$color-border-default: $color-border-normal;
|
||||
|
||||
$color-border-main: $color-border-normal;
|
||||
$color-border-nav: $color-border-normal;
|
||||
$color-border-hr: $color-border-normal;
|
||||
$color-border-scrollbar: $color-border-normal;
|
||||
$color-border-table: $color-border-normal;
|
||||
$color-border-code: $color-border-normal;
|
||||
|
||||
|
||||
// Text
|
||||
$color-text-generic: $color-apollo-45;
|
||||
$color-text-surround: $color-text-generic;
|
||||
$color-text-inputs: $color-text-generic;
|
||||
$color-text-muted: #{$color-text-generic}E0;
|
||||
$color-text-muted-super: #{$color-text-generic}C0;
|
||||
|
||||
$color-text-link: #{$color-apollo-04};
|
||||
$color-text-link-hover: #{$color-apollo-05};
|
||||
|
||||
$color-text-surround-link: #{$color-apollo-04};
|
||||
$color-text-surround-link-hover: #{$color-apollo-05};
|
||||
|
||||
|
||||
// Specials
|
||||
$color-glow-input: $color-apollo-02;
|
||||
@@ -1,237 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
@use 'sass:color';
|
||||
|
||||
|
||||
// External palettes
|
||||
|
||||
/* Variables > Palettes > Apollo */
|
||||
// https://lospec.com/palette-list/apollo
|
||||
$color-apollo-00: #172038;
|
||||
$color-apollo-01: #253a5e;
|
||||
$color-apollo-02: #3c5e8b;
|
||||
$color-apollo-03: #4f8fba;
|
||||
$color-apollo-04: #73bed3;
|
||||
$color-apollo-05: #a4dddb;
|
||||
$color-apollo-06: #19332d;
|
||||
$color-apollo-07: #25562e;
|
||||
$color-apollo-08: #468232;
|
||||
$color-apollo-09: #75a743;
|
||||
$color-apollo-10: #a8ca58;
|
||||
$color-apollo-11: #d0da91;
|
||||
$color-apollo-12: #4d2b32;
|
||||
$color-apollo-13: #7a4841;
|
||||
$color-apollo-14: #ad7757;
|
||||
$color-apollo-15: #c09473;
|
||||
$color-apollo-16: #d7b594;
|
||||
$color-apollo-17: #e7d5b3;
|
||||
$color-apollo-18: #341c27;
|
||||
$color-apollo-19: #602c2c;
|
||||
$color-apollo-20: #884b2b;
|
||||
$color-apollo-21: #be772b;
|
||||
$color-apollo-22: #de9e41;
|
||||
$color-apollo-23: #e8c170;
|
||||
$color-apollo-24: #241527;
|
||||
$color-apollo-25: #411d31;
|
||||
$color-apollo-26: #752438;
|
||||
$color-apollo-27: #a53030;
|
||||
$color-apollo-28: #cf573c;
|
||||
$color-apollo-29: #da863e;
|
||||
$color-apollo-30: #1e1d39;
|
||||
$color-apollo-31: #402751;
|
||||
$color-apollo-32: #7a367b;
|
||||
$color-apollo-33: #a23e8c;
|
||||
$color-apollo-34: #c65197;
|
||||
$color-apollo-35: #df84a5;
|
||||
$color-apollo-36: #090a14;
|
||||
$color-apollo-37: #10141f;
|
||||
$color-apollo-38: #151d28;
|
||||
$color-apollo-39: #202e37;
|
||||
$color-apollo-40: #394a50;
|
||||
$color-apollo-41: #577277;
|
||||
$color-apollo-42: #819796;
|
||||
$color-apollo-43: #a8b5b2;
|
||||
$color-apollo-44: #c7cfcc;
|
||||
$color-apollo-45: #ebede9;
|
||||
|
||||
// https://lospec.com/palette-list/endesga-32
|
||||
|
||||
// https://lospec.com/palette-list/endesga-64
|
||||
$color-endesga64-00: #ff0040;
|
||||
$color-endesga64-01: #131313;
|
||||
$color-endesga64-02: #1b1b1b;
|
||||
$color-endesga64-03: #272727;
|
||||
$color-endesga64-04: #3d3d3d;
|
||||
$color-endesga64-05: #5d5d5d;
|
||||
$color-endesga64-06: #858585;
|
||||
$color-endesga64-07: #b4b4b4;
|
||||
$color-endesga64-08: #ffffff;
|
||||
$color-endesga64-09: #c7cfdd;
|
||||
$color-endesga64-10: #92a1b9;
|
||||
$color-endesga64-11: #657392;
|
||||
$color-endesga64-12: #424c6e;
|
||||
$color-endesga64-13: #2a2f4e;
|
||||
$color-endesga64-14: #1a1932;
|
||||
$color-endesga64-15: #0e071b;
|
||||
$color-endesga64-16: #1c121c;
|
||||
$color-endesga64-17: #391f21;
|
||||
$color-endesga64-18: #5d2c28;
|
||||
$color-endesga64-19: #8a4836;
|
||||
$color-endesga64-20: #bf6f4a;
|
||||
$color-endesga64-21: #e69c69;
|
||||
$color-endesga64-22: #f6ca9f;
|
||||
$color-endesga64-23: #f9e6cf;
|
||||
$color-endesga64-24: #edab50;
|
||||
$color-endesga64-25: #e07438;
|
||||
$color-endesga64-26: #c64524;
|
||||
$color-endesga64-27: #8e251d;
|
||||
$color-endesga64-28: #ff5000;
|
||||
$color-endesga64-29: #ed7614;
|
||||
$color-endesga64-30: #ffa214;
|
||||
$color-endesga64-31: #ffc825;
|
||||
$color-endesga64-32: #ffeb57;
|
||||
$color-endesga64-33: #d3fc7e;
|
||||
$color-endesga64-34: #99e65f;
|
||||
$color-endesga64-35: #5ac54f;
|
||||
$color-endesga64-36: #33984b;
|
||||
$color-endesga64-37: #1e6f50;
|
||||
$color-endesga64-38: #134c4c;
|
||||
$color-endesga64-39: #0c2e44;
|
||||
$color-endesga64-40: #00396d;
|
||||
$color-endesga64-41: #0069aa;
|
||||
$color-endesga64-42: #0098dc;
|
||||
$color-endesga64-43: #00cdf9;
|
||||
$color-endesga64-44: #0cf1ff;
|
||||
$color-endesga64-45: #94fdff;
|
||||
$color-endesga64-46: #fdd2ed;
|
||||
$color-endesga64-47: #f389f5;
|
||||
$color-endesga64-48: #db3ffd;
|
||||
$color-endesga64-49: #7a09fa;
|
||||
$color-endesga64-50: #3003d9;
|
||||
$color-endesga64-51: #0c0293;
|
||||
$color-endesga64-52: #03193f;
|
||||
$color-endesga64-53: #3b1443;
|
||||
$color-endesga64-54: #622461;
|
||||
$color-endesga64-55: #93388f;
|
||||
$color-endesga64-56: #ca52c9;
|
||||
$color-endesga64-57: #c85086;
|
||||
$color-endesga64-58: #f68187;
|
||||
$color-endesga64-59: #f5555d;
|
||||
$color-endesga64-60: #ea323c;
|
||||
$color-endesga64-61: #c42430;
|
||||
$color-endesga64-62: #891e2b;
|
||||
$color-endesga64-63: #571c27;
|
||||
|
||||
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
|
||||
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
|
||||
|
||||
|
||||
|
||||
|
||||
// Flat colors
|
||||
|
||||
//$color-background-gray-light: #404040;
|
||||
//$color-background-gray-idk01: #2e2e2e;
|
||||
//$color-background-gray-medium: mix(#232323, #2e2e2e, 33.3%);
|
||||
//$color-background-gray-dark: #232323;
|
||||
|
||||
$color-background-gray-lightest: mix($color-endesga64-05, $color-endesga64-06, 50%);
|
||||
$color-background-gray-light: mix($color-endesga64-04, $color-endesga64-05, 50%);
|
||||
$color-background-gray-lm: $color-endesga64-04;
|
||||
$color-background-gray-medium: mix($color-endesga64-03, $color-endesga64-04, 50%);
|
||||
$color-background-gray-md: $color-endesga64-03;
|
||||
$color-background-gray-dark: mix($color-endesga64-02, $color-endesga64-03, 50%);
|
||||
$color-background-gray-darkest: $color-endesga64-01;
|
||||
|
||||
$color-background-light-10: #f7f7f7;
|
||||
$color-background-light-20: #c4c4c4;
|
||||
$color-background-light-30: #7f7f7f;
|
||||
|
||||
$color-background-purple-10: #3E3546;
|
||||
$color-background-purple-20: #6B3E75;
|
||||
$color-background-purple-30: #905EA9;
|
||||
|
||||
|
||||
$color-background-blue: #{$color-apollo-custom-30};
|
||||
$color-background-blue-light: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
|
||||
|
||||
$color-background-green: #{$color-apollo-07};
|
||||
$color-background-green-light: mix($color-apollo-07, $color-apollo-08, 50%);
|
||||
|
||||
$color-background-red: #{$color-apollo-26};
|
||||
$color-background-red-light: #{$color-apollo-27};
|
||||
|
||||
$color-background-orange: #{$color-apollo-20};
|
||||
$color-background-orange-light: #{$color-apollo-21};
|
||||
|
||||
|
||||
// Body parts
|
||||
$color-background-body: $color-background-gray-dark;
|
||||
|
||||
$color-background-main: $color-background-gray-medium;
|
||||
$color-background-surround: $color-background-gray-dark;
|
||||
|
||||
$color-background-grid-image: $color-background-surround;
|
||||
|
||||
|
||||
// Cards & Other elements
|
||||
$color-background-heading: $color-background-surround;
|
||||
$color-background-code: $color-background-surround;
|
||||
|
||||
$color-background-table-tr-main: mix($color-background-main, $color-background-surround, 50%);
|
||||
$color-background-table-tr-alt: mix($color-background-main, $color-background-surround, 12.5%);
|
||||
|
||||
$color-background-input: $color-background-surround;
|
||||
$color-background-input-checked: $color-apollo-08;
|
||||
$color-background-input-unchecked: $color-apollo-27;
|
||||
$color-background-input-disabled: $color-background-surround;
|
||||
|
||||
//$color-background-button: #2d2f36;
|
||||
//$color-background-button-hover: #373841;
|
||||
|
||||
$color-background-button: $color-background-gray-md;
|
||||
$color-background-button-hover: $color-background-gray-lm;
|
||||
|
||||
$color-background-button-primary: $color-background-blue;
|
||||
$color-background-button-primary-hover: $color-background-blue-light;
|
||||
|
||||
$color-background-button-success: $color-background-green;
|
||||
$color-background-button-success-hover: $color-background-green-light;
|
||||
|
||||
$color-background-button-error: $color-background-red;
|
||||
$color-background-button-error-hover: $color-background-red-light;
|
||||
|
||||
$color-background-button-warning: $color-background-orange;
|
||||
$color-background-button-warning-hover: $color-background-orange-light;
|
||||
|
||||
|
||||
// Borders
|
||||
$color-border-light: $color-background-gray-darkest;
|
||||
$color-border-normal: $color-background-gray-darkest;
|
||||
$color-border-dark: $color-background-gray-darkest;
|
||||
|
||||
$color-border-default: $color-border-normal;
|
||||
|
||||
$color-border-main: $color-border-normal;
|
||||
$color-border-nav: $color-border-normal;
|
||||
$color-border-hr: $color-border-normal;
|
||||
$color-border-scrollbar: $color-border-normal;
|
||||
$color-border-table: $color-border-normal;
|
||||
$color-border-code: $color-border-normal;
|
||||
|
||||
|
||||
// Text
|
||||
$color-text-generic: $color-apollo-45;
|
||||
$color-text-surround: $color-text-generic;
|
||||
$color-text-inputs: $color-text-generic;
|
||||
$color-text-muted: #{$color-text-generic}E0;
|
||||
$color-text-muted-super: #{$color-text-generic}C0;
|
||||
|
||||
$color-text-link: #{$color-apollo-04};
|
||||
$color-text-link-hover: #{$color-apollo-05};
|
||||
|
||||
$color-text-surround-link: #{$color-apollo-04};
|
||||
$color-text-surround-link-hover: #{$color-apollo-05};
|
||||
|
||||
|
||||
// Specials
|
||||
$color-glow-input: $color-apollo-02;
|
||||
@@ -1,91 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
@use 'sass:color';
|
||||
|
||||
// The only goal for this file is to set all colors to `deeppink`.
|
||||
// Other theme files should override all the colors variables defined in here.
|
||||
|
||||
|
||||
// Flat colors
|
||||
$color-background-gray-light: deeppink;
|
||||
$color-background-gray-medium: deeppink;
|
||||
$color-background-gray-dark: deeppink;
|
||||
|
||||
$color-background-blue: deeppink;
|
||||
$color-background-blue-light: deeppink;
|
||||
|
||||
$color-background-green: deeppink;
|
||||
$color-background-green-light: deeppink;
|
||||
|
||||
$color-background-red: deeppink;
|
||||
$color-background-red-light: deeppink;
|
||||
|
||||
$color-background-orange: deeppink;
|
||||
$color-background-orange-light: deeppink;
|
||||
|
||||
|
||||
// Body parts
|
||||
$color-background-main: deeppink;
|
||||
$color-background-surround: deeppink;
|
||||
$color-background-body: deeppink;
|
||||
|
||||
// Cards & Other elements
|
||||
$color-background-heading: deeppink;
|
||||
$color-background-code: deeppink;
|
||||
|
||||
$color-background-table-tr-main: deeppink;
|
||||
$color-background-table-tr-alt: deeppink;
|
||||
|
||||
$color-background-input: deeppink;
|
||||
$color-background-input-checked: deeppink;
|
||||
$color-background-input-unchecked: deeppink;
|
||||
$color-background-input-disabled: deeppink;
|
||||
|
||||
$color-background-button: deeppink;
|
||||
$color-background-button-hover: deeppink;
|
||||
|
||||
$color-background-button-primary: deeppink;
|
||||
$color-background-button-primary-hover: deeppink;
|
||||
|
||||
$color-background-button-success: deeppink;
|
||||
$color-background-button-success-hover: deeppink;
|
||||
|
||||
$color-background-button-error: deeppink;
|
||||
$color-background-button-error-hover: deeppink;
|
||||
|
||||
$color-background-button-warning: deeppink;
|
||||
$color-background-button-warning-hover: deeppink;
|
||||
|
||||
$color-background-grid-image: deeppink;
|
||||
|
||||
|
||||
// Borders
|
||||
$color-border-light: #00EB6C;
|
||||
$color-border-normal: #00EB6C;
|
||||
$color-border-dark: #00EB6C;
|
||||
|
||||
$color-border-default: #00EB6C;
|
||||
|
||||
$color-border-main: #00EB6C;
|
||||
$color-border-nav: #00EB6C;
|
||||
$color-border-hr: #00EB6C;
|
||||
$color-border-scrollbar: #00EB6C;
|
||||
$color-border-table: #00EB6C;
|
||||
$color-border-code: #00EB6C;
|
||||
|
||||
|
||||
// Text
|
||||
$color-text-generic: #00EB6C;
|
||||
$color-text-surround: #00EB6C;
|
||||
$color-text-inputs: #00EB6C;
|
||||
$color-text-muted: #{$color-text-generic}E0;
|
||||
$color-text-muted-super: #{$color-text-generic}C0;
|
||||
|
||||
$color-text-link: #00EB6C;
|
||||
$color-text-link-hover: #00EB6C;
|
||||
|
||||
$color-text-surround-link: #00EB6C;
|
||||
$color-text-surround-link-hover: #00EB6C;
|
||||
|
||||
|
||||
// Specials
|
||||
$color-glow-input: yellow;
|
||||
@@ -1,113 +0,0 @@
|
||||
|
||||
@use 'sass:color';
|
||||
|
||||
/* Variables > Palettes > Apollo */
|
||||
// https://lospec.com/palette-list/apollo
|
||||
$color-apollo-00: #172038;
|
||||
$color-apollo-01: #253a5e;
|
||||
$color-apollo-02: #3c5e8b;
|
||||
$color-apollo-03: #4f8fba;
|
||||
$color-apollo-04: #73bed3;
|
||||
$color-apollo-05: #a4dddb;
|
||||
$color-apollo-06: #19332d;
|
||||
$color-apollo-07: #25562e;
|
||||
$color-apollo-08: #468232;
|
||||
$color-apollo-09: #75a743;
|
||||
$color-apollo-10: #a8ca58;
|
||||
$color-apollo-11: #d0da91;
|
||||
$color-apollo-12: #4d2b32;
|
||||
$color-apollo-13: #7a4841;
|
||||
$color-apollo-14: #ad7757;
|
||||
$color-apollo-15: #c09473;
|
||||
$color-apollo-16: #d7b594;
|
||||
$color-apollo-17: #e7d5b3;
|
||||
$color-apollo-18: #341c27;
|
||||
$color-apollo-19: #602c2c;
|
||||
$color-apollo-20: #884b2b;
|
||||
$color-apollo-21: #be772b;
|
||||
$color-apollo-22: #de9e41;
|
||||
$color-apollo-23: #e8c170;
|
||||
$color-apollo-24: #241527;
|
||||
$color-apollo-25: #411d31;
|
||||
$color-apollo-26: #752438;
|
||||
$color-apollo-27: #a53030;
|
||||
$color-apollo-28: #cf573c;
|
||||
$color-apollo-29: #da863e;
|
||||
$color-apollo-30: #1e1d39;
|
||||
$color-apollo-31: #402751;
|
||||
$color-apollo-32: #7a367b;
|
||||
$color-apollo-33: #a23e8c;
|
||||
$color-apollo-34: #c65197;
|
||||
$color-apollo-35: #df84a5;
|
||||
$color-apollo-36: #090a14;
|
||||
$color-apollo-37: #10141f;
|
||||
$color-apollo-38: #151d28;
|
||||
$color-apollo-39: #202e37;
|
||||
$color-apollo-40: #394a50;
|
||||
$color-apollo-41: #577277;
|
||||
$color-apollo-42: #819796;
|
||||
$color-apollo-43: #a8b5b2;
|
||||
$color-apollo-44: #c7cfcc;
|
||||
$color-apollo-45: #ebede9;
|
||||
|
||||
$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
|
||||
|
||||
$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
|
||||
$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
|
||||
$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
|
||||
$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
|
||||
|
||||
$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
|
||||
$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
|
||||
|
||||
$color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
|
||||
$color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
|
||||
$color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
|
||||
$color-apollo-custom-03: mix($color-apollo-40, $color-apollo-39, 65%);
|
||||
|
||||
$color-apollo-custom-10: mix($color-apollo-40, $color-apollo-41, 75%);
|
||||
|
||||
$color-apollo-custom-20: mix($color-apollo-39, $color-apollo-38, 60%);
|
||||
|
||||
$color-apollo-custom-30: mix($color-apollo-01, $color-apollo-03, 80%); // Primary button
|
||||
$color-apollo-custom-31: mix($color-apollo-01, $color-apollo-03, 65%); // Primary button hover
|
||||
|
||||
/* Variables > Palettes > Material UI */
|
||||
// https://materialui.co/colors
|
||||
|
||||
$color-material-blueGrey-50: #eceff1;
|
||||
$color-material-blueGrey-100: #cfd8dc;
|
||||
$color-material-blueGrey-200: #b0bec5;
|
||||
$color-material-blueGrey-300: #90a4ae;
|
||||
$color-material-blueGrey-400: #78909c;
|
||||
$color-material-blueGrey-500: #607d8b;
|
||||
$color-material-blueGrey-600: #546e7a;
|
||||
$color-material-blueGrey-700: #455a64;
|
||||
$color-material-blueGrey-800: #37474f;
|
||||
$color-material-blueGrey-900: #263238;
|
||||
|
||||
$color-material-blueGrey-1000: #151D21;
|
||||
$color-material-blueGrey-850: mix($color-material-blueGrey-800, $color-material-blueGrey-900, 50%);
|
||||
//$color-material-blueGrey-925: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 25%);
|
||||
$color-material-blueGrey-950: mix($color-material-blueGrey-1000, $color-material-blueGrey-900, 50%);
|
||||
|
||||
/* Variables > Palettes > WinUI 3 */
|
||||
|
||||
$color-winui-00: #191919;
|
||||
$color-winui-01: #1D1D1D;
|
||||
$color-winui-02: #202020;
|
||||
$color-winui-03: #232323;
|
||||
$color-winui-04: #272727;
|
||||
$color-winui-05: #323232;
|
||||
$color-winui-06: #3E3E3E;
|
||||
|
||||
// https://flatuicolors.com/palette/defo
|
||||
|
||||
/* Variables > Palettes > Misc */
|
||||
|
||||
//$color-test-01: mix(#7b6aa5, #000000, 33%);
|
||||
//$color-test-02: #007c7d;
|
||||
|
||||
/* Variables > Colors Mappings */
|
||||
|
||||
$color-unset: $color-apollo-34;
|
||||
@@ -0,0 +1,81 @@
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Misc > Backgrounds */
|
||||
|
||||
.bkgd-dark {
|
||||
background: #{$color-background-main-headings};
|
||||
}
|
||||
|
||||
.bkgd-grey, .bkgd-gray {
|
||||
background: mix($color-background-main, $color-background-surround, 50%);
|
||||
}
|
||||
|
||||
.bkgd-light {
|
||||
background: $color-background-main;
|
||||
}
|
||||
|
||||
@if($include-grid-backgrounds) {
|
||||
// The element rules override rules in `base.scss ~94`
|
||||
.bkgd-grid10, .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;
|
||||
|
||||
//background:
|
||||
// #{$color-background-surround}
|
||||
// url("data:image/png;base64,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")
|
||||
// repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-grid20 {
|
||||
//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;
|
||||
}
|
||||
|
||||
.bkgd-grid30 {
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-grid40, .bkgd-grid {
|
||||
background: #{$color-background-surround}
|
||||
url("data:image/png;base64,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") repeat scroll center center;
|
||||
|
||||
//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-transparent {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.bkgd-blue {
|
||||
background-color: #{$color-background-button-primary};
|
||||
}
|
||||
|
||||
.bkgd-blue-light {
|
||||
background-color: #{$color-background-button-primary-hover};
|
||||
}
|
||||
|
||||
.bkgd-green {
|
||||
background-color: #{$color-background-button-success};
|
||||
}
|
||||
|
||||
.bkgd-green-light {
|
||||
background-color: #{$color-background-button-success-hover};
|
||||
}
|
||||
|
||||
.bkgd-red {
|
||||
background-color: #{$color-background-button-error};
|
||||
}
|
||||
|
||||
.bkgd-red-light {
|
||||
background-color: #{$color-background-button-error-hover};
|
||||
}
|
||||
|
||||
.bkgd-orange {
|
||||
background-color: #{$color-background-button-warning};
|
||||
}
|
||||
|
||||
.bkgd-orange-light {
|
||||
background-color: #{$color-background-button-warning-hover};
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}*/
|
||||
@@ -1,10 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Borders > Colors */
|
||||
|
||||
.border, code, .code, kbd {
|
||||
border-color: #{$color-border-code};
|
||||
border-color: #{$color-border-surround};
|
||||
|
||||
//&.b-light {
|
||||
// border: 1px solid #{$color-border-light};
|
||||
@@ -18,7 +14,7 @@ code, .code, kbd {
|
||||
main {
|
||||
.border {
|
||||
border-color: #{$color-border-main};
|
||||
|
||||
|
||||
//&.b-light {
|
||||
// border: 1px solid #{$color-border-light};
|
||||
//}
|
||||
@@ -1,22 +1,18 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
|
||||
/* Defaults > Code */
|
||||
|
||||
code, .code, kbd, .t-monospace {
|
||||
code, .code, kbd {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
// For large blocks
|
||||
//code { }
|
||||
.code, kbd, code {
|
||||
background-color: #{$color-background-code};
|
||||
code {
|
||||
|
||||
}
|
||||
|
||||
// For inline spans
|
||||
// We're applying the equivalent of `.r-s.px-xs.px-s`
|
||||
// Kinda goes against the core ideas, but it would be annoying without it.
|
||||
// For spans
|
||||
.code, kbd {
|
||||
background-color: #{$color-background-code};
|
||||
|
||||
border: 1px solid;
|
||||
|
||||
// Using '.r-s'
|
||||
@@ -32,15 +28,11 @@ code, .code, kbd, .t-monospace {
|
||||
background: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
// FIXME: Makes the inline block ugly !!!
|
||||
code, .code, .code-line {
|
||||
line-height: 1.175;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
// FIXME: Use a proper class !!!
|
||||
.code:not(code) {
|
||||
//padding: calc(#{$border-base-radius} * 0.625);
|
||||
padding: calc(#{$border-base-radius} * 0.55);
|
||||
padding-top: calc(#{$border-base-radius} * 0.25);
|
||||
padding-bottom: calc(#{$border-base-radius} * 0.25);
|
||||
padding: calc(#{$border-base-radius} * 0.625);
|
||||
}
|
||||
@@ -1,8 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Extras > NP Website Content */
|
||||
// Overrides all other rules since this style is fixed.
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.content-search-entry {
|
||||
min-height: #{$content-search-image-size};
|
||||
@@ -1,10 +1,9 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Elements > Horizontal Rule */
|
||||
/* Site > Elements > Horizontal Rule */
|
||||
|
||||
hr {
|
||||
border-color: #{$color-border-hr};
|
||||
border-color: #{$color-border-all};
|
||||
|
||||
&.subtle, &.hr-subtle {
|
||||
//background-color: rgba(0,0,0,0) !important;
|
||||
@@ -42,7 +41,7 @@ hr {
|
||||
content: '\002702';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #{$color-border-hr};
|
||||
color: #{$color-border-all};
|
||||
font-size: 18px;
|
||||
top: -8px;
|
||||
left: 40px;
|
||||
@@ -1,7 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Defaults > Images */
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.img-text {
|
||||
height: 1em;
|
||||
@@ -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};
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-color: #{$color-background-button-primary};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-primary-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background-color: #{$color-background-button-success};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-success-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
background-color: #{$color-background-button-error};
|
||||
|
||||
&:hover {
|
||||
background-color: #{$color-background-button-error-hover};
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-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;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Layouts */
|
||||
/* Site > Layouts */
|
||||
|
||||
/* Layouts > Commons */
|
||||
/* Site > Layouts > Commons */
|
||||
|
||||
html, body {
|
||||
// Do not use 100vh, it includes the search bar !
|
||||
@@ -1,8 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Layouts > Generic */
|
||||
/* Site > Layouts > Generic */
|
||||
|
||||
/* Layouts > Generic > Main Grid */
|
||||
/* Site > Layouts > Generic > Main Grid */
|
||||
|
||||
body.layout-generic {
|
||||
display: grid;
|
||||
@@ -51,13 +51,13 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Layouts > Generic > Mobile Fixes */
|
||||
/* 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-nav};
|
||||
border-right: 1px solid #{$color-border-main};
|
||||
}
|
||||
|
||||
& > header {
|
||||
@@ -72,7 +72,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Layouts > Generic > Sidebar */
|
||||
/* Site > Layouts > Generic > Sidebar */
|
||||
|
||||
body.layout-generic {
|
||||
.sidebar {
|
||||
@@ -96,7 +96,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Layouts > Generic > Sidebar > Mobile Fixes */
|
||||
/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
|
||||
|
||||
// Inverting the sidebar's states for mobile devices
|
||||
@media only screen and (max-width: 768px) {
|
||||
@@ -128,7 +128,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Layouts > Generic > Main Extras */
|
||||
/* Site > Layouts > Generic > Main Extras */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
body.layout-generic {
|
||||
@@ -151,7 +151,7 @@ body.layout-generic {
|
||||
}
|
||||
|
||||
|
||||
/* Layouts > Generic > Transitions */
|
||||
/* Site > Layouts > Generic > Transitions */
|
||||
|
||||
body.layout-generic {
|
||||
main, .sidebar {
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
|
||||
/* Fixes > Mobile */
|
||||
/* Site > Fixes > Mobile */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
// Overrides the ".p-l" class used on "main".
|
||||
@@ -9,8 +8,12 @@
|
||||
padding: calc(#{$margin-base-size} * 0.5) !important;
|
||||
}
|
||||
|
||||
// Overrides a style in "site/extra-np-content.scss".
|
||||
// Overrides a style in "site/content.scss".
|
||||
.content-search-entry > p {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
|
||||
/* Elements > Scrollbars */
|
||||
/* Site > Elements > Scrollbars */
|
||||
|
||||
//@media (min-width: 769px) {
|
||||
*::-webkit-scrollbar {
|
||||
@@ -11,11 +10,11 @@
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track:vertical {
|
||||
border-left: 1px solid #{$color-border-scrollbar};
|
||||
border-left: 1px solid #{$color-scrollbar-border};
|
||||
}
|
||||
|
||||
/**::-webkit-scrollbar-track:horizontal {
|
||||
border-top: 1px solid #{$color-border-scrollbar};
|
||||
border-top: 1px solid #{$color-scrollbar-border};
|
||||
}*/
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
@@ -1,6 +1,5 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Extras > Splide */
|
||||
|
||||
// Zoom-in effect for image galleries
|
||||
@@ -1,7 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Tables > Defaults */
|
||||
/* Site > Tables */
|
||||
|
||||
.table-stylish {
|
||||
border-collapse: separate;
|
||||
@@ -12,18 +11,18 @@
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #{$color-background-table-tr-alt};
|
||||
background-color: #{$color-background-table-dual};
|
||||
}
|
||||
|
||||
tr:nth-child(2n), th {
|
||||
background-color: #{$color-background-table-tr-main};
|
||||
background-color: #{$color-background-table-main};
|
||||
}
|
||||
|
||||
td:not(:last-of-type), th:not(:last-of-type) {
|
||||
border-right: 1.5px solid #{$color-border-table};
|
||||
border-right: 1.5px solid #{$color-table-border};
|
||||
}
|
||||
|
||||
tr:not(:last-of-type) td, th {
|
||||
border-bottom: 1.5px solid #{$color-border-table};
|
||||
border-bottom: 1.5px solid #{$color-table-border};
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Site > Elements > Video */
|
||||
|
||||
/* Elements > Video */
|
||||
|
||||
// FIXME: Does not respect the core tenets !
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
@@ -1,13 +1,13 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Custom Elements > Wedge */
|
||||
|
||||
.wedge {
|
||||
wedge, .wedge {
|
||||
position: absolute;
|
||||
//top: 0;
|
||||
//right: 0;
|
||||
|
||||
color: #{$color-text-generic};
|
||||
color: #{$color-text-regular-normal};
|
||||
background-color: #{$color-background-button};
|
||||
|
||||
user-select: none;
|
||||
@@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
&.wedge-shadow {
|
||||
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
|
||||
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@@ -1,28 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Links */
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Misc */
|
||||
|
||||
.t-ucase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.t-lcase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.t-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.t-nowrap {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Text > Styling */
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// Defined in core/defaults-code.scss !
|
||||
//.t-monospace {
|
||||
// font-family: monospace, monospace;
|
||||
//}
|
||||
@@ -1,32 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* 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 have any visible effect...
|
||||
@@ -1,45 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Cursors */
|
||||
|
||||
@mixin cursor-maker($cursor-type) {
|
||||
.c-#{$cursor-type}, .cursor-#{$cursor-type} {
|
||||
cursor: #{$cursor-type} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include cursor-maker("auto");
|
||||
@include cursor-maker("default");
|
||||
@include cursor-maker("pointer");
|
||||
@include cursor-maker("context-menu");
|
||||
@include cursor-maker("help");
|
||||
@include cursor-maker("progress");
|
||||
@include cursor-maker("wait");
|
||||
@include cursor-maker("crosshair");
|
||||
@include cursor-maker("not-allowed");
|
||||
@include cursor-maker("zoom-in");
|
||||
@include cursor-maker("zoom-out");
|
||||
@include cursor-maker("grab");
|
||||
@include cursor-maker("cell");
|
||||
@include cursor-maker("text");
|
||||
@include cursor-maker("vertical-text");
|
||||
@include cursor-maker("alias");
|
||||
@include cursor-maker("copy");
|
||||
@include cursor-maker("move");
|
||||
@include cursor-maker("no-drop");
|
||||
@include cursor-maker("all-scroll");
|
||||
@include cursor-maker("col-resize");
|
||||
@include cursor-maker("row-resize");
|
||||
@include cursor-maker("n-resize");
|
||||
@include cursor-maker("e-resize");
|
||||
@include cursor-maker("s-resize");
|
||||
@include cursor-maker("w-resize");
|
||||
@include cursor-maker("ne-resize");
|
||||
@include cursor-maker("nw-resize");
|
||||
@include cursor-maker("se-resize");
|
||||
@include cursor-maker("sw-resize");
|
||||
@include cursor-maker("ew-resize");
|
||||
@include cursor-maker("ns-resize");
|
||||
@include cursor-maker("nesw-resize");
|
||||
@include cursor-maker("nwse-resize");
|
||||
@@ -1,10 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Mobile */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.mobile-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Positions */
|
||||
|
||||
@mixin position-maker($position-type) {
|
||||
.p-#{$position-type} {
|
||||
position: #{$position-type};
|
||||
}
|
||||
}
|
||||
|
||||
@include position-maker(static);
|
||||
@include position-maker(relative);
|
||||
@include position-maker(absolute);
|
||||
@include position-maker(fixed);
|
||||
@include position-maker(sticky);
|
||||
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
.bottom-0 {
|
||||
bottom: 0;
|
||||
}
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
.right-0 {
|
||||
right: 0;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
|
||||
/* Utils > Text */
|
||||
|
||||
.t-noselect {
|
||||
user-select: none;
|
||||
}
|
||||
+283
-9
@@ -1,13 +1,293 @@
|
||||
// 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);
|
||||
|
||||
|
||||
/* Variables */
|
||||
// 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 !)
|
||||
|
||||
// If not set to `-1`, will auto define a low-priority size for headers.
|
||||
$text-weight-header: 600;
|
||||
// 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;
|
||||
|
||||
@@ -33,9 +313,3 @@ $content-search-image-size: 128px;
|
||||
$z-index-sidebar: 5;
|
||||
$z-index-lang-dropdown: 10;
|
||||
$z-index-modal: 99;
|
||||
|
||||
|
||||
/* Variables > Themes & Overrides */
|
||||
//@import "themes/theme_unset";
|
||||
//@import "old/parts/theme_nibblepoker_v2";
|
||||
@import "old/parts/theme_nibblepoker_v3";
|
||||
|
||||
Reference in New Issue
Block a user