mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-27 15:00:06 +02:00
Code Issues Releases Wiki Activity

Merge branch 'master' into bugfix/custom-boxes

Browse Source
This commit is contained in:
Kognise
2019-08-26 12:26:07 -04:00
parent 651f73a3ff cecf3becfa
commit eea4f7e92a
84 changed files with 3109 additions and 927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/builds/dark-legacy.css Executable file
View File

@@ -0,0 +1,10 @@
/**
* Dark-themed version for legacy browsers:
* Loads the compiled, standalone version of the dark theme,
* but overrides it with the compiled, standalone version of the light theme
* if a system-wide theme preference is set on the user's device.
*/
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')
(prefers-color-scheme: light);

8
src/builds/dark-legacy.standalone.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* Standalone dark-themed version for legacy browsers.
* Includes dark variables and core, compiled at build time so the final output
* will only include regular CSS, no variables.
*/
@import '../variables-dark.css';
@import '../parts/_core.css';

13
src/builds/dark.css Normal file
View File

@@ -0,0 +1,13 @@
/**
* Dark-themed version:
* uses dark theme by default but switches to light theme
* if a system-wide theme preference is set on the user's device.
*
* Variables will remain uncompiled so the theme can update dynamically
* at runtime in the browser.
*/
@import '../variables-dark.css';
@import '../variables-light.css' (prefers-color-scheme: light);
@import '../parts/_core.css';

8
src/builds/dark.standalone.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* Standalone dark-themed version.
* Includes dark variables and core, left as CSS variables
* so the theming can be adjusted at runtime.
*/
@import '../variables-dark.css';
@import '../parts/_core.css';

10
src/builds/light-legacy.css Executable file
View File

@@ -0,0 +1,10 @@
/**
* Light-themed version for legacy browsers:
* Loads the compiled, standalone version of the light theme at runtime,
* but overrides it with the compiled, standalone version of the dark theme
* if a system-wide theme preference is set on the user's device.
*/
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')
(prefers-color-scheme: dark);

8
src/builds/light-legacy.standalone.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* Standalone light-themed version for legacy browsers.
* Includes light variables and core, compiled at build time so the final output
* will only include regular CSS, no variables.
*/
@import '../variables-light.css';
@import '../parts/_core.css';

14
src/builds/light.css Normal file
View File

@@ -0,0 +1,14 @@
/**
* Light-themed version:
* uses light theme by default but switches to dark theme
* if a system-wide theme preference is set on the user's device.
*
* Variables will remain uncompiled so the theme can update dynamically
* at runtime in the browser.
*/
@import '../variables-light.css';
@import '../variables-dark.css' (prefers-color-scheme: dark);
@import '../parts/_core.css';

8
src/builds/light.standalone.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* Standalone light-themed version.
* Includes light variables and core, left as CSS variables
* so the theming can be adjusted at runtime.
*/
@import '../variables-light.css';
@import '../parts/_core.css';

21
src/dark.scss
View File

@@ -1,21 +0,0 @@
$background: #202b38 !default;
$background-alt: #161f27 !default;
$text-main: #dbdbdb !default;
$text-bright: #ffffff !default;
$links: #41adff !default;
$focus: #0096bfab !default;
$border: #dbdbdb !default;
$code: #ffbe85 !default;
$button-hover: #324759 !default;
$animation-duration: 0.1s !default;
$scrollbar-thumb: $button-hover;
$scrollbar-thumb-hover: lighten($button-hover, 8%);
$form-placeholder: #a9a9a9 !default;
$form-text: #ffffff !default;
@import 'parts/core';

21
src/light.scss
View File

@@ -1,21 +0,0 @@
$background: #ffffff !default;
$background-alt: #efefef !default;
$text-main: #363636 !default;
$text-bright: #000000 !default;
$links: #0076d1 !default;
$focus: #0096bfab !default;
$border: #dbdbdb !default;
$code: #000000 !default;
$button-hover: #dddddd !default;
$animation-duration: 0.1s !default;
$scrollbar-thumb: darken($button-hover, 3%);
$scrollbar-thumb-hover: darken($button-hover, 10%);
$form-placeholder: #949494 !default;
$form-text: #000000 !default;
@import 'parts/core';

21
src/parts/_base.css Normal file
View File

@@ -0,0 +1,21 @@
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
color: var(--text-main);
background: var(--background-body);
text-rendering: optimizeLegibility;
}
button, input, textarea {
transition: background-color var(--animation-duration) linear,
border-color var(--animation-duration) linear,
color var(--animation-duration) linear,
box-shadow var(--animation-duration) linear,
transform var(--animation-duration) ease;
}

21
src/parts/_base.scss
View File

@@ -1,21 +0,0 @@
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.4;
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
color: $text-main;
background: $background;
text-rendering: optimizeLegibility;
}
button, input, textarea {
transition: background-color $animation-duration linear,
border-color $animation-duration linear,
color $animation-duration linear,
box-shadow $animation-duration linear,
transform $animation-duration ease;
}

27
src/parts/_code.css Normal file
View File

@@ -0,0 +1,27 @@
code, samp, time {
background: var(--background);
color: var(--code);
padding: 2.5px 5px;
border-radius: 6px;
font-size: 1em;
}
pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}
var {
color: var(--variable);
font-style: normal;
font-family: monospace;
}
kbd {
background: var(--background);
border: 1px solid var(--border);
border-radius: 2px;
color: var(--text-main);
padding: 2px 4px 2px 4px;
}

