diff --git a/index.html b/index.html index 269e1a2..81e0bc7 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@

mlut tutorials

diff --git a/states/-1/img/json.jpg b/states/-1/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/states/-1/img/json.jpg differ diff --git a/states/-1/img/sprite.svg b/states/-1/img/sprite.svg new file mode 100644 index 0000000..49884ee --- /dev/null +++ b/states/-1/img/sprite.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/states/-1/img/wallpaper.jpg b/states/-1/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/states/-1/img/wallpaper.jpg differ diff --git a/states/-1/index.html b/states/-1/index.html new file mode 100644 index 0000000..2426d10 --- /dev/null +++ b/states/-1/index.html @@ -0,0 +1,124 @@ + + + + + + + Document + + + +
+ +
+ + +
+
+ + +
+ +
+ + +
+ Edit profile +
+ +
+ + +
+
+
+ + + +
+ + +
+ + wallpaper +
+ + +
+ +
+ + +
+ +
+ +
+
+ +
+ + profile-photo + +
+ +
+ +
+
+
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/states/-1/style.css b/states/-1/style.css new file mode 100644 index 0000000..8cfbbd9 --- /dev/null +++ b/states/-1/style.css @@ -0,0 +1,679 @@ +/* +CSS variables + +Global CSS custom properties which used in mlut. + +--ml-gg = 0.75rem - [grid gutter](section-concepts.html#kssref-concepts-custom_unit-gg). +--ml-gscc = 12 - number of columns in the grid system. Sets by [$gs-columns](section-settings.html#kssref-settings-gs). Available only with `$legacy-grid-system` flag enabled + +Styleguide: css_lib.styles.css_vars +*/ +:root { + --ml-gg: 0.75rem; +} +@media (min-width: 992px) { + :root { + --ml-gg: 1rem; + } +} + +/* +Generic + +Generic CSS that contains `box-sizing`, reset, browser bugs fixes etc. You can configure it with settings. + +Styleguide: css_lib.styles.generic +*/ +/*! purgecss start ignore */ +html { + -webkit-text-size-adjust: 100%; +} + +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0px; +} + +main { + display: block; +} + +/* +1. Add the correct height in Firefox. +2. Show the overflow in IE +3. Correct the inheritance of border color in Firefox +*/ +hr { + height: 0; + overflow: visible; + color: inherit; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp, +pre { + font-family: monospace, monospace; +} + +abbr[title] { + text-decoration: underline dotted; +} + +sub, +sup { + line-height: 0; + position: relative; + vertical-align: baseline; + top: -0.4em; +} + +sub { + top: 0.3em; +} + +/** +1. Remove text indentation from table contents in Chrome and Safari +2. Correct table border color inheritance in all Chrome and Safari +*/ +table { + text-indent: 0; + border-color: inherit; +} + +img, svg, video, canvas, audio, iframe, embed, object { + vertical-align: bottom; +} + +source { + display: none; +} + +img, +svg, +canvas, +video { + max-width: 100%; + height: auto; +} + +[hidden], +template { + display: none; +} + +legend { + display: table; + max-width: 100%; + white-space: normal; +} + +summary { + display: list-item; +} + +progress { + vertical-align: baseline; +} + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +button { + text-transform: none; +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +textarea { + overflow: auto; +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +:-moz-ui-invalid { + box-shadow: none; +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/*! purgecss end ignore */ +/* +Btn + +Helper for creating buttons. Prepares any element to styling as a button. + +Markup: ../../../docs/examples/css_lib-helpers/btn/btn.html + +Styleguide: css_lib.helpers.btn +*/ +.btn { + display: inline-block; + margin: 0; + padding: 0; + line-height: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + background: none; + border: 0; + cursor: pointer; +} + +/* +Wrapper + +The helper-container for the main content of the page. The maximum width is set in the [settings](section-settings.html#kssref-settings-general). The default is `1200px`. + +The container has sides `padding` that equal to gutters so that the content does not stick to sides on small screens. On wide screens the container is centered. + +Markup: ../../../docs/examples/css_lib-helpers/wrapper/wrapper.html + +Styleguide: css_lib.helpers.wrapper +*/ +.wrapper { + display: block; + max-width: 1200px; + margin: 0 auto; +} +.wrapper { + padding-right: calc(var(--ml-gg) * 1); + padding-left: calc(var(--ml-gg) * 1); +} + +/* +Ratio-box + +Helper for creating containers, with proportional width and height. Implemented using a pseudo-element with a `padding-bottom` in %. + +The default aspect ratio is 16:9. + +.Pt75p_b - 4:3 aspect ratio. +.Pt100p_b - 1:1 aspect ratio. + +Markup: ../../../docs/examples/css_lib-helpers/ratio-block/ratio-block.hbs + +Styleguide: css_lib.helpers.ratio-box +*/ +.ratio-box { + position: relative; +} +.ratio-box::before { + display: block; + width: 100%; + padding-top: 56.25%; + content: ""; +} +.ratio-box > :first-child { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} + +html { + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +div { + scrollbar-width: none; +} + +.Bgc-white { + background-color: white; +} + +.C-\$accent900 { + color: var(--ml-accent900); +} + +.Fnf-mUss { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.-HeaderH13u { + --ml-headerH: 3.25rem; +} + +.Ps-a { + position: absolute; +} + +.W100p { + width: 100%; +} + +.H100vh { + height: 100vh; +} + +.Bgc-grey { + background-color: grey; +} + +.D-f { + display: flex; +} + +.Jc-c { + justify-content: center; +} + +.Ai-c { + align-items: center; +} + +.Mxw600 { + max-width: 600px; +} + +.W90p { + width: 90%; +} + +.H160u { + height: 40rem; +} + +.Mxh90vh { + max-height: 90vh; +} + +.Bgc-black { + background-color: black; +} + +.T5p { + top: 5%; +} + +.Bdrd5u { + border-radius: 1.25rem; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.P2u\;3u { + padding: 0.5rem 0.75rem; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-f { + position: fixed; +} + +.Bgc\#000\*50p { + background-color: rgba(0, 0, 0, 0.5); +} + +.-Bdtrd5u { + border-top-right-radius: 1.25rem; + border-top-left-radius: 1.25rem; +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.W10p { + width: 10%; +} + +.H100p { + height: 100%; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.Bgc-\$secondary900_h:hover { + background-color: var(--ml-secondary900); +} + +.Apcr1 { + aspect-ratio: 1; +} + +.D { + display: block; +} + +.Bdrd100p { + border-radius: 100%; +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns6u { + font-size: 1.5rem; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.Bgc-\$accent900 { + background-color: var(--ml-accent900); +} + +.Bgc-\$secondary850_h:hover { + background-color: var(--ml-secondary850); +} + +.C-\$accent850 { + color: var(--ml-accent850); +} + +.W18u { + width: 4.5rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Lnh100p { + line-height: 100%; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H50u { + height: 12.5rem; +} + +.Ov-h { + overflow: hidden; +} + +.Mb20u { + margin-bottom: 5rem; +} + +.P0\;1 { + padding: 0px 1px; +} + +.Zi2 { + z-index: 2; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.Gap5u { + gap: 1.25rem; +} + +.Bgc-\$secondary200_h:hover { + background-color: var(--ml-secondary200); +} + +.Bgc-\$secondary400 { + background-color: var(--ml-secondary400); +} + +.Bgc-\$secondary300_h:hover { + background-color: var(--ml-secondary300); +} + +.P2u { + padding: 0.5rem; +} + +.O0 { + opacity: 0; +} + +.-Ctx-wallpaper:hover .\^wallpaper\:h\:_O1 { + opacity: 1; +} + +.Zi10 { + z-index: 10; +} + +.H30u { + height: 7.5rem; +} + +.D-ib { + display: inline-block; +} + +.Bd2\;s\;black { + border: 2px solid black; +} + +.T38u { + top: 9.5rem; +} + +.L5u { + left: 1.25rem; +} + +.Bgc-\$secondary200 { + background-color: var(--ml-secondary200); +} + +.O1_h:hover { + opacity: 1; +} + +.-Ts_\:input\,\:textarea input, .-Ts_\:input\,\:textarea textarea { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.C-\$accent500_\:input\,\:textarea input, .C-\$accent500_\:input\,\:textarea textarea { + color: var(--ml-accent500); +} + +.Mb5u { + margin-bottom: 1.25rem; +} + +.P0\;5u { + padding: 0px 1.25rem; +} + +.Bd1\;s\;\$accent600 { + border: 1px solid var(--ml-accent600); +} + +.Bdc-\$accent200_fw:focus-within { + border-color: var(--ml-accent200); +} + +.C-\$accent600 { + color: var(--ml-accent600); +} + +.Bdrd2u { + border-radius: 0.5rem; +} + +.Ct-\'\;\'\;\'\*\'_af::after { + content: ' ' '*'; +} + +.C-\$accent300_fw\:af:focus-within::after { + color: var(--ml-accent300); +} + +.Ps-a_af::after { + position: absolute; +} + +.T2u_af::after { + top: 0.5rem; +} + +.R2u_af::after { + right: 0.5rem; +} + +.Bdc-\$accent400_\!fw\:h:not(:focus-within):hover { + border-color: var(--ml-accent400); +} + +.Mb1u { + margin-bottom: 0.25rem; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent200 { + color: var(--ml-accent200); +} + +.Ol-n_f:focus { + outline: none; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent900 { + color: var(--ml-accent900); +} + +.Txw-w { + text-wrap: wrap; +} + +.Rs-n { + resize: none; +} \ No newline at end of file diff --git a/states/0/img/json.jpg b/states/0/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/states/0/img/json.jpg differ diff --git a/states/0/img/sprite.svg b/states/0/img/sprite.svg new file mode 100644 index 0000000..49884ee --- /dev/null +++ b/states/0/img/sprite.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/states/0/img/wallpaper.jpg b/states/0/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/states/0/img/wallpaper.jpg differ diff --git a/states/0/index.html b/states/0/index.html new file mode 100644 index 0000000..b0ca399 --- /dev/null +++ b/states/0/index.html @@ -0,0 +1,124 @@ + + + + + + + Document + + + +
+ +
+ + +
+
+ + +
+ +
+ + +
+ Edit profile +
+ +
+ + +
+
+
+ + + +
+ + +
+ + wallpaper +
+ + +
+ +
+ + +
+ +
+ +
+
+ +
+ + profile-photo + +
+ +
+ +
+
+
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/states/0/style.css b/states/0/style.css new file mode 100644 index 0000000..712ed3b --- /dev/null +++ b/states/0/style.css @@ -0,0 +1,683 @@ +/* +CSS variables + +Global CSS custom properties which used in mlut. + +--ml-gg = 0.75rem - [grid gutter](section-concepts.html#kssref-concepts-custom_unit-gg). +--ml-gscc = 12 - number of columns in the grid system. Sets by [$gs-columns](section-settings.html#kssref-settings-gs). Available only with `$legacy-grid-system` flag enabled + +Styleguide: css_lib.styles.css_vars +*/ +:root { + --ml-gg: 0.75rem; +} +@media (min-width: 992px) { + :root { + --ml-gg: 1rem; + } +} + +/* +Generic + +Generic CSS that contains `box-sizing`, reset, browser bugs fixes etc. You can configure it with settings. + +Styleguide: css_lib.styles.generic +*/ +/*! purgecss start ignore */ +html { + -webkit-text-size-adjust: 100%; +} + +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0px; +} + +main { + display: block; +} + +/* +1. Add the correct height in Firefox. +2. Show the overflow in IE +3. Correct the inheritance of border color in Firefox +*/ +hr { + height: 0; + overflow: visible; + color: inherit; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp, +pre { + font-family: monospace, monospace; +} + +abbr[title] { + text-decoration: underline dotted; +} + +sub, +sup { + line-height: 0; + position: relative; + vertical-align: baseline; + top: -0.4em; +} + +sub { + top: 0.3em; +} + +/** +1. Remove text indentation from table contents in Chrome and Safari +2. Correct table border color inheritance in all Chrome and Safari +*/ +table { + text-indent: 0; + border-color: inherit; +} + +img, svg, video, canvas, audio, iframe, embed, object { + vertical-align: bottom; +} + +source { + display: none; +} + +img, +svg, +canvas, +video { + max-width: 100%; + height: auto; +} + +[hidden], +template { + display: none; +} + +legend { + display: table; + max-width: 100%; + white-space: normal; +} + +summary { + display: list-item; +} + +progress { + vertical-align: baseline; +} + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +button { + text-transform: none; +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +textarea { + overflow: auto; +} + +::-moz-focus-inner { + border: 0; + padding: 0; +} + +:-moz-ui-invalid { + box-shadow: none; +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/*! purgecss end ignore */ +/* +Btn + +Helper for creating buttons. Prepares any element to styling as a button. + +Markup: ../../../docs/examples/css_lib-helpers/btn/btn.html + +Styleguide: css_lib.helpers.btn +*/ +.btn { + display: inline-block; + margin: 0; + padding: 0; + line-height: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + background: none; + border: 0; + cursor: pointer; +} + +/* +Wrapper + +The helper-container for the main content of the page. The maximum width is set in the [settings](section-settings.html#kssref-settings-general). The default is `1200px`. + +The container has sides `padding` that equal to gutters so that the content does not stick to sides on small screens. On wide screens the container is centered. + +Markup: ../../../docs/examples/css_lib-helpers/wrapper/wrapper.html + +Styleguide: css_lib.helpers.wrapper +*/ +.wrapper { + display: block; + max-width: 1200px; + margin: 0 auto; +} +.wrapper { + padding-right: calc(var(--ml-gg) * 1); + padding-left: calc(var(--ml-gg) * 1); +} + +/* +Ratio-box + +Helper for creating containers, with proportional width and height. Implemented using a pseudo-element with a `padding-bottom` in %. + +The default aspect ratio is 16:9. + +.Pt75p_b - 4:3 aspect ratio. +.Pt100p_b - 1:1 aspect ratio. + +Markup: ../../../docs/examples/css_lib-helpers/ratio-block/ratio-block.hbs + +Styleguide: css_lib.helpers.ratio-box +*/ +.ratio-box { + position: relative; +} +.ratio-box::before { + display: block; + width: 100%; + padding-top: 56.25%; + content: ""; +} +.ratio-box > :first-child { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} + +html { + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +div { + scrollbar-width: none; +} + +.Bgc-white { + background-color: white; +} + +.C-\$accent900 { + color: var(--ml-accent900); +} + +.Fnf-mUss { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.-HeaderH13u { + --ml-headerH: 3.25rem; +} + +.Ps-a { + position: absolute; +} + +.W100p { + width: 100%; +} + +.H100vh { + height: 100vh; +} + +.Bgc-grey { + background-color: grey; +} + +.D-f { + display: flex; +} + +.Jc-c { + justify-content: center; +} + +.Ai-c { + align-items: center; +} + +.Mxw600 { + max-width: 600px; +} + +.W90p { + width: 90%; +} + +.H160u { + height: 40rem; +} + +.Mxh90vh { + max-height: 90vh; +} + +.Bgc-black { + background-color: black; +} + +.T5p { + top: 5%; +} + +.Bdrd5u { + border-radius: 1.25rem; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.P2u\;3u { + padding: 0.5rem 0.75rem; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-f { + position: fixed; +} + +.Bgc\#000\*50p { + background-color: rgba(0, 0, 0, 0.5); +} + +.-Bdtrd5u { + border-top-right-radius: 1.25rem; + border-top-left-radius: 1.25rem; +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.W10p { + width: 10%; +} + +.H100p { + height: 100%; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.Bgc-\$secondary900_h:hover { + background-color: var(--ml-secondary900); +} + +.Apcr1 { + aspect-ratio: 1; +} + +.D { + display: block; +} + +.Bdrd100p { + border-radius: 100%; +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns6u { + font-size: 1.5rem; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.Bgc-\$accent900 { + background-color: var(--ml-accent900); +} + +.Bgc-\$secondary850_h:hover { + background-color: var(--ml-secondary850); +} + +.C-\$accent850 { + color: var(--ml-accent850); +} + +.W18u { + width: 4.5rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Lnh100p { + line-height: 100%; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H50u { + height: 12.5rem; +} + +.Ov-h { + overflow: hidden; +} + +.Mb20u { + margin-bottom: 5rem; +} + +.P0\;1 { + padding: 0px 1px; +} + +.Zi2 { + z-index: 2; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.Gap5u { + gap: 1.25rem; +} + +.Bgc-\$secondary200_h:hover { + background-color: var(--ml-secondary200); +} + +.Bgc-\$secondary400 { + background-color: var(--ml-secondary400); +} + +.Bgc-\$secondary300_h:hover { + background-color: var(--ml-secondary300); +} + +.P2u { + padding: 0.5rem; +} + +.O0 { + opacity: 0; +} + +.-Ctx-wallpaper:hover .\^wallpaper\:h\:_O1 { + opacity: 1; +} + +.Zi10 { + z-index: 10; +} + +.H30u { + height: 7.5rem; +} + +.D-ib { + display: inline-block; +} + +.Bd2\;s\;black { + border: 2px solid black; +} + +.T38u { + top: 9.5rem; +} + +.L5u { + left: 1.25rem; +} + +.Bgc-\$secondary200 { + background-color: var(--ml-secondary200); +} + +.O1_h:hover { + opacity: 1; +} + +.-Ts_\:input\,\:textarea input, .-Ts_\:input\,\:textarea textarea { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.C-\$accent500_\:input\,\:textarea input, .C-\$accent500_\:input\,\:textarea textarea { + color: var(--ml-accent500); +} + +.Mb5u { + margin-bottom: 1.25rem; +} + +.P0\;5u { + padding: 0px 1.25rem; +} + +.Bd1\;s\;\$accent600 { + border: 1px solid var(--ml-accent600); +} + +.Bdc-\$accent200_fw:focus-within { + border-color: var(--ml-accent200); +} + +.C-\$accent600 { + color: var(--ml-accent600); +} + +.Bdrd2u { + border-radius: 0.5rem; +} + +.Ct-\'\;\'\;\'\*\'_af::after { + content: ' ' '*'; +} + +.C-\$accent300_fw\:af:focus-within::after { + color: var(--ml-accent300); +} + +.Ps-a_af::after { + position: absolute; +} + +.T2u_af::after { + top: 0.5rem; +} + +.R2u_af::after { + right: 0.5rem; +} + +.Bdc-\$accent400_\!fw\:h:not(:focus-within):hover { + border-color: var(--ml-accent400); +} + +.Mb1u { + margin-bottom: 0.25rem; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent200 { + color: var(--ml-accent200); +} + +.Ol-n_f:focus { + outline: none; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent900 { + color: var(--ml-accent900); +} + +.Txw-w { + text-wrap: wrap; +} + +.Rs-n { + resize: none; +} + +.H-\$headerHMxw600 { + height: var(--ml-headerHMxw600); +} \ No newline at end of file