--- /dev/null
+.glitch.local-settings {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ background: $ui-secondary-color;
+ color: $ui-base-color;
+ border-radius: 8px;
+ height: 80vh;
+ width: 80vw;
+ max-width: 740px;
+ max-height: 450px;
+ overflow: hidden;
+
+ label {
+ display: block;
+ }
+
+ h1 {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px;
+ margin-bottom: 20px;
+ }
+
+ h2 {
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
+}
+
+.glitch.local-settings__navigation__item {
+ display: block;
+ padding: 15px 20px;
+ color: inherit;
+ background: $primary-text-color;
+ border-bottom: 1px $ui-primary-color solid;
+ cursor: pointer;
+ text-decoration: none;
+ outline: none;
+ transition: background .3s;
+
+ &:hover {
+ background: $ui-secondary-color;
+ }
+
+ &.active {
+ background: $ui-highlight-color;
+ color: $primary-text-color;
+ }
+
+ &.close, &.close:hover {
+ background: $error-value-color;
+ color: $primary-text-color;
+ }
+}
+
+.glitch.local-settings__navigation {
+ background: $primary-text-color;
+ color: $ui-base-color;
+ width: 200px;
+ font-size: 15px;
+ line-height: 20px;
+ overflow-y: auto;
+}
+
+.glitch.local-settings__page {
+ display: block;
+ flex: auto;
+ padding: 15px 20px 15px 20px;
+ width: 360px;
+ overflow-y: auto;
+}
+
+.glitch.local-settings__page__item {
+ select {
+ margin-bottom: 5px;
+ }
+}
+++ /dev/null
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-body {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-::-webkit-scrollbar-thumb {
- background: lighten($ui-base-color, 4%);
- border: 0px none $base-border-color;
- border-radius: 50px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: lighten($ui-base-color, 6%);
-}
-
-::-webkit-scrollbar-thumb:active {
- background: lighten($ui-base-color, 4%);
-}
-
-::-webkit-scrollbar-track {
- border: 0px none $base-border-color;
- border-radius: 0;
- background: rgba($base-overlay-background, 0.1);
-}
-
-::-webkit-scrollbar-track:hover {
- background: $ui-base-color;
-}
-
-::-webkit-scrollbar-track:active {
- background: $ui-base-color;
-}
-
-::-webkit-scrollbar-corner {
- background: transparent;
-}