TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Properly import the old global css styles

master
WolverinDEV 2021-03-17 16:02:06 +01:00
parent 29639ca836
commit 5b289b15d7
37 changed files with 9027 additions and 9644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
shared/css/load-css.tsx
View File

@ -1,36 +1,31 @@
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/properties.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/main-layout.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/general.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/frame-chat.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/server-log.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/scroll.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/hostbanner.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/htmltags.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/menu-bar.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/mixin.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modals.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-about.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-avatar.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-banclient.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-banlist.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-channelinfo.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-clientinfo.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-connect.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-group-assignment.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-icons.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-identity.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-newcomer.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-invite.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-keyselect.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-poke.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-query.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-server.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-musicmanage.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-serverinfobandwidth.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-serverinfo.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-settings.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/overlay-image-preview.scss"
import "./static/properties.scss"
import "./static/main-layout.scss"
import "./static/general.scss"
import "./static/frame-chat.scss"
import "./static/htmltags.scss"
import "./static/mixin.scss"
import "./static/modal.scss"
import "./static/modals.scss"
import "./static/modal-about.scss"
import "./static/modal-avatar.scss"
import "./static/modal-banclient.scss"
import "./static/modal-banlist.scss"
import "./static/modal-channelinfo.scss"
import "./static/modal-clientinfo.scss"
import "./static/modal-group-assignment.scss"
import "./static/modal-icons.scss"
import "./static/modal-identity.scss"
import "./static/modal-newcomer.scss"
import "./static/modal-invite.scss"
import "./static/modal-keyselect.scss"
import "./static/modal-poke.scss"
import "./static/modal-query.scss"
import "./static/modal-server.scss"
import "./static/modal-musicmanage.scss"
import "./static/modal-serverinfobandwidth.scss"
import "./static/modal-serverinfo.scss"
import "./static/modal-settings.scss"
import "./static/overlay-image-preview.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/ts/tab.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/ts/country.scss"
import "./static/ts/tab.scss"
import "./static/ts/country.scss"

323
shared/css/static/general.scss
View File

File diff suppressed because one or more lines are too long

83
shared/css/static/hostbanner.scss
View File

@ -1,83 +0,0 @@
@import "mixin";
html:root {
--hostbanner-background: #2e2e2e;
}
.hostbanner {
.container-hostbanner {
position: relative;
overflow: hidden;
height: 1000px; /* allocate some height to be truncated by the flex :) */
display: flex;
flex-direction: column;
justify-content: stretch;
cursor: pointer;
&:not(.no-background) {
background-color: var(--hostbanner-background);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
padding-bottom: 5px;
}
&.disabled {
padding-bottom: 0;
height: 0;
}
@include transition(height 0.5s ease-in-out);
.hostbanner-image-container {
height: 100%;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
min-height: 0;
text-align: center;
&.hostbanner-mode-0 {
/* do not adjust */
display: block;
}
&.hostbanner-mode-1 {
/* do adjust and ignore ration */
display: flex;
height: 100%;
width: 100%;
> img {
width: 100%;
height: 100%;
}
}
&.hostbanner-mode-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
> img {
object-fit: contain;
max-height: 100%;
/* "Normal" third more */
//max-width: 100%;
/* better adoptable mode */
width: min-content;
}
}
}
}
}

10
shared/css/static/htmltags.scss
View File

