phs_style.css

/* Define colours */
  :root{
      --white: #FFFFFF;
      --black: #000000;
      --light-grey: #DDDDDD;
      --darkblue: #004785;
      --phs-purple: #3F3685;
      --phs-magenta: #9B4393;
      --phs-blue: #0078D4;
      --phs-green: #83BB26;
      --phs-graphite: #948DA3;
      --phs-teal: #1E7F84;
      --phs-liberty: #6B5C85;
      --phs-rust: #C73918;
      --phs-purple-80: #655E9D;
      --phs-purple-50: #9F9BC2;
      --phs-purple-30: #C5C3DA;
      --phs-purple-10: #ECEBF3;
      --phs-magenta-80: #AF69A9;
      --phs-magenta-50: #CDA1C9;
      --phs-magenta-30: #E1C7DF;
      --phs-magenta-10: #F5ECF4;
      --phs-blue-80: #3393DD;
      --phs-blue-50: #80BCEA;
      --phs-blue-30: #B3D7F2;
      --phs-blue-10: #E6F2FB;
      --phs-green-80: #9CC951;
      --phs-green-50: #C1DD93;
      --phs-green-30: #DAEBBE;
      --phs-green-10: #F3F8E9;
      --phs-graphite-80: #A9A4B5;
      --phs-graphite-50: #CAC6D1;
      --phs-graphite-30: #DFDDE3;
      --phs-graphite-10: #F4F4F6;
      --phs-teal-80: #4B999D;
      --phs-teal-50: #8FBFC2;
      --phs-teal-30: #BCD9DA;
      --phs-teal-10: #E9F2F3;
      --phs-liberty-80: #897D9D;
      --phs-liberty-50: #B5AEC2;
      --phs-liberty-30: #D3CEDA;
      --phs-liberty-10: #F0EFF3;
      --phs-rust-80: #D26146;
      --phs-rust-50: #E39C8C;
      --phs-rust-30: #EEC4BA;
      --phs-rust-10: #F9EBE8;
  }

/* Setting header colour */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--phs-purple);
  }

/* Body styles */
body {
    font-family: Arial;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--white);
  }

/* Style external links */
.externallink {
  color: var(--phs-purple);
  font-weight: bold;
}
.externallink:hover {
  color: var(--phs-teal-50);

}
/* Style in-line hyperlinks (e.g., rmarkdowns using [text](link)) */
a {
  color: var(--phs-purple);
  font-weight: bold;}
a:hover {
  color: var(--phs-teal-50);
}

/* Table of Contents */
.tocify {
    width: 20%;
    max-height: 90%;
    overflow: auto;
    margin-left: 2%;
    position: fixed;
    border: 4px solid var(--phs-purple);
    border-radius: 15px;
}

.tocify .tocify-item a, .tocify .list-group-item {
    padding: 4px;
}

/* Table of Contents List Items */
.list-group-item.active, .list-group-item.active:focus,
  .list-group-item.active:hover {
    z-index: 2;
    color: var(--white);
    background-color: var(--phs-purple-50);
    border-color: var(--darkblue);
}

/* Button styles */

/* Regular button styles */
.btn{
  background-color: var(--phs-purple);
  color: var(--white);
  background-image:none;
  border: 2px solid var(--white);
  border-radius: 10px;
}

/* Hover/active/focus, change text colour purple, background light purple*/
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default,
  .btn-default.hover, .btn-default:hover, .btn-default.focus,
  .btn-default:focus {
    background-color: var(--phs-purple-10);
    border-color: var(--phs-purple);
}

/* tabset panel update, pills style in phs colours */
.nav-pills>li>a {
    border-radius: 4px;
    color: var(--phs-purple);
    font-size: 20px;
}

/* When a tab is active/focus/hover, white text purple background*/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: var(--white);
    background-color: var(--phs-purple);
}

/* Navtabs - the tab styles for tabset panels (default) */
.nav-tabs {
    float: left;
    margin-bottom: -1px;
    color: var(--phs-purple);
    background-color: var(--phs-purple-10);
    font-size: 20px;
}

/* Specific styles for the hyperlink within a tab */
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: var(--phs-purple);
}

/* When the tab is either focused or active (selected) */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: var(--phs-purple);
    cursor: default;
    background-color: var(--white);
    border: 1px solid var(--light-grey);
    border-bottom-color: transparent;
    font-weight: bold;
}

