R/celgene_css.R

In nicholasjkomarov/celgenethemes: What the Package Does (One Line, Title Case)

celgene_css <- function() {
  # CSS Code For Theme Elements
  tags$head(
    tags$style(
      HTML("
             /* Increase height of main header */
             .main-header {
             max-height: 70px;
             }
             .main-header .logo {
             height: 70px;
             }

             /* Adjust the sidebar to match new header height */
             .left-side, .main-sidebar {
             padding-top: 70px;}

             /* Increases height of sidebar toggle button to match new header height */
             .skin-blue .main-header .sidebar-toggle {
             height: 70px;
             }
             .skin-blue .main-header .sidebar-toggle:hover {
             height: 70px;
             }

             /* Custom side bar toggle icon */
             .main-header .sidebar-toggle:before {
             content: '\\f0c9';
             line-height: 40px;
             }

             /* Sets the logo image to be closer the left border */
             img {
             margin-left: -20px;
             }

             /* Font adjustments to the sidebar titles */
             .skin-blue .main-sidebar .sidebar .sidebar-menu a {
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 14px;
             font-weight: 600;
             line-height: 1.1;
             }

             /* Font adjustments to sidebar titles on hover */
             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover {
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 14px;
             font-weight: 600;
             line-height: 1.1;
             }

             /* Font adjustments to sidebar titles when selected */
             .skin-blue .main-sidebar .sidebar .sidebar-menu .active a {
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 14px;
             font-weight: 600;
             line-height: 1.1;
             }

             /* Fix the all white file input button */
             .skin-blue .input-group-btn .btn {
             background: #4AA1c6;
             color: #FFFFFF;
             border: none;
             }

             /* Main app title styling */
             .skin-blue .main-header .logo {

             }

             /* Box title styling */
             .box-header .box-title {
             color: #293E81;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 16px;
             font-weight: 700;
             line-height: 1.1;
             }

             /* Data table column header styling */
             table.dataTable thead th, table.dataTable tfoot th {
             color: #293E81;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 14px;
             font-weight: 600;
             line-height: 1.1;
             }

             /* Styling for data table and input field labels */
             label {
             color: #293E81;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 14px;
             font-weight: 600;
             line-height: 1.1;
             }

             /* Border color of input fields by default */
             .form-control {
             border-color:#d2d6de;
             background-color: #F8F8F8;
             }

             /* Highlighted border color of input fields when selected */
             .form-control:focus {
             border-color:#3c8dbc;
             background-color: #F8F8F8;
             }

             /* Border color of selectize input fields by default */
             .form-control, .selectize-input, .selectize-control.single,
             .selectize-input {
             border-color:#d2d6de;
             background-color: #F8F8F8;
             }
             .selectize-input.full {
             border-color:#d2d6de;
             background-color: #F8F8F8;
             }

             /* Adjust styling and font of main header on landing page */
             .h1, h1{
             color: #293E81;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 40px;
             font-weight: 700;
             line-height: 1.1;
             margin-top: 0px;
             }

             /* Adjust styling and font of description on landing page */
             .h3, h3{
             color: #293E81;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 22px;
             font-weight: 500;
             line-height: 1.1;
             margin-top: 0px;
             }


             .form-control, .selectize-input, .selectize-control.single
             .selectize-input {
             border-color:#d2d6de;
             background-color: #F8F8F8;
             }

             /* Highlighted border color of selectize input fields when selected */
             .form-control:focus, .selectize-input.focus {
             border-color: #3C8DBC;
             background-color: #F8F8F8;
             }
             .selectize-input,
             .selectize-control.single .selectize-input.input-active {
             background: #F8F8F8;
             border-color: #D2D6DE;
             }

             /* Button label styling */
             .btn {
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 12px;
             font-weight: 600;
             line-height: 1.1;
             }

             /* Input field background color */
             input {
             background-color: #F8F8F8;
             }
             select {
             background-color: #F8F8F8;
             }
             body {
             background-color: #F8F8F8;
             }
             .selectize-dropdown-content {
             background-color: #F8F8F8;
             }
             .selectize-dropdown-content .active {
             background-color: #EBEBEB;
             }

             /* Value box header styling */
             .small-box h3 {
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-weight: 700;
             line-height: 1.1;
             color: #F8F8F8;
             }

             /* Value box subtitle styling */
             .small-box p {
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-weight: 500;
             line-height: 1.1;
             color: #F8F8F8;
             }

             /* Re-adjust default 'aqua' color to Celgene aqua color */
             .bg-aqua {
             background-color: #4AA1C6 !important;
             }

             /* Re-adjust default 'yellow' color to Celgene yellow color */
             .bg-yellow {
             background-color: #D8AE51 !important;
             }

             /* Floating button: color change */
             .bttn-float.bttn-success {
             border-color: #4AA1c6;
             background: rgba(74, 161, 198, 0.8);
             color: #F8F8F8;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 16px;
             font-weight: 700;
             line-height: 1.1;
             padding-top: 12px;
             padding-bottom: 12px;
             }

             /* Floating button: border radius and font */
             .bttn-float {
             border-radius: 8px;
             margin-left: 15px;
             }

             /* Floating button: shorten float distance */
             .bttn-float.bttn-md:focus,
             .bttn-float.bttn-md:hover {
             transform: translateY(-5px);
             }

             /* Selectize input opacity of helptext to match base input helptext*/
             .selectize-input > input {
             opacity: 0.8 !important;
             }

             /* Action Link */
             a {
             color: #293E81;
             }
             a:active, a:focus, a:hover {
             color: #394F92;
             }
             .btn-default:focus, .action-button:focus {
             background: #F8F8F8;
             color: #394F92;
             border: none;
             }

             /* User validation text */
             .h5, h5 {
             color: #CA3433;
             font-family: Source Sans Pro,Helvetica,Arial,sans-serif;
             font-size: 14px;
             font-weight: 400;
             line-height: 1.1;
             }
             div {
             vertical-align: middle !important;
             }

             /* Change the required input asterisk to color red */
             .mandatory_star {
             color: #CA3433;
             }

             /* Left align text in module help-text */
             .swal-content {
             text-align: left;
             }

             ")
    )
  )
}