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

fix: restore <details> styling in Firefox

Browse Source 
only remove startup stylesheet on first JS style load
This commit is contained in:
Jonas Kuske
2019-06-09 00:06:01 +02:00
parent cd15e37177
commit 491e554784
8 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/docs/index.html vendored
View File

File diff suppressed because one or more lines are too long

2
dist/docs/script.js vendored
View File

@@ -1,2 +1,2 @@
"use strict";var e=window,t=new URLSearchParams(e.location.search),n="undefined"!=typeof CSS&&CSS.supports("color","var(--clr)"),i="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",s={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},r=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",i=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(i,".min.css")},a=function(e){var t=e.theme,n=e.isLegacy,s=e.isStandalone,a=r({theme:t,isLegacy:n,isStandalone:s}),o='<link rel="stylesheet" href="'.concat(i).concat(a,'">');return!n||s?o:(function(e){var t=e.theme,n=e.isLegacy,s=e.isStandalone,a="dark"===t?"light":"dark",o=r({theme:a,isLegacy:n,isStandalone:s});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(i).concat(r({theme:t,isLegacy:n,isStandalone:s}),'">\n<link rel="preload" as="style" href="').concat(i).concat(o,'" media="(prefers-color-scheme: ').concat(a,')">')}({theme:t,isLegacy:n,isStandalone:!0})+"\n\n"+o).trim()},o={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_removeStartupStylesheet:function(){var e=document.head.querySelector("#js-startup-stylesheet");e&&document.head.removeChild(e)},_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},init:function(e,t){this._stylesheet.addEventListener("load",this._removeStartupStylesheet),this.update(e,t)},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(r(e)),this._updateProductHunt(n)}},c=function(t,n){var i=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));i.addListener(function(e){return n(e.matches)}),n(i.matches)},l=t.get("theme"),h={theme:/^(dark|light)$/.test(l)?l:"dark",isLegacy:t.has("legacy")||!n,isStandalone:t.has("standalone")};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:h,preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:r(this.versionOptions),fileSize:(e=this.versionOptions,s[r(e)]||0).toFixed(2),fileSnippet:a(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),o.init(this.versionOptions,this.preferedColorScheme)},methods:{copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){o.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){o.update(e,this.preferedColorScheme)}}}}),(0,e.faviconModeSwitcher.default)([{element:'link[rel="shortcut icon"]',href:{dark:"./icons/light-favicon.ico"}},{element:'link[rel="icon"][sizes="16x16"]',href:{dark:"./icons/light-favicon-16x16.png"}},{element:'link[rel="icon"][sizes="32x32"]',href:{dark:"./icons/light-favicon-32x32.png"}}]);
"use strict";var e=window,t=new URLSearchParams(e.location.search),n="undefined"!=typeof CSS&&CSS.supports("color","var(--clr)"),s="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",i={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},r=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",s=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(s,".min.css")},a=function(e){var t=e.theme,n=e.isLegacy,i=e.isStandalone,a=r({theme:t,isLegacy:n,isStandalone:i}),o='<link rel="stylesheet" href="'.concat(s).concat(a,'">');return!n||i?o:(function(e){var t=e.theme,n=e.isLegacy,i=e.isStandalone,a="dark"===t?"light":"dark",o=r({theme:a,isLegacy:n,isStandalone:i});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(s).concat(r({theme:t,isLegacy:n,isStandalone:i}),'">\n<link rel="preload" as="style" href="').concat(s).concat(o,'" media="(prefers-color-scheme: ').concat(a,')">')}({theme:t,isLegacy:n,isStandalone:!0})+"\n\n"+o).trim()},o={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_removeStartupStylesheet:function(){var e=document.head.querySelector("#js-startup-stylesheet");e&&document.head.removeChild(e);var t=o;t._stylesheet.removeEventListener("load",t._removeStartupStylesheet)},_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},init:function(e,t){this._stylesheet.addEventListener("load",this._removeStartupStylesheet),this.update(e,t)},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(r(e)),this._updateProductHunt(n)}},c=function(t,n){var s=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));s.addListener(function(e){return n(e.matches)}),n(s.matches)},l=t.get("theme"),h={theme:/^(dark|light)$/.test(l)?l:"dark",isLegacy:t.has("legacy")||!n,isStandalone:t.has("standalone")};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:h,preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:r(this.versionOptions),fileSize:(e=this.versionOptions,i[r(e)]||0).toFixed(2),fileSnippet:a(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),o.init(this.versionOptions,this.preferedColorScheme)},methods:{copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){o.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){o.update(e,this.preferedColorScheme)}}}}),(0,e.faviconModeSwitcher.default)([{element:'link[rel="shortcut icon"]',href:{dark:"./icons/light-favicon.ico"}},{element:'link[rel="icon"][sizes="16x16"]',href:{dark:"./icons/light-favicon-16x16.png"}},{element:'link[rel="icon"][sizes="32x32"]',href:{dark:"./icons/light-favicon-32x32.png"}}]);
//# sourceMappingURL=script.js.map