@ -1,5 +1,7 @@
.htmltag-client, .htmltag-channel {
color: var(--text);
font-weight: bold;
cursor: pointer;
:global {
.htmltag-client, .htmltag-channel {
color: var(--text);
font-weight: bold;
cursor: pointer;
}
}

110
shared/css/static/main-layout.scss
View File

@ -16,77 +16,85 @@ html:root {
--channel-chat-seperator: #1e1e1e;
--channel-chat-seperator-selected: #707070;
--server-log-text: #6e6e6e;
--server-log-error: #e62222;
--server-log-tree-entry: #d8d8d8;
--hostbanner-background: #2e2e2e;
}
.hide-small {
opacity: 1;
transition: opacity $animation_length linear;
}
.show-small {
display: none;
opacity: 0;
transition: opacity $animation_length linear;
}
.app-container {
right: 0;
left: 0;
top: 0;
overflow: auto;
padding: 0;
}
@media only screen and (max-width: $small_device) {
:global {
.hide-small {
display: none;
opacity: 0;
opacity: 1;
transition: opacity $animation_length linear;
}
.show-small {
display: block !important;
display: none;
opacity: 1 !important;
opacity: 0;
transition: opacity $animation_length linear;
}
}
$animation_seperator_length: .1s;
.container-seperator {
@include transition(all $animation_seperator_length ease-in-out);
background: var(--channel-chat-seperator);
.app-container {
right: 0;
left: 0;
top: 0;
flex-grow: 0;
flex-shrink: 0;
&.horizontal {
height: $separator_thickness;
width: 100%;
cursor: row-resize;
overflow: auto;
padding: 0;
}
&.vertical {
width: $separator_thickness;
height: 100%;
@media only screen and (max-width: $small_device) {
.hide-small {
display: none;
opacity: 0;
transition: opacity $animation_length linear;
}
cursor: col-resize;
.show-small {
display: block !important;
opacity: 1 !important;
transition: opacity $animation_length linear;
}
}
&.seperator-selected {
$animation_seperator_length: .1s;
.container-seperator {
@include transition(all $animation_seperator_length ease-in-out);
background: var(--channel-chat-seperator);
background-color: var(--channel-chat-seperator-selected);
flex-grow: 0;
flex-shrink: 0;
&.horizontal {
height: $separator_thickness;
width: 100%;
cursor: row-resize;
}
&.vertical {
width: $separator_thickness;
height: 100%;
cursor: col-resize;
}
&.seperator-selected {
@include transition(all $animation_seperator_length ease-in-out);
background-color: var(--channel-chat-seperator-selected);
}
}
}
html, body {
overflow: hidden;
}
html, body {
overflow: hidden;
}
body {
background: var(--app-background)!important;
body {
background: var(--app-background)!important;
}
}

133
shared/css/static/menu-bar.scss
View File

@ -1,133 +0,0 @@
@import "mixin";
.top-menu-bar {
@include user-select(none);
height: 1.5em;
width: 100%;
background: #fafafa;
display: flex;
flex-direction: row;
justify-content: flex-start;
position: fixed;
top: 0;
z-index: 201;
font-family: Arial, serif;
.container-menu-item {
position: relative;
.menu-item {
cursor: pointer;
padding-left: .4em;
padding-right: .4em;
height: 100%;
display: flex;
flex-direction: row;
width: max-content;
> * {
vertical-align: middle;
}
.container-icon {
height: 1.2em;
width: 1.2em;
padding: .1em;
font-size: 1em;
margin-right: .2em;
display: inline-block;
}
.container-label {
display: inline-block;
align-self: center;
a {
white-space: nowrap;
}
}
}
&:hover:not(.disabled) {
background-color: rgba(0, 0, 0, 0.27);
}
&.disabled {
background-color: rgba(0, 0, 0, 0.13);
}
&.hidden {
display: none;
}
.sub-menu {
z-index: 1000;
display: none;
background: white;
position: absolute;
top: 100%;
border: 1px solid black;
> .container-menu-item {
padding-right: .5em;
}
}
&.type-side {
&.sub-entries:after {
position: absolute;
display: block;
content: '>';
top: 0;
bottom: 0;
right: .4em;
}
> .sub-menu {
top: -1px; /* border */
left: 100%;
}
&:hover {
> .sub-menu {
display: block;
}
}
}
&.active {
background-color: rgba(0, 0, 0, 0.27);
> .sub-menu {
display: block;
}
}
}
> .container-menu-item {
> .menu-item {
.container-icon {
display: none;
}
}
}
hr {
margin-top: .125em;
margin-bottom: .125em;
}
}

102
shared/css/static/modal-about.scss
View File

@ -1,59 +1,61 @@
.modal-about {
display: flex!important;
flex-direction: row!important;
:global {
.modal-about {
display: flex!important;
flex-direction: row!important;
text-align: center;
color: #999999;
text-align: center;
color: #999999;
.container-left {
display: flex;
flex-direction: column;
justify-content: center;
}
.container-right {
text-align: left;
padding-left: 2em;
h1 {
font-size: 1.5em;
margin-block-start: 0.35em;
margin-block-end: 0.35em;
.container-left {
display: flex;
flex-direction: column;
justify-content: center;
}
h2 {
font-size: 1.25em;
margin-block-start: 0.10em;
margin-block-end: 0.10em;
}
p {
margin-block-start: .25em;
margin-block-end: .25em;
}
}
.version {
width: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
a {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
text-align: right;
}
.value {
padding-left: .25em;
.container-right {
text-align: left;
padding-left: 2em;
flex-grow: 1;
flex-shrink: 1;
h1 {
font-size: 1.5em;
margin-block-start: 0.35em;
margin-block-end: 0.35em;
}
h2 {
font-size: 1.25em;
margin-block-start: 0.10em;
margin-block-end: 0.10em;
}
p {
margin-block-start: .25em;
margin-block-end: .25em;
}
}
.version {
width: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
a {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
text-align: right;
}
.value {
padding-left: .25em;
text-align: left;
flex-grow: 1;
flex-shrink: 1;
}
}
}
}

474
shared/css/static/modal-avatar.scss
View File

@ -1,289 +1,291 @@
.modal-avatar-list {
display: flex!important;;
flex-direction: row!important;;
:global {
.modal-avatar-list {
display: flex!important;;
flex-direction: row!important;;
.container-list {
width: 50%;
.container-list {
width: 50%;
margin-top: 5px;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: stretch;
.column {
&.column-username {
width: calc(50% - 100px);
overflow: hidden;
text-overflow: ellipsis;
}
&.column-unique-id {
width: calc(50% - 100px);
overflow: hidden;
text-overflow: ellipsis;
}
&.column-size {
width: 75px;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
}
&.column-timestamp {
width: 150px;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
}
}
.list-header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
.column {
border: 1px solid lightgray;
text-align: center;
}
}
.list-entries-container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: start;
overflow-y: auto;
min-height: 250px;
justify-content: stretch;
.entry {
.column {
&.column-username {
width: calc(50% - 100px);
overflow: hidden;
text-overflow: ellipsis;
}
&.column-unique-id {
width: calc(50% - 100px);
overflow: hidden;
text-overflow: ellipsis;
}
&.column-size {
width: 75px;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
}
&.column-timestamp {
width: 150px;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
}
}
.list-header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
.column {
margin-left: 2px;
}
cursor: pointer;
&.selected {
background-color: lightblue;
border: 1px solid lightgray;
text-align: center;
}
}
&.scrollbar {
.column-username {
width: calc(50% - 100px + 30px)
}
.column-unique-id {
width: calc(50% - 100px + 30px)
}
}
}
}
.container-info {
margin-left: 10px;
position: relative;
width: 50%;
.container-data {
width: 100%;
}
.container-preview {
display: flex;
flex-direction: row;
justify-content: stretch;
.container-image {
flex-shrink: 0;
flex-grow: 0;
width: 302px;
height: 302px;
background-color: whitesmoke;
border: 1px solid black;
border-radius: 2px;
position: relative;
overflow: hidden;
> div {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
}
.container-image-data {
margin-left: 10px;
flex-shrink: 1;
.list-entries-container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: start;
overflow-y: auto;
min-height: 250px;
.entry {
display: flex;
flex-direction: row;
.column {
margin-left: 2px;
}
cursor: pointer;
&.selected {
background-color: lightblue;
}
}
&.scrollbar {
.column-username {
width: calc(50% - 100px + 30px)
}
.column-unique-id {
width: calc(50% - 100px + 30px)
}
}
}
}
.container-info {
margin-left: 10px;
position: relative;
width: 50%;
.container-data {
width: 100%;
}
.container-preview {
display: flex;
flex-direction: row;
justify-content: stretch;
.container-image {
flex-shrink: 0;
flex-grow: 0;
width: 302px;
height: 302px;
background-color: whitesmoke;
border: 1px solid black;
border-radius: 2px;
position: relative;
overflow: hidden;
> div {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
}
.container-image-data {
margin-left: 10px;
flex-shrink: 1;
flex-grow: 1;
a {
text-align: center;
}
.form-group {
width: 100%;
margin-bottom: 0px;
}
}
}
.container-buttons {
width: 100%;
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.disabled-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
display: flex;
flex-direction: column;
justify-content: space-around;
a {
text-align: center;
}
.form-group {
width: 100%;
margin-bottom: 0px;
}
}
}
.container-buttons {
width: 100%;
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.disabled-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
display: flex;
flex-direction: column;
justify-content: space-around;
a {
text-align: center;
}
}
}
}
.modal-avatar-upload {
display: flex;
flex-direction: column;
justify-content: stretch;
.container-upload {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
.bmd-form-group {
padding-top: 0;
}
input[type="file"] {
display: none;
}
}
.container-preview {
flex-grow: 1;
flex-shrink: 1;
.modal-avatar-upload {
display: flex;
flex-direction: column;
justify-content: stretch;
.title {
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid gray;
}
.previews {
.container-upload {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
justify-content: space-between;
align-self: center;
.bmd-form-group {
padding-top: 0;
}
.preview {
flex-shrink: 1;
flex-grow: 1;
input[type="file"] {
display: none;
}
}
width: 11rem;
min-width: 11rem;
max-width: 11rem;
.container-preview {
flex-grow: 1;
flex-shrink: 1;
height: 13rem;
min-height: 13rem;
max-height: 13rem;
display: flex;
flex-direction: column;
justify-content: stretch;
text-align: center;
.title {
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid gray;
}
.previews {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-direction: row;
justify-content: space-evenly;
align-self: center;
.preview {
flex-shrink: 1;
flex-grow: 1;
width: 11rem;
min-width: 11rem;
max-width: 11rem;
height: 13rem;
min-height: 13rem;
max-height: 13rem;
text-align: center;
.container-avatar {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-direction: column;
justify-content: flex-end;
.avatar {
position: relative;
.container-avatar {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 1em;
width: 1em;
.avatar {
position: relative;
overflow: hidden;
border-radius: 50%;
height: 1em;
width: 1em;
> img {
position: absolute;
overflow: hidden;
border-radius: 50%;
top: 0;
left: 0;
> img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
}
}
> a {
margin-top: 1em;
}
&.preview-client-info {
.container-avatar {
font-size: 10rem;
> a {
margin-top: 1em;
}
}
&.preview-chat {
.container-avatar {
font-size: 2.5rem;
&.preview-client-info {
.container-avatar {
font-size: 10rem;
}
}
}
&.preview-chat-entry {
.container-avatar {
font-size: 2rem;
&.preview-chat {
.container-avatar {
font-size: 2.5rem;
}
}
&.preview-chat-entry {
.container-avatar {
font-size: 2rem;
}
}
}
}
@ -292,7 +294,9 @@
}
@media all and (max-width: 40rem) {
.modal-avatar-upload .container-preview .previews {
flex-direction: column;
:global {
.modal-avatar-upload .container-preview .previews {
flex-direction: column;
}
}
}

466
shared/css/static/modal-banclient.scss
View File

@ -1,293 +1,295 @@
@import "mixin";
@import "properties";
//TODO: Resize style!
.modal-body.modal-ban-client {
padding: 0!important;
:global {
//TODO: Resize style!
.modal-body.modal-ban-client {
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;
//min-width: 30em!important;
max-height: calc(100vh - 10em);
width: 40em;
//min-width: 30em!important;
max-height: calc(100vh - 10em);
width: 40em;
min-height: 20em;
min-height: 20em;
.container-tooltip {
flex-shrink: 0;
flex-grow: 0;
.container-tooltip {
flex-shrink: 0;
flex-grow: 0;
position: relative;
width: 1.6em;
position: relative;
width: 1.6em;
margin-left: .5em;
margin-right: .25em;
margin-left: .5em;
margin-right: .25em;
font-size: .9em;
font-size: .9em;
display: flex;
flex-direction: column;
justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
img {
height: 1em;
width: 1em;
img {
height: 1em;
width: 1em;
align-self: center;
font-size: 1.2em;
align-self: center;
font-size: 1.2em;
}
.tooltip {
display: none;
}
}
.tooltip {
display: none;
.container-info {
flex-shrink: 0;
flex-grow: 0;
padding: .5em;
display: flex;
flex-direction: row;
justify-content: stretch;
.container {
flex-grow: 1;
flex-shrink: 1;
min-width: 4em;
width: 10em;
display: flex;
flex-direction: column;
justify-content: stretch;
.title {
text-transform: uppercase;
color: #557edc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.value {
flex-grow: 1;
flex-shrink: 1;
min-height: 2em;
padding: .5em;
border-radius: 0.2em;
border: 1px solid #111112;
background-color: #121213;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include chat-scrollbar-vertical();
}
}
}
}
.container-info {
flex-shrink: 0;
flex-grow: 0;
.container-duration {
margin: 1em;
margin-top: 0em;
padding: .5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
display: flex;
flex-direction: row;
justify-content: stretch;
> a {
flex-grow: 0;
flex-shrink: 0;
}
.container {
flex-grow: 1;
.container-value {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
.input-boxed.value {
flex-grow: 1;
flex-shrink: 1;
min-width: 6em;
margin-right: 1em;
}
select {
width: 7em;
padding-left: .5em;
}
}
}
.container-reason {
margin: 1em;
margin-top: 0em;
position: relative;
flex-grow: 0;
flex-shrink: 1;
min-width: 4em;
width: 10em;
min-height: 5em;
max-height: 22.5em;
border-radius: .2em;
border: 1px solid #111112;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: stretch;
.title {
text-transform: uppercase;
color: #557edc;
.toolbar {
flex-shrink: 0;
flex-grow: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
height: 2.5em;
background-color: #17171a;
font-size: .8em;
padding: .25em;
.button {
cursor: pointer;
padding: .5em;
&:not(:first-child) {
margin-left: .25em;
}
border-radius: .2em;
border: 1px solid #111112;
background-color: #121213;
height: 2em;
width: 2em;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-self: center;
&.button-bold {
font-weight: bold;
}
&.button-italic {
font-style: italic;
}
&.button-underline {
text-decoration: underline;
}
&.button-color {
input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
}
&:hover {
background-color: #0f0f0f;
@include transition(background-color $button_hover_animation_time);
}
}
}
.value {
flex-grow: 1;
> .input-boxed {
flex-shrink: 1;
min-height: 2em;
flex-grow: 1;
padding: .5em;
min-height: 2.5em;
height: 5em;
max-height: 20em;
border-radius: 0.2em;
border: 1px solid #111112;
background-color: #121213;
border: none;
border-radius: 0;
border-top: 1px solid #111112;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;;
overflow-y: auto;
resize: vertical;
@include chat-scrollbar-vertical();
}
}
}
.container-duration {
margin: 1em;
margin-top: 0em;
display: flex;
flex-direction: column;
justify-content: flex-start;
> a {
flex-grow: 0;
flex-shrink: 0;
}
.container-value {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
.input-boxed.value {
flex-grow: 1;
flex-shrink: 1;
min-width: 6em;
margin-right: 1em;
}
select {
width: 7em;
padding-left: .5em;
&:focus-within {
background-color: #131b22;
//border-color: #284262;
}
}
}
.container-reason {
margin: 1em;
margin-top: 0em;
position: relative;
.container-criteria {
margin: 1em;
margin-top: 0em;
padding: .5em;
flex-grow: 0;
flex-shrink: 1;
min-height: 5em;
max-height: 22.5em;
border-radius: .2em;
border: 1px solid #111112;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: stretch;
.toolbar {
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
height: 2.5em;
background-color: #17171a;
font-size: .8em;
padding: .25em;
.button {
cursor: pointer;
padding: .5em;
&:not(:first-child) {
margin-left: .25em;
}
border-radius: .2em;
border: 1px solid #111112;
background-color: #121213;
height: 2em;
width: 2em;
border-radius: 0.2em;
border: 1px solid #111112;
background-color: #121213;
.criteria {
display: flex;
flex-direction: column;
justify-content: center;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-self: center;
a {
flex-shrink: 1;
min-width: 4em;
&.button-bold {
font-weight: bold;
text-transform: uppercase;
color: #557edc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.button-italic {
font-style: italic;
}
label {
&.button-underline {
text-decoration: underline;
}
&.button-color {
input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
}
&:hover {
background-color: #0f0f0f;
@include transition(background-color $button_hover_animation_time);
}
}
}
> .input-boxed {
flex-shrink: 1;
flex-grow: 1;
min-height: 2.5em;
height: 5em;
max-height: 20em;
border: none;
border-radius: 0;
border-top: 1px solid #111112;
overflow-x: hidden;;
overflow-y: auto;
resize: vertical;
@include chat-scrollbar-vertical();
}
&:focus-within {
background-color: #131b22;
//border-color: #284262;
}
}
.container-criteria {
margin: 1em;
margin-top: 0em;
padding: .5em;
border-radius: 0.2em;
border: 1px solid #111112;
background-color: #121213;
.criteria {
.container-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: flex-end;
a {
flex-shrink: 1;
min-width: 4em;
margin: 1em;
margin-top: 0em;
text-transform: uppercase;
color: #557edc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
button:not(:first-of-type) {
margin-left: 1em;
width: 6em;
}
label {
}
}
}
.container-buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 1em;
margin-top: 0em;
button:not(:first-of-type) {
margin-left: 1em;
width: 6em;
}
}
}

1420
shared/css/static/modal-banlist.scss
View File

File diff suppressed because it is too large Load Diff

240
shared/css/static/modal-channelinfo.scss
View File

@ -1,161 +1,163 @@
@import "mixin";
@import "properties";
.modal-body.modal-channel-info {
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
:global {
.modal-body.modal-channel-info {
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
min-width: 30em!important;
max-height: calc(100vh - 10em)!important;
padding: 0 !important;
min-width: 30em!important;
max-height: calc(100vh - 10em)!important;
padding: 0 !important;
.row {
flex-grow: 0;
flex-shrink: 0;
.row {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 1em;
padding-left: .5em;
padding-right: .5em;
padding-top: 1em;
padding-left: .5em;
padding-right: .5em;
.column {
.column {
flex-grow: 1;
flex-shrink: 1;
min-width: 6em;
width: 10em;
margin-right: .5em;
margin-left: .5em;
.title {
text-transform: uppercase;
color: #557edc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.audio-encrypted {
/* looks better */
.value {
height: 1.6em;
overflow: visible;
}
}
}
}
.container-description {
flex-grow: 1;
flex-shrink: 1;
min-width: 6em;
width: 10em;
min-height: 8em; /* description plus title */
margin-right: .5em;
margin-left: .5em;
display: flex;
flex-direction: column;
justify-content: stretch;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
.title {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
text-transform: uppercase;
color: #557edc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.button-copy {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: .1em; /* looks a bit better */
margin-left: .5em;
border-radius: .2em;
width: 1.3em;
height: 1.3em;
cursor: pointer;
div {
align-self: center;
}
&:hover {
background-color: #313135;
}
@include transition($button_hover_animation_time ease-in-out);
}
}
.value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
flex-grow: 1;
flex-shrink: 1;
border-radius: 0.2em;
border: 1px solid #212324;
background-color: #3a3b3f;
padding: .5em;
height: max-content;
min-height: 6em;
max-height: 40em;
overflow-y: auto;
overflow-x: hidden;
@include chat-scrollbar-vertical();
}
&.audio-encrypted {
/* looks better */
.value {
height: 1.6em;
overflow: visible;
}
}
}
}
.no-value {
flex-grow: 0;
flex-shrink: 0;
.container-description {
flex-grow: 1;
flex-shrink: 1;
font-size: 1.25em;
height: (6em / 1.25); /* min value height and a bit more */
min-height: 8em; /* description plus title */
display: flex;
flex-direction: column;
justify-content: stretch;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
.title {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 0;
text-transform: uppercase;
color: #557edc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.button-copy {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: .1em; /* looks a bit better */
margin-left: .5em;
border-radius: .2em;
width: 1.3em;
height: 1.3em;
cursor: pointer;
div {
align-self: center;
}
&:hover {
background-color: #313135;
}
@include transition($button_hover_animation_time ease-in-out);
text-align: center;
color: #666666;
}
}
.value {
display: block;
flex-grow: 1;
flex-shrink: 1;
border-radius: 0.2em;
border: 1px solid #212324;
background-color: #3a3b3f;
padding: .5em;
height: max-content;
min-height: 6em;
max-height: 40em;
overflow-y: auto;
overflow-x: hidden;
@include chat-scrollbar-vertical();
}
.no-value {
.container-buttons {
flex-grow: 0;
flex-shrink: 0;
font-size: 1.25em;
height: (6em / 1.25); /* min value height and a bit more */
display: flex;
flex-direction: column;
justify-content: center;
flex-direction: row;
justify-content: flex-end;
text-align: center;
color: #666666;
padding: 1em;
}
}
.container-buttons {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 1em;
}
}

972
shared/css/static/modal-clientinfo.scss
View File

File diff suppressed because it is too large Load Diff

353
shared/css/static/modal-connect.scss
View File

@ -1,353 +0,0 @@
@import "mixin";
.modal .modal-connect {
@include user-select(none);
font-size: 1rem;
max-width: 100000px; /* max 100000px width, else we shrink the modal */
padding: 0!important; /* override the default padding */
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
.container-connect-input {
flex-grow: 0;
flex-shrink: 0;
/* apply the default padding */
padding: .75em 24px;
border-left: 2px solid #0073d4;
overflow: hidden;
> .row {
display: flex;
flex-direction: row;
justify-content: stretch;
> *:not(:last-of-type) {
margin-right: 3em;
}
}
.container-address-password {
.container-address {
flex-grow: 1;
flex-shrink: 1;
}
.container-password {
flex-grow: 0;
flex-shrink: 4;
min-width: 21.5em;
}
}
.container-profile-manage {
flex-grow: 0;
flex-shrink: 4;
display: flex;
flex-direction: row;
justify-content: stretch;
.container-select-profile {
flex-grow: 1;
flex-shrink: 1;
min-width: 14em;
> .invalid-feedback {
width: max-content; /* allow overflow here */
}
}
.container-manage {
flex-grow: 0;
flex-shrink: 4;
margin-left: 15px;
}
.button-manage-profiles {
min-width: 7em;
margin-left: 0.5em;
}
}
.container-nickname {
flex-grow: 1;
flex-shrink: 1;
}
.container-buttons {
padding-top: 1em;
display: flex;
flex-direction: row;
justify-content: space-between;
.container-buttons-connect {
display: flex;
flex-direction: row;
flex-shrink: 1;
min-width: 6em;
}
.button-right {
min-width: 7em;
margin-left: 0.5em;
}
.button-left {
min-width: 14em;
}
}
.arrow {
border-color: #7a7a7a;
margin-left: .5em;
}
}
.container-last-servers {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
min-width: 0;
border: none;
border-left: 2px solid #7a7a7a;
@include transition(max-height .5s ease-in-out, opacity .5s ease-in-out, padding .5s ease-in-out);
&.shown {
/* apply the default padding */
padding: 0 24px 24px;
max-height: 100%;
opacity: 1;
@include transition(max-height .5s ease-in-out, opacity .5s ease-in-out, padding .5s ease-in-out)
}
hr {
height: 0;
width: calc(100% + 46px);
min-width: 0;
margin: 0 0 0 -23px;
padding: 0;
border: none;
border-top: 1px solid #090909;
margin-bottom: .75em;
}
color: #7a7a7a;
/* general table class */
.table {
width: 100em;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
.head {
display: flex;
flex-direction: row;
justify-content: stretch;
flex-grow: 0;
flex-shrink: 0;
border: none;
border-bottom: 1px solid #161618;
}
.body {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
overflow: auto;
.row {
cursor: pointer;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
&:hover {
background-color: #202022;
}
&.selected {
background-color: #131315;
}
}
.body-empty {
height: 3em;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 1.25em;
color: rgba(121, 121, 121, 0.5);
}
}
.column {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
padding-right: .25em;
padding-left: .25em;
display: flex;
flex-direction: row;
justify-content: flex-start;
&:not(:last-of-type) {
border-right: 1px solid #161618;
}
> a {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
/* connect table */
.table {
margin-left: -1.5em; /* the delete row */
.head {
margin-left: 1.5em; /* the delete row */
.column.delete {
display: none;
}
}
.column {
align-self: center;
.country, .icon-container {
align-self: center;
margin-right: 0.25em;
}
@mixin fixed-column($name, $width) {
&.#{$name} {
flex-grow: 0;
flex-shrink: 0;
width: $width;
}
}
@include fixed-column(delete, 1.5em);
@include fixed-column(password, 5em);
@include fixed-column(country-name, 7em);
@include fixed-column(clients, 4em);
@include fixed-column(connections, 6.5em);
&.delete {
opacity: 0;
border-right: none;
border-bottom: none;
text-align: center;
@include transition(opacity .25 ease-in-out);
&:hover {
opacity: 1;
@include transition(opacity .25 ease-in-out);
}
}
&.address {
flex-grow: 1;
flex-shrink: 1;
width: 40%;
}
&.name {
flex-grow: 1;
flex-shrink: 1;
width: 60%;
}
}
}
}
}
@media all and (max-width: 55rem) {
.modal .modal-connect {
min-width: calc(21.25em + 24px * 2)!important;
width: 1000em; /* allocate space */
.container-address-password {
.container-password {
min-width: unset!important;
margin-left: 1em!important;
}
}
.container-buttons {
justify-content: flex-end!important;
.button-toggle-last-servers {
display: none;
}
}
.container-profile-name {
flex-direction: column!important;
}
.container-connect-input {
> .row {
> div {
margin-right: 0!important;
}
}
}
.container-last-servers {
display: none;
}
}
}

160
shared/css/static/modal-group-assignment.scss
View File

@ -1,110 +1,112 @@
@import "mixin";
@import "properties";
.modal-server-group-assignments {
@include user-select(none);
:global {
.modal-server-group-assignments {
@include user-select(none);
min-width: 25em!important;
max-height: calc(100vh - 10rem)!important;
min-height: 10em!important;
min-width: 25em!important;
max-height: calc(100vh - 10rem)!important;
min-height: 10em!important;
width: 30em!important;
width: 30em!important;
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
background-color: #2f2f35;
padding: .5em!important;
background-color: #2f2f35;
padding: .5em!important;
.group-assignment-list {
flex-grow: 1;
flex-shrink: 1;
min-height: 6em;
display: flex;
flex-direction: column;
justify-content: stretch;
color: #999999;
a {
flex-shrink: 0;
flex-grow: 0;
.htmltag-client {
display: inline;
color: #999999;
}
}
.group-list {
flex-shrink: 1;
.group-assignment-list {
flex-grow: 1;
min-height: 4em;
flex-shrink: 1;
min-height: 6em;
padding: 3px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: stretch;
border: 1px #161616 solid;
border-radius: $border_radius_middle;
background-color: #28292b;
color: #999999;
@include chat-scrollbar-vertical();
.group-entry {
a {
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
.htmltag-client {
display: inline;
color: #999999;
}
}
height: 1.75em;
.group-list {
flex-shrink: 1;
flex-grow: 1;
min-height: 4em;
> * {
padding: 3px;
overflow-y: auto;
border: 1px #161616 solid;
border-radius: $border_radius_middle;
background-color: #28292b;
@include chat-scrollbar-vertical();
.group-entry {
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
height: 1.75em;
> * {
flex-shrink: 0;
flex-grow: 0;
align-self: center;
}
a {
flex-shrink: 1;
flex-grow: 1;
min-width: 6em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
label {
margin-right: .25em;
}
}
.icon-container {
align-self: center;
margin-right: 4px;
margin-left: 2px;
margin-top: -2px;
}
a {
flex-shrink: 1;
flex-grow: 1;
min-width: 6em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
}
label {
margin-right: .25em;
}
}
.icon-container {
align-self: center;
margin-right: 4px;
margin-left: 2px;
margin-top: -2px;
}
a {
align-self: center;
}
}
}
.container-buttons {
flex-grow: 0;
flex-shrink: 0;
.container-buttons {
flex-grow: 0;
flex-shrink: 0;
padding-top: 1em;
padding-top: 1em;
display: flex;
flex-direction: row;
justify-content: space-between;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
}

904
shared/css/static/modal-icons.scss
View File

@ -1,508 +1,512 @@
@import "properties";
@import "mixin";
.modal-icon-select {
@include user-select(none);
:global {
.modal-icon-select {
@include user-select(none);
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
width: 50em!important;
width: 50em!important;
/*
.right, .left {
.header {
text-transform: uppercase;
color: #557edc;
/*
.right, .left {
.header {
text-transform: uppercase;
color: #557edc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
*/
.container-icons {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: row;
justify-content: stretch;
> div {
width: 50%;
&:not(:first-of-type) {
margin-left: 10px;
}
}
.content, .container-icons-list {
.container-icons {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
}
.container-icons-list {
position: relative;
flex-direction: row;
justify-content: stretch;
> div {
border-radius: 3px;
width: 50%;
&:not(:first-of-type) {
margin-left: 10px;
}
}
.container-icons-remote, .container-icons-local {
width: 100%;
min-height: 300px;
.content, .container-icons-list {
flex-grow: 1;
flex-shrink: 1;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.container-icons-list {
position: relative;
> div {
border-radius: 3px;
}
.container-icons-remote, .container-icons-local {
width: 100%;
min-height: 300px;
overflow-x: hidden;
overflow-y: auto;
background-color: $color_list_background;
border: 1px $color_list_border solid;
border-radius: $border_radius_large;
padding: .5em;
flex-direction: row;
display: flex;
flex-wrap: wrap;
align-content: baseline;
&.container-icons-local {
font-size: 16px;
}
.icon-container, .icon {
margin-left: 1px;
margin-right: 1px;
}
&.icon-select {
.icon-container, .icon {
cursor: pointer;
&:hover {
border-radius: .1em;
background-color: rgba(0, 0, 0, 0.07);
border: 1px solid black;
}
&.selected {
border-radius: .1em;
background-color: rgba(0, 51, 0, 0.07);
border: 1px solid red;
}
&:hover, &.selected {
width: 18px;
height: 18px;
margin: -1px 0px;
}
}
}
}
.container-loading, .container-no-permissions, .container-error {
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 1.1em;
color: hsla(0, 0%, 40%, 1);
position: absolute;
background-color: rgba(0, 0, 0, 0.27);
cursor: not-allowed;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
> a {
padding-bottom: 30px;
}
}
.container-loading {
z-index: 40;
}
.container-error {
z-index: 30;
}
.container-no-permissions {
z-index: 20;
}
}
}
.container-buttons {
margin-top: 20px;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
.spacer {
min-width: 0;
flex-grow: 1;
flex-shrink: 1;
}
button {
flex-grow: 0;
flex-shrink: 1;
width: 8em;
min-width: 4em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 1em;
}
.button-select {
margin-left: 10px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
a, div {
align-self: center;
}
> div {
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: .5rem;
> div {
display: flex;
}
}
}
.button-select-no-icon {
margin-left: 10px;
}
}
}
.modal-icon-upload {
@include user-select(none);
width: 50em;
min-width: 300px;
padding: 0!important;
display: flex;
flex-direction: column;
.container-select {
padding: 1em;
min-height: 130px;
display: flex;
flex-direction: row;
justify-content: stretch;
.container-icons {
flex-grow: 1;
flex-shrink: 1;
width: min-content;
min-width: 150px;
min-height: 130px;
overflow-y: auto;
margin-right: 1em;
background-color: $color_list_background;
border: 1px $color_list_border solid;
border-radius: $border_radius_large;
padding: .5em;
display: block;
flex-direction: row;
display: flex;
flex-wrap: wrap;
align-content: baseline;
.icon-container {
cursor: pointer;
&.container-icons-local {
font-size: 16px;
}
&:hover {
border-radius: .1em;
.icon-container, .icon {
margin-left: 1px;
margin-right: 1px;
}
&.icon-select {
.icon-container, .icon {
cursor: pointer;
&:hover {
border-radius: .1em;
background-color: rgba(0, 0, 0, 0.07);
border: 1px solid black;
}
&.selected {
border-radius: .1em;
background-color: rgba(0, 51, 0, 0.07);
border: 1px solid red;
}
&:hover, &.selected {
width: 18px;
height: 18px;
margin: -1px 0px;
}
background-color: rgba(0, 0, 0, 0.07);
border: 1px solid black;
}
}
}
.container-loading, .container-no-permissions, .container-error {
top: 0;
bottom: 0;
left: 0;
right: 0;
&.selected {
border-radius: .1em;
font-size: 1.1em;
color: hsla(0, 0%, 40%, 1);
background-color: rgba(0, 51, 0, 0.07);
border: 1px solid red;
}
position: absolute;
background-color: rgba(0, 0, 0, 0.27);
&:hover, &.selected {
width: 18px;
height: 18px;
cursor: not-allowed;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
> a {
padding-bottom: 30px;
}
}
.container-loading {
z-index: 40;
}
.container-error {
z-index: 30;
}
.container-no-permissions {
z-index: 20;
}
}
}
.container-buttons {
margin-top: 20px;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
.spacer {
min-width: 0;
flex-grow: 1;
flex-shrink: 1;
}
button {
flex-grow: 0;
flex-shrink: 1;
width: 8em;
min-width: 4em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 1em;
}
.button-select {
margin-left: 10px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
a, div {
align-self: center;
}
> div {
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: .5rem;
> div {
display: flex;
}
}
}
.button-select-no-icon {
margin-left: 10px;
}
}
}
.modal-icon-upload {
@include user-select(none);
width: 50em;
min-width: 300px;
padding: 0!important;
display: flex;
flex-direction: column;
.container-select {
padding: 1em;
min-height: 130px;
display: flex;
flex-direction: row;
justify-content: stretch;
.container-icons {
flex-grow: 1;
flex-shrink: 1;
width: min-content;
min-width: 150px;
min-height: 130px;
overflow-y: auto;
margin-right: 1em;
background-color: $color_list_background;
border: 1px $color_list_border solid;
border-radius: $border_radius_large;
padding: .5em;
display: block;
.icon-container {
cursor: pointer;
&:hover {
border-radius: .1em;
background-color: rgba(0, 0, 0, 0.07);
border: 1px solid black;
}
&.selected {
border-radius: .1em;
background-color: rgba(0, 51, 0, 0.07);
border: 1px solid red;
}
&:hover, &.selected {
width: 18px;
height: 18px;
margin: -1px 0px;
}
> img {
height: 16px;
width: 16px;
}
}
}
.container-buttons {
flex-grow: 1;
flex-shrink: 2;
min-width: 50px;
max-width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
.buttons-manage {
display: flex;
flex-direction: column;
justify-content: flex-start;
> button:not(:first-of-type) {
margin-top: .5em;
}
}
}
}
.container-upload {
-webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px -5px 2px 0px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
padding: .5em 1em 1em;
.container-error, .container-success {
width: 100%;
min-height: 60px;
border: 2px solid;
border-radius: $border_radius_middle;
&.container-error {
border-color: rgba(128, 0, 0, 0.5);
background-color: rgba(128, 0, 0, 0.25);
}
&.container-success {
margin-top: .5em;
border-color: rgba(50, 143, 51, 0.25);
background-color: rgba(50, 143, 51, 0.13);
}
padding: .5em;
display: flex;
flex-direction: row;
justify-content: space-between;
> * {
align-self: center;
display: inline-block;
}
button {
width: 6em;
}
&.hidden {
opacity: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
}
@include transition(.25s ease-in-out);
}
.container-info {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container-process {
margin-top: .5em;
width: 100%;
min-height: 100px;
overflow-y: auto;
background-color: $color_list_background;
border: 1px $color_list_border solid;
border-radius: $border_radius_large;
.upload-entry {
display: flex;
flex-direction: row;
justify-content: stretch;
.container-icon {
height: 16px;
width: 16px;
flex-grow: 0;
flex-shrink: 0;
margin: 1px 1px 1px 4px;
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: -1px 0px;
}
> img {
height: 16px;
width: 16px;
}
}
.progress {
position: relative;
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
min-width: 2em;
margin: 2px 5px 2px 3px;
height: 16px;
overflow: hidden;
font-size: .75rem;
background-color: #222222;
border: 1px solid hsla(0, 0%, 10%, 1);
border-radius: .25rem;
.progress-bar {
height: 100%;
&.bg-danger {
background-color: rgba(128, 0, 0, 0.5);
}
&.bg-success {
background-color: rgba(50, 143, 51, 0.5);
}
@include transition(width 1s ease-in-out, background-color $button_hover_animation_time ease-in-out);
}
.progress-message {
position: absolute;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
min-width: 1em;
line-height: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
input[type="file"] {
display: none;
}
}
@media screen and (max-width: 650px) {
.modal-icon-upload {
.container-select {
flex-direction: column;
.container-icons {
width: 100%;
margin-right: 0;
}
.container-buttons {
max-width: unset;
margin-top: 5px;
flex-grow: 1;
flex-shrink: 2;
> button {
width: 100%;
}
min-width: 50px;
max-width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
.buttons-manage {
display: flex;
flex-direction: row;
justify-content: stretch;
flex-direction: column;
justify-content: flex-start;
> button {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
> button:not(:first-of-type) {
margin-top: .5em;
}
}
}
}
.container-upload {
-webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px -5px 2px 0px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: .5em 1em 1em;
.container-error, .container-success {
width: 100%;
min-height: 60px;
border: 2px solid;
border-radius: $border_radius_middle;
&.container-error {
border-color: rgba(128, 0, 0, 0.5);
background-color: rgba(128, 0, 0, 0.25);
}
&.container-success {
margin-top: .5em;
border-color: rgba(50, 143, 51, 0.25);
background-color: rgba(50, 143, 51, 0.13);
}
padding: .5em;
display: flex;
flex-direction: row;
justify-content: space-between;
> * {
align-self: center;
display: inline-block;
}
button {
width: 6em;
}
&.hidden {
opacity: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
}
@include transition(.25s ease-in-out);
}
.container-info {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container-process {
margin-top: .5em;
width: 100%;
min-height: 100px;
overflow-y: auto;
background-color: $color_list_background;
border: 1px $color_list_border solid;
border-radius: $border_radius_large;
.upload-entry {
display: flex;
flex-direction: row;
justify-content: stretch;
.container-icon {
height: 16px;
width: 16px;
flex-grow: 0;
flex-shrink: 0;
margin: 1px 1px 1px 4px;
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
> img {
height: 16px;
width: 16px;
}
}
.progress {
position: relative;
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
min-width: 2em;
margin: 2px 5px 2px 3px;
height: 16px;
overflow: hidden;
font-size: .75rem;
background-color: #222222;
border: 1px solid hsla(0, 0%, 10%, 1);
border-radius: .25rem;
.progress-bar {
height: 100%;
&.bg-danger {
background-color: rgba(128, 0, 0, 0.5);
}
&.bg-success {
background-color: rgba(50, 143, 51, 0.5);
}
@include transition(width 1s ease-in-out, background-color $button_hover_animation_time ease-in-out);
}
.progress-message {
position: absolute;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
min-width: 1em;
line-height: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
input[type="file"] {
display: none;
}
}
}
@media screen and (max-width: 650px) {
:global {
.modal-icon-upload {
.container-select {
flex-direction: column;
.container-icons {
width: 100%;
margin-right: 0;
}
.container-buttons {
max-width: unset;
margin-top: 5px;
> button {
width: 100%;
}
.buttons-manage {
display: flex;
flex-direction: row;
justify-content: stretch;
> button {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
}
}
}
.container-upload {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
}
}

286
shared/css/static/modal-identity.scss
View File

@ -1,60 +1,85 @@
@import "mixin";
.modal-body.modal-identity-improve {
padding: 0!important;
:global {
.modal-body.modal-identity-improve {
padding: 0!important;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
.container-tooltip {
flex-grow: 0!important;
flex-shrink: 0!important;
min-width: unset!important;
.container-tooltip {
flex-grow: 0!important;
flex-shrink: 0!important;
min-width: unset!important;
position: relative;
width: .8em;
margin-right: .5em;
font-size: .9em;
position: relative;
width: .8em;
margin-right: .5em;
font-size: .9em;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: middle;
margin-bottom: .1em;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: middle;
margin-bottom: .1em;
img {
height: 1em;
width: 1em;
img {
height: 1em;
width: 1em;
align-self: center;
font-size: 1.2em;
align-self: center;
font-size: 1.2em;
}
.tooltip {
display: none;
}
}
.tooltip {
display: none;
}
}
.options, .status {
flex-grow: 0;
flex-shrink: 0;
.options, .status {
flex-grow: 0;
flex-shrink: 0;
padding: 1em;
padding: 1em;
.title {
color: #387fb5;
}
.title {
color: #387fb5;
.row {
display: flex;
flex-direction: row;
justify-content: stretch;
div {
flex-grow: 1;
flex-shrink: 1;
min-width: 4em;
&:not(:first-of-type) {
margin-left: 1em;
}
}
}
}
.row {
.status {
border-top: 3px solid #20262d;
}
.buttons {
flex-grow: 0;
flex-shrink: 0;
margin: 0 1em 1em;
display: flex;
flex-direction: row;
justify-content: stretch;
justify-content: flex-end;
div {
flex-grow: 1;
flex-shrink: 1;
min-width: 4em;
button {
min-width: 8em;
&:not(:first-of-type) {
margin-left: 1em;
@ -63,126 +88,103 @@
}
}
.status {
border-top: 3px solid #20262d;
}
.buttons {
flex-grow: 0;
flex-shrink: 0;
margin: 0 1em 1em;
.modal-body.modal-identity-import {
padding: 0!important;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-direction: column;
justify-content: flex-start;
button {
min-width: 8em;
@include user-select(none);
&:not(:first-of-type) {
margin-left: 1em;
.container-status {
display: flex;
flex-direction: row;
justify-content: center;
margin: 1em 1em -1em;
height: 1.6em;
overflow: hidden;
color: #389738;
&.error {
color: #973838;
}
&.loading {
color: #96903a;
}
&.hidden {
height: 0;
}
a {
align-self: center;
}
@include transition(.2s ease-in-out);
}
.container-text, .container-file {
display: flex;
flex-direction: row;
justify-content: stretch;
> label {
flex-shrink: 0;
flex-grow: 0;
width: 10em;
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: .25em;
align-self: center;
margin-right: 1em;
.radio-button {
align-self: center;
margin-right: .5em;
}
}
> * {
align-self: center;
}
.form-group {
margin-bottom: 1.75em;
width: 100%;
}
button {
min-width: 8em;
margin-right: 1em;
}
}
}
}
.modal-body.modal-identity-import {
padding: 0!important;
display: flex;
flex-direction: column;
justify-content: flex-start;
@include user-select(none);
.container-status {
display: flex;
flex-direction: row;
justify-content: center;
margin: 1em 1em -1em;
height: 1.6em;
overflow: hidden;
color: #389738;
&.error {
color: #973838;
}
&.loading {
color: #96903a;
}
&.hidden {
height: 0;
}
a {
align-self: center;
}
@include transition(.2s ease-in-out);
}
.container-text, .container-file {
display: flex;
flex-direction: row;
justify-content: stretch;
> label {
.footer {
flex-shrink: 0;
flex-grow: 0;
width: 10em;
padding: 1em;
display: flex;
flex-direction: row;
justify-content: flex-start;
justify-content: flex-end;
padding-left: .25em;
align-self: center;
margin-right: 1em;
.radio-button {
align-self: center;
margin-right: .5em;
button {
min-width: 8em;
}
}
> * {
align-self: center;
.file-selector {
display: none;
}
.form-group {
margin-bottom: 1.75em;
width: 100%;
}
button {
min-width: 8em;
margin-right: 1em;
}
}
.footer {
flex-shrink: 0;
flex-grow: 0;
padding: 1em;
display: flex;
flex-direction: row;
justify-content: flex-end;
button {
min-width: 8em;
}
}
.file-selector {
display: none;
}
}

112
shared/css/static/modal-invite.scss
View File

@ -1,73 +1,75 @@
@import "mixin";
@import "properties";
.modal-invite {
padding: .5em!important;
@include user-select(none);
:global {
.modal-invite {
padding: .5em!important;
@include user-select(none);
.general-properties {
flex: 0;
display: flex;
flex-direction: column;
justify-content: stretch;
.form-group {
.general-properties {
flex: 0;
display: flex;
flex-direction: column;
justify-content: stretch;
.form-group {
flex: 0;
}
.container-settings {
flex: 0;
margin-bottom: .5em;
display: flex;
flex-direction: row;
justify-content: space-between;
label {
display: flex;
flex-direction: row;
justify-content: flex-start;
> * {
align-self: center;
}
a {
margin-left: .5em;
}
}
}
}
.container-settings {
flex: 0;
.text-output {
background-color: $color_list_background;
border: 1px $color_list_border solid;
margin-bottom: .5em;
border-radius: $border_radius_large;
padding: .5em;
min-height: 5em;
width: 100%;
resize: none;
color: #999999;
@include user-select(text);
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
label {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 5px;
> * {
align-self: center;
}
a {
margin-left: .5em;
}
.icon {
vertical-align: middle;
margin-right: 5px;
}
}
}
.text-output {
background-color: $color_list_background;
border: 1px $color_list_border solid;
border-radius: $border_radius_large;
padding: .5em;
min-height: 5em;
width: 100%;
resize: none;
color: #999999;
@include user-select(text);
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 5px;
.icon {
vertical-align: middle;
margin-right: 5px;
}
}
}

80
shared/css/static/modal-keyselect.scss
View File

@ -1,50 +1,52 @@
.modal-body.modal-keyselect {
width: max-content!important;
.body {
display: flex;
flex-direction: column;
justify-content: flex-start;
.container-select {
margin-top: .5em;
:global {
.modal-body.modal-keyselect {
width: max-content!important;
.body {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: flex-start;
a {
align-self: center;
margin-right: .5em;
}
.container-key {
background-color: #272626;
border-radius: 0.15em;
-webkit-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
min-width: 12em;
height: 2em;
padding: 0 .5em;
.container-select {
margin-top: .5em;
display: flex;
flex-direction: row;
justify-content: center;
justify-content: flex-start;
a {
align-self: center;
margin-right: .5em;
}
.container-key {
background-color: #272626;
border-radius: 0.15em;
-webkit-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
min-width: 12em;
height: 2em;
padding: 0 .5em;
display: flex;
flex-direction: row;
justify-content: center;
}
}
}
.container-buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 1em;
button {
margin-left: 1em;
}
}
}
.container-buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 1em;
button {
margin-left: 1em;
}
}
}

140
shared/css/static/modal-latency.scss
View File

@ -1,84 +1,86 @@
@import "mixin";
@import "properties";
.modal-body.modal-latency {
@include user-select(none);
@include transform(all $button_hover_animation_time ease-in-out);
:global {
.modal-body.modal-latency {
@include user-select(none);
@include transform(all $button_hover_animation_time ease-in-out);
.info {
display: flex;
flex-direction: row;
justify-content: stretch;
.htmltag-client {
color: #999!important;
margin-left: .25em;
}
div {
.info {
display: flex;
flex-direction: row;
justify-content: stretch;
}
.value {
margin-left: .25em;
}
}
.htmltag-client {
color: #999!important;
margin-left: .25em;
}
.container-min, .container-max {
display: flex;
flex-direction: row;
justify-content: stretch;
height: 2em;
.container-value {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-shrink: 0;
flex-grow: 0;
margin-right: 1em;
width: 9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
div {
display: flex;
flex-direction: row;
justify-content: stretch;
}
.value {
margin-left: .25em;
}
}
.container-min, .container-max {
display: flex;
flex-direction: row;
justify-content: stretch;
height: 2em;
.container-value {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-shrink: 0;
flex-grow: 0;
margin-right: 1em;
width: 9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
.value {
}
}
}
.container-max {
padding-top: 1em;
}
.container-slider {
align-self: center;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: stretch;
margin-top: 2em;
.spacer {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
button:not(:last-of-type) {
margin-right: 1em;
}
}
}
.container-max {
padding-top: 1em;
}
.container-slider {
align-self: center;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: stretch;
margin-top: 2em;
.spacer {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
button:not(:last-of-type) {
margin-right: 1em;
}
}
}

1110
shared/css/static/modal-musicmanage.scss
View File

File diff suppressed because it is too large Load Diff

268
shared/css/static/modal-newcomer.scss
View File

@ -6,154 +6,156 @@ html:root {
--modal-newcomer-divider: #313135;
}
.modal-body.modal-newcomer {
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
:global {
.modal-body.modal-newcomer {
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
padding: 0!important;
padding: 0!important;
min-width: 20em;
width: 60em;
min-width: 20em;
width: 60em;
@include user-select(none);
@include user-select(none);
.container-header {
flex-shrink: 0;
flex-grow: 0;
.container-header {
flex-shrink: 0;
flex-grow: 0;
color: var(--modal-newcommer-header-color);
padding: .5em .5em .25em;
color: var(--modal-newcommer-header-color);
padding: .5em .5em .25em;
position: relative;
font-size: 1.5em;
text-transform: uppercase;
.step {
&.hidden {
display: none;
}
&::after {
content: ' ';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.25px;
//background: linear-gradient(90deg, rgba(49,49,53,1) 80%, rgba(49,49,53,0) 100%);
background: var(--modal-newcomer-divider);
}
&.hidden {
&::after {
content: unset;
}
}
}
}
.container-body {
//flex-grow: 1;
//flex-shrink: 1;
flex-shrink: 1;
min-height: 18em;
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
@include chat-scrollbar-horizontal();
@include chat-scrollbar-vertical();
background-color: #19191b;
.body {
display: flex;
flex-direction: column;
justify-content: stretch;
padding: .5em .5em .5em;
&.height-transition {
@include transition(max-height .25s ease-in-out, min-height .25s ease-in-out);
overflow: hidden;
}
position: relative;
font-size: 1.5em;
text-transform: uppercase;
.step {
&.step-welcome, &.step-finish {
display: flex;
flex-direction: row;
justify-content: center;
.text {
align-self: center;
h1 {
line-height: 1.1em;
margin-bottom: .8em;
margin-top: 0;
}
flex-shrink: 0;
}
&.step-welcome h1 {
margin-bottom: 0;
}
.logo {
max-height: 15em;
max-width: 15em;
align-self: center;
margin-right: 1em;
img {
max-height: 100%;
max-width: 100%;
}
}
}
/* for step-identity or step-microphone */
.container-settings-identity-profile {
padding: .5em;
.left .body {
background-color: #202122;
.overlay {
background-color: #202122;
}
.profile.selected {
background-color: #141415;
}
}
}
&.step-identity { }
&.hidden {
display: none;
}
&::after {
content: ' ';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.25px;
//background: linear-gradient(90deg, rgba(49,49,53,1) 80%, rgba(49,49,53,0) 100%);
background: var(--modal-newcomer-divider);
}
&.hidden {
&::after {
content: unset;
}
}
}
}
}
.buttons {
flex-shrink: 0;
flex-grow: 0;
.container-body {
//flex-grow: 1;
//flex-shrink: 1;
flex-shrink: 1;
min-height: 18em;
display: flex;
flex-direction: row;
justify-content: space-between;
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1.25px solid var(--modal-newcomer-divider);
padding: .5em;
overflow: auto;
@include chat-scrollbar-horizontal();
@include chat-scrollbar-vertical();
background-color: #19191b;
.body {
display: flex;
flex-direction: column;
justify-content: stretch;
padding: .5em .5em .5em;
&.height-transition {
@include transition(max-height .25s ease-in-out, min-height .25s ease-in-out);
overflow: hidden;
}
.step {
&.step-welcome, &.step-finish {
display: flex;
flex-direction: row;
justify-content: center;
.text {
align-self: center;
h1 {
line-height: 1.1em;
margin-bottom: .8em;
margin-top: 0;
}
flex-shrink: 0;
}
&.step-welcome h1 {
margin-bottom: 0;
}
.logo {
max-height: 15em;
max-width: 15em;
align-self: center;
margin-right: 1em;
img {
max-height: 100%;
max-width: 100%;
}
}
}
/* for step-identity or step-microphone */
.container-settings-identity-profile {
padding: .5em;
.left .body {
background-color: #202122;
.overlay {
background-color: #202122;
}
.profile.selected {
background-color: #141415;
}
}
}
&.step-identity { }
&.hidden {
display: none;
}
}
}
}
.buttons {
flex-shrink: 0;
flex-grow: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
border-top: 1.25px solid var(--modal-newcomer-divider);
padding: .5em;
}
}
}

118
shared/css/static/modal-poke.scss
View File

@ -3,86 +3,88 @@ html:root {
--modal-poke-text: #004d00;
}
.container-poke {
display: flex!important;;
flex-direction: column!important;;
:global {
.container-poke {
display: flex!important;;
flex-direction: column!important;;
.container-servers {
display: flex;
flex-direction: column;
justify-content: stretch;
.server {
.container-servers {
display: flex;
flex-direction: column;
justify-content: stretch;
.server-name {
margin-top: 5px;
flex-grow: 0;
flex-shrink: 0;
font-weight: bold;
text-decoration: underline;
}
.poke-list {
.server {
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: stretch;
overflow-y: auto;
overflow-x: auto;
.server-name {
margin-top: 5px;
.entry {
flex-grow: 0;
flex-shrink: 0;
font-weight: bold;
text-decoration: underline;
}
.poke-list {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: flex-start;
flex-shrink: 0;
flex-grow: 0;
overflow-y: auto;
overflow-x: auto;
> * {
white-space: nowrap;
}
.entry {
display: flex;
flex-direction: row;
justify-content: flex-start;
.date, .user, .text {
margin-right: 5px;
}
flex-shrink: 0;
flex-grow: 0;
.date {
color: var(--modal-poke-date);
}
.text {
color: var(--modal-poke-text);
> * {
white-space: nowrap;
}
.date, .user, .text {
margin-right: 5px;
}
.date {
color: var(--modal-poke-date);
}
.text {
color: var(--modal-poke-text);
}
}
}
}
}
}
.buttons {
display: flex;
flex-direction: row;
justify-content: stretch;
margin-top: 5px;
flex-shrink: 0;
flex-grow: 0;
.spacer {
flex-grow: 1;
flex-shrink: 1;
}
.button-close {
flex-grow: 0;
flex-shrink: 0;
.buttons {
display: flex;
flex-direction: row;
justify-content: stretch;
margin-top: 5px;
width: 150px;
float: right;
flex-shrink: 0;
flex-grow: 0;
.spacer {
flex-grow: 1;
flex-shrink: 1;
}
.button-close {
flex-grow: 0;
flex-shrink: 0;
margin-top: 5px;
width: 150px;
float: right;
}
}
}
}

588
shared/css/static/modal-query.scss
View File

@ -1,375 +1,377 @@
@import "properties";
@import "mixin";
.query-create {
display: flex!important;
flex-direction: column!important;
:global {
.query-create {
display: flex!important;
flex-direction: column!important;
.row-name {
width: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
input {
flex-grow: 1;
flex-shrink: 1;
margin-left: 5px;
}
}
.buttons {
margin-top: 5px;
text-align: right;
}
}
.query-created {
display: flex!important;
flex-direction: column!important;
.buttons {
text-align: right;
}
.form-row {
margin-right: 0!important;
margin-left: 0!important;
display: flex;
flex-direction: row;
justify-content: stretch;
.icon_x32 {
align-self: center;
margin-right: 5px;
cursor: pointer;
}
.form-group {
flex-grow: 1;
}
}
}
html:root {
--modal-query-title: #e0e0e0;
--modal-query-list: #28292b;
--modal-query-list-border: #1f2122;
--modal-query-empty: #4d4d4d;
--modal-query-error: #732626;
--modal-query-entry-hover: #2c2d2f;
--modal-query-entry-selected: #1a1a1b;
--modal-query-key: #557edc;
--modal-query-copy-hover: #28292b;
}
.modal-body.modal-query-manage {
display: flex!important;
flex-direction: row!important;
justify-content: stretch!important;
padding: 1em!important;
min-width: 25em!important; /* 23em to be exact */
min-height: 20em!important;
width: 60em; /* recommend width */
height: 50em;
@include user-select(none);
.container {
flex-grow: 1;
flex-shrink: 1;
min-width: 20em;
min-height: 10em;
display: flex;
flex-direction: row;
justify-content: stretch;
}
.left, .right {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
> .title {
flex-grow: 0;
flex-shrink: 0;
margin-bottom: .5em;
.row-name {
width: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
a {
font-weight: bold;
color: var(--modal-query-title);
input {
flex-grow: 1;
flex-shrink: 1;
margin-left: 5px;
}
}
font-size: 1.05em;
min-width: 5em;
.buttons {
margin-top: 5px;
text-align: right;
}
}
align-self: flex-end;
line-height: normal;
.query-created {
display: flex!important;
flex-direction: column!important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.buttons {
text-align: right;
}
.form-row {
margin-right: 0!important;
margin-left: 0!important;
display: flex;
flex-direction: row;
justify-content: stretch;
.icon_x32 {
align-self: center;
margin-right: 5px;
cursor: pointer;
}
button {
flex-grow: 0;
flex-shrink: 1;
height: 2em;
font-size: .9em;
width: 10em;
min-width: 5em;
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
.form-group {
flex-grow: 1;
}
}
}
.left {
margin-right: .4em;
min-width: 10em;
html:root {
--modal-query-title: #e0e0e0;
.container-list {
--modal-query-list: #28292b;
--modal-query-list-border: #1f2122;
--modal-query-empty: #4d4d4d;
--modal-query-error: #732626;
--modal-query-entry-hover: #2c2d2f;
--modal-query-entry-selected: #1a1a1b;
--modal-query-key: #557edc;
--modal-query-copy-hover: #28292b;
}
.modal-body.modal-query-manage {
display: flex!important;
flex-direction: row!important;
justify-content: stretch!important;
padding: 1em!important;
min-width: 25em!important; /* 23em to be exact */
min-height: 20em!important;
width: 60em; /* recommend width */
height: 50em;
@include user-select(none);
.container {
flex-grow: 1;
flex-shrink: 1;
min-width: 20em;
min-height: 10em;
display: flex;
flex-direction: row;
justify-content: stretch;
}
.left, .right {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
border-radius: 0.2em;
border: 1px solid var(--modal-query-list-border);
background-color: var(--modal-query-list);
.container-entries {
flex-shrink: 1;
flex-grow: 1;
min-height: 5em;
position: relative;
overflow-x: hidden;
overflow-y: auto;
@include chat-scrollbar-vertical();
.container-empty, .container-error {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 2em;
background-color: var(--modal-query-list);
}
.container-empty {
color: var(--modal-query-empty);
}
.container-error {
color: var(--modal-query-error);
}
.entry {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-shrink: 1;
min-width: 4em;
padding-left: .5em;
padding-right: .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
&:hover {
background-color: var(--modal-query-entry-hover);
}
&.selected {
background-color: var(--modal-query-entry-selected);
}
}
}
.container-search {
flex-shrink: 0;
> .title {
flex-grow: 0;
padding: 0 .5em;
border-top: 1px solid var(--modal-query-list-border);
flex-shrink: 0;
margin-bottom: .5em;
display: flex;
flex-direction: row;
justify-content: stretch;
a {
font-weight: bold;
color: var(--modal-query-title);
flex-grow: 1;
flex-shrink: 1;
font-size: 1.05em;
min-width: 5em;
align-self: flex-end;
line-height: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button {
flex-grow: 0;
flex-shrink: 1;
height: 2em;
min-width: 2em;
font-size: .9em;
width: 10em;
min-width: 5em;
align-self: center;
margin-top: .8em;
margin-right: .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form-group {
flex-grow: 1;
flex-shrink: 1;
min-width: 5em;
}
}
}
}
.right {
min-width: 10em;
margin-left: .4em;
.left {
margin-right: .4em;
min-width: 10em;
.container-details {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
.detail {
flex-shrink: 0;
.container-list {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: stretch;
margin-bottom: 1em;
border-radius: 0.2em;
border: 1px solid var(--modal-query-list-border);
background-color: var(--modal-query-list);
.title, .title a {
text-transform: uppercase;
color: var(--modal-query-key);
.container-entries {
flex-shrink: 1;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
min-height: 5em;
.value {
@include user-select(text);
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
overflow-x: hidden;
overflow-y: auto;
@include chat-scrollbar-vertical();
&.unique-id {
.title {
.container-empty, .container-error {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 2em;
background-color: var(--modal-query-list);
}
.container-empty {
color: var(--modal-query-empty);
}
.container-error {
color: var(--modal-query-error);
}
.entry {
display: flex;
flex-direction: row;
justify-content: flex-start;
.button {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 1;
min-width: 4em;
width: 1.2em;
height: 1.2em;
padding-left: .5em;
padding-right: .5em;
align-self: center;
margin-left: .25em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
border-radius: .2em;
cursor: pointer;
&:hover {
background: var(--modal-query-copy-hover);
}
&:hover {
background-color: var(--modal-query-entry-hover);
}
margin-bottom: .2em; /* "text sub" */
> div {
align-self: center;
}
@include transition($button_hover_animation_time ease-in-out);
&.selected {
background-color: var(--modal-query-entry-selected);
}
}
}
}
.spacer { flex-grow: 1; flex-shrink: 1; min-height: 0; }
.container-search {
flex-shrink: 0;
flex-grow: 0;
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 .5em;
button {
flex-shrink: 1;
min-width: 5em;
border-top: 1px solid var(--modal-query-list-border);
height: 2em;
font-size: .9em;
display: flex;
flex-direction: row;
justify-content: stretch;
width: 14em;
button {
flex-grow: 0;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 2em;
min-width: 2em;
&:not(:first-of-type) {
margin-left: 1em;
align-self: center;
margin-top: .8em;
margin-right: .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.form-group {
flex-grow: 1;
flex-shrink: 1;
min-width: 5em;
}
}
}
}
}
.container-seperator {
background: transparent;
.right {
min-width: 10em;
margin-left: .4em;
.container-details {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
.detail {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-bottom: 1em;
.title, .title a {
text-transform: uppercase;
color: var(--modal-query-key);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value {
@include user-select(text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.unique-id {
.title {
display: flex;
flex-direction: row;
justify-content: flex-start;
.button {
display: flex;
flex-direction: column;
justify-content: center;
width: 1.2em;
height: 1.2em;
align-self: center;
margin-left: .25em;
cursor: pointer;
border-radius: .2em;
&:hover {
background: var(--modal-query-copy-hover);
}
margin-bottom: .2em; /* "text sub" */
> div {
align-self: center;
}
@include transition($button_hover_animation_time ease-in-out);
}
}
}
}
.spacer { flex-grow: 1; flex-shrink: 1; min-height: 0; }
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
button {
flex-shrink: 1;
min-width: 5em;
height: 2em;
font-size: .9em;
width: 14em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:not(:first-of-type) {
margin-left: 1em;
}
}
}
}
}
.container-seperator {
background: transparent;
}
}
}

1958
shared/css/static/modal-server.scss
View File

File diff suppressed because it is too large Load Diff

390
shared/css/static/modal-serverinfo.scss
View File

@ -11,253 +11,257 @@ html:root {
--serverinfo-value: #d6d6d7;
}
.modal-body.modal-server-info {
padding: 0!important;
width: 55em;
:global {
.modal-body.modal-server-info {
padding: 0!important;
width: 55em;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
background-color: var(--serverinfo-background);
background-color: var(--serverinfo-background);
.container-tooltip {
flex-shrink: 0;
flex-grow: 0;
position: relative;
width: 1.6em;
margin-left: .5em;
margin-right: .5em;
font-size: .9em;
display: flex;
flex-direction: column;
justify-content: center;
img {
height: 1em;
width: 1em;
align-self: center;
font-size: 1.2em;
}
.tooltip {
display: none;
}
}
.container-top {
flex-grow: 0;
flex-shrink: 0;
max-height: 9em;
//width: 30em; /* set a default width where we have to grow/shrink */
display: flex;
flex-direction: column;
justify-content: stretch;
.container-hostbanner {
border: none;
border-radius: 0;
background-color: var(--serverinfo-hostbanner-background);
}
&.hidden {
display: none;
}
}
.container-body {
flex-shrink: 1;
min-height: 12em; /* 10em + 2 * 1em margin */
overflow-y: auto;
@include chat-scrollbar-vertical();
}
.group {
flex-grow: 0;
flex-shrink: 0;
margin: 1em;
padding: .5em;
border-radius: .2em;
border: 1px solid var(--serverinfo-group-border);
background-color: var(--serverinfo-group-background);
display: flex;
flex-direction: row;
justify-content: stretch;
height: 10em;
max-height: 10em;
.container-image {
flex-grow: 0;
.container-tooltip {
flex-shrink: 0;
flex-grow: 0;
max-width: 15em;
max-height: 9em; /* minus one padding */
position: relative;
width: 1.6em;
margin-left: .5em;
margin-right: .5em;
font-size: .9em;
display: flex;
flex-direction: column;
justify-content: center;
img {
object-fit: contain;
max-height: 100%;
max-width: 100%;
height: 1em;
width: 1em;
align-self: center;
font-size: 1.2em;
}
margin-right: 2em;
@include transition(.25s ease-in-out);
.tooltip {
display: none;
}
}
.container-properties {
flex-shrink: 1;
flex-grow: 1;
.container-top {
flex-grow: 0;
flex-shrink: 0;
min-width: 20em;
max-height: 9em;
//width: 30em; /* set a default width where we have to grow/shrink */
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: stretch;
height: inherit;
.container-hostbanner {
border: none;
border-radius: 0;
background-color: var(--serverinfo-hostbanner-background);
}
.row {
&.hidden {
display: none;
}
}
.container-body {
flex-shrink: 1;
min-height: 12em; /* 10em + 2 * 1em margin */
overflow-y: auto;
@include chat-scrollbar-vertical();
}
.group {
flex-grow: 0;
flex-shrink: 0;
margin: 1em;
padding: .5em;
border-radius: .2em;
border: 1px solid var(--serverinfo-group-border);
background-color: var(--serverinfo-group-background);
display: flex;
flex-direction: row;
justify-content: stretch;
height: 10em;
max-height: 10em;
.container-image {
flex-grow: 0;
flex-shrink: 0;
height: 1.8em;
max-width: 15em;
max-height: 9em; /* minus one padding */
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-direction: column;
justify-content: center;
.key {
flex-shrink: 0;
flex-grow: 0;
color: var(--serverinfo-key);
text-transform: uppercase;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 15em;
img {
object-fit: contain;
max-height: 100%;
max-width: 100%;
}
.value {
color: var(--serverinfo-value);
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 2em;
@include transition(.25s ease-in-out);
}
.country {
display: inline-block;
margin-right: .25em;
.container-properties {
flex-shrink: 1;
flex-grow: 1;
min-width: 20em;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: inherit;
.row {
flex-grow: 0;
flex-shrink: 0;
height: 1.8em;
display: flex;
flex-direction: row;
justify-content: flex-start;
.key {
flex-shrink: 0;
flex-grow: 0;
color: var(--serverinfo-key);
text-transform: uppercase;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 15em;
}
&.server-version {
display: flex;
flex-direction: row;
justify-content: flex-start;
.value {
color: var(--serverinfo-value);
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
flex-shrink: 1;
min-width: 0;
.country {
display: inline-block;
margin-right: .25em;
}
&.server-version {
display: flex;
flex-direction: row;
justify-content: flex-start;
a {
flex-shrink: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.container-network {
display: flex;
flex-direction: row;
justify-content: center;
.container-button {
margin-right: 1em;
flex-shrink: 1e8;
min-width: 5em;
display: flex;
flex-direction: column;
justify-content: flex-end;
button {
height: 2.5em;
width: 12em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.container-network {
display: flex;
flex-direction: row;
justify-content: center;
.container-button {
margin-right: 1em;
flex-shrink: 1e8;
min-width: 5em;
display: flex;
flex-direction: column;
justify-content: flex-end;
button {
height: 2.5em;
width: 12em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.right {
flex-grow: 1;
flex-shrink: 1;
min-width: 10em;
}
}
}
.right {
flex-grow: 1;
flex-shrink: 1;
min-width: 10em;
&.reverse {
flex-direction: row-reverse;
text-align: right;
.container-image {
margin-right: 0;
margin-left: 2em;
}
.container-properties {
.row {
flex-direction: row-reverse;
}
}
}
}
&.reverse {
flex-direction: row-reverse;
text-align: right;
.container-buttons {
margin: 1em;
.container-image {
margin-right: 0;
margin-left: 2em;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
button {
min-width: 8em;
}
.container-properties {
.row {
flex-direction: row-reverse;
}
}
}
}
.container-buttons {
margin: 1em;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
button {
min-width: 8em;
}
}
}
@media all and (max-width: 50em) {
.modal-body.modal-server-info {
.container-image {
margin: 0!important;
max-width: 0!important;
:global {
.modal-body.modal-server-info {
.container-image {
margin: 0!important;
max-width: 0!important;
}
}
}
}

274
shared/css/static/modal-serverinfobandwidth.scss
View File

@ -8,211 +8,215 @@ html:root {
--serverinfo-statistics-title: #244c78;
}
.modal-body.modal-server-info-bandwidth {
padding: 0!important;
width: 55em;
:global {
.modal-body.modal-server-info-bandwidth {
padding: 0!important;
width: 55em;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important;
background-color: #2f2f35;
background-color: #2f2f35;
.container-tooltip {
flex-shrink: 0;
flex-grow: 0;
position: relative;
width: 1.6em;
margin-left: .5em;
font-size: .9em;
display: flex;
flex-direction: column;
justify-content: center;
img {
height: 1em;
width: 1em;
align-self: center;
font-size: 1.2em;
}
.tooltip {
display: none;
}
}
.top {
flex-grow: 0;
flex-shrink: 0;
margin: 1em;
padding: .5em;
display: flex;
flex-direction: row;
justify-content: stretch;
height: 12em;
max-height: 12em;
.container-image {
flex-grow: 0;
.container-tooltip {
flex-shrink: 0;
flex-grow: 0;
max-width: 18em;
max-height: 11em; /* minus one padding */
position: relative;
width: 1.6em;
margin-left: .5em;
font-size: .9em;
display: flex;
flex-direction: column;
justify-content: center;
img {
object-fit: contain;
max-height: 100%;
max-width: 100%;
height: 1em;
width: 1em;
align-self: center;
font-size: 1.2em;
}
margin-right: 2em;
@include transition(.25s ease-in-out);
.tooltip {
display: none;
}
}
.container-stats {
flex-shrink: 1;
flex-grow: 1;
.top {
flex-grow: 0;
flex-shrink: 0;
min-width: 25em;
margin: 1em;
padding: .5em;
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-direction: row;
justify-content: stretch;
height: 12em;
max-height: 12em;
.container-image {
flex-grow: 0;
flex-shrink: 0;
max-width: 18em;
max-height: 11em; /* minus one padding */
.statistic {
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: center;
> a {
font-size: 1.25em;
color: var(--serverinfo-title);
line-height: normal;
text-transform: uppercase;
img {
object-fit: contain;
max-height: 100%;
max-width: 100%;
}
.values {
margin-right: 2em;
@include transition(.25s ease-in-out);
}
.container-stats {
flex-shrink: 1;
flex-grow: 1;
min-width: 25em;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.statistic {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-direction: column;
justify-content: flex-start;
> a {
font-size: 1.2em;
font-size: 1.25em;
color: var(--serverinfo-title);
line-height: normal;
text-transform: uppercase;
}
.upload {
color: var(--serverinfo-bandwidth-upload);
.values {
display: flex;
flex-direction: row;
justify-content: space-between;
> a {
font-size: 1.2em;
line-height: normal;
}
.upload {
color: var(--serverinfo-bandwidth-upload);
}
.download {
color: var(--serverinfo-bandwidth-download);
}
}
.download {
color: var(--serverinfo-bandwidth-download);
&:not(:first-of-type) {
margin-top: 1em;
}
}
&:not(:first-of-type) {
margin-top: 1em;
}
}
}
}
.bottom {
flex-grow: 0;
flex-shrink: 0;
.bottom {
flex-grow: 0;
flex-shrink: 0;
margin: 1em;
padding: .5em;
margin: 1em;
padding: .5em;
border-radius: .2em;
border: 1px solid #1f2122;
border-radius: .2em;
border: 1px solid #1f2122;
background-color: #28292b;
background-color: #28292b;
display: flex;
flex-direction: column;
justify-content: stretch;
//height: 15em;
//max-height: 10em;
.statistic {
display: flex;
flex-direction: column;
justify-content: stretch;
.title {
flex-grow: 0;
flex-shrink: 0;
color: var(--serverinfo-statistics-title);
font-size: 1.25em;
text-transform: uppercase;
}
.body {
flex-grow: 0;
flex-shrink: 0;
//height: 15em;
//max-height: 10em;
.statistic {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: stretch;
height: 7em;
.title {
flex-grow: 0;
flex-shrink: 0;
.container-canvas {
flex-grow: 1;
flex-shrink: 1;
color: var(--serverinfo-statistics-title);
font-size: 1.25em;
min-width: 6em;
margin-right: 1em;
text-transform: uppercase;
}
.values {
.body {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
flex-direction: row;
justify-content: stretch;
width: 8em;
text-align: right;
height: 7em;
.upload {
color: var(--serverinfo-bandwidth-upload);
.container-canvas {
flex-grow: 1;
flex-shrink: 1;
min-width: 6em;
margin-right: 1em;
}
.download {
color: var(--serverinfo-bandwidth-download);
.values {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 8em;
text-align: right;
.upload {
color: var(--serverinfo-bandwidth-upload);
}
.download {
color: var(--serverinfo-bandwidth-download);
}
}
}
}
&:not(:first-of-type) {
margin-top: 1.5em;
&:not(:first-of-type) {
margin-top: 1.5em;
}
}
}
}
}
@media all and (max-width: 50em) {
.modal-body.modal-server-info {
.container-image {
margin: 0!important;
max-width: 0!important;
:global {
.modal-body.modal-server-info {
.container-image {
margin: 0!important;
max-width: 0!important;
}
}
}
}

3840
shared/css/static/modal-settings.scss
View File

File diff suppressed because it is too large Load Diff

1701
shared/css/static/modal.scss
View File

File diff suppressed because it is too large Load Diff

52
shared/css/static/modals.scss
View File

@ -1,32 +1,34 @@
.arrow {
display: inline-block;
border: solid black;
//border-width: 0 3px 3px 0;
//padding: 3px;
//height: 10px;
:global {
.arrow {
display: inline-block;
border: solid black;
//border-width: 0 3px 3px 0;
//padding: 3px;
//height: 10px;
border-width: 0 .2em .2em 0;
padding: .21em;
height: .5em;
width: .5em;
border-width: 0 .2em .2em 0;
padding: .21em;
height: .5em;
width: .5em;
&.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
&.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
&.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
&.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
&.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
&.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
&.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
&.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
}
}

146
shared/css/static/overlay-image-preview.scss
View File

@ -1,88 +1,90 @@
@import "mixin";
.overlay-image-preview {
position: absolute;
z-index: 1000;
pointer-events: all;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background-color: #000000EF;
display: flex;
flex-direction: column;
justify-content: center;
.container-menu-bar {
:global {
.overlay-image-preview {
position: absolute;
z-index: 1000;
top: .25em;
pointer-events: all;
top: 0;
bottom: 0;
left: 0;
right: .25em;
right: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
.entry {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 2em;
margin: .25em;
padding: .15em;
border-radius: .125em;
cursor: pointer;
.container-icon {
width: 1em;
height: 1em;
display: flex;
img {
height: 100%;
width: 100%;
}
}
&:hover {
background-color: #FFFFFF1F;
}
}
}
.container-image {
max-width: 90%;
max-height: 90%;
align-self: center;
opacity: 1;
background-color: #000000EF;
display: flex;
flex-direction: column;
justify-content: stretch;
justify-content: center;
img {
flex-shrink: 1;
.container-menu-bar {
position: absolute;
min-height: 1em;
min-width: 1em;
top: .25em;
left: 0;
right: .25em;
max-height: 100%;
max-width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
.entry {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 2em;
margin: .25em;
padding: .15em;
border-radius: .125em;
cursor: pointer;
.container-icon {
width: 1em;
height: 1em;
display: flex;
img {
height: 100%;
width: 100%;
}
}
&:hover {
background-color: #FFFFFF1F;
}
}
}
}
&.hidden {
pointer-events: none;
opacity: 0;
}
.container-image {
max-width: 90%;
max-height: 90%;
align-self: center;
@include transition(ease-in-out .25s);
display: flex;
flex-direction: column;
justify-content: stretch;
img {
flex-shrink: 1;
min-height: 1em;
min-width: 1em;
max-height: 100%;
max-width: 100%;
}
}
&.hidden {
pointer-events: none;
opacity: 0;
}
@include transition(ease-in-out .25s);
}
}

41
shared/css/static/scroll.scss
View File

@ -1,41 +0,0 @@
.scroll-left {
height: 100%;
overflow: hidden;
position: relative;
}
.scroll-left p {
position: absolute;
width: max-content;
height: 100%;
margin: 0;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 10s linear infinite;
-webkit-animation: scroll-left 10s linear infinite;
animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}

63
shared/css/static/server-log.scss
View File

@ -1,63 +0,0 @@
@import "mixin";
html:root {
--server-log-text: #6e6e6e;
--server-log-error: #e62222;
--server-log-tree-entry: #d8d8d8;
}
.container-log {
display: block;
overflow-y: auto;
height: 100%;
width: 100%;
@include chat-scrollbar-vertical();
@include chat-scrollbar-horizontal();
.container-messages {
width: 100%;
line-height: 16px;
}
.log-message {
flex-shrink: 0;
flex-grow: 0;
color: var(--server-log-text);
overflow-x: hidden;
overflow-y: hidden;
display: block;
&, > * {
overflow-wrap: break-word;
word-wrap: break-word;
max-width: 100%;
}
> * {
display: inline-block;
font-family: sans-serif;
font-size: 13px;
line-height: initial;
}
> .timestamp {
padding-right: 5px;
}
.log-error {
color: var(--server-log-error);
}
.htmltag-client, .htmltag-channel {
color: var(--server-log-tree-entry);
}
}
}

1518
shared/css/static/ts/country.scss
View File

File diff suppressed because it is too large Load Diff

154
shared/css/static/ts/tab.scss
View File

@ -1,92 +1,94 @@
x-tab { display:none }
:global {
x-tab { display:none }
.tab {
padding: 2px;
height: 100%;
flex-direction: column;
display: flex;
flex-grow: 1;
.tab {
padding: 2px;
height: 100%;
flex-direction: column;
display: flex;
flex-grow: 1;
min-height: 220px; /* min the header */
}
.tab div * {
vertical-align: middle;
}
.tab .tab-content {
min-height: 200px;
border-radius: 0 2px 2px 2px;
border: solid #6f6f6f;
overflow-y: hidden;
height: 100%;
padding: 2px;
display: flex;
flex-grow: 1;
x-content {
min-height: 0;
overflow-y: auto;
width: 100%;
min-height: 220px; /* min the header */
}
@-moz-document url-prefix() {
.tab div * {
vertical-align: middle;
}
.tab .tab-content {
min-height: 200px;
border-radius: 0 2px 2px 2px;
border: solid #6f6f6f;
overflow-y: hidden;
height: 100%;
padding: 2px;
display: flex;
flex-grow: 1;
x-content {
height: 100%;
min-height: 0;
overflow-y: auto;
width: 100%;
}
@-moz-document url-prefix() {
x-content {
height: 100%;
}
}
}
}
/*
#chat .tab-content {
flex-wrap: wrap;
display: flex;
align-items: flex-start;
height: auto;
}
*/
/*
#chat .tab-content {
flex-wrap: wrap;
display: flex;
align-items: flex-start;
height: auto;
}
*/
.tab .tab-header {
font-family: Arial, serif;
font-size: 12px;
/*white-space: pre;*/
line-height: 1;
.tab .tab-header {
font-family: Arial, serif;
font-size: 12px;
/*white-space: pre;*/
line-height: 1;
max-width: 100%;
overflow: auto;
/*height: 24px;*/
overflow-y: hidden;
white-space: nowrap;
margin-bottom: -1px;
display: flex;
user-select: none;
max-width: 100%;
overflow: auto;
/*height: 24px;*/
overflow-y: hidden;
white-space: nowrap;
margin-bottom: -1px;
display: flex;
user-select: none;
flex-direction: row;
justify-content: stretch;
width: 100%;
flex-direction: row;
justify-content: stretch;
width: 100%;
flex-grow: 0;
flex-shrink: 0;
}
flex-grow: 0;
flex-shrink: 0;
}
.tab .tab-header .entry {
background: #5f5f5f5f;
display: inline-block;
border: 1px solid #6f6f6f;
border-radius: 2px 2px 0px 0px;
vertical-align: middle;
padding: 2px 5px;
cursor: pointer;
flex-grow: 1;
}
.tab .tab-header .entry {
background: #5f5f5f5f;
display: inline-block;
border: 1px solid #6f6f6f;
border-radius: 2px 2px 0px 0px;
vertical-align: middle;
padding: 2px 5px;
cursor: pointer;
flex-grow: 1;
}
.tab .tab-content-invisible {
display: none;
}
.tab .tab-content-invisible {
display: none;
}
.tab .tab-header .entry.selected {
background: #11111111;
.tab .tab-header .entry.selected {
background: #11111111;
}
}

2
shared/generate_i18n_gtranslate.ts
View File

@ -194,7 +194,7 @@ if(process_args.length < 1) {
process.exit(1);
}
const input_files = ["../dist/translations.json", "generated/translations_html.json"].map(e => path.join(__dirname, e));
const input_files = ["../dist/translations.json"].map(e => path.join(__dirname, e));
const output_file = process_args[1] || path.join(__dirname, "i18n", process_args[0] + "_google_translate.translation");
(async () => {

9
shared/generate_translations.sh
View File

@ -1,9 +0,0 @@
#!/usr/bin/env bash
cd "$(dirname "$0")" || { echo "Failed to enter base directory"; exit 1; }
npm run trgen -- -f "$(pwd)/html/templates.html" -f "$(pwd)/html/templates/modal/newcomer.html" -f "$(pwd)/html/templates/modal/musicmanage.html" -d "$(pwd)/generated/translations_html.json"; _exit_code=$?
if [[ $_exit_code -ne 0 ]]; then
echo "Failed to generate translations file for the template files"
exit 1
fi

6
shared/js/ui/react-elements/external-modal/ModalRenderer.scss
View File

@ -1,10 +1,8 @@
@import "../../../../css/static/mixin";
/* FIXME: Remove this wired import */
:global {
@import "../../../../css/static/general";
@import "../../../../css/static/modal";
}
@import "../../../../css/static/general";
@import "../../../../css/static/modal";
html, body {
margin: 0;