/* When the tab is being hovered over */
/* Mostly adds an underline to be clear content can be clicked */
.nav-tabs>li>a:hover {
    text-decoration: underline;
    color: var(--phs-purple);
    cursor: default;
    border-bottom-color: transparent;
}




.sidebar {
  background-color:var(--white);
}
/* CSS styles used in the shiny app */

/* Style sidebars/well panels */
  .well {background-color:var(--white); border: 0 solid var(--phs-blue);
    padding: 5px; box-shadow: none; }

/* Navigation bar following PHS colour scheme */
.navbar {
  background-color: var(--phs-purple);
  border-color:var(--phs-purple);
}
.navbar-default .navbar-brand, .navbar-default:hover .navbar-brand:hover, .navbar-brand {color: var(--white); background-color: var(--phs-purple)}
.navbar-default .navbar-nav > li > a {color: var(--white);}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
  color: var(--white);
  background-color: var(--phs-purple-80);
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: var(--white);     background-color: var(--phs-purple-80);}

/* Border tables - th, td puts within the table as well */
  .border-table{border:1px solid var(--phs-purple);}
th, td {
  border: 1px solid var(--phs-purple-30);
  padding-right: 1px;
}
.container-fluid {
  padding-right: 15px;
  padding-left: 20px;
  margin-right: 15px;
  margin-left: 15px;
}

/* Title of selectize input boxes*/
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--phs-purple);
  }
/* Links */
  a {
    color: var(--phs-purple);
    text-decoration: none;
  }

/* Dropdown menu */
  .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: var(--white);
    text-decoration: none;
    background-color: var(--phs-teal-50);
    outline: 0;
  }

/* Data table page selectors */

  .pagination > li > a
{
  background-color: var(--phs-liberty-10);
  color: var(--phs-purple);
  transition: background-color .3s;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
  color:var(--phs-purple);
  background-color: var(--phs-teal-50);
  border-color: var(--phs-teal-80);
  border-radius: 5px;
}

.pagination > .active > a
{
  color: var(--phs-purple);
  background-color: var(--phs-teal-50) !Important;
  border: solid 1px var(--phs-teal-50) !Important;
}

.pagination > .active > a:hover
{
  background-color: var(--phs-teal-50) !Important;
  border: solid 1px var(--phs-teal-50);
}

/* data table */

  .table > .tbody > tr.active th,
.table > .tbody > tr.active td{
  background-color: var(--phs-purple);
  color: var(--white);
}

/*


/* CSS styles from flexdashboard */

/*
Comes from https://github.com/rstudio/shinydashboard/blob/main/inst/AdminLTE/AdminLTE.css
* Component: Small Box
* --------------------
*/
.small-box {
  border-radius: 10px;
  position: relative;
  display: block;
  margin-bottom: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.small-box > .inner {
  padding: 10px;
  max-width: 100%;
}
.small-box > .small-box-footer {
  position: relative;
  text-align: center;
  padding: 3px 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.small-box > .small-box-footer:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}
.small-box h3 {
  color: white;
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.small-box p {
  color: white;
  font-size: 20px;
}
.small-box p > small {
  display: block;
  color: #f9f9f9;
  font-size: 13px;
  margin-top: 5px;
}
.small-box h3,
.small-box p {
  z-index: 5;
}
.small-box .icon {
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 0;
  font-size: 90px;
  color: rgba(0, 0, 0, 0.15);
}
.small-box:hover {
  text-decoration: none;
  color: #F9F9F9;
}
.small-box:hover .icon {
  font-size: 95px;
}
@media (max-width: 767px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
    color: white;
  }
  .small-box p {
    font-size: 12px;
  }
}

.small-box .icon-large {
  position: absolute;
  top: auto;
  bottom: 5px;
  right: 5px;
  font-size: 70px;
  color: white;
  /*color: rgba(0, 0, 0, 0.15);*/
}

/* Hack to get the colours we want on shinydashboard varBox */
.small-box.bg-green { background-color:var(--phs-green); !important; color:#000000 !important; }
.small-box.bg-purple { background-color:var(--phs-purple); !important; color:#000000 !important; }
.small-box.bg-blue { background-color:var(--phs-blue); !important; color:#000000 !important; }
.small-box.bg-fuchsia { background-color:var(--phs-magenta); !important; color:#000000 !important; }
.small-box.bg-olive { background-color:var(--phs-graphite); !important; color:#000000 !important; }
.small-box.bg-teal { background-color:var(--phs-teal); !important; color:#000000 !important; }
.small-box.bg-red { background-color:var(--phs-rust); !important; color:#000000 !important; }