2
dist/docs/script.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/docs/style.css vendored
View File

@@ -1,2 +1,2 @@
html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}.version-select{overflow:hidden}.version-select__snippet h3{margin:1rem 2.5rem 1rem 0}.version-select__snippet__btn{position:relative;margin:0 2px 0 auto;overflow:visible}.version-select__snippet__btn span{position:absolute;left:-2rem;display:inline-block;transform:scale(1.3)}.version-select__options>label{white-space:pre}.version-select__options>label:first-child{margin-right:1rem}.version-select__options__additional>*{margin-top:1rem;display:inline-block}.version-select__options__additional summary{display:block;cursor:pointer;font-weight:600}.version-select__options__additional summary:focus{outline:none}.version-select__options__additional summary:focus span{text-decoration:underline}.version-select__info{table-layout:fixed}.version-select__info caption{text-align:left}.version-select__info th{border:none;vertical-align:top;width:35%}body>footer{padding-top:2rem;display:flex;justify-content:flex-end;align-items:flex-end}.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.emoji{font-family:Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.translucent{opacity:.4}.tooltip{position:relative;cursor:help}.tooltip:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;border-width:0 0 1.5px;border-style:dotted}.v-enter,.v-leave-to{transform:scale(0)!important}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:after{content:"Version picker is loading..."}
html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}.version-select{overflow:hidden}.version-select__snippet h3{margin:1rem 2.5rem 1rem 0}.version-select__snippet__btn{position:relative;margin:0 2px 0 auto;overflow:visible}.version-select__snippet__btn span{position:absolute;left:-2rem;display:inline-block;transform:scale(1.3)}.version-select__options>label{white-space:pre}.version-select__options>label:first-child{margin-right:1rem}.version-select__options__additional{display:flex;flex-direction:column}.version-select__options__additional>*{margin-top:1rem}.version-select__options__additional>:not(summary){display:block}.version-select__options__additional summary{cursor:pointer;font-weight:600}.version-select__options__additional summary:focus{outline:none}.version-select__options__additional summary:focus span,.version-select__options__additional summary:hover span{text-decoration:underline}.version-select__info{table-layout:fixed}.version-select__info caption{text-align:left}.version-select__info th{border:none;vertical-align:top;width:35%}body>footer{padding-top:2rem;display:flex;justify-content:flex-end;align-items:flex-end}.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.emoji{font-family:Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.translucent{opacity:.4}.tooltip{position:relative;cursor:help}.tooltip:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;border-width:0 0 1.5px;border-style:dotted}.v-enter,.v-leave-to{transform:scale(0)!important}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:after{content:"Version picker is loading..."}
/*# sourceMappingURL=style.css.map */

