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

Fixed table rounding, partially

Browse Source 
Update backgrounds.php, intro.php, and 9 more files...
This commit is contained in:
Herwin Bozet (NibblePoker) 2024-11-23 17:59:48 +01:00
parent 2d1b2eb8fd
commit 5f3398176a
11 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/parts/backgrounds.php
View File

@ -39,12 +39,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<span class="code">.bkgd-grid</span> <span class="code">.bkgd-grid</span>
</div> </div>
<div> <div>
<p class="t-w-500">30% opacity (Unused)</p> <p class="t-w-500">30% opacity</p>
<div class="p-l border r-xl bkgd-grid30 my-xs"></div> <div class="p-l border r-xl bkgd-grid30 my-xs"></div>
<span class="code">.bkgd-grid30</span> <span class="code">.bkgd-grid30</span>
</div> </div>
<div> <div>
<p class="t-w-500">20% opacity (Unused)</p> <p class="t-w-500">20% opacity</p>
<div class="p-l border r-xl bkgd-grid20 my-xs"></div> <div class="p-l border r-xl bkgd-grid20 my-xs"></div>
<span class="code">.bkgd-grid20</span> <span class="code">.bkgd-grid20</span>
</div> </div>

2
htdocs/parts/intro.php
View File

@ -56,7 +56,7 @@ global $root_path;
</div> </div>
<h3 class="t-size-12 mb-xxs mt-m">Downloads</h3> <h3 class="t-size-12 mb-xxs mt-m">Downloads</h3>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs"> <table class="table-stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center ml-xs">
<thead> <thead>
<th>Stylesheet</th> <th>Stylesheet</th>
<th>Minified CSS</th> <th>Minified CSS</th>

33
htdocs/parts/tables_site.php
View File

@ -13,26 +13,26 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<section class="p-s"> <section class="p-s">
<div class="bkgd-red t-bold t-center w-full r-l border p-xs mt-xxs mb-m"> <div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
⚠️ These styles will change before the 1.0.0 release ⚠️ ⚠️ These styles require a special workaround to work properly ⚠️
</div> </div>
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3> <h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
<div class="px-s"> <div class="px-s">
<p class="mb-xxs"> <p class="mb-xxs">
Tables can quickly be styled by simply using the following classes: Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
</p> </p>
<ul class="mb-s list-bullets list-bullet-manual ml-xs"> <p class="mb-xs">
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li> However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li> Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li> A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li> </p>
</ul> <table class="table-stylish table-p-s border r-l">
<table class="stylish table-p-s border"> <thead>
<tr>
<th>Head 1</th> <th>Head 1</th>
<th>Head 2</th> <th>Head 2</th>
</tr> </thead>
<tbody>
<tr> <tr>
<td>Cell 1.1</td> <td>Cell 1.1</td>
<td>Cell 1.2</td> <td>Cell 1.2</td>
@ -41,12 +41,13 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<td>Cell 2.1</td> <td>Cell 2.1</td>
<td>Cell 2.2</td> <td>Cell 2.2</td>
</tr> </tr>
</tbody>
</table> </table>
<code class="d-block p-xxs border r-s mt-s"> <code class="d-block p-xxs border r-s mt-s">
table<b>.stylish.table-p-s.border</b><br> table<b>.table-stylish.table-p-s.border.o-hidden</b><br>
&nbsp;&nbsp;th>td*2<br> &nbsp;&nbsp;thead>th>td*2<br>
&nbsp;&nbsp;tr*2>td*2 &nbsp;&nbsp;tbody>tr*2>td*2
</code> </code>
</div> </div>
</section> </section>

2
htdocs/parts/text_alignment.php
View File

@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-text-width f-right"></i></h2> <i class="fa-solid fa-text-width f-right"></i></h2>
</div> </div>
<section class="p-s"> <section class="p-s">
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish border o-hidden table-p-xs table-v-center r-l">
<thead> <thead>
<th>Style</th> <th>Style</th>
<th>Example</th> <th>Example</th>

