diff --git a/package-lock.json b/package-lock.json index f858208..88c33ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6427,6 +6427,11 @@ "to-regex": "^3.0.2" } }, + "micromodal": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.2.tgz", + "integrity": "sha512-tL8Z6Vi72haNUNlkhLjJJv1Q16eqUWMPAGT4RF7mwDM5DNyJXC67Yj8jw/yVgGYdhnCEBBf3X5JM3d/MpXSEKg==" + }, "miller-rabin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz", diff --git a/package.json b/package.json index dcaa948..52efdc5 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "date-fns": "^2.9.0", "get-urls": "^9.2.0", "iter-tools": "^7.0.0-rc.0", + "micromodal": "^0.4.2", "route-parser": "0.0.5", "svelte-pipeable-store": "^1.0.3", "svelte-routing": "^1.4.0" diff --git a/src/assets/scss/3-components/_forms.scss b/src/assets/scss/3-components/_forms.scss index e14218d..f69399d 100755 --- a/src/assets/scss/3-components/_forms.scss +++ b/src/assets/scss/3-components/_forms.scss @@ -8,8 +8,7 @@ /* == configuration */ /* ----------------------------------------------------------- */ - -$input-border-radius: .4rem; +$input-border-radius: .3rem; $input-border: .1rem solid #d8d8d8; $input-background-color: #fff; $input-hover: 5%; @@ -104,13 +103,16 @@ textarea { } input { - padding: .8em; + padding: 1rem 2rem; max-width: 32rem; width: 100%; border: $input-border; border-radius: $input-border-radius; background: $input-background-color; - box-shadow: inset 0 1px 2px rgba(10, 10, 10, .08); +} + +input[readonly] { + background: #f1f1f1; } textarea:active, @@ -136,6 +138,23 @@ input[type="checkbox"] { width: inherit; } +input[type="checkbox"] { + appearance: none; + margin-right: 1rem; + width: 1.6rem; + height: 1.6rem; + border: .1rem solid $color-grey-2; + border-radius: .2rem; + background: no-repeat url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.452.833L3.75 5.653 1.548 3.565 0 5.113 3.75 8.75 10 2.381 8.452.833z' fill='%23635776'/%3E%3C/svg%3E%0A"); + background-position: center; + background-size: 0 0; + transition: .2s background cubic-bezier(.64, 1.93, .55, 1.94); +} + +input[type="checkbox"]:checked { + background-size: 1rem .8rem; +} + /* autogrid -------------------------------------------------------------- */ diff --git a/src/assets/scss/5-modules/modal-share.scss b/src/assets/scss/5-modules/modal-share.scss new file mode 100644 index 0000000..e7a1f4c --- /dev/null +++ b/src/assets/scss/5-modules/modal-share.scss @@ -0,0 +1,37 @@ +/* ----------------------------------------------------------- */ +/* == share modal module */ +/* ----------------------------------------------------------- */ + +.modalShare__controls { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1.5rem; +} + +/* Input +-------------------------------------------------------------- */ + +.modalShare__input { + color: $color-secondary; +} + +/* Big player checkbox +-------------------------------------------------------------- */ + +.modalShare__bigplayer label { + margin: 0; +} + +/* copy button +-------------------------------------------------------------- */ + +.modalShare__copy { + margin-left: 1rem; + padding: .8rem 1.6rem; + border: none; + border-radius: .3rem; + background-color: rgba($color-primary, .15); + color: $color-primary; + font-size: 1.3rem; +} diff --git a/src/assets/scss/7-vendors/micromodal.scss b/src/assets/scss/7-vendors/micromodal.scss new file mode 100644 index 0000000..0731e3f --- /dev/null +++ b/src/assets/scss/7-vendors/micromodal.scss @@ -0,0 +1,115 @@ +/**************************\ + Basic Modal Styles +\**************************/ + +.modal { + position: relative; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 20; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.modal[aria-hidden="true"] { + display: none; +} + +.modal__overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 20; + background: rgba(0, 0, 0, .6); +} + +.modal__container { + position: relative; + z-index: 21; + overflow-y: auto; + box-sizing: border-box; + padding: 3rem; + max-width: 50rem; + max-height: 100vh; + width: 100%; + border-radius: .5rem; + background-color: #fff; +} + +.modal__header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal__title { + margin-bottom: 2rem; + color: $color-primary; + text-align: center; + font-weight: bold; + font-style: normal; + font-size: 1.8rem; + line-height: 1.6em; +} + +.modal__close { + position: fixed; + top: 1rem; + right: 1rem; + border: 0; + background: transparent; + color: #fff; + font-size: 3rem; +} + +.modal__close:before { + content: "\2715"; +} + +.modal__btn { + -webkit-appearance: button; + overflow: visible; + margin: 0; + padding-top: .5rem; + padding-right: 1rem; + padding-bottom: .5rem; + padding-left: 1rem; + border-width: 0; + border-style: none; + border-radius: .25rem; + background-color: #e6e6e6; + color: rgba(0, 0, 0, .8); + text-transform: none; + font-size: .875rem; + line-height: 1.15; + cursor: pointer; + transition: -webkit-transform .25s ease-out; + transition: transform .25s ease-out; + transition: transform .25s ease-out, -webkit-transform .25s ease-out; + transform: translateZ(0); + + will-change: transform; + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); +} + +.modal__btn:focus, +.modal__btn:hover { + transform: scale(1.05); + + -webkit-transform: scale(1.05); +} + +.modal__btn-primary { + background-color: #00449e; + color: #fff; +} diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss index 86b3a62..ff5c73c 100755 --- a/src/assets/scss/_colors.scss +++ b/src/assets/scss/_colors.scss @@ -25,3 +25,4 @@ $color-link: $color-primary; // -------------------------------------------------------------- $color-grey-1: #767676; +$color-grey-2: #c4c4c4; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 75d5661..cb34f68 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -70,6 +70,7 @@ @import "5-modules/queue"; @import "5-modules/track"; @import "5-modules/context-menu"; +@import "5-modules/modal-share"; // -------------------------------------------------------------- @@ -86,7 +87,7 @@ // Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss) // In this context, "o" means "override" and you can use it as a convention. -// @import '7-vendors/o-vendor.scss'; +@import "7-vendors/micromodal.scss"; // -------------------------------------------------------------- diff --git a/src/components/ContextMenu.svelte b/src/components/ContextMenu.svelte index 6751e4d..58f44b7 100644 --- a/src/components/ContextMenu.svelte +++ b/src/components/ContextMenu.svelte @@ -1,3 +1,16 @@ - + Link to toot -Link to media \ No newline at end of file +Link to media + + \ No newline at end of file diff --git a/src/components/PopperMenu.svelte b/src/components/PopperMenu.svelte index 6e3b761..7d69b6a 100644 --- a/src/components/PopperMenu.svelte +++ b/src/components/PopperMenu.svelte @@ -1,10 +1,10 @@ - openMenu()}> + open()}> -
closeMenu()}>
+
close()}>
No content @@ -12,7 +12,7 @@
\ No newline at end of file