12
src/parts/_code.scss
View File

@@ -1,12 +0,0 @@
code, kbd {
background: $background-alt;
color: $code;
padding: 5px;
border-radius: 6px;
}
pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}

6
src/parts/_core.css Normal file
View File

@@ -0,0 +1,6 @@
@import '_base.css';
@import '_typography.css';
@import '_forms.css';
@import '_links.css';
@import '_code.css';
@import '_misc.css';

6
src/parts/_core.scss
View File

@@ -1,6 +0,0 @@
@import 'base';
@import 'typography';
@import 'forms';
@import 'links';
@import 'code';
@import 'misc';

109
src/parts/_forms.scss
View File

@@ -1,109 +0,0 @@
button,
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='radio'] {
cursor: pointer;
}
input:not([type='checkbox']):not([type='radio']),
select {
display: block;
}
input, select, button, textarea {
color: $form-text;
background-color: $background-alt;
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
-webkit-appearance: none;
}
textarea {
margin-right: 0;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
button, input[type='submit'], input[type='button'] {
padding-right: 30px;
padding-left: 30px;
}
button:hover,
input[type='submit']:hover,
input[type='button']:hover {
background: $button-hover;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
box-shadow: 0 0 0 2px $focus;
}
input[type='checkbox'],
input[type='radio'] {
position: relative;
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin: 0;
margin-right: 2px;
}
input[type='radio'] {
border-radius: 50%;
}
input[type='checkbox']:checked,
input[type='radio']:checked {
background: $button-hover;
&::before {
content: '•';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
input[type='checkbox']:checked::before {
content: '✔';
transform: translateY(-50%) translateY(0.5px) translateX(-6px);
}
input[type='checkbox']:active,
input[type='radio']:active,
input[type='submit']:active,
input[type='button']:active,
button:active {
transform: translateY(2px);
}
input:disabled,
select:disabled,
button:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: .5;
}
::placeholder {
color: $form-placeholder;
}

2
src/parts/_links.scss → src/parts/_links.css
View File

@@ -1,6 +1,6 @@
a {
text-decoration: none;
color: $links;
color: var(--links);
}
a:hover {

22
src/parts/_misc.scss → src/parts/_misc.css
View File

@@ -1,10 +1,11 @@
img {
max-width: 100%;
height: auto;
}
hr {
border: none;
border-top: 1px solid $border;
border-top: 1px solid var(--border);
}
table {
@@ -13,17 +14,18 @@ table {
width: 100%;
}
td, th {
td,
th {
padding: 6px;
text-align: left;
}
th {
border-bottom: 1px solid $border;
border-bottom: 1px solid var(--border);
}
tbody tr:nth-child(even) {
background-color: $background-alt;
background-color: var(--background-alt);
}
::-webkit-scrollbar {
@@ -32,15 +34,19 @@ tbody tr:nth-child(even) {
}
::-webkit-scrollbar-track {
background: $background-alt;
background: var(--background);
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: $scrollbar-thumb;
background: var(--scrollbar-thumb);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: $scrollbar-thumb-hover;
}
background: var(--scrollbar-thumb-hover);
}
::selection {
background-color: var(--selection);
}

21
src/parts/_typography.scss → src/parts/_typography.css
View File

@@ -19,7 +19,7 @@ h4,
h5,
h6,
strong {
color: $text-bright;
color: var(--text-bright);
}
h1,
@@ -34,8 +34,16 @@ th {
font-weight: 600;
}
blockquote {
border-left: 4px solid $focus;
q:before {
content: none;
}
q:after {
content: none;
}
blockquote , q{
border-left: 4px solid var(--focus);
margin: 1.5em 0em;
padding: 0.5em 1em;
font-style: italic;
@@ -64,4 +72,11 @@ a[href^='tel']::before {
a[href^='sms']::before {
content: '💬 ';
}
mark {
background-color: var(--highlight);
border-radius: 2px;
padding: 0px 2px 0px 2px;
color: #000000;
}

27
src/variables-dark.css Executable file
View File

@@ -0,0 +1,27 @@
:root {
--background-body: #202b38;
--background: #161f27;
--background-alt: #1a242f;
--selection: #161f27;
--text-main: #dbdbdb;
--text-bright: #ffffff;
--links: #41adff;
--focus: #0096bfab;
--border: #dbdbdb;
--code: #ffbe85;
--animation-duration: 0.1s;
--button-hover: #324759;
--scrollbar-thumb: var(--button-hover);
--scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
--form-placeholder: #a9a9a9;
--form-text: #ffffff;
--variable: #d941e2;
--highlight: #efdb43;
}

27
src/variables-light.css Executable file
View File

@@ -0,0 +1,27 @@
:root {
--background-body: #ffffff;
--background: #efefef;
--background-alt: #f7f7f7;
--selection: #9e9e9e;
--text-main: #363636;
--text-bright: #000000;
--links: #0076d1;
--focus: #0096bfab;
--border: #dbdbdb;
--code: #000000;
--animation-duration: 0.1s;
--button-hover: #dddddd;
--scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%));
--scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
--form-placeholder: #949494;
--form-text: #000000;
--variable: #39a33c;
--highlight: #ffff00;
}