diff options
Diffstat (limited to 'web/sass-files/sass/routes/_settings.scss')
| -rw-r--r-- | web/sass-files/sass/routes/_settings.scss | 451 |
1 files changed, 451 insertions, 0 deletions
diff --git a/web/sass-files/sass/routes/_settings.scss b/web/sass-files/sass/routes/_settings.scss new file mode 100644 index 000000000..3c735be3c --- /dev/null +++ b/web/sass-files/sass/routes/_settings.scss @@ -0,0 +1,451 @@ +@charset 'UTF-8'; + +.user-settings { + min-height: 300px; + .table-responsive { + max-width: 560px; + max-height: 300px; + } +} + +.modal { + .settings-modal { + width: 800px; + .modal-back { + width: 50px; + height: 40px; + top: 12px; + font-size: 27px; + font-weight: normal; + line-height: 32px; + position: absolute; + left: 0; + text-align: center; + .fa { + line-height: inherit; + position: absolute; + width: 100%; + height: 100%; + left: 0; + } + } + .modal-body { + padding: 0; + margin: 0 auto; + min-height: calc(100% - 62px); + } + li { + list-style: none; + } + label { + font-weight: 600; + } + + .no-padding--left { + padding-left: 0; + } + .padding-top { + padding-top: 7px; + &.x2 { + padding-top: 14px; + } + &.x3 { + padding-top: 21px; + } + } + .padding-bottom { + padding-bottom: 7px; + &.x2 { + padding-bottom: 14px; + } + &.x3 { + padding-bottom: 21px; + } + .control-label { + font-weight: 600; + &.text-left { + text-align: left; + } + } + } + .profile-img { + width: 128px; + height: 128px; + } + .settings-table { + max-width: 1000px; + margin: 0 auto; + display: table; + table-layout: fixed; + width: 100%; + > div { + display: table-cell; + vertical-align: top; + } + .nav { + position: fixed; + width: 179px; + &.position--top { + top: 57px; + } + } + .security-links { + margin-right: 20px; + .fa { + margin-right: 6px; + } + } + .settings-links { + width: 180px; + } + .settings-content { + padding: 0px 20px 30px; + .modal-header { + display: none; + } + .section-min { + padding: 1em 0; + margin-bottom: 0; + cursor: pointer; + position: relative; + @include clearfix; + &:hover { + background: #f9f9f9; + } + &:hover .fa { + display: inline-block; + } + &:hover .section-edit { + text-decoration: underline; + } + } + + .section-max { + background: rgba(black, .05); + padding: 1em 0 1.3em; + margin-bottom: 0; + @include clearfix; + .section-title { + margin-bottom: 10px; + } + } + + .appearance-section { + .theme-group { + .input-group-addon { + padding: 4px 5px; + width: 40px; + } + img { + border: 1px solid rgba(black, .15); + width: 29px; + } + } + .group--code { + select { + padding-right: 25px; + } + select::-ms-expand { + display: none; + } + &:before { + pointer-events: none; + position: absolute; + top: 11px; + right: 50px; + z-index: 5; + content: '\f0d7'; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + } + } + .premade-themes { + margin-bottom: 10px; + .theme-label { + font-weight: 400; + margin-top: 5px; + } + img { + border: 3px solid transparent; + } + .active { + img { + border-color: $color--primary; + } + } + } + + .theme-elements { + padding-left: 15px; + + .element { + margin-right: 10px; + + &:nth-child(2n) { + margin-right: 0; + } + } + } + + .theme-elements__header { + margin: 10px 20px 0px 0; + border-bottom: 1px solid #ccc; + padding: 5px 0 10px; + font-size: em(13.5px); + font-weight: 600; + cursor: pointer; + + .fa-minus { + display: none; + } + + &.open { + .fa-minus { + display: inline-block; + } + .fa-plus { + display: none; + } + } + + .header__icon { + float: right; + @include opacity(.5); + } + } + + .theme-elements__body { + padding-top: 5px; + display: none; + @include legacy-pie-clearfix; + background: rgba(255, 255, 255, .05); + padding: 20px 0 0 20px; + margin: 0 20px 0 0; + @include border-radius(0 0 3px 3px); + } + + .custom-label { + white-space: nowrap; + font-weight: normal; + font-size: 12px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } + .input-group-addon { + background: transparent; + } + .radio { + label { + font-weight: 600; + } + } + } + + .section-title { + margin-bottom: 5px; + font-weight: 600; + padding-right: 50px; + } + + .section-edit { + text-align: right; + margin-bottom: 5px; + .fa { + margin-right: 5px; + font-size: 12px; + @include opacity(.5); + display: none; + &.fa-chevron-down { + top: -1px; + margin-right: 0; + position: relative; + } + } + } + + .section-describe { + @include opacity(.7); + white-space: pre; + @include clearfix; + text-overflow: ellipsis; + } + + .divider-dark { + border-bottom: 1px solid #aaa; + } + + .divider-light { + border-bottom: 1px solid lightgrey; + } + + .setting-list { + padding: 0; + list-style-type: none; + } + + .setting-list__hint { + margin-top: 20px; + } + + .mentions-input { + margin-top: 10px; + } + + .setting-list-item { + margin-top: 7px; + } + .has-error { + color: #a94442; + } + + .file-status { + font-size: 13px; + margin-top: 8px; + color: #555; + } + + .confirm-import { + padding: 4px 10px; + margin: 10px 0; + } + } + } + } + .nav-pills { + > li { + margin: 0; + a { + padding: 8px 5px 8px 15px; + border-radius: 0; + color: #777; + } + .glyphicon { + width: 25px; + top: 2px; + } + &:hover { + a { + background-color: rgba(black, .1); + } + } + &.active { + a { + color: #111; + background-color: #e1e1e1; + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, + a:hover, + a:focus { + background-color: rgba(black, .1); + border-radius: 0; + font-weight: 400; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + h3 { + font-size: em(20px); + } +} + +.channel-settings { + padding: 0 10px; +} + +.tab-header { + margin-bottom: 1em; +} + +.setting-name { + color: grey; + font-weight: 500; +} + +.sel-btn { + margin-right: 5px; +} + +.member-div { + border-bottom: 1px solid lightgrey; + position: relative; + padding: 2px; + margin: 0; + width: 100%; + &:first-child { + border-top: 1px solid lightgrey; + } + .post-profile-img { + @include border-radius(50px); + margin-right: 8px; + } +} + +.member-role, +.member-drop { + .fa { + margin-right: 5px; + @include opacity(.5); + font-size: 12px; + } + + .member-menu { + top: -50%; + right: 110%; + } +} + +.member-invite { + position: absolute; + right: 10px; + top: 7px; +} + +.member-menu { + right: 0px; + left: auto; +} + +.member-list { + width: 100%; + overflow-x: visible; +} + +.member-page { + padding-top: 50px; +} + +.active-border { + border: 1px solid red; +} + +.color-btn { + margin: 4px; +} + +.no-resize { + resize: none; +} |