diff --git a/shared/css/static/modal-settings.scss b/shared/css/static/modal-settings.scss index 8d96b0c8..3182c397 100644 --- a/shared/css/static/modal-settings.scss +++ b/shared/css/static/modal-settings.scss @@ -3,14 +3,15 @@ :global { .modal-body.modal-settings { - padding: 0!important; + padding: 0 !important; - display: flex!important; - flex-direction: column!important; - justify-content: stretch!important; + display: flex !important; + flex-direction: column !important; + justify-content: stretch !important; @include user-select(none); - width: 10000em; /* allocate some space */ + width: 10000em; + /* allocate some space */ .inner-container { flex-grow: 1; @@ -23,7 +24,8 @@ flex-direction: row !important; justify-content: stretch; - > .left, > .right { + >.left, + >.right { display: flex; flex-direction: column; justify-content: stretch; @@ -38,10 +40,10 @@ .container-seperator { height: unset !important; - background-color: #222224!important; + background-color: #222224 !important; } - > .left { + >.left { width: 25%; min-width: 10em; @@ -86,7 +88,7 @@ } } - > .right { + >.right { width: 75%; min-width: 12em; @@ -94,7 +96,7 @@ background-color: #2f2f35; - > .container { + >.container { position: absolute; top: 0; bottom: 0; @@ -113,13 +115,15 @@ @include chat-scrollbar-horizontal(); - &.general-chat, &.general-application, &.audio-sounds { + &.general-chat, + &.general-application, + &.audio-sounds { label { display: flex; flex-direction: row; justify-content: flex-start; - > * { + >* { align-self: center; } @@ -130,11 +134,11 @@ } &.general-application { - > div { + >div { margin-top: .25em; } - > label:not(:first-child) { + >label:not(:first-child) { margin-top: 0.25em; } @@ -168,7 +172,8 @@ flex-direction: row; justify-content: flex-start; - a, div { + a, + div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -184,7 +189,7 @@ flex-direction: row; justify-content: flex-start; - > .country { + >.country { align-self: center; margin-right: .3em; } @@ -274,7 +279,7 @@ border-radius: $border_radius_middle; - > div { + >div { align-self: center; } @@ -282,7 +287,7 @@ background-color: #3c3d40; } - > *:not(.spacer) { + >*:not(.spacer) { flex-grow: 0; flex-shrink: 1; } @@ -333,15 +338,21 @@ } } - &.audio-speaker, &.audio-sounds, &.identity-forum { + &.audio-speaker, + &.audio-sounds, + &.identity-forum { flex-direction: row; justify-content: stretch; - .left, .right, .fill { + .left, + .right, + .fill { flex-grow: 1; flex-shrink: 1; - width: calc(50% - .5em); /* the .5em for the padding/margin */ + width: calc(50% - .5em); + + /* the .5em for the padding/margin */ &.fill { width: calc(100% - 1em); } @@ -410,7 +421,8 @@ background-color: $color_list_background; - &.container-devices, .container-devices { + &.container-devices, + .container-devices { flex-grow: 1; flex-shrink: 1; @@ -451,7 +463,7 @@ border: none; border-right: 1px solid #242527; - > .icon_em { + >.icon_em { font-size: 2em; opacity: 0; } @@ -530,7 +542,7 @@ &.selected { .container-selected { - > .icon_em { + >.icon_em { opacity: 1; } @@ -540,7 +552,9 @@ border-bottom: 1px solid #242527; border-top: 1px solid #242527; } - .container-name, .container-activity { + + .container-name, + .container-activity { margin-top: 0; margin-bottom: 0; @@ -588,8 +602,10 @@ } } - .right, .fill { - padding-right: .5em; /* for the sliders etc*/ + .right, + .fill { + padding-right: .5em; + /* for the sliders etc*/ justify-content: flex-start; .body { @@ -628,14 +644,14 @@ flex-direction: column; justify-content: stretch; - > .container { + >.container { padding: 0; display: flex; flex-direction: row; justify-content: space-between; - > label { + >label { flex-shrink: 0; min-width: 5em; @@ -706,13 +722,14 @@ .container-activity-bar { .bar-hider { - width: 100%!important; + width: 100% !important; } .thumb { - background-color: #4d4d4d!important; + background-color: #4d4d4d !important; + .tooltip { - opacity: 0!important; + opacity: 0 !important; } } } @@ -785,9 +802,9 @@ background-color: transparent; - -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); - -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); - box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); + -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { @@ -1082,11 +1099,13 @@ position: relative; - .left, .right { + .left, + .right { flex-grow: 1; flex-shrink: 1; - width: calc(50% - .5em); /* the .5em for the padding/margin */ + width: calc(50% - .5em); + /* the .5em for the padding/margin */ display: flex; flex-direction: column; @@ -1158,16 +1177,17 @@ background-color: #242527; - -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.75); - -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.75); - box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.75); + -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75); + -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75); + box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75); border-bottom-right-radius: $border_radius_large; border-top-right-radius: $border_radius_large; } &[value] { - overflow: visible; /* for the thumb */ + overflow: visible; + /* for the thumb */ border-bottom-left-radius: $border_radius_large; border-top-left-radius: $border_radius_large; @@ -1212,16 +1232,21 @@ } } - -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); - -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); - box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); + -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#70407e+0,45407e+100 */ - background: rgb(112,64,126); /* Old browsers */ - background: -moz-linear-gradient(left, rgba(112,64,126,1) 0%, rgba(69,64,126,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(left, rgba(112,64,126,1) 0%,rgba(69,64,126,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to right, rgba(112,64,126,1) 0%,rgba(69,64,126,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#70407e', endColorstr='#45407e',GradientType=1 ); /* IE6-9 */ + background: rgb(112, 64, 126); + /* Old browsers */ + background: -moz-linear-gradient(left, rgba(112, 64, 126, 1) 0%, rgba(69, 64, 126, 1) 100%); + /* FF3.6-15 */ + background: -webkit-linear-gradient(left, rgba(112, 64, 126, 1) 0%, rgba(69, 64, 126, 1) 100%); + /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, rgba(112, 64, 126, 1) 0%, rgba(69, 64, 126, 1) 100%); + /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70407e', endColorstr='#45407e', GradientType=1); + /* IE6-9 */ } .left { @@ -1245,7 +1270,8 @@ background-color: $color_list_background; - &.container-devices, .container-devices { + &.container-devices, + .container-devices { flex-grow: 1; flex-shrink: 1; @@ -1288,7 +1314,7 @@ border: none; border-right: 1px solid #242527; - > * { + >* { padding: .5em; position: absolute; @@ -1300,21 +1326,21 @@ margin: auto; } - > .icon_em { + >.icon_em { font-size: 2em; opacity: 0; } - > .icon-loading { + >.icon-loading { opacity: 0; img { max-height: 100%; max-width: 100%; - -webkit-animation:spin 4s linear infinite; - -moz-animation:spin 4s linear infinite; - animation:spin 4s linear infinite; + -webkit-animation: spin 4s linear infinite; + -moz-animation: spin 4s linear infinite; + animation: spin 4s linear infinite; } } } @@ -1392,7 +1418,7 @@ &.selected { .container-selected { - > .icon_em { + >.icon_em { opacity: 1; } @@ -1402,7 +1428,9 @@ border-bottom: 1px solid #242527; border-top: 1px solid #242527; } - .container-name, .container-activity { + + .container-name, + .container-activity { margin-top: 0; margin-bottom: 0; @@ -1480,7 +1508,8 @@ } .right { - padding-right: .5em; /* for the sliders etc*/ + padding-right: .5em; + /* for the sliders etc*/ justify-content: flex-start; .body { @@ -1519,14 +1548,14 @@ flex-direction: column; justify-content: stretch; - > .container { + >.container { padding: 0; display: flex; flex-direction: row; justify-content: space-between; - > label { + >label { flex-shrink: 0; min-width: 5em; @@ -1597,13 +1626,14 @@ .container-activity-bar { .bar-hider { - width: 100%!important; + width: 100% !important; } .thumb { - background-color: #4d4d4d!important; + background-color: #4d4d4d !important; + .tooltip { - opacity: 0!important; + opacity: 0 !important; } } } @@ -1676,9 +1706,9 @@ background-color: transparent; - -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); - -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); - box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.25); + -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { @@ -1731,7 +1761,8 @@ position: relative; - .left, .right { + .left, + .right { flex-grow: 1; flex-shrink: 1; @@ -1902,11 +1933,13 @@ text-overflow: ellipsis; white-space: nowrap; - > *:not(:first-of-type) { + >*:not(:first-of-type) { margin-left: .25em; } + .icon-status { - margin-bottom: .2em; /* push it a bit higher than the center */ + margin-bottom: .2em; + /* push it a bit higher than the center */ } div { @@ -1934,7 +1967,8 @@ } } - .buttons, .buttons-small { + .buttons, + .buttons-small { flex-grow: 0; flex-shrink: 0; @@ -1977,7 +2011,8 @@ } .right { - padding-right: .5em; /* for the sliders etc*/ + padding-right: .5em; + /* for the sliders etc*/ justify-content: flex-start; .body { @@ -1988,7 +2023,7 @@ flex-direction: column; justify-content: stretch; - > div { + >div { flex-shrink: 0; } @@ -1997,6 +2032,7 @@ padding: 1em; text-align: center; } + .container-valid { .container-level { display: flex; @@ -2023,7 +2059,7 @@ flex-direction: row; justify-content: space-between; - > div { + >div { text-align: right; width: max-content; @@ -2042,17 +2078,6 @@ } } - .container-teaforo { - .container-valid, .container-invalid { - padding: 1em; - text-align: center; - - button { - margin-top: .5em; - } - } - } - .container-highlight-dummy { margin-top: 1em; margin-bottom: .5em; @@ -2065,9 +2090,11 @@ } /* the highlight stuff for the newcommer modal */ - .container-settings-identity-profile, .container-settings-audio-microphone { + .container-settings-identity-profile, + .container-settings-audio-microphone { $highlight-time: .5s; $backdrop-color: rgba(0, 0, 0, .9); + .help-background { position: absolute; @@ -2164,12 +2191,13 @@ } } - .container-teamspeak, .container-teaforo, .container-nickname { + .container-teamspeak, + .container-nickname { display: none; } .container-highlight-dummy { - display: flex!important; + display: flex !important; } &.hide-help { @@ -2195,17 +2223,32 @@ :global { .container-settings-identity-profile { .buttons { - display: flex!important; + display: flex !important; } .buttons-small { - display: none!important; + display: none !important; } } } } -@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } -@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } -@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } \ No newline at end of file +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/shared/html/templates.html b/shared/html/templates.html index aa514f60..26739b91 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -1,12 +1,14 @@ -
- -