Files
l5rx-chiaroscuro/system/l5r-ui/css/l5rui.css
2020-12-09 19:10:12 +01:00

383 lines
11 KiB
CSS

/*************************************************************/
/*=================== Image Background ======================*/
/*************************************************************/
body {
background: url(../ui/frames/background.webp) no-repeat center;
background-size: cover;
}
/*************************************************************/
/*======================= SIDEBAR ===========================*/
/*************************************************************/
.collapse::before{
content: "";
}
#sidebar.collapsed {
width: 75px !important;
height: 410px !important;
padding-left: 5px;
border: 15px solid transparent;
border-image-source: url(../ui/frames/Chat-box.webp);
border-image-slice: 35 fill;
background-position: center !important;
background-size: 100% 100%!important;
background-repeat: no-repeat;
}
#sidebar-tabs{
text-align: center;
}
#sidebar #sidebar-tabs > .item {
line-height: 0px;
}
#sidebar #sidebar-tabs i.fa-comments {
content: "";
background-image: url("../ui/sidebar/sidebar_button-chat.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar-tabs {
height: 64px;
}
#sidebar-tabs > .item {
line-height: 0px;
height: 32px;
}
#sidebar-tabs > .item.active {
color: #FFF;
border: 1px solid red;
box-shadow: 0 0 6px inset #ff6400;
}
#sidebar #sidebar-tabs i.fa-comments::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-fist-raised {
content: "";
background-image: url("../ui/sidebar/sidebar_button-combat-tracker.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-fist-raised::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-map {
content: "";
background-image: url("../ui/sidebar/sidebar_button-scenes.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-map::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-users {
content: "";
background-image: url("../ui/sidebar/sidebar_button-actors.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-users::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-suitcase {
content: "";
background-image: url("../ui/sidebar/sidebar_button-object.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-suitcase::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-book-open {
content: "";
background-image: url("../ui/sidebar/sidebar_button-journal.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-book-open::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-th-list {
content: "";
background-image: url("../ui/sidebar/sidebar_button-rolltable.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-th-list::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-music {
content: "";
background-image: url("../ui/sidebar/sidebar_button-playlist.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-music::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-atlas {
content: "";
background-image: url("../ui/sidebar/sidebar_button-compendium.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-atlas::before {
content: "";
}
#sidebar #sidebar-tabs i.fa-cogs {
content: "";
background-image: url("../ui/sidebar/sidebar_button-settings.webp") !important;
width: 100% !important;
height: 100% !important;
display: inline-block !important;
background-position:center !important;
background-size:cover !important;
}
#sidebar #sidebar-tabs i.fa-cogs::before {
content: "";
}
/*************************************************************/
/*======================= CHAT TAB ==========================*/
/*************************************************************/
#chat-message{
background-image: url(../ui/frames/chat-texture.webp) !important;
}
.polyglot-lang-select{
color: darkgoldenrod !important;
}
.polyglot-lang-select select {
font-family: CaslonPro;
font-weight: 500;
font-size: 14px;
text-align: left;
position: relative;
height: 24px;
top: 10px;
padding-top: 0px;
background: url(../ui/frames/chat-texture.webp) repeat !important;
background-position-x: 0%;
background-position-y: 0%;
background-position: initial;
box-shadow: inset 0 0 10px #000000;
border-image: url(../ui/frames/chat-controls-border.webp) 4 repeat;
border-image-width: 4px;
color: #520000;
margin-top: -10px;
}
#sidebar .sidebar-tab #chat-controls div.roll-type-select select {
font-family: CaslonPro;
font-weight: 500;
font-size: 14px;
text-align: left;
position: relative;
height: 24px;
top: 7px;
padding-top: 3px;
background: url(../ui/frames/chat-texture.webp) repeat;
background-position-x: 0%;
background-position-y: 0%;
background-position: initial;
box-shadow: inset 0 0 10px #000000;
border-image: url(../ui/frames/chat-controls-border.webp) 4 repeat;
border-image-width: 4px;
border-image-outset: 3px 2px 2px 2px;
color: #520000;
}
/*************************************************************/
/*====================== COMBAT TAB =========================*/
/*************************************************************/
#combat-controls .combat-control{
background-image: url(../ui/buttons/button-red.webp);
text-align: center;
background-position: center !important;
background-size: 260px 100%!important;
background-repeat: no-repeat;
}
/*************************************************************/
/*================= SIDEBAR FOLDER & WIDGETS ================*/
/*************************************************************/
.sidebar-tab .directory-header .header-search {
align-items: baseline;
}
.sidebar-tab .directory-header button {
background-image: url(../ui/buttons/button-green.webp);
text-align: center;
background-position: center !important;
background-size: 100% 100% !important;
background-repeat: no-repeat;
min-height: 32px;
border: 0px solid #b5b3a4;
color : white;
text-shadow: 2px 2px black ;
}
.sidebar-tab .directory-footer button{
background-image: url(../ui/buttons/button-green.webp);
text-align: center;
background-position: center !important;
background-size: 100% 100% !important;
background-repeat: no-repeat;
min-height: 32px;
border: 0px solid #b5b3a4;
color : white;
text-shadow: 2px 2px black ;
}
/*************************************************************/
/*=============== SIDEBAR FOLDERs AS BUTTONS ================*/
/*************************************************************/
.sidebar-tab .folder .folder-header {
background-image: url(../ui/buttons/button-grey-light.webp) !important;
text-align: left !important;
background-position: center !important;
background-size: 100% 55px!important;
background-repeat: no-repeat !important;
padding-top: 15px;
padding-bottom: 10px;
color: white;
padding-left: 25px;
}
.sidebar-tab .directory-list .directory.item h3 {
text-align: left !important;
padding-left: 25px;
}
#sidebar section.sidebar-directory ol.directory-list li.directory-item.folder header {
align-items: baseline;
text-align: left !important;
padding-left: 25px;
}
.subdirectory .folder {
border-left: 2px solid #585858 !important;
}
/*************************************************************/
/*================== COMPENDIUM HEADERS =====================*/
/*************************************************************/
#compendium h3 {
text-align: left;
position: relative;
height: 55px;
top: 7px;
padding-top: 20px;
padding-left: 30px;
background: url(../ui/buttons/button-red.webp) no-repeat;
background-position-x: 0%;
background-size: 100% 55px;
background-position-y: 0%;
background-position: initial;
box-shadow: inset 0 0 10px #000000;
border-image: url(../ui/frames/chat-controls-border.webp) 4 repeat;
border-image-width: 4px;
border-image-outset: 3px 2px 2px 2px;
color: #eeede0;
text-shadow: 2px 2px 4px #000000;
}
#compendium ol.compendium-list {
padding-left: 25px;;
}
/* #endregion */
#settings button {
background-image: url(../ui/buttons/button-blue.webp);
background-size: cover;
background-repeat: no-repeat;
border: 1px solid black;
color: white;
font-size: 14px;
height: 100%;
width: 100%;
}
/* #region Remove speaker name background colors in Chat window */
#chat-log .message .message-header .message-sender {
background-color: rgba(0,0,0,0) !important;
}
/* #endregion */
/* #region Fix so as not to bigfoot on VTTA's tag system */
#sidebar section > ol.directory-list > li header > span.vtta-folder-label {
text-shadow: 0px 0px 0px black !important;
}
/* #endregion */
/* #region Chat log */
/* differentiate public roll from private or blind.
Private uses class whisper, blind uses class blind AND whisper, Self Roll
uses class whisper (identical to Private Roll for CSS) */
#chat-log .message.whisper {
font-style: italic;
}
#chat-log .message.whisper .message-header .message-metadata::before{
color: #585858;
content: " (Private Roll) ";
float: left;
}
#chat-log .message.blind .message-header .message-metadata::before{
color: #585858;
content: " (Blind Roll) " !important;
float: left;
}