First release of 2.0! :D
This commit is contained in:
Wruczek
29
src/css/cookiealert.css
Normal file
29
src/css/cookiealert.css
Normal file
@ -0,0 +1,29 @@
|
||||
.cookiealert {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
border-radius: 0;
|
||||
background: #212327 url("../img/cubes.png");
|
||||
transform: translateY(100%);
|
||||
transition: all 500ms ease-out;
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.cookiealert.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
transition-delay: 1000ms;
|
||||
}
|
||||
|
||||
.cookiealert a {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.cookiealert .acceptcookies {
|
||||
margin-left: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
10
src/css/dev.css
Normal file
10
src/css/dev.css
Normal file
@ -0,0 +1,10 @@
|
||||
/* FOR DEVELOPMENT */
|
||||
|
||||
.xdebug-var-dump {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
debug-step {
|
||||
display: none;
|
||||
}
|
||||
1
src/css/flags/famfamfam-flags.min.css
vendored
Normal file
1
src/css/flags/famfamfam-flags.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
src/css/flags/famfamfam-flags.png
Normal file
BIN
src/css/flags/famfamfam-flags.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
94
src/css/loader.css
Normal file
94
src/css/loader.css
Normal file
@ -0,0 +1,94 @@
|
||||
/*!
|
||||
* # Semantic UI 2.3.3 - Loader
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*/
|
||||
|
||||
/* Standard Size */
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
.loader:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
.loader:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: loader 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid transparent;
|
||||
border-top-color: #767676;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
width: 2.28571429rem;
|
||||
height: 2.28571429rem;
|
||||
margin: 0 0 0 -1.14285714rem;
|
||||
}
|
||||
|
||||
/* Active Animation */
|
||||
@keyframes loader {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* States */
|
||||
|
||||
.loader.indeterminate:after {
|
||||
animation-direction: reverse;
|
||||
animation-duration: 1.2s;
|
||||
}
|
||||
|
||||
.loader.disabled,
|
||||
.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
|
||||
.loader.inverted {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.loader.inverted:before {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.loader.inverted:after {
|
||||
border-top-color: #FFFFFF;
|
||||
}
|
||||
400
src/css/style.css
Normal file
400
src/css/style.css
Normal file
@ -0,0 +1,400 @@
|
||||
/*!
|
||||
* This file is a part of ts-website 2
|
||||
* https://github.com/Wruczek/ts-website
|
||||
* (c) Wruczek 2017 - 2019
|
||||
*/
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 6rem;
|
||||
min-height: 100vh;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.connectionproblems {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.fa, .fas, .fab, .far, .fal {
|
||||
margin-right: 0.5em
|
||||
}
|
||||
|
||||
.language-switcher .dropdown-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.accordion .card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion .card .card-header {
|
||||
padding: .5rem !important;
|
||||
}
|
||||
|
||||
.card .card-header * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bottom-error-alert {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.card-titleblock {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.card-titleblock .card-header {
|
||||
text-align: center;
|
||||
border: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: #f8f9fa;
|
||||
padding: 0.8rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.footer .footer-copyright {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Fixes https://github.com/twbs/bootstrap/issues/23374 */
|
||||
@media (max-width: 991px) {
|
||||
.nav-fix-scroll {
|
||||
overflow: auto;
|
||||
max-height: 85vh;
|
||||
align-items: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reimplement the btn-xs that was removed in Bootstrap 4 */
|
||||
/* https://github.com/twbs/bootstrap/issues/21881#issuecomment-341972830 */
|
||||
.btn-group-xs > .btn, .btn-xs {
|
||||
padding : .25rem .4rem;
|
||||
font-size : .875rem;
|
||||
line-height : .5;
|
||||
border-radius : .2rem;
|
||||
}
|
||||
|
||||
/* ACCORDION */
|
||||
|
||||
.accordion .card .card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion .card .card-header .btn-link {
|
||||
text-decoration: none;
|
||||
text-align: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.accordion .card .card-header .copy-faq-url {
|
||||
transition: opacity ease 250ms;
|
||||
margin: 0 0.75rem 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.accordion .card:not(:hover) .card-header .copy-faq-url {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Page/element specific */
|
||||
|
||||
.badge.error-badge {
|
||||
white-space: normal;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Server status */
|
||||
|
||||
.server-status.loaded .status-loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.server-status p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.server-status .data span:first-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.server-status .data span:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#loginModal .select-account .list-group .list-group-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
#loginModal-codeconfirm .invalid-feedback {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/* Bans page */
|
||||
|
||||
.ban-alert {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ban-alert.banned {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Responsive datatables styles */
|
||||
|
||||
table.dataTable>tbody>tr.child ul.dtr-details>li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table.dataTable>tbody>tr.child ul.dtr-details {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.dataTable>tbody>tr.child ul.dtr-details>li {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
table.dataTable > tbody > tr.parent td {
|
||||
background-color: #282840
|
||||
}
|
||||
|
||||
table.dataTable > tbody > tr.child td.child {
|
||||
background-color: #2d2d4b
|
||||
}
|
||||
|
||||
.dataTables_info {
|
||||
white-space: normal !important
|
||||
}
|
||||
|
||||
/* Viewer */
|
||||
|
||||
.viewer-container {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-server), .viewer-container .client-container {
|
||||
margin-left: 1.4em;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-spacer) .channel, .viewer-container .client-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-name,
|
||||
.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-icons,
|
||||
.viewer-container .client-name, .viewer-container .client-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-spacer) > .channel > .channel-name,
|
||||
.viewer-container .client-name {
|
||||
word-break: break-all; /* For all browsers */
|
||||
word-break: break-word; /* For some browsers that support it - unofficial! */
|
||||
}
|
||||
|
||||
.viewer-container .client-icons {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.viewer-container .client-icons .icon,
|
||||
.viewer-container .client-icons .icon-flag,
|
||||
.viewer-container .channel-icons .icon {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-spacer) .channel,
|
||||
.viewer-container .client-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-spacer) .channel::after,
|
||||
.viewer-container .client-container::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -10px;
|
||||
bottom: -3px;
|
||||
right: -10px;
|
||||
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
opacity: 0;
|
||||
transition: opacity ease 300ms;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container:not(.is-spacer) .channel:hover::after,
|
||||
.viewer-container .client-container:hover::after,
|
||||
.viewer-container .channel-container:not(.is-spacer) .channel:focus::after,
|
||||
.viewer-container .client-container:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.viewer-container .channel-name .icon, .viewer-container .client-name .icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.viewer-container .icon {
|
||||
height: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container.spacer-left > .channel {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container.spacer-center > .channel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container.spacer-right > .channel {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.viewer-container .channel-container.spacer-repeat > .channel {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Admin status sidebar */
|
||||
|
||||
.admin-status.admin-status-grouped .group-name {
|
||||
/* Center icon with text (vertical & horizontal) */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-family: var(--font-family-main);
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.admin-status.admin-status-grouped .group-name {
|
||||
margin: 1em 0 0.1em 0;
|
||||
}
|
||||
|
||||
.admin-status.admin-status-grouped .empty-group {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* No top spacing on the first group */
|
||||
/* Thats why I've put that extra DIV that wraps all groups */
|
||||
.admin-status.admin-status-grouped div:first-child .group-name {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.admin-status.admin-status-grouped .group-name img,
|
||||
.admin-status.admin-status-list .nickname img {
|
||||
height: 16px;
|
||||
max-width: 16px;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.admin-status.admin-status-list .group-separator {
|
||||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.admin-status .status-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
.admin-status .status-container .nickname {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Group assigner */
|
||||
|
||||
.group-assigner .list-group-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.group-assigner .list-group-item > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* The "icon-margin" is used when there is no icon, */
|
||||
/* its used to align it with other groups */
|
||||
.group-assigner .assigner-icon, .group-assigner .assigner-icon-margin {
|
||||
width: 16px;
|
||||
max-height: 16px;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.group-assigner .list-group-item:not(.assigner-header) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.group-assigner .assigner-category {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.group-assigner .assigner-save {
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.group-assigner .assigner-header .badge.badge-invalid {
|
||||
background-color: red !important
|
||||
}
|
||||
647
src/css/themes/dark.css
Normal file
647
src/css/themes/dark.css
Normal file
@ -0,0 +1,647 @@
|
||||
/*!
|
||||
* This file is a part of ts-website 2
|
||||
* https://github.com/Wruczek/ts-website
|
||||
* (c) Wruczek 2017 - 2019
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Exo+2');
|
||||
|
||||
:root {
|
||||
--site-background: #1e202f;
|
||||
--site-secondary-color: #a61f67;
|
||||
--site-accent-color: #f92552;
|
||||
--site-text: #9e9caa;
|
||||
--site-scrollbar-color: #1c88cc;
|
||||
|
||||
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
--font-family-main: "Exo 2", "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--site-background);
|
||||
color: var(--site-text);
|
||||
font-family: var(--font-family-main);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.font-reading {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
p, tbody {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
.btn, thead, .dataTables_wrapper {
|
||||
font-family: var(--font-family-main);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--site-secondary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--site-secondary-color);
|
||||
}
|
||||
|
||||
|
||||
/* ============ */
|
||||
/* NAVBAR STUFF */
|
||||
/* ============ */
|
||||
|
||||
#main-navbar {
|
||||
background-color: #323150 !important;
|
||||
border-bottom: 1px solid #3c3b5b;
|
||||
}
|
||||
|
||||
#main-navbar .nav-item {
|
||||
padding: 0.5rem 0;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#main-navbar .navbar-nav .nav-link {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#main-navbar .nav-item.active,
|
||||
#main-navbar .nav-item:hover,
|
||||
#main-navbar .nav-item.dropdown.show {
|
||||
background-color: #282840;
|
||||
}
|
||||
|
||||
#main-navbar .nav-item.active .nav-link,
|
||||
#main-navbar .nav-item:hover .nav-link,
|
||||
#main-navbar .nav-item.dropdown.show .nav-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#main-navbar .navbar-collapse {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
#main-navbar .navbar-nav .nav-link {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
/* Remove padding from navbar and add it later to navbar items */
|
||||
#main-navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main-navbar .navbar-nav {
|
||||
border-left: 1px solid #3c3b5b;
|
||||
}
|
||||
|
||||
#main-navbar .navbar-nav li {
|
||||
border-right: 1px solid #3c3b5b;
|
||||
}
|
||||
|
||||
/* Add bigger padding between navbar items */
|
||||
#main-navbar .navbar-nav .nav-link {
|
||||
padding-right: .9rem;
|
||||
padding-left: .9rem;
|
||||
}
|
||||
|
||||
/* ================================ */
|
||||
/* Navbar underline hover effect */
|
||||
/* Taken from http://bit.ly/2xkPi0k */
|
||||
/* ================================ */
|
||||
#main-navbar .nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main-navbar .nav-item:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(100% - 0.1rem);
|
||||
border-bottom: 0.125rem solid var(--site-accent-color);
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
transition: left 0.5s ease, right 0.5s ease;
|
||||
}
|
||||
|
||||
#main-navbar .nav-item:hover::after,
|
||||
#main-navbar .nav-item.active::after,
|
||||
#main-navbar .nav-item.show::after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* =============================== */
|
||||
/* Hover effect for dropdown items */
|
||||
/* =============================== */
|
||||
.dropdown-item {
|
||||
border-left: 0 solid var(--site-accent-color);
|
||||
transition: border-left-width 0.1s ease, padding-left 0.1s ease, background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item.active {
|
||||
border-left-width: 2px;
|
||||
padding-left: calc(1.5rem - 2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========= */
|
||||
/* DROPDOWNS */
|
||||
/* ========= */
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #323150;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:focus,
|
||||
.dropdown-item:hover {
|
||||
color: #fff;
|
||||
background-color: #282840;
|
||||
}
|
||||
|
||||
/* ======= */
|
||||
/* BUTTONS */
|
||||
/* ======= */
|
||||
|
||||
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
|
||||
background-color: var(--site-secondary-color);
|
||||
border-color: var(--site-secondary-color);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #861953;
|
||||
border-color: #861953;
|
||||
}
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled).active,
|
||||
.btn-primary:not(:disabled):not(.disabled):active,
|
||||
.show > .btn-primary.dropdown-toggle {
|
||||
background-color: #69182d;
|
||||
border-color: #69182d;
|
||||
}
|
||||
|
||||
.btn-primary.focus, .btn-primary:focus,
|
||||
.btn-primary:not(:disabled):not(.disabled).active:focus,
|
||||
.btn-primary:not(:disabled):not(.disabled):active:focus,
|
||||
.show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(166, 31, 103, 0.5); /* secondary color with 50% opacity */
|
||||
}
|
||||
|
||||
/* ====== */
|
||||
/* INPUTS */
|
||||
/* ====== */
|
||||
|
||||
.form-control, .custom-select {
|
||||
color: #fff;
|
||||
background-color: #282840;
|
||||
border-color: #282840;
|
||||
}
|
||||
|
||||
.form-control:focus, .custom-select:focus {
|
||||
color: #fff;
|
||||
background-color: #282840;
|
||||
|
||||
border-color: var(--site-secondary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(166, 31, 103, 0.30); /* secondary color with 30% opacity */
|
||||
}
|
||||
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: var(--site-text);
|
||||
}
|
||||
|
||||
.form-control::-moz-placeholder {
|
||||
color: var(--site-text);
|
||||
}
|
||||
|
||||
.form-control:-ms-input-placeholder {
|
||||
color: var(--site-text);
|
||||
}
|
||||
|
||||
.form-control::-ms-input-placeholder {
|
||||
color: var(--site-text);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--site-text);
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.input-text[disabled],
|
||||
select[disabled],
|
||||
.form-control[readonly],
|
||||
.input-text[readonly],
|
||||
select[readonly],
|
||||
fieldset[disabled] .form-control,
|
||||
fieldset[disabled] .input-text,
|
||||
fieldset[disabled] select,
|
||||
.custom-select[disabled] {
|
||||
background-color: #212135;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-control-plaintext {
|
||||
color: var(--site-text);
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: var(--site-text);
|
||||
background-color: #212135;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.custom-control-label::before,
|
||||
.custom-control-input:disabled~.custom-control-label::before {
|
||||
background-color: #212135;
|
||||
}
|
||||
|
||||
.custom-control-input:checked~.custom-control-label::before {
|
||||
background-color: var(--site-secondary-color) !important;
|
||||
}
|
||||
|
||||
/* Lighter on a list group item */
|
||||
|
||||
.list-group-item .custom-control-label::before,
|
||||
.list-group-item .custom-control-input:disabled~.custom-control-label::before {
|
||||
background-color: #323150;
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* ALERTS */
|
||||
/* taken from Bootswatch Darkly */
|
||||
/* Bootswatch is (c) 2012-2018 Thomas Park */
|
||||
/* ======================================= */
|
||||
|
||||
.alert {
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert a,
|
||||
.alert .alert-link {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
background-color: #375a7f;
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #00bc8c;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #3498DB;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: #F39C12;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #E74C3C;
|
||||
}
|
||||
|
||||
.alert-light {
|
||||
background-color: #303030;
|
||||
}
|
||||
|
||||
.alert-dark {
|
||||
background-color: #adb5bd;
|
||||
}
|
||||
|
||||
.alert-dismissible .close {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.alert code {
|
||||
background-color: var(--site-background);
|
||||
padding: 0.15em;
|
||||
}
|
||||
|
||||
/* ========== */
|
||||
/* PAGINATION */
|
||||
/* ========== */
|
||||
|
||||
.page-link {
|
||||
color: var(--site-text);
|
||||
background-color: #282840;
|
||||
border-color: #3c3b5b;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
color: var(--site-text);
|
||||
background-color: #212135;
|
||||
border-color: #212135;
|
||||
}
|
||||
|
||||
.page-link.light-hover:hover {
|
||||
color: var(--site-text);
|
||||
background-color: #323150;
|
||||
border-color: #323150;
|
||||
}
|
||||
|
||||
.page-link:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(166, 31, 103, 0.30); /* secondary color with 30% opacity */
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
color: #fff;
|
||||
background-color: var(--site-secondary-color);
|
||||
border-color: var(--site-secondary-color);
|
||||
}
|
||||
|
||||
.page-item.disabled .page-link {
|
||||
color: #5d666e;
|
||||
background-color: #212135;
|
||||
border-color: #212135;
|
||||
}
|
||||
|
||||
/* ===== */
|
||||
/* CARDS */
|
||||
/* ===== */
|
||||
|
||||
.card {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid #3c3b5b;
|
||||
background-color: #323150;
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card.card-accent > .card-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card.card-accent > .card-header::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: var(--site-accent-color);
|
||||
}
|
||||
|
||||
.card.card-titleblock {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card .card-header {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.card .card-header.bigger-title {
|
||||
font-size: 1.15rem
|
||||
}
|
||||
|
||||
.card .card-header a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.card .card-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===== */
|
||||
/* MODAL */
|
||||
/* ===== */
|
||||
|
||||
.modal .modal-content {
|
||||
border: 1px solid #3c3b5b;
|
||||
background-color: #323150;
|
||||
}
|
||||
|
||||
.modal .modal-header {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .125);
|
||||
}
|
||||
|
||||
.modal .modal-body {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
.modal .modal-header .close {
|
||||
color: #fff !important;
|
||||
font-family: var(--font-family-sans-serif);
|
||||
}
|
||||
|
||||
/* ========== */
|
||||
/* LIST-GROUP */
|
||||
/* ========== */
|
||||
|
||||
.list-group-item {
|
||||
color: #fff;
|
||||
background-color: #282840;
|
||||
}
|
||||
|
||||
.list-group-item-action:focus,
|
||||
.list-group-item-action:hover,
|
||||
.list-group-item-action:active {
|
||||
color: #fff;
|
||||
background-color: #232338;
|
||||
}
|
||||
|
||||
/* ========= */
|
||||
/* ACCORDION */
|
||||
/* ========= */
|
||||
|
||||
.accordion .card .card-header {
|
||||
font-family: var(--font-family-main);
|
||||
}
|
||||
|
||||
.accordion .card .card-header .btn-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ====== */
|
||||
/* TABLES */
|
||||
/* ====== */
|
||||
|
||||
.table {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
border-bottom: none;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
border-top-color: #494770;
|
||||
padding: .65rem;
|
||||
}
|
||||
|
||||
/* ============= */
|
||||
/* PROGRESS BARS */
|
||||
/* ============= */
|
||||
|
||||
.progress {
|
||||
background-color: #2c2e3e;
|
||||
}
|
||||
|
||||
/* ======== */
|
||||
/* POPOVERS */
|
||||
/* ======== */
|
||||
|
||||
/*
|
||||
.popover {bgcolor, border}
|
||||
.popover-header {bgcolor, border}
|
||||
.popover-body {color}
|
||||
*/
|
||||
|
||||
.popover {
|
||||
border: 1px solid #3c3b5b;
|
||||
background-color: #323150;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
border-bottom: 1px solid #3c3b5b;
|
||||
color: #fff;
|
||||
font-family: var(--font-family-main);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: rgba(255, 255, 255, 0.8)
|
||||
}
|
||||
|
||||
/* ====== */
|
||||
/* FOOTER */
|
||||
/* ====== */
|
||||
|
||||
.footer {
|
||||
background-color: #282840;
|
||||
}
|
||||
|
||||
/* =============== */
|
||||
/* INVERTED LOADER */
|
||||
/* =============== */
|
||||
|
||||
.loader {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
border-top-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* ========= */
|
||||
/* SCROLLBAR */
|
||||
/* ========= */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: var(--site-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: var(--site-accent-color)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: var(--site-accent-color)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* ============ */
|
||||
/* ADMIN STATUS */
|
||||
/* ============ */
|
||||
|
||||
.admin-status .status-container .status .badge-success {
|
||||
background-color: var(--site-secondary-color);
|
||||
}
|
||||
|
||||
.admin-status .status-container .status .badge-secondary {
|
||||
background-color: var(--site-background);
|
||||
}
|
||||
|
||||
.admin-status .status-container .status .badge-secondary {
|
||||
background-color: var(--site-background);
|
||||
}
|
||||
|
||||
/* ============== */
|
||||
/* GROUP ASSIGNER */
|
||||
/* ============== */
|
||||
|
||||
.group-assigner .assigner-header {
|
||||
font-size: 1.1em;
|
||||
background-color: #212135;
|
||||
font-family: var(--font-family-main);
|
||||
}
|
||||
|
||||
.group-assigner .assigner-header .badge.badge-primary {
|
||||
background-color: var(--site-secondary-color);
|
||||
}
|
||||
|
||||
.group-assigner .assigner-header .badge.badge-invalid {
|
||||
background-color: red !important
|
||||
}
|
||||
|
||||
|
||||
/* ============= */
|
||||
/* PAGE-SPECIFIC */
|
||||
/* ============= */
|
||||
|
||||
a[data-connectionproblem] {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Server Status */
|
||||
|
||||
.server-status .data .badge {
|
||||
color: #fff;
|
||||
background-color: var(--site-secondary-color);
|
||||
}
|
||||
|
||||
/* Login */
|
||||
|
||||
#loginModal .not-connected .waiting-connect {
|
||||
color: #fff;
|
||||
}
|
||||
Reference in New Issue
Block a user