Release 0.9.0
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
@import url("100-variables.css"); /* contains css-variables for most major elements */
|
||||
@import url("200-framework.css");
|
||||
@import url("300-header.css");
|
||||
@import url("400-main.css");
|
||||
@import url("500-footer.css");
|
||||
@@ -0,0 +1,81 @@
|
||||
@import url("110-fonts.css");
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
/* colors have to be issued in HEX, so we can use them without trouble inside out JavaScript portion */
|
||||
--background: #000000;
|
||||
--main-bar-color: #939598;
|
||||
--main-bar-border-color: #6F7172;
|
||||
|
||||
/* StarTrek color information found on: https://web.archive.org/web/20190717130329/http://www.lcarscom.net/ */
|
||||
--lcars-pale-canary: #FF9999;
|
||||
--lcars-tanoi: #FFCC99;
|
||||
--lcars-golden-tanoi: #FFCC66;
|
||||
--lcars-neon-carrot: #FF9933;
|
||||
|
||||
--lcars-eggplant: #664466;
|
||||
--lcars-lilac: #CC99CC;
|
||||
--lcars-anakiwa: #99CCFF;
|
||||
--lcars-mariner: #3366CC;
|
||||
|
||||
--lcars-bahama-blue: #006699;
|
||||
--lcars-blue-bell: #9999CC;
|
||||
--lcars-melrose: #9999FF;
|
||||
--lcars-hopbush: #CC6699;
|
||||
|
||||
--lcars-chestnut-rose: #CC6666;
|
||||
--lcars-orange-peel: #FF9966;
|
||||
--lcars-atomic-tangerine: #FF9900;
|
||||
--lcars-danub: #6688CC;
|
||||
|
||||
--lcars-indigo: #4455BB;
|
||||
--lcars-lavender-purple: #9977AA;
|
||||
--lcars-cosmic: #774466;
|
||||
--lcars-red-damask: #DD6644;
|
||||
|
||||
--lcars-medium-carmine: #AA5533;
|
||||
--lcars-bourbon: #BB6622;
|
||||
--lcars-sandy-brown: #EE9955;
|
||||
--lcars-periwinkle: #CCDDFF;
|
||||
|
||||
--lcars-dodger-pale: #5599FF;
|
||||
--lcars-dodger-soft: #3366FF;
|
||||
--lcars-near-blue: #0011EE;
|
||||
--lcars-navy-blue: #000088;
|
||||
|
||||
--lcars-husk: #BBAA55;
|
||||
--lcars-rust: #BB4411;
|
||||
--lcars-tamarillo: #882211;
|
||||
|
||||
/* pixel values taken from the used images */
|
||||
--main_shoulder_width: 16.875em;
|
||||
--main_shoulder_height: 4.5em;
|
||||
--main_shoulder_gap: calc(
|
||||
var(--main_shoulder_width) / 10
|
||||
);
|
||||
|
||||
--main_bar_height: 2.625em;
|
||||
--main_bar_terminator_width: 2.5em;
|
||||
|
||||
--main_table_gutter: 0.25em;
|
||||
--main_table_header_height: 2em;
|
||||
--main_table_footer_height: 1.5em;
|
||||
--main_table_caption_height: 1.5em;
|
||||
|
||||
/* main area height */
|
||||
--main_area_height: calc(
|
||||
100vh
|
||||
- var(--main_shoulder_height) * 2
|
||||
- var(--main_table_gutter) * 2
|
||||
);
|
||||
|
||||
--main_widget_shoulder_width: var(--main_shoulder_width);
|
||||
--main_widget_height: var(--main_area_height);
|
||||
--main_widget_bar_height: var(--main_bar_height);
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
33% {
|
||||
opacity: 33%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@font-face {
|
||||
font-family: 'SWISS 911 Ultra Compressed BT';
|
||||
src: url('fonts/SWISS911UltraCompressedBT.ttf'); /*URL to font*/
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SWISS 911 Extra Compressed BT';
|
||||
src: url('fonts/SWISS911ExtraCompressedBT.ttf'); /*URL to font*/
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
@import url("210-scrollbar_hacks.css");
|
||||
@import url("220-screen_adjustments.css");
|
||||
|
||||
html {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: var(--background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
font-family: "SWISS 911 Extra Compressed BT", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > header, body > footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
body > main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* header and footer are special due to their graphical shoulders */
|
||||
body > header > div, body > header > div:before,
|
||||
body > footer > div, body > footer > div:before {
|
||||
height: var(--main_shoulder_height);
|
||||
}
|
||||
|
||||
body > header {
|
||||
margin-bottom: var(--main_table_gutter);
|
||||
}
|
||||
|
||||
body > footer {
|
||||
margin-top: var(--main_table_gutter);
|
||||
}
|
||||
|
||||
body > header > div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin:
|
||||
0 var(--main_bar_terminator_width)
|
||||
0 var(--main_shoulder_width);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body > header,
|
||||
body > footer {
|
||||
border-top-left-radius: calc(
|
||||
var(--main_bar_height) * 2.66)
|
||||
calc(var(--main_bar_height) * 1.33
|
||||
);
|
||||
background:
|
||||
url(ui/main_shoulder.png) no-repeat top left,
|
||||
url(ui/main_horizontal_bar_end.png) no-repeat top right;
|
||||
}
|
||||
|
||||
body > footer,
|
||||
body > footer > div,
|
||||
body > footer > div:before {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
body > header > div:before,
|
||||
body > footer > div:before {
|
||||
width: 100%;
|
||||
content: "";
|
||||
background:
|
||||
url(ui/main_horizontal_bar.png)
|
||||
repeat-x;
|
||||
}
|
||||
|
||||
body > footer > div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin:
|
||||
0 var(--main_bar_terminator_width)
|
||||
0 var(--main_shoulder_width);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* every element inside main > div is a widget! */
|
||||
body > main > div {
|
||||
color: var(--lcars-atomic-tangerine);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: var(--main_area_height);
|
||||
overflow-y: scroll; /* this has to stay for scroll-snapping to work */
|
||||
overflow-x: hidden;
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
body > main > div > .widget {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 0 0 auto;
|
||||
height: var(--main_widget_height);
|
||||
scroll-snap-align: start;
|
||||
border-bottom: var(--main_table_gutter) solid var(--background);
|
||||
border-right: calc(var(--main_table_gutter) * 2) solid var(--background);
|
||||
}
|
||||
|
||||
body > main > div .single_screen {
|
||||
width: 100%;
|
||||
height: var(--main_area_height);
|
||||
padding-left: calc(var(--main_widget_shoulder_width));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--main-bar-color) 0,
|
||||
var(--main-bar-color) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
|
||||
var(--background) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
|
||||
var(--background) 100%
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div .single_screen a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
::-webkit-scrollbar {
|
||||
width: var(--main_bar_terminator_width);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--lcars-tanoi);
|
||||
border-radius: 1.25em;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--lcars-atomic-tangerine);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* This file contains some nasty style adjustments to accommodate ridiculously small screens.
|
||||
* I don't care how it looks like there as long as it's usable.
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
:root {
|
||||
--main_widget_shoulder_width: calc(
|
||||
var(--main_shoulder_width) / 2
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/* this one will remove table-cell restrictions and kinda condense the table-row. This will be a bit untidy in looks,
|
||||
but more data will be available on very small screens */
|
||||
@media only screen and (max-width: 960px) {
|
||||
body > main > div > .widget > main > table.data_table > tbody > tr {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import url("310-header_widgets.css");
|
||||
|
||||
body > header > div > hgroup {
|
||||
position: absolute;
|
||||
right: 0; top: 0;
|
||||
}
|
||||
|
||||
body > header > div > hgroup > h1 {
|
||||
font-size: var(--main_bar_height);
|
||||
color: var(--lcars-tanoi);
|
||||
background-color: var(--background);
|
||||
|
||||
font-family: "SWISS 911 Ultra Compressed BT", sans-serif;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.25em;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body > header > div #header_widgets {
|
||||
position: absolute;
|
||||
height: calc(var(--main_shoulder_height) - var(--main_bar_height));
|
||||
right: 0; bottom: 0; left: 0;
|
||||
display: flex;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
body > header > div > #header_widgets > .widget {
|
||||
padding-right: 0.25em;
|
||||
color: black;
|
||||
padding-top: var(--main_table_gutter)
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > .widget > div {
|
||||
background-color: var(--lcars-atomic-tangerine);
|
||||
border-radius: 12px; padding: 0 1em;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #login_logout_widget {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #login_logout_widget a {
|
||||
color: var(--background)
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gameserver_status_widget > div.active {
|
||||
background-color: var(--lcars-tanoi);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gameserver_status_widget > div.inactive {
|
||||
background-color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gameserver_status_widget span > a,
|
||||
body > header > div > #header_widgets > #gameserver_status_widget span > a:visited {
|
||||
color: var(--lcars-blue-bell);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gameserver_status_widget span > a {
|
||||
display: inline-block;
|
||||
padding: 0 calc(var(--main_table_gutter) / 2);
|
||||
border-left: calc(var(--main_table_gutter) / 2) solid var(--background);
|
||||
border-right: calc(var(--main_table_gutter) / 2) solid var(--background);
|
||||
color: var(--background); /* Edge seems to require this */
|
||||
background-color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gameserver_status_widget span > a:hover,
|
||||
body > header > div > #header_widgets > #gameserver_status_widget span > a:visited {
|
||||
color: var(--background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gameserver_status_widget span:hover > a {
|
||||
background-color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gametime_widget {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gametime_widget span.time {
|
||||
padding: 0 var(--main_table_gutter);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gametime_widget span.day.bloodday,
|
||||
body > header > div > #header_widgets > #gametime_widget span.time.bloodmoon {
|
||||
color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > header > div > #header_widgets > #gametime_widget span.time.bloodmoon {
|
||||
background-color: var(--background);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import url("410-main_widgets.css");
|
||||
|
||||
body > main > div #unauthorized_disclaimer p {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
body > main > div #unauthorized_disclaimer a,
|
||||
body > main > div #unauthorized_disclaimer a:visited {
|
||||
color: var(--lcars-melrose);
|
||||
text-decoration: None;
|
||||
}
|
||||
@@ -0,0 +1,466 @@
|
||||
@import url("411-main_widgets_webserver_status_widget.css");
|
||||
@import url("412-main_widgets_telnet_log_widget.css");
|
||||
@import url("413-main_widgets_manage_players_widget.css");
|
||||
@import url("414-main_widgets_manage_locations_widget.css");
|
||||
@import url("415-main_widgets_manage_entities_widget.css");
|
||||
|
||||
body > main > div > .widget > main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body > main > div > .widget main a {
|
||||
border-radius: 0.5em;
|
||||
font-family: "SWISS 911 Ultra Compressed BT", sans-serif;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
body > main > div > .widget main a,
|
||||
body > main > div > .widget main a:visited {
|
||||
background-color: var(--lcars-melrose);
|
||||
color: black;
|
||||
}
|
||||
|
||||
body > main > div > .widget main a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body > main > div > .widget main span.active a {
|
||||
background-color: var(--lcars-tanoi);
|
||||
}
|
||||
|
||||
body > main > div > .widget main span.inactive a {
|
||||
background-color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > main > div > .widget main .select_button a {
|
||||
border-radius: 0;
|
||||
padding: 0 0.75em;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tbody > tr > td {
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
padding: 0 calc(var(--main_table_gutter) / 2);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tbody > tr > td:last-child {
|
||||
padding-right: var(--main_table_gutter);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > thead tr:last-child {
|
||||
/* this contains the header stuff for the widget-content */
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table.data_table > tbody > tr > td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tfoot > tr > td > div > span.active,
|
||||
body > main > div > .widget .pull_out > div > span.active {
|
||||
background-color: var(--lcars-lilac);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tfoot > tr > td > span.inactive,
|
||||
body > main > div > .widget .pull_out > div > span.inactive {
|
||||
background-color: var(--lcars-hopbush);
|
||||
}
|
||||
|
||||
body > main > div > .widget .pull_out > div > span.info {
|
||||
background-color: var(--lcars-tanoi);
|
||||
}
|
||||
|
||||
body > main > div > .widget .pull_out > div > span.info > div > span {
|
||||
margin-left: 0.5em;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body > main > div > .widget .pull_out span a,
|
||||
body > main > div > .widget .pull_out span a:visited,
|
||||
body > main > div > .widget .pull_out span > div {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog {
|
||||
position: absolute;
|
||||
top: var(--main_table_gutter);
|
||||
bottom: 5.5em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog .modal-content {
|
||||
padding: 1em;
|
||||
color: var(--lcars-blue-bell);
|
||||
background-color: var(--background);
|
||||
border: var(--main_table_gutter) solid var(--lcars-chestnut-rose);
|
||||
|
||||
border-radius: 0 1em 0.5em 1.5em / 0 1em 0.5em 1em;
|
||||
height: calc(100% + 1em);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog .modal-content a,
|
||||
body > main > div > .widget > main .dialog .modal-content p {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal {
|
||||
color: var(--lcars-tanoi);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal header,
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal div.dynamic_content_size {
|
||||
overflow: auto;
|
||||
margin: calc(var(--main_bar_height) / 2) 0;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal div.dynamic_content_size::-webkit-scrollbar {
|
||||
width: calc(var(--main_bar_terminator_width) / 1.66);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal div:last-child {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main .dialog.open .modal-content .delete_modal div section {
|
||||
flex: 1 1 auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tbody {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
height: calc(
|
||||
var(--main_widget_height)
|
||||
- var(--main_widget_bar_height)
|
||||
- var(--main_table_caption_height)
|
||||
);
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table.data_table > tbody {
|
||||
height: calc(
|
||||
var(--main_widget_height)
|
||||
- var(--main_widget_bar_height)
|
||||
- var(--main_table_header_height)
|
||||
- var(--main_table_footer_height)
|
||||
- var(--main_table_caption_height)
|
||||
);
|
||||
|
||||
max-width: calc(
|
||||
100vw
|
||||
- var(--main_widget_shoulder_width)
|
||||
- var(--main_bar_terminator_width)
|
||||
- 1em
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table.data_table > tbody tr {
|
||||
max-width: calc(
|
||||
100vw
|
||||
- var(--main_widget_shoulder_width)
|
||||
- var(--main_bar_terminator_width)
|
||||
- 1em
|
||||
- var(--main_bar_terminator_width)
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > thead > tr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table.data_table > thead > tr {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: var(--main_table_header_height);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table.data_table > thead > tr > th {
|
||||
display: inline-block;
|
||||
margin: var(--main_table_gutter);
|
||||
height: calc(
|
||||
var(--main_table_header_height)
|
||||
- (var(--main_table_gutter) * 2)
|
||||
);
|
||||
line-height: calc(
|
||||
var(--main_table_header_height)
|
||||
- (var(--main_table_gutter) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table.data_table > thead > tr > th:last-child {
|
||||
margin-right: var(--main_bar_terminator_width);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_input,
|
||||
body > main > div > .widget > main table.box_select {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select tfoot td,
|
||||
body > main > div > .widget > main table.box_input tfoot td {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select input[disabled],
|
||||
body > main > div > .widget > main table.box_input input[disabled] {
|
||||
background-color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select tfoot tr td,
|
||||
body > main > div > .widget > main table.box_input tfoot tr td {
|
||||
color: var(--background);
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select tfoot tr td > div,
|
||||
body > main > div > .widget > main table.box_input tfoot tr td > div {
|
||||
/* background-image: linear-gradient(to right, var(--background), var(--lcars-melrose), var(--lcars-melrose), var(--lcars-melrose)); */
|
||||
background-color: var(--lcars-melrose);
|
||||
text-align: right;
|
||||
line-height: 1em;
|
||||
font-size: 0.9em;
|
||||
padding: 0.8em;
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select td {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* checkbox styling */
|
||||
body > main > div > .widget > main table.box_select label.slider {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select label.slider [type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select .slider [type="checkbox"] + span {
|
||||
color: var(--background);
|
||||
display: block;
|
||||
background: var(--lcars-chestnut-rose);
|
||||
padding: var(--main_table_gutter);
|
||||
margin: var(--main_table_gutter);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select .slider:hover [type="checkbox"] + span,
|
||||
body > main > div > .widget > main table.box_select .slider :checked + span {
|
||||
background: var(--lcars-tanoi);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main table.box_select .slider [type="checkbox"][disabled] + span {
|
||||
background: var(--lcars-orange-peel);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > thead {
|
||||
max-height: var(--main_table_header_height);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tfoot {
|
||||
max-height: var(--main_table_footer_height);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > caption {
|
||||
/* display: none; */
|
||||
max-height: var(--main_table_caption_height);
|
||||
border-top: 0.5em solid var(--background);
|
||||
margin-right: calc(
|
||||
var(--main_bar_terminator_width) / 2
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body > main > div > .widget > header {
|
||||
width: 100%;
|
||||
background-color: var(--lcars-hopbush);
|
||||
border-radius: 1.5em 1.5em 1.5em 0;
|
||||
height: var(--main_bar_height);
|
||||
}
|
||||
|
||||
body > main > div > .widget > header > div > span {
|
||||
font-size: var(--main_widget_bar_height);
|
||||
line-height: 1em;
|
||||
color: var(--background);
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside {
|
||||
flex: 0 0 var(--main_widget_shoulder_width);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--main-bar-color) 0,
|
||||
var(--main-bar-color) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
|
||||
var(--background) calc(var(--main_widget_shoulder_width) - var(--main_shoulder_gap)),
|
||||
var(--background) 100%
|
||||
);
|
||||
height: calc(
|
||||
var(--main_widget_height) - var(--main_widget_bar_height)
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main {
|
||||
flex: 1 0 calc(
|
||||
100%
|
||||
- var(--main_widget_shoulder_width)
|
||||
);
|
||||
overflow-y: auto;
|
||||
height: calc(
|
||||
var(--main_widget_height) - var(--main_widget_bar_height)
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside > div {
|
||||
width: var(--main_widget_shoulder_width);
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside > div > div {
|
||||
border-top: var(--main_table_gutter) solid var(--background);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside > div > div:last-child {
|
||||
border-bottom: var(--main_table_gutter) solid var(--background);
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside > div > div > span {
|
||||
display: block;
|
||||
background-color: var(--lcars-hopbush);
|
||||
margin-right: var(--main_shoulder_gap);
|
||||
line-height: var(--main_shoulder_height);
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside > div > div > span {
|
||||
border-radius: var(--main_table_gutter);
|
||||
}
|
||||
|
||||
body > main > div > .widget > aside > div > div > span.info {
|
||||
border-radius: unset;
|
||||
line-height: calc(var(--main_shoulder_height) / 2);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tfoot > tr {
|
||||
height: var(--main_table_footer_height);
|
||||
line-height: var(--main_table_footer_height);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tfoot > tr > td {
|
||||
height: calc(
|
||||
var(--main_table_footer_height)
|
||||
- var(--main_table_gutter)
|
||||
);
|
||||
line-height: calc(
|
||||
var(--main_table_footer_height)
|
||||
- var(--main_table_gutter)
|
||||
);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
body > main > div > .widget > main > table > tfoot > tr > td > div {
|
||||
background-color: var(--lcars-tanoi);
|
||||
padding-left: calc(var(--main_shoulder_width) / 2);
|
||||
border-radius: 0 1em 1em 2em / 0 1em 1em 2em;
|
||||
}
|
||||
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button {
|
||||
display: inline-block;
|
||||
border-left: 0.25em solid var(--background);
|
||||
border-right: 0.25em solid var(--background);
|
||||
}
|
||||
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span a,
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.active a,
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.active {
|
||||
background-color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.inactive a,
|
||||
body > main > div > .widget main > table > tfoot > tr > td > div .delete_button span.inactive {
|
||||
background-color: var(--lcars-tanoi);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main tr td[id$="_actions"] > span {
|
||||
padding-right: var(--main_table_gutter);
|
||||
}
|
||||
|
||||
body > main > div > .widget > main tr td[id$="_actions"] > span:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* making the standard order the middle instead of 0 */
|
||||
body > main > div > .widget {
|
||||
order: 500;
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget {
|
||||
order: -4;
|
||||
flex: 1 0 calc(
|
||||
960px
|
||||
- var(--main_table_gutter) * 2
|
||||
- var(--main_bar_terminator_width)
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > #webserver_status_widget {
|
||||
order: -3;
|
||||
flex: 1 0 calc(
|
||||
480px
|
||||
- var(--main_table_gutter) * 2
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget {
|
||||
order: -2;
|
||||
flex: 1 0 calc(
|
||||
860px
|
||||
- var(--main_table_gutter) * 2
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > #manage_entities_widget {
|
||||
order: -1;
|
||||
flex: 1 0 calc(
|
||||
768px
|
||||
- var(--main_table_gutter) * 2
|
||||
);
|
||||
}
|
||||
|
||||
body > main > div > #telnet_log_widget {
|
||||
order: 999;
|
||||
flex: 1 0 calc(
|
||||
768px
|
||||
- var(--main_table_gutter) * 2
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
body > main > div > #telnet_log_widget {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body > main > div > #telnet_log_widget .log_line {
|
||||
/* log entries seem to be traditionally blue in LCARS ^^ */
|
||||
color: var(--lcars-blue-bell);
|
||||
}
|
||||
|
||||
body > main > div > #telnet_log_widget .log_line td {
|
||||
white-space: normal;
|
||||
padding-left: calc(var(--main_shoulder_width) / 3);
|
||||
text-indent: calc(-1 * calc(var(--main_shoulder_width) / 3));
|
||||
}
|
||||
|
||||
body > main > div > #telnet_log_widget tr.game_chat,
|
||||
body > main > div > #telnet_log_widget caption span.game_chat {
|
||||
color: var(--lcars-hopbush);
|
||||
}
|
||||
|
||||
body > main > div > #telnet_log_widget tr.player_logged,
|
||||
body > main > div > #telnet_log_widget caption span.player_logged {
|
||||
color: var(--lcars-anakiwa);
|
||||
}
|
||||
|
||||
body > main > div > #telnet_log_widget tr.bot_command,
|
||||
body > main > div > #telnet_log_widget caption span.bot_command {
|
||||
color: var(--lcars-cosmic);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
body > main > div > #manage_players_widget > main > table > tbody > tr > td[id$='_name'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget tbody#player_table > tr:hover * {
|
||||
background-color: var(--lcars-tanoi);
|
||||
color: var(--background)
|
||||
}
|
||||
|
||||
/* player status */
|
||||
/* offline */
|
||||
body > main > div > #manage_players_widget caption span:not(.is_online):not(.is_initialized),
|
||||
body > main > div > #manage_players_widget tbody > span:not(.is_online):not(.is_initialized),
|
||||
body > main > div > #manage_players_widget tbody > tr:not(.is_online):not(.is_initialized) {
|
||||
color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
/* offline and dead */
|
||||
body > main > div > #manage_players_widget caption span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health),
|
||||
body > main > div > #manage_players_widget tbody > span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health),
|
||||
body > main > div > #manage_players_widget tbody > tr.in_limbo:not(.is_online):not(.is_initialized):not(.has_health) {
|
||||
color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
/* special fading animation for offline players currently dead */
|
||||
body > main > div > #manage_players_widget caption span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health),
|
||||
body > main > div > #manage_players_widget tbody > span.in_limbo:not(.is_online):not(.is_initialized):not(.has_health) td:nth-child(n+3),
|
||||
body > main > div > #manage_players_widget tbody > tr.in_limbo:not(.is_online):not(.is_initialized):not(.has_health) td:nth-child(n+3) {
|
||||
animation: blinker 4s linear infinite;
|
||||
}
|
||||
|
||||
/* online and logging in */
|
||||
body > main > div > #manage_players_widget caption span.is_online:not(.is_initialized).in_limbo,
|
||||
body > main > div > #manage_players_widget tbody > span.is_online:not(.is_initialized).in_limbo,
|
||||
body > main > div > #manage_players_widget tbody > tr.is_online:not(.is_initialized).in_limbo {
|
||||
color: var(--lcars-tanoi);
|
||||
}
|
||||
/* special fading animation for players currently logging in */
|
||||
body > main > div > #manage_players_widget caption span.is_online:not(.is_initialized).in_limbo,
|
||||
body > main > div > #manage_players_widget tbody > span.is_online:not(.is_initialized).in_limbo td:nth-child(n+3),
|
||||
body > main > div > #manage_players_widget tbody > tr.is_online:not(.is_initialized).in_limbo td:nth-child(n+3) {
|
||||
animation: blinker 3s linear infinite;
|
||||
}
|
||||
|
||||
/* online */
|
||||
body > main > div > #manage_players_widget caption span.is_online.is_initialized:not(.in_limbo),
|
||||
body > main > div > #manage_players_widget tbody > span.is_online.is_initialized:not(.in_limbo),
|
||||
body > main > div > #manage_players_widget tbody > tr.is_online.is_initialized:not(.in_limbo) {
|
||||
color: var(--lcars-tanoi);
|
||||
}
|
||||
/* online and dead */
|
||||
body > main > div > #manage_players_widget caption span.is_online.is_initialized.in_limbo,
|
||||
body > main > div > #manage_players_widget tbody > span.is_online.is_initialized.in_limbo,
|
||||
body > main > div > #manage_players_widget tbody > tr.is_online.is_initialized.in_limbo {
|
||||
color: var(--lcars-atomic-tangerine);
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_id"],
|
||||
body > main > div > #manage_players_widget tr[id^="player_table_row_"] td[class="position"],
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_ping"],
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_last_updated_servertime"],
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_last_seen_gametime"] {
|
||||
font-size: 0.90em;
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_name"] {
|
||||
max-width: 10em;
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_health"]:before {
|
||||
content: "\2665";
|
||||
padding-right: var(--main_table_gutter);
|
||||
padding-left: calc(var(--main_table_gutter) * 2);
|
||||
color: var(--lcars-chestnut-rose);
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_pos"] span {
|
||||
width: 1.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_pos"]:before {
|
||||
padding-left: calc(var(--main_table_gutter) * 2);
|
||||
color: var(--lcars-chestnut-rose);
|
||||
content: "\2691";
|
||||
}
|
||||
|
||||
body > main > div > #manage_players_widget td[id^="player_table_row_"][id$="_zombies"]:before {
|
||||
color: var(--lcars-chestnut-rose);
|
||||
content: "\2620";
|
||||
padding-right: var(--main_table_gutter);
|
||||
padding-left: calc(var(--main_table_gutter) * 2);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
body > main > div > #manage_locations_widget > main > table > tbody > tr > td[id$='_name'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget tbody#location_table > tr:hover * {
|
||||
background-color: var(--lcars-tanoi);
|
||||
color: var(--background)
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget #current_player_pos > span > div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget #current_player_pos > span > div > div {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget #current_player_pos > span > div > div:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget #current_player_pos > span > div > label {
|
||||
flex: 0;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget #current_player_pos > span > div > label:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
body > main > div > #manage_locations_widget #current_player_pos > span > div > label input {
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
margin: 0; padding: 0;
|
||||
width: 2.5em;
|
||||
text-align: right;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body > main > div > main > div > #manage_locations_widget #current_player_pos > span > div > label:nth-child(2) input {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_id"],
|
||||
body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_last_changed"],
|
||||
body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_coordinates"],
|
||||
body > main > div > main > div > #manage_locations_widget td[id^="location_table_row_"][id$="_owner"] {
|
||||
font-size: 0.90em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
body > main > div > #manage_entities_widget > main > table > tbody > tr > td[id$='_name'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body > main > div > #manage_entities_widget tbody#entity_table > tr:hover * {
|
||||
background-color: var(--lcars-tanoi);
|
||||
color: var(--background)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import url("310-header_widgets.css");
|
||||
|
||||
footer > div > p {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
Binary file not shown.
|
After Width: | Height: | Size: 762 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user