Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 6d786c27 编写于 作者: C codecalm
浏览文件
操作

dark theme, remove unused functions

上级 7d66c8ab
隐藏空白更改
内联 并排
Showing with 58 addition and 50 deletion
_config.yml
浏览文件 @ 6d786c27
...@@ -8,6 +8,8 @@ github_url: https://github.com/tabler/tabler ...@@ -8,6 +8,8 @@ github_url: https://github.com/tabler/tabler
debug: false debug: false
dark-theme: false
plugins: plugins:
- jekyll-random - jekyll-random
- jekyll-tidy - jekyll-tidy
......
pages/_includes/cards/invoice.html
浏览文件 @ 6d786c27
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<tr> <tr>
<td class="text-center">1</td> <td class="text-center">1</td>
<td> <td>
<p class="font-w600 mb-1">Logo Creation</p> <p class="strong mb-1">Logo Creation</p>
<div class="text-muted">Logo and business cards design</div> <div class="text-muted">Logo and business cards design</div>
</td> </td>
<td class="text-center"> <td class="text-center">
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<tr> <tr>
<td class="text-center">2</td> <td class="text-center">2</td>
<td> <td>
<p class="font-w600 mb-1">Online Store Design &amp; Development</p> <p class="strong mb-1">Online Store Design &amp; Development</p>
<div class="text-muted">Design/Development for all popular modern browsers</div> <div class="text-muted">Design/Development for all popular modern browsers</div>
</td> </td>
<td class="text-center"> <td class="text-center">
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<tr> <tr>
<td class="text-center">3</td> <td class="text-center">3</td>
<td> <td>
<p class="font-w600 mb-1">App Design</p> <p class="strong mb-1">App Design</p>
<div class="text-muted">Promotional mobile application</div> <div class="text-muted">Promotional mobile application</div>
</td> </td>
<td class="text-center"> <td class="text-center">
...@@ -80,15 +80,15 @@ ...@@ -80,15 +80,15 @@
<td class="text-right">$3.200,00</td> <td class="text-right">$3.200,00</td>
</tr> </tr>
<tr> <tr>
<td colspan="4" class="font-w600 text-right">Subtotal</td> <td colspan="4" class="strong text-right">Subtotal</td>
<td class="text-right">$25.000,00</td> <td class="text-right">$25.000,00</td>
</tr> </tr>
<tr> <tr>
<td colspan="4" class="font-w600 text-right">Vat Rate</td> <td colspan="4" class="strong text-right">Vat Rate</td>
<td class="text-right">20%</td> <td class="text-right">20%</td>
</tr> </tr>
<tr> <tr>
<td colspan="4" class="font-w600 text-right">Vat Due</td> <td colspan="4" class="strong text-right">Vat Due</td>
<td class="text-right">$5.000,00</td> <td class="text-right">$5.000,00</td>
</tr> </tr>
<tr> <tr>
......
pages/_layouts/base.html
浏览文件 @ 6d786c27
...@@ -31,7 +31,9 @@ ...@@ -31,7 +31,9 @@
<style>body { display: none; }</style> <style>body { display: none; }</style>
</head> </head>
<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
<body class="antialiased{% if dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{{ content }} {{ content }}
......
scss/_dark.scss
浏览文件 @ 6d786c27
// stylelint-disable declaration-no-important // stylelint-disable declaration-no-important
@mixin dark-mode { $dark-body-bg: #222935;
$dark-body-color: #afbdd1;
$dark-border-color: rgba($border-color, .01);
@mixin dark-mode {
&, &,
.modal-content, .modal-content,
.dropdown-menu { .dropdown-menu,
color: #afbdd1; .example-bg {
background: $dark; color: $dark-body-color;
} background: $dark-body-bg;
.dropdown-menu-arrow::after {
border-bottom-color: $dark;
} }
.card, .card,
.header,
.sidebar, .sidebar,
.sidenav, .topbar {
.topnav,
.navbar,
.form-control,
.form-select,
.form-switch .form-check-input,
.selectgroup-button {
color: inherit; color: inherit;
background: rgba(0, 0, 0, .1); background: rgba($white, .02);
border-color: $dark-border-color;
}
.progress,
.form-control-light {
background: $dark-border-color;
}
.example,
.card-footer,
.card-header,
.table th, .markdown table th, .table td, .markdown table td,
.dropdown-menu {
border-color: $dark-border-color;
} }
.text-body { .text-body {
...@@ -32,16 +39,22 @@ ...@@ -32,16 +39,22 @@
} }
.avatar-list-stacked .avatar { .avatar-list-stacked .avatar {
box-shadow: 0 0 0 2px #2b3648; box-shadow: 0 0 0 2px #222226;
} }
.navbar-brand-logo { .navbar-brand-logo {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
} }
.form-fieldset {
border-color: transparent;
}
} }
body.theme-dark { @media not print {
@include dark-mode; body.theme-dark {
@include dark-mode;
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
......
scss/_variables.scss
浏览文件 @ 6d786c27
...@@ -217,7 +217,7 @@ $btn-font-weight: $font-weight-bold !default; ...@@ -217,7 +217,7 @@ $btn-font-weight: $font-weight-bold !default;
$btn-border-radius: 3px !default; $btn-border-radius: 3px !default;
//cards //cards
$card-border-color: $border-color !default; $card-border-color: $border-color-alpha !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-cap-bg: $min-black !default; $card-cap-bg: $min-black !default;
...@@ -250,8 +250,7 @@ $loader-size: 2.5rem !default; ...@@ -250,8 +250,7 @@ $loader-size: 2.5rem !default;
//navbar //navbar
$navbar-bg: $white !default; $navbar-bg: $white !default;
$navbar-height: 3.5rem !default; $navbar-height: 3.5rem !default;
$navbar-border-color: $border-color !default; $navbar-border-color: $border-color-alpha !default;
$navbar-border-color: $border-color !default;
//nav //nav
$nav-link-padding-y: 1rem !default; $nav-link-padding-y: 1rem !default;
......
scss/layout/_page.scss
浏览文件 @ 6d786c27
...@@ -18,5 +18,5 @@ ...@@ -18,5 +18,5 @@
font-size: $h2-font-size; font-size: $h2-font-size;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
color: $body-color; color: inherit;
} }
scss/mixins/_functions.scss
浏览文件 @ 6d786c27
@function px2rem($px) {
@return ($px / 16px) * 1rem;
}
@function alpha-attribute($color, $background) { @function alpha-attribute($color, $background) {
$percent: alpha($color) * 100%; $percent: alpha($color) * 100%;
$opaque: opacify($color, 1); $opaque: opacify($color, 1);
...@@ -10,14 +6,9 @@ ...@@ -10,14 +6,9 @@
} }
@function theme-color-lighter($color) { @function theme-color-lighter($color) {
@return alpha-attribute(rgba($color, .2), #fff); @return rgba($color, .2);
} }
@function theme-color-lightest($color) {
@return mix($color, #fff, 10%);
}
@function str-replace($string, $search, $replace: "") { @function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search); $index: str-index($string, $search);
......
scss/ui/_forms.scss
浏览文件 @ 6d786c27
...@@ -37,7 +37,7 @@ textarea { ...@@ -37,7 +37,7 @@ textarea {
.form-fieldset { .form-fieldset {
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background: $gray-100; background: $min-black;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius; border-radius: $border-radius;
} }
...@@ -58,7 +58,7 @@ Form help ...@@ -58,7 +58,7 @@ Form help
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
font-size: px2rem(12px); font-size: $h5-font-size;
line-height: 1rem; line-height: 1rem;
color: $text-muted; color: $text-muted;
text-align: center; text-align: center;
......
scss/ui/_highlight.scss
浏览文件 @ 6d786c27
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
max-height: 40rem; max-height: 40rem;
margin: 1rem 0 2rem; margin: 1rem 0 2rem;
overflow: auto; overflow: auto;
font-size: px2rem(15px); font-size: $font-size-base;
background: #fcfcfc; background: #fcfcfc;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 3px; border-radius: 3px;
......
scss/ui/_icons.scss
浏览文件 @ 6d786c27
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
} }
.icon-md { .icon-md {
font-size: px2rem(24px); font-size: 1.5rem;
} }
.icon-lg { .icon-lg {
font-size: px2rem(32px); font-size: 2rem;
} }
......
scss/ui/_pagination.scss
浏览文件 @ 6d786c27
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
} }
.page-link { .page-link {
min-width: px2rem(26px); min-width: 1.5rem;
border-radius: $border-radius; border-radius: $border-radius;
&:hover { &:hover {
......
scss/ui/_typo.scss
浏览文件 @ 6d786c27
...@@ -27,6 +27,7 @@ h6, ...@@ -27,6 +27,7 @@ h6,
} }
strong, strong,
.strong,
b { b {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
......
scss/ui/forms/_form-imagecheck.scss
浏览文件 @ 6d786c27
...@@ -18,7 +18,7 @@ Image check ...@@ -18,7 +18,7 @@ Image check
display: flex; display: flex;
margin: 0; margin: 0;
user-select: none; user-select: none;
border: 1px solid $border-color; border: 1px solid $border-color-alpha;
border-radius: 3px; border-radius: 3px;
.imagecheck-input:focus ~ & { .imagecheck-input:focus ~ & {
...@@ -27,7 +27,7 @@ Image check ...@@ -27,7 +27,7 @@ Image check
} }
.imagecheck-input:checked ~ & { .imagecheck-input:checked ~ & {
border-color: $border-color; border-color: $border-color-alpha;
} }
&::before { &::before {
......
scss/vendor/_sparkline.scss
浏览文件 @ 6d786c27
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: px2rem(11px); font-size: $h6-font-size;
.icon { .icon {
width: 1rem; width: 1rem;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或