6
htdocs/parts/text_links.php
View File

@ -12,7 +12,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<section class="p-s"> <section class="p-s">
<h3 class="t-size-12 mb-xs">Regular anchors</h3> <h3 class="t-size-12 mb-xs">Regular anchors</h3>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Example</th> <th>Example</th>
<th>Source</th> <th>Source</th>
@ -30,7 +30,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</table> </table>
<h3 class="t-size-12 mb-xs mt-m">Bland anchors</h3> <h3 class="t-size-12 mb-xs mt-m">Bland anchors</h3>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Example</th> <th>Example</th>
<th>Source</th> <th>Source</th>
@ -48,7 +48,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</table> </table>
<h3 class="t-size-12 mb-xs mt-m">Hidden anchors</h3> <h3 class="t-size-12 mb-xs mt-m">Hidden anchors</h3>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Example</th> <th>Example</th>
<th>Source</th> <th>Source</th>

2
htdocs/parts/text_misc.php
View File

@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-ellipsis f-right"></i></h2> <i class="fa-solid fa-ellipsis f-right"></i></h2>
</div> </div>
<section class="p-s"> <section class="p-s">
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Style</th> <th>Style</th>
<th>Example</th> <th>Example</th>

2
htdocs/parts/text_modifiers.php
View File

@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-subscript f-right"></i></h2> <i class="fa-solid fa-subscript f-right"></i></h2>
</div> </div>
<section class="p-s"> <section class="p-s">
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Style</th> <th>Style</th>
<th>Original</th> <th>Original</th>

2
htdocs/parts/text_styles.php
View File

@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-italic f-right"></i></h2> <i class="fa-solid fa-italic f-right"></i></h2>
</div> </div>
<section class="p-s"> <section class="p-s">
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Style</th> <th>Style</th>
<th>Example</th> <th>Example</th>

4
htdocs/parts/text_weights.php
View File

@ -11,7 +11,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-text-height f-right"></i></h2> <i class="fa-solid fa-text-height f-right"></i></h2>
</div> </div>
<section class="p-s"> <section class="p-s">
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center">
<thead> <thead>
<th>Style</th> <th>Style</th>
<th>Example</th> <th>Example</th>
@ -30,7 +30,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</tbody> </tbody>
</table> </table>
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center mt-l"> <table class="table-stylish r-l border o-hidden table-p-xs table-v-center mt-l">
<thead> <thead>
<th>Style</th> <th>Style</th>
<th>Example</th> <th>Example</th>

2
scss/site/borders.scss
View File

@ -26,7 +26,7 @@ table.stylish {
// It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently. // It will look like utter shit when rounded on firefox because its rendering engine cannot clip rounded corners apparently.
// I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit. // I guess that's what being at less than 3% of the market share does to you and your ability to care about basic shit.
&.border { &.border {
background-color: #{$color-border-main}; //background-color: #{$color-border-main};
} }
} }

12
scss/site/table.scss
View File

@ -2,7 +2,10 @@
/* Site > Tables */ /* Site > Tables */
table.stylish { .table-stylish {
border-collapse: separate;
overflow: hidden;
th { th {
font-weight: bold; font-weight: bold;
} }
@ -10,7 +13,7 @@ table.stylish {
tr { tr {
background-color: #{$color-background-table-dual}; background-color: #{$color-background-table-dual};
} }
tr:not(:last-of-type), th { tr:not(:last-of-type), th {
border-bottom: 1.5px solid #{$color-table-border}; border-bottom: 1.5px solid #{$color-table-border};
} }
@ -22,6 +25,7 @@ table.stylish {
td:not(:last-of-type), th:not(:last-of-type) { td:not(:last-of-type), th:not(:last-of-type) {
border-right: 1.5px solid #{$color-table-border}; border-right: 1.5px solid #{$color-table-border};
} }
// See 'site/border.scss' for border fix. // Remark: Tables can be rounded if their parent is.
// Thank the modern web for that...
} }