2
dist/docs/style.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACE,sBACF,CAEA,gBACE,eACF,CAEA,gBACE,eACF,CAEA,4BACE,yBACF,CAEA,8BACE,iBAAkB,CAClB,mBAAoB,CACpB,gBACF,CACA,mCACE,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,oBACF,CAEA,+BACE,eACF,CACA,2CACE,iBACF,CACA,uCACE,eAAgB,CAChB,oBACF,CACA,6CACE,aAAc,CACd,cAAe,CACf,eACF,CACA,mDACE,YACF,CACA,wDACE,yBACF,CAGA,sBACE,kBACF,CACA,8BACE,eACF,CACA,yBACE,WAAY,CACZ,kBAAmB,CACnB,SACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,oBACF,CAGA,KACE,YAAa,CACb,cAAe,CACf,kBAAmB,CACnB,6BACF,CAGA,OACE,+LAGF,CACA,aACE,UACF,CACA,SACE,iBAAkB,CAClB,WACF,CACA,eACE,UAAW,CACX,iBAAkB,CAClB,MAAO,CACP,WAAY,CACZ,UAAW,CACX,sBAAuB,CACvB,mBACF,CAGA,qBAEE,4BACF,CACA,gCAEE,2DACF,CACA,YACE,YACF,CACA,gBACE,sCACF","file":"style.css","sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\n#js-producthunt {\n margin-top: 1rem;\n}\n\n.version-select {\n overflow: hidden;\n}\n\n.version-select__snippet h3 {\n margin: 1rem 2.5rem 1rem 0;\n}\n/* Make the ✔ / ❌ Emoji appear next to the button */\n.version-select__snippet__btn {\n position: relative;\n margin: 0 2px 0 auto;\n overflow: visible;\n}\n.version-select__snippet__btn span {\n position: absolute;\n left: -2rem;\n display: inline-block;\n transform: scale(1.3);\n}\n\n.version-select__options > label {\n white-space: pre;\n}\n.version-select__options > label:first-child {\n margin-right: 1rem;\n}\n.version-select__options__additional > * {\n margin-top: 1rem;\n display: inline-block;\n}\n.version-select__options__additional summary {\n display: block;\n cursor: pointer;\n font-weight: 600;\n}\n.version-select__options__additional summary:focus {\n outline: none;\n}\n.version-select__options__additional summary:focus span {\n text-decoration: underline;\n}\n\n/* Fixed layout so columns don't jump when content changes */\n.version-select__info {\n table-layout: fixed;\n}\n.version-select__info caption {\n text-align: left;\n}\n.version-select__info th {\n border: none;\n vertical-align: top;\n width: 35%;\n}\n\nbody > footer {\n padding-top: 2rem;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n}\n\n/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */\n.row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n/* Use proper Emoji instead of plain Unicode chars */\n.emoji {\n font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,\n BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,\n Helvetica Neue, sans-serif;\n}\n.translucent {\n opacity: 0.4;\n}\n.tooltip {\n position: relative;\n cursor: help;\n}\n.tooltip::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -4px;\n width: 100%;\n border-width: 0 0 1.5px;\n border-style: dotted;\n}\n\n/* For the bounce transitions of code snippet and copy success Emoji */\n.v-enter,\n.v-leave-to {\n transform: scale(0) !important;\n}\n.v-enter-active,\n.v-leave-active {\n transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n[v-cloak] > * {\n display: none;\n}\n[v-cloak]::after {\n content: 'Version picker is loading...';\n}\n"]}
{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACE,sBACF,CAEA,gBACE,eACF,CAEA,gBACE,eACF,CAEA,4BACE,yBACF,CAEA,8BACE,iBAAkB,CAClB,mBAAoB,CACpB,gBACF,CACA,mCACE,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,oBACF,CAEA,+BACE,eACF,CACA,2CACE,iBACF,CACA,qCACE,YAAa,CACb,qBACF,CACA,uCACE,eACF,CACA,mDACE,aACF,CACA,6CACE,cAAe,CACf,eACF,CACA,mDACE,YACF,CACA,gHAEE,yBACF,CAGA,sBACE,kBACF,CACA,8BACE,eACF,CACA,yBACE,WAAY,CACZ,kBAAmB,CACnB,SACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,oBACF,CAGA,KACE,YAAa,CACb,cAAe,CACf,kBAAmB,CACnB,6BACF,CAGA,OACE,+LAGF,CACA,aACE,UACF,CACA,SACE,iBAAkB,CAClB,WACF,CACA,eACE,UAAW,CACX,iBAAkB,CAClB,MAAO,CACP,WAAY,CACZ,UAAW,CACX,sBAAuB,CACvB,mBACF,CAGA,qBAEE,4BACF,CACA,gCAEE,2DACF,CACA,YACE,YACF,CACA,gBACE,sCACF","file":"style.css","sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\n#js-producthunt {\n margin-top: 1rem;\n}\n\n.version-select {\n overflow: hidden;\n}\n\n.version-select__snippet h3 {\n margin: 1rem 2.5rem 1rem 0;\n}\n/* Make the ✔ / ❌ Emoji appear next to the button */\n.version-select__snippet__btn {\n position: relative;\n margin: 0 2px 0 auto;\n overflow: visible;\n}\n.version-select__snippet__btn span {\n position: absolute;\n left: -2rem;\n display: inline-block;\n transform: scale(1.3);\n}\n\n.version-select__options > label {\n white-space: pre;\n}\n.version-select__options > label:first-child {\n margin-right: 1rem;\n}\n.version-select__options__additional {\n display: flex;\n flex-direction: column;\n}\n.version-select__options__additional > * {\n margin-top: 1rem;\n}\n.version-select__options__additional > *:not(summary) {\n display: block;\n}\n.version-select__options__additional summary {\n cursor: pointer;\n font-weight: 600;\n}\n.version-select__options__additional summary:focus {\n outline: none;\n}\n.version-select__options__additional summary:hover span,\n.version-select__options__additional summary:focus span {\n text-decoration: underline;\n}\n\n/* Fixed layout so columns don't jump when content changes */\n.version-select__info {\n table-layout: fixed;\n}\n.version-select__info caption {\n text-align: left;\n}\n.version-select__info th {\n border: none;\n vertical-align: top;\n width: 35%;\n}\n\nbody > footer {\n padding-top: 2rem;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n}\n\n/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */\n.row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n}\n\n/* Use proper Emoji instead of plain Unicode chars */\n.emoji {\n font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,\n BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,\n Helvetica Neue, sans-serif;\n}\n.translucent {\n opacity: 0.4;\n}\n.tooltip {\n position: relative;\n cursor: help;\n}\n.tooltip::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -4px;\n width: 100%;\n border-width: 0 0 1.5px;\n border-style: dotted;\n}\n\n/* For the bounce transitions of code snippet and copy success Emoji */\n.v-enter,\n.v-leave-to {\n transform: scale(0) !important;\n}\n.v-enter-active,\n.v-leave-active {\n transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n[v-cloak] > * {\n display: none;\n}\n[v-cloak]::after {\n content: 'Version picker is loading...';\n}\n"]}

11
docs/script.js
View File

@@ -2,14 +2,18 @@
/** @typedef {'dark' | 'light'} Theme */
/** @typedef {keyof typeof FILE_SIZES} FileName */
/** @typedef {'success' | 'failed'} CopyStatus */
/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */
/**
* @typedef {Object} VersionOptions Configurable options for water.css versions
* @prop {Theme} theme
* @prop {boolean} isLegacy
* @prop {boolean} isStandalone
*/
/**
* @typedef {Object} Libraries External packages exposed on `window` (loaded through `<script>`)
* @prop {typeof import('vue').default} Vue
* @prop {Clipboard} clipboard
* @prop {import('favicon-mode-switcher')} faviconModeSwitcher
*/
/**
* @typedef {Object} VueData State used by the version picker
* @prop {VersionOptions} versionOptions
@@ -80,6 +84,8 @@ const externalElements = {
_removeStartupStylesheet() {
const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
if (startupStylesheet) document.head.removeChild(startupStylesheet)
const that = externalElements
that._stylesheet.removeEventListener('load', that._removeStartupStylesheet)
},
_updateProductHunt(/** @type {Theme} */ theme) {
this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
@@ -171,6 +177,7 @@ new w.Vue({
})
const iconModeSwitcher = w.faviconModeSwitcher.default
/* Use bright favicons when the browser is in dark mode. */
iconModeSwitcher([
{
element: 'link[rel="shortcut icon"]',

10
docs/style.css
View File

@@ -32,18 +32,24 @@ html {
.version-select__options > label:first-child {
margin-right: 1rem;
}
.version-select__options__additional {
display: flex;
flex-direction: column;
}
.version-select__options__additional > * {
margin-top: 1rem;
display: inline-block;
}
.version-select__options__additional > *:not(summary) {
display: block;
}
.version-select__options__additional summary {
display: block;
cursor: pointer;
font-weight: 600;
}
.version-select__options__additional summary:focus {
outline: none;
}
.version-select__options__additional summary:hover span,
.version-select__options__additional summary:focus span {
text-decoration: underline;
}

1
docs/versionpicker.html
View File

@@ -43,7 +43,6 @@
<input type="checkbox" checked v-model="versionOptions.isStandalone" />
Enforce theme? (ignore <code>prefers-color-scheme</code>)
</label>
<br />
<label>
<input type="checkbox" v-model="versionOptions.isLegacy" />
Support Internet Explorer and other legacy browsers?