landsoul 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 YieldRay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# landsoul
+
+Drop in css library landsoul  
+Support dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`  
+IE11 is not supported  
+normalize.css is optional  
+Preview: <https://yieldray.github.io/landsoul/>
+
+## dev
+
+```bash
+$ npm install
+$ npm run dev
+# xdg-open index.html
+```
+
+## build
+
+```bash
+$ npm run build
+```

package/dist/landsoul.css

@@ -0,0 +1,455 @@
+body {
+    --landsoul-bg: #fff;
+    --landsoul-text: #3d424f;
+    --landsoul-shadow: #f4f4f5;
+    --landsoul-accent: #2563eb;
+    --landsoul-color: #e3e4e8;
+    --landsoul-time: 0.3s;
+    --landsoul-radius: 0.25em;
+    --landsoul-gradient: linear-gradient(#ccfcf7, #c4eae9, #bbd8db, #b3c6cd, #aab4bf);
+}
+body[data-theme="dark"] {
+    --landsoul-bg: #202021;
+    --landsoul-text: #e7e7e7;
+    --landsoul-shadow: #353e5a;
+    --landsoul-color: #2b414f;
+}
+@media screen and (color-index: 48) {
+    body {
+        --landsoul-bg: #202021;
+        --landsoul-text: #e7e7e7;
+        --landsoul-shadow: #353e5a;
+        --landsoul-color: #2b414f;
+    }
+}
+@media screen and (color: 48842621) {
+    body {
+        --landsoul-bg: #202021;
+        --landsoul-text: #e7e7e7;
+        --landsoul-shadow: #353e5a;
+        --landsoul-color: #2b414f;
+    }
+}
+@media screen and (prefers-color-scheme: dark) {
+    body {
+        --landsoul-bg: #202021;
+        --landsoul-text: #e7e7e7;
+        --landsoul-shadow: #353e5a;
+        --landsoul-color: #2b414f;
+    }
+}
+body {
+    margin: 0;
+}
+a {
+    background-color: transparent;
+}
+progress {
+    vertical-align: baseline;
+    width: 8rem;
+}
+body {
+    background-color: var(--landsoul-bg);
+    color: var(--landsoul-text);
+    font-family: Graphik, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    -webkit-transition: color var(--landsoul-time), background-color var(--landsoul-time);
+    transition: color var(--landsoul-time), background-color var(--landsoul-time);
+}
+a {
+    color: var(--landsoul-accent);
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+h1 {
+    font-size: 2.5rem;
+}
+h2 {
+    font-size: 2.25rem;
+}
+h3 {
+    font-size: 2rem;
+}
+h4 {
+    font-size: 1.75rem;
+}
+h5 {
+    font-size: 1.5rem;
+}
+h6 {
+    font-size: 1.25rem;
+}
+a[href^="#"] h1,
+a[href^="#"] h2,
+a[href^="#"] h3,
+a[href^="#"] h4,
+a[href^="#"] h5,
+a[href^="#"] h6 {
+    color: var(--landsoul-text);
+}
+a[href^="#"] h1:before,
+a[href^="#"] h2:before,
+a[href^="#"] h3:before,
+a[href^="#"] h4:before,
+a[href^="#"] h5:before,
+a[href^="#"] h6:before {
+    color: var(--landsoul-accent);
+    content: "#";
+    margin-right: 0.3rem;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+h1 > small,
+h2 > small,
+h3 > small,
+h4 > small,
+h5 > small,
+h6 > small {
+    background-color: var(--landsoul-shadow);
+    border-radius: var(--landsoul-radius);
+    font-weight: lighter;
+    margin-left: 0.25rem;
+    padding: 0 0.25rem;
+}
+button,
+input,
+select,
+textarea {
+    background-color: var(--landsoul-shadow);
+    color: var(--landsoul-text);
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+select {
+    background-color: var(--landsoul-color);
+    cursor: pointer;
+    -webkit-transition: -webkit-filter var(--landsoul-time);
+    transition: -webkit-filter var(--landsoul-time);
+    transition: filter var(--landsoul-time);
+    transition: filter var(--landsoul-time), -webkit-filter var(--landsoul-time);
+}
+button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover,
+select:hover {
+    -webkit-filter: contrast(0.94);
+    filter: contrast(0.94);
+}
+button,
+input {
+    border: none;
+    border-radius: var(--landsoul-radius);
+    padding: 0.3em 0.45em;
+}
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+select,
+textarea {
+    border: 0.01em solid var(--landsoul-shadow);
+    border-radius: var(--landsoul-radius);
+    padding: 0.2em 0.3em;
+    -webkit-transition: -webkit-filter var(--landsoul-time);
+    transition: -webkit-filter var(--landsoul-time);
+    transition: filter var(--landsoul-time);
+    transition: filter var(--landsoul-time), -webkit-filter var(--landsoul-time);
+}
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
+select:hover,
+textarea:hover {
+    -webkit-filter: contrast(0.94);
+    filter: contrast(0.94);
+}
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
+select:focus,
+textarea:focus {
+    border: 0.01em solid var(--landsoul-text);
+    outline: none;
+}
+textarea {
+    min-height: 2rem;
+    min-width: 2rem;
+}
+[disabled],
+input[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+input[type="checkbox"],
+input[type="radio"] {
+    --size: 1.25rem;
+    all: unset;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    height: var(--size);
+    opacity: 0.8;
+    position: relative;
+    -webkit-transition: all var(--landsoul-time);
+    transition: all var(--landsoul-time);
+    vertical-align: text-bottom;
+}
+input[type="checkbox"]:hover,
+input[type="radio"]:hover {
+    opacity: 1;
+}
+input[type="checkbox"] {
+    background: var(--landsoul-shadow);
+    border-radius: 1rem;
+    width: calc(var(--size) * 1.75);
+}
+input[type="checkbox"]:after {
+    background: var(--landsoul-bg);
+    border-radius: 50%;
+    content: "";
+    display: inline-block;
+    height: calc(var(--size) * 0.8);
+    left: calc(var(--size) * 0.1);
+    position: absolute;
+    top: calc(var(--size) * 0.1);
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+    width: calc(var(--size) * 0.8);
+}
+input[type="checkbox"]:checked {
+    background: var(--landsoul-accent);
+}
+input[type="checkbox"]:checked:after {
+    content: "";
+    left: 100%;
+    position: absolute;
+    -webkit-transform: translateX(calc(-100% - var(--size) * 0.1));
+    transform: translateX(calc(-100% - var(--size) * 0.1));
+}
+input[type="radio"] {
+    border: solid calc(var(--size) * 0.1) var(--landsoul-shadow);
+    border-radius: 50%;
+    width: var(--size);
+}
+input[type="radio"]:after {
+    background: var(--landsoul-accent);
+    border-radius: 50%;
+    content: "";
+    display: inline-block;
+    height: calc(var(--size) * 0.6);
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    -webkit-transition: opacity var(--landsoul-time);
+    transition: opacity var(--landsoul-time);
+    width: calc(var(--size) * 0.6);
+}
+input[type="radio"]:checked:after {
+    opacity: 1;
+}
+input[type="range"] {
+    -webkit-appearance: none;
+    background-color: transparent;
+    border-radius: 1rem;
+    cursor: pointer;
+    height: 0.3rem;
+    vertical-align: baseline;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    background-color: var(--landsoul-shadow);
+    border-radius: 1rem;
+    height: 0.15rem;
+    width: 100%;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background-color: var(--landsoul-bg);
+    border: 0.2rem solid var(--landsoul-color);
+    border-radius: 50%;
+    cursor: -webkit-grab;
+    cursor: grab;
+    height: 1rem;
+    -webkit-transform: translateY(-0.4rem) scale(0.8);
+    transform: translateY(-0.4rem) scale(0.8);
+    -webkit-transition: transform 0.2s;
+    -webkit-transition: -webkit-transform 0.2s;
+    transition: -webkit-transform 0.2s;
+    transition: transform 0.2s;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+    width: 1rem;
+}
+input[type="range"]::-webkit-slider-thumb:active {
+    -webkit-transform: translateY(-0.4rem) scale(1);
+    transform: translateY(-0.4rem) scale(1);
+}
+input[type="range"]::-moz-range-progress {
+    background-color: var(--landsoul-accent);
+    height: 0.1rem;
+}
+input[type="range"]::-moz-range-track {
+    background-color: var(--landsoul-shadow);
+    height: 0.15rem;
+    width: 100%;
+}
+input[type="range"]::-moz-range-thumb {
+    -moz-appearance: none;
+    background-color: var(--landsoul-bg);
+    border: 0.2rem solid var(--landsoul-color);
+    border-radius: 50%;
+    cursor: grab;
+    height: 1rem;
+    transform: scale(0.8);
+    -moz-transition: transform 0.2s;
+    transition: transform 0.2s;
+    width: 1rem;
+}
+input[type="range"]::-moz-range-thumb:active {
+    transform: scale(1);
+}
+table {
+    border-collapse: collapse;
+    -webkit-box-shadow: 0.1em 0.1em 0.05em var(--landsoul-shadow), -0.1em -0.1em 0.05em var(--landsoul-shadow);
+    box-shadow: 0.1em 0.1em 0.05em var(--landsoul-shadow), -0.1em -0.1em 0.05em var(--landsoul-shadow);
+    margin: 0.05em;
+}
+thead {
+    background-color: var(--landsoul-shadow);
+    color: var(--landsoul-text);
+}
+tbody tr {
+    background-color: var(--landsoul-bg);
+}
+tbody tr:nth-child(2n) {
+    background-color: var(--landsoul-shadow);
+}
+td,
+th {
+    padding: 0.25em 0.5em;
+}
+figure {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-flow: column;
+    flex-flow: column;
+    margin: auto;
+}
+figure img {
+    max-width: 100%;
+}
+figure figcaption {
+    font-size: 0.75em;
+    margin: 0.5em;
+}
+details {
+    padding: 0.5em 0.5em 0;
+}
+summary {
+    font-weight: 700;
+    margin: -0.5em -0.5em 0;
+}
+details[open],
+summary {
+    padding: 0.5em;
+}
+details[open] summary {
+    margin-bottom: 0.5em;
+}
+dialog {
+    all: unset;
+    background-color: var(--landsoul-shadow);
+    border-radius: var(--landsoul-radius);
+    color: var(--landsoul-text);
+    left: 50%;
+    max-height: 100%;
+    max-width: 100%;
+    opacity: 0;
+    overflow: auto;
+    padding: 0.5rem 1rem;
+    position: fixed;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    z-index: 2;
+}
+dialog[open] {
+    opacity: 1;
+}
+progress {
+    --height: 0.5em;
+    background-color: var(--landsoul-shadow);
+    border: none;
+    border-radius: var(--height);
+    color: var(--landsoul-accent);
+    height: var(--height);
+    line-height: var(--height);
+    overflow: hidden;
+}
+progress::-moz-progress-bar {
+    background-color: var(--landsoul-accent);
+}
+progress::-webkit-progress-bar {
+    background-color: var(--landsoul-shadow);
+}
+progress::-webkit-progress-value {
+    background-color: var(--landsoul-accent);
+}
+::-webkit-meter-bar {
+    background-color: var(--landsoul-shadow);
+    border: none;
+}
+hr {
+    border: none;
+    border-top: 0.15em solid var(--landsoul-color);
+}
+blockquote {
+    border-left: 0.25rem solid var(--landsoul-shadow);
+    font-style: italic;
+    margin: 0.5rem 0;
+    padding: 0.5rem 1rem;
+}
+code,
+kbd,
+pre {
+    background-color: var(--landsoul-shadow);
+    border-radius: var(--landsoul-radius);
+}
+code,
+kbd,
+pre,
+samp {
+    font-family: Consolas, monospace;
+}
+code,
+kbd {
+    padding: 0.05em 0.2em;
+}
+pre {
+    padding: 0.5em 0.75em;
+}
+kbd {
+    border: solid rgba(0, 0, 0, 0.05);
+    border-width: 0.1em 0.1em 0.2em;
+}
+fieldset,
+iframe {
+    border: 0.15em solid var(--landsoul-color);
+    border-radius: var(--landsoul-radius);
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "landsoul",
+    "version": "0.1.0",
+    "description": "drop in css library landsoul",
+    "main": "./dist/landsoul.css",
+    "scripts": {
+        "dev": "sass --watch src:dist",
+        "build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/YieldRay/landsoul.git"
+    },
+    "keywords": [],
+    "author": "YieldRay",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/YieldRay/landsoul/issues"
+    },
+    "homepage": "https://github.com/YieldRay/landsoul#readme",
+    "devDependencies": {
+        "autoprefixer": "^10.4.14",
+        "cssnano": "^6.0.0",
+        "postcss": "^8.4.21",
+        "postcss-cli": "^10.1.0",
+        "postcss-preset-env": "^7.8.3",
+        "sass": "^1.60.0"
+    }
+}

package/src/_mixins.scss

@@ -0,0 +1,9 @@
+@mixin theme-color($bg: var(--landsoul-bg)) {
+    color: var(--landsoul-text);
+    background-color: $bg;
+}
+
+@mixin bg-radius($bg: var(--landsoul-shadow), $radius: var(--landsoul-radius)) {
+    background-color: $bg;
+    border-radius: $radius;
+}

package/src/_theme.scss

@@ -0,0 +1,32 @@
+@mixin light {
+    --landsoul-bg: #fff;
+    --landsoul-text: #3d424f;
+    --landsoul-shadow: #f4f4f5;
+    --landsoul-accent: #2563eb;
+    --landsoul-color: #e3e4e8;
+}
+
+@mixin dark {
+    --landsoul-bg: #202021;
+    --landsoul-text: #e7e7e7;
+    --landsoul-shadow: #353e5a;
+    --landsoul-color: #2b414f;
+}
+
+body {
+    @include light;
+    // other variables
+    --landsoul-time: 0.3s;
+    --landsoul-radius: 0.25em;
+    --landsoul-gradient: linear-gradient(rgb(204, 252, 247), rgb(196, 234, 233), rgb(187, 216, 219), rgb(179, 198, 205), rgb(170, 180, 191));
+}
+
+body[data-theme="dark"] {
+    @include dark;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    body {
+        @include dark;
+    }
+}

package/src/landsoul/_details.scss

@@ -0,0 +1,16 @@
+details {
+    padding: 0.5em 0.5em 0;
+}
+
+summary {
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+}
+
+details[open] {
+    padding: 0.5em;
+    summary {
+        margin-bottom: 0.5em;
+    }
+}

package/src/landsoul/_dialog.scss

@@ -0,0 +1,21 @@
+@import "../mixins";
+
+dialog {
+    all: unset;
+    @include theme-color(var(--landsoul-shadow));
+    border-radius: var(--landsoul-radius);
+    position: fixed;
+    z-index: 2;
+    padding: 0.5rem 1rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: 100%;
+    max-width: 100%;
+    overflow: auto;
+    opacity: 0;
+    transition: opacity 0.3s;
+    &[open] {
+        opacity: 1;
+    }
+}

package/src/landsoul/_figure.scss

@@ -0,0 +1,12 @@
+figure {
+    display: flex;
+    flex-flow: column;
+    margin: auto;
+    img {
+        max-width: 100%;
+    }
+    figcaption {
+        font-size: 0.75em;
+        margin: 0.5em;
+    }
+}

package/src/landsoul/_global.scss

@@ -0,0 +1,69 @@
+@import "../mixins";
+
+body {
+    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
+        sans-serif;
+    font-size: 16px;
+    transition: color var(--landsoul-time), background-color var(--landsoul-time);
+    @include theme-color;
+}
+
+a {
+    color: var(--landsoul-accent);
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+h2 {
+    font-size: 2.25rem;
+}
+h3 {
+    font-size: 2rem;
+}
+h4 {
+    font-size: 1.75rem;
+}
+h5 {
+    font-size: 1.5rem;
+}
+h6 {
+    font-size: 1.25rem;
+}
+
+a[href^="#"] {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: var(--landsoul-text);
+        &::before {
+            content: "#";
+            margin-right: 0.3rem;
+            color: var(--landsoul-accent);
+        }
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: inherit;
+    margin: 0;
+    padding: 0;
+    > small {
+        @include bg-radius;
+        margin-left: 0.25rem;
+        padding: 0 0.25rem;
+        font-weight: lighter;
+    }
+}

package/src/landsoul/_input.scss

@@ -0,0 +1,56 @@
+@import "../mixins";
+
+button,
+select,
+input,
+textarea {
+    @include theme-color(var(--landsoul-shadow));
+}
+
+@mixin hover-effect {
+    transition: filter var(--landsoul-time);
+    &:hover {
+        filter: contrast(0.94);
+    }
+}
+
+select,
+button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+    @include hover-effect;
+    cursor: pointer;
+    background-color: var(--landsoul-color);
+}
+
+button,
+input {
+    border: none;
+    border-radius: var(--landsoul-radius);
+    padding: 0.3em 0.45em;
+}
+
+input:not([type="checkbox"], [type="radio"], [type="range"]),
+select,
+textarea {
+    @include hover-effect;
+    padding: 0.2em 0.3em;
+    border-radius: var(--landsoul-radius);
+    border: var(--landsoul-shadow) solid 0.01em;
+    &:focus {
+        outline: none;
+        border: var(--landsoul-text) solid 0.01em;
+    }
+}
+
+textarea {
+    min-height: 2rem;
+    min-width: 2rem;
+}
+
+[disabled],
+input[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/src/landsoul/_input_checkbox_radio.scss

@@ -0,0 +1,73 @@
+/**
+ * --size: The size of the switch and radio
+ */
+input[type="checkbox"],
+input[type="radio"] {
+    --size: 1.25rem;
+    all: unset;
+    display: inline-block;
+    box-sizing: border-box;
+    appearance: none;
+    transition: all var(--landsoul-time);
+    position: relative;
+    height: var(--size);
+    vertical-align: text-bottom;
+    cursor: pointer;
+    opacity: 0.8;
+    &:hover {
+        opacity: 1;
+    }
+}
+
+input[type="checkbox"] {
+    width: calc(var(--size) * 1.75);
+    background: var(--landsoul-shadow);
+    border-radius: 1rem;
+    &::after {
+        content: "";
+        display: inline-block;
+        border-radius: 50%;
+        background: var(--landsoul-bg);
+        transition: all 0.4s;
+        width: calc(var(--size) * 0.8);
+        height: calc(var(--size) * 0.8);
+        position: absolute;
+        left: calc(var(--size) * 0.1);
+        top: calc(var(--size) * 0.1);
+    }
+
+    &:checked {
+        background: var(--landsoul-accent);
+        &::after {
+            content: "";
+            position: absolute;
+            left: 100%;
+            transform: translateX(calc(-100% - calc(var(--size) * 0.1)));
+        }
+    }
+}
+
+input[type="radio"] {
+    width: var(--size);
+    border: solid calc(var(--size) * 0.1) var(--landsoul-shadow);
+    border-radius: 50%;
+    &::after {
+        content: "";
+        opacity: 0;
+        transition: opacity var(--landsoul-time);
+        position: absolute;
+        display: inline-block;
+        border-radius: 50%;
+        background: var(--landsoul-accent);
+        width: calc(var(--size) * 0.6);
+        height: calc(var(--size) * 0.6);
+        top: calc(50%);
+        left: calc(50%);
+        transform: translate(-50%, -50%);
+    }
+    &:checked {
+        &::after {
+            opacity: 1;
+        }
+    }
+}

package/src/landsoul/_input_range.scss

@@ -0,0 +1,53 @@
+@mixin thunb-common {
+    cursor: grab;
+    height: 1rem;
+    width: 1rem;
+    background-color: var(--landsoul-bg);
+    border-radius: 50%;
+    border: solid 0.2rem var(--landsoul-color);
+    transition: transform 0.2s;
+}
+
+@mixin track-common {
+    width: 100%;
+    height: 0.15rem;
+    background-color: var(--landsoul-shadow);
+}
+
+input[type="range"] {
+    // track
+    -webkit-appearance: none; // only for chrome
+    background-color: transparent;
+    vertical-align: baseline;
+    height: 0.3rem;
+    cursor: pointer;
+    border-radius: 1rem;
+
+    &::-webkit-slider-runnable-track {
+        @include track-common;
+        border-radius: 1rem;
+    }
+    &::-webkit-slider-thumb {
+        @include thunb-common;
+        -webkit-appearance: none; // only for chrome
+        transform: translateY(-0.4rem) scale(0.8, 0.8);
+        &:active {
+            transform: translateY(-0.4rem) scale(1, 1);
+        }
+    }
+    &::-moz-range-progress {
+        height: 0.1rem;
+        background-color: var(--landsoul-accent);
+    }
+    &::-moz-range-track {
+        @include track-common;
+    }
+    &::-moz-range-thumb {
+        @include thunb-common;
+        -moz-appearance: none; // only for firefox
+        transform: scale(0.8, 0.8);
+        &:active {
+            transform: scale(1, 1);
+        }
+    }
+}

package/src/landsoul/_others.scss

@@ -0,0 +1,44 @@
+@import "../mixins";
+
+hr {
+    border: none;
+    border-top: solid 0.15em var(--landsoul-color);
+}
+
+blockquote {
+    border-left: solid 0.25rem var(--landsoul-shadow);
+    padding: 0.5rem 1rem;
+    margin: 0.5rem 0;
+    font-style: italic;
+}
+
+code,
+kbd,
+pre {
+    @include bg-radius;
+    font-family: Consolas, monospace;
+}
+
+samp {
+    font-family: Consolas, monospace;
+}
+
+code,
+kbd {
+    padding: 0.05em 0.2em;
+}
+
+pre {
+    padding: 0.5em 0.75em;
+}
+
+kbd {
+    border: solid 0.1em rgba(0, 0, 0, 0.05);
+    border-bottom: solid 0.2em rgba(0, 0, 0, 0.05);
+}
+
+iframe,
+fieldset {
+    border: solid 0.15em var(--landsoul-color);
+    border-radius: var(--landsoul-radius);
+}

package/src/landsoul/_progress_meter.scss

@@ -0,0 +1,24 @@
+progress {
+    --height: 0.5em;
+    height: var(--height);
+    line-height: var(--height);
+    background-color: var(--landsoul-shadow); /*IE*/
+    color: var(--landsoul-accent); /*IE*/
+    overflow: hidden;
+    border: none;
+    border-radius: var(--height);
+    &::-moz-progress-bar {
+        background-color: var(--landsoul-accent);
+    }
+    &::-webkit-progress-bar {
+        background-color: var(--landsoul-shadow);
+    }
+    &::-webkit-progress-value {
+        background-color: var(--landsoul-accent);
+    }
+}
+
+::-webkit-meter-bar {
+    background-color: var(--landsoul-shadow);
+    border: none;
+}

package/src/landsoul/_reset.scss

@@ -0,0 +1,14 @@
+body {
+    margin: 0;
+}
+
+a {
+    // for IE
+    background-color: transparent;
+}
+
+progress {
+    width: 8rem;
+    // for chrome
+    vertical-align: baseline;
+}

package/src/landsoul/_table.scss

@@ -0,0 +1,21 @@
+table {
+    border-collapse: collapse;
+    margin: 0.05em;
+    box-shadow: 0.1em 0.1em 0.05em var(--landsoul-shadow), -0.1em -0.1em 0.05em var(--landsoul-shadow);
+}
+
+thead {
+    color: var(--landsoul-text);
+    background-color: var(--landsoul-shadow);
+}
+tbody tr {
+    background-color: var(--landsoul-bg);
+    &:nth-child(2n) {
+        background-color: var(--landsoul-shadow);
+    }
+}
+
+td,
+th {
+    padding: 0.25em 0.5em;
+}

package/src/landsoul.scss

@@ -0,0 +1,12 @@
+@import "theme";
+@import "landsoul/reset";
+@import "landsoul/global";
+@import "landsoul/input";
+@import "landsoul/input_checkbox_radio";
+@import "landsoul/input_range";
+@import "landsoul/table";
+@import "landsoul/figure";
+@import "landsoul/details";
+@import "landsoul/dialog";
+@import "landsoul/progress_meter";
+@import "landsoul/others";