interface/themes/color_base.scss

   1 /**
   2  * Stylesheet for flat colors
   3  * The color palette is used to style the various elements in a consistent manner
   4
   5  * LICENSE: This program is free software; you can redistribute it and/or
   6  * modify it under the terms of the GNU General Public License
   7  * as published by the Free Software Foundation; either version 2
   8  * of the License, or (at your option) any later version.
   9  * This program is distributed in the hope that it will be useful,
  10  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  12  * GNU General Public License for more details.
  13  * You should have received a copy of the GNU General Public License
  14  * along with this program. If not, see <http://opensource.org/licenses/gpl-license.php>;.
  15  *
  16  * @package OpenEMR
  17  * @author Ranganath Pathak <pathak@scrs1.org>
  18  * @copyright Copyright (c) 2018 Ranganath Pathak
  19  * @version 1.1
  20  * @license http://opensource.org/licenses/gpl-license.php GNU Public License
  21  * @link http://www.open-emr.org
  22 */
  23
  24 /*
  25     COLOR PALETTE
  26     #{$darkest} - Darkest #{$colorname}*
  27     #{$darker} - Darker #{$colorname}*
  28     #{$dark} - Dark #{$colorname}
  29     #{$mid} - Mid #{$colorname}
  30     #{$midpale} - Mid Pale #{$colorname}*
  31     #{$pale} - Pale #{$colorname}
  32     #{$midpalepale} - Mid Pale Pale #{$colorname}*
  33     #{$palepale} - Pale Pale #{$colorname}*
  34     #{$palepurple} - Pale Purple~
  35     #{$paler} - Paler #{$colorname}
  36     #{$midnightblue} - Midnight Blue~
  37     #{$white} - White*~
  38     * - used in styling buttons and input
  39     ~ - common for all flat stylesheets
  40 */
  41
  42 * {
  43         font-family: /* 1 */
  44                 -apple-system, BlinkMacSystemFont, /* 2 */
  45                 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", /* 3 */
  46                 "Helvetica Neue", sans-serif;
  47 }
  48 html {
  49         font-size: 14px;
  50 }
  51 /* RP_MODIFIED  2/09/2015, 1/17/2016*/
  52
  53 body {
  54         margin: 0px 0px 0px 2px;
  55         /* set the base fontsize for all DOM children */
  56         font-size: 1em;
  57         /* set the base font size for all DOM children */
  58 }
  59
  60 @import "core";
  61
  62 .menu {
  63         font-style: italic;
  64         font-size: 11pt;
  65 }
  66 .menu_selected {
  67         font-style: italic;
  68         font-size: 11pt;
  69 }
  70 .logout {
  71         font-style: italic;
  72         font-size: 11pt;
  73 }
  74 .text {
  75         font-size: 10pt;
  76 }
  77 .required {
  78         font-size: 10pt;
  79 }
  80 .bold {
  81         font-size: 10pt;
  82 }
  83 .alert, .alert-custom {
  84         font-size: 70%;
  85         color: #FF0000;
  86         text-decoration: none;
  87 }
  88 .small {
  89         font-size: 80%;
  90 }
  91 .link {
  92         font-size: 70%;
  93 }
  94 .more {
  95         font-size: 70%;
  96 }
  97 .back {
  98         font-size: 70%;
  99 }
 100 .link_selected {
 101         font-size: 70%;
 102 }
 103 .link_selected:visited {
 104         font-size: 70%;
 105 }
 106 .link_submit {
 107         font-size: 10pt;
 108 }
 109 .items {
 110         font-size: 6pt;
 111 }
 112 .title {
 113         font-size: 12pt;
 114         font-weight: bold;
 115         text-decoration: none;
 116 }
 117
 118 .title_bar {
 119         font-size: 12pt;
 120 }
 121 .title_bar_top {
 122         font-size: 13px;
 123 }
 124
 125 .body_top {
 126         background-color: $paler;
 127 }
 128 /* $top_bg_line RP_MODIFIED 2/8/15 $paler*/
 129
 130 .bgcolor2 {
 131         background-color: $paler;
 132 }
 133 /* $GLOBALS['style']['BGCOLOR2'] RP_MODIFIED 2/8/15 $paler*/
 134
 135
 136 .body_title {
 137         background-color: $dark;
 138 }
 139 /* $title_bg_line FFF RP_MODIFIED 12/22/2012 $dark*/
 140
 141 .body_nav {
 142         background-color: $paler;
 143 }
 144 /* $nav_bg_line RP_MODIFIED 2/8/15 $paler */
 145
 146 .logobar {
 147         background-color: $midnightblue;
 148 }
 149 /* $GLOBALS['logoBarHeight'] RP_MODIFIED 12/22/2012 $midnightblue*/
 150
 151 /* style taken out of the addressbook code and put here instead */
 152
 153 #addressbook_list td {
 154         font-family: Arial, Helvetica, sans-serif;
 155 }
 156 #addressbook_list tr.search {
 157         font-size: 9pt;
 158 }
 159 #addressbook_list tr.head {
 160         font-size: 10pt;
 161         background-color:inherit;
 162 }
 163 #addressbook_list tr.detail {
 164         font-size: 10pt;
 165 }
 166 #addressbook_list .inputtext {
 167         font-family:inherit;
 168         font-size:inherit;
 169         font-weight:inherit;
 170         border-style:inherit;
 171         border-width:inherit;
 172         border-color: inherit;
 173         background-color:inherit;
 174         /* RP_MODIFIED 1/18/2016*/
 175         /* DES_OVERRIDE 5/14/2018 */
 176 }
 177 #addressbook_list .button {
 178         font-family: sans-serif;
 179         font-size: 8pt;
 180         font-weight: bold;
 181 }
 182 .address_names:hover {
 183         color: magenta;
 184 }
 185 .highlight {
 186         color: magenta !important;
 187 }
 188
 189 #reports_list td {
 190         font-size: 8pt;
 191         font-family: helvetica;
 192 }
 193 #reports_list a {
 194         font-size: 8pt;
 195         font-family: helvetica;
 196 }
 197
 198 #documents_list td {
 199         font-family: helvetica;
 200 }
 201 #documents_list a {
 202         font-family: helvetica;
 203 }
 204 #documents_list .treeMenuDefault {
 205         font-style: italic;
 206 }
 207 #documents_list .treeMenuBold {
 208         font-style: italic;
 209         font-weight: bold;
 210 }
 211
 212 /*=============================================================
 213  * Patient Stats
 214  * seen in the patient stats screens
 215  *============================================================*/
 216
 217 #patient_stats .head {
 218         font-size: 10pt;
 219 }
 220 #patient_stats .detail {
 221         font-size: 10pt;
 222 }
 223 /*=============================================================
 224  * Patient Past Encounters and Documents
 225  * seen in the patient encounter screen
 226  *============================================================*/
 227 #patient_pastenc #tooltipdiv {
 228         font-size: 9pt;
 229 }
 230
 231 #addressbook_list tr.evenrow, #searchResults tr:nth-child(even) {
 232         background-color: $white;
 233         /*RP_MODIFIED 1/16/2016 :$pale */
 234 }
 235 #addressbook_list tr.oddrow, #searchResults tr:nth-child(odd), .signout-restore-subheading {
 236         background-color: $palepale;
 237         /*RP_MODIFIED 1/16/2016 $white */
 238 }
 239
 240 @import "buttons/_color";
 241
 242 /*
 243  * TABS A7A7A7
 244 */
 245
 246 ul.tabNav {
 247         margin: 0 0 -4 0;
 248         padding: 0;
 249 }
 250 /*RP_MODIFIED 7/16/2016*/
 251
 252 ul.tabNav li {
 253         margin: 0 1px 0 0;
 254         padding: 6px 0 0;
 255         font-size: 0.8em;
 256 }
 257 ul.tabNav li.current {
 258         padding-top: 0;
 259         font-weight: bold;
 260         font-size: 0.8em;
 261         vertical-align: bottom;
 262         text-align: left;
 263 }
 264 ul.tabNav a {
 265         background: $palepale;
 266         border: solid $dark;
 267         border-width: 3px 1px 0px 1px;
 268         color: #333;
 269         padding: 4px 4px 5px 4px;
 270         border-top-left-radius: 5px;
 271         /*#CFCCF7 RP_MODIFIED 2/11/2015*/
 272         border-top-right-radius: 5px;
 273 }
 274 /*added RP_MODIFIED */
 275
 276 ul.tabNav a:hover {
 277         background-color: $dark;
 278         color: #000000;
 279 }
 280
 281 div.tabContainer div.current {
 282     border: 1px solid $pale;
 283     background: $pale;
 284 }
 285
 286 /*RP_MODIFIED 2/11/2015 */
 287
 288 ul.tabNav li.current a {
 289     background: $pale;
 290     padding: 8px;
 291 }
 292
 293 /*
 294 * REPORTS
 295 */
 296
 297 #report_parameters {
 298         background-color: $palepale;
 299         margin: 10px 0px 5px 0px;
 300 }
 301 #report_parameters table {
 302         border: solid 1px $darkest;
 303 }
 304 #report_parameters>table>tbody>tr>td>table {
 305         border-left: 1px solid $darkest !important;
 306         /*openemr5*/
 307 }
 308 #report_parameters .form-control {
 309         width: auto;
 310 }
 311 #report_results table {
 312         margin-top: 1px;
 313 }
 314 #report_results table thead {
 315         border: solid 1px $darkest;
 316         background-color: inherit;
 317 }
 318 #report_results table th {
 319         border-bottom: 2px solid $darkest;
 320         background-color: inherit;
 321 }
 322 #report_results table td {
 323         padding: 5px;
 324         border-bottom: 1px dashed;
 325         font-size: 0.8em;
 326 }
 327 .report_totals td {
 328         background-color: $palepale;
 329         font-weight: bold;
 330 }
 331 /**
 332 * List-table formatting
 333 **/
 334
 335 .showborder td {
 336         font-size: 9pt;
 337 }
 338 .showborder_head th {
 339         font-size: 9pt;
 340 }
 341 .shownoborder td {
 342         font-size: 9pt;
 343 }
 344 .showborder_long tr td {
 345         font-size: 9pt;
 346 }
 347 /**
 348 * Drug lookup
 349 **/
 350
 351 .drug_lookup {
 352         font-family: helvetica;
 353         font-size: 8pt;
 354         border: 2px outset rgb(102, 102, 102);
 355         background-color: $paler;
 356         /*RP_MODIFIED 2/8/2014 $paler*/
 357 }
 358
 359 /* Style for red font */
 360 .redtext {
 361         font-size: 10pt;
 362 }
 363 /* Style for red font */
 364
 365 @import "navigation-slide/_color";
 366
 367 #sddm li {
 368         padding: 0;
 369         border: 1px solid $paler;
 370         /*RP_MODIFIED 2/8/15 #EAE6FF*/
 371         background: $dark;
 372         /* for non-css3 browsers #999 RP_MODIFIED 2/11/2015 */
 373         filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='$dark', endColorstr='$dark')");
 374         /* for IE b5cbff RP_MODIFIED 2/11/2015 #61a0ff*/
 375         background: -webkit-gradient(linear, left top, left bottom, from($dark), to($dark));
 376         /* for webkit browsers b5cbff RP_MODIFIED 2/11/2015 #61a0ff*/
 377         background: -moz-linear-gradient(top, $dark, $dark);
 378         /* for firefox 3.6+ b5cbff RP_MODIFIED 2/11/2015 #61a0ff*/
 379 }
 380 #sddm li a {
 381         padding: 4px 10px;
 382         color: #004080;
 383         font-size: 0.8em;
 384         font-weight: bold;
 385 }
 386 #sddm li a:hover {
 387         background: $palepale;
 388 }
 389 #sddm div {
 390         display: none;
 391         margin: 0;
 392         padding: 0;
 393         background: #C9F1B5;
 394         border-left: 1px solid #000000;
 395         border-right: 1px solid #000000;
 396         border-bottom: 1px solid #000000;
 397 }
 398 #sddm div a {
 399         background: $paler;
 400         color: #2875DE;
 401         z-index: 10;
 402 }
 403 #sddm div a:hover {
 404         background: $palepale;
 405         color: #000000;
 406 }
 407 .encounter-form-category-li {
 408         z-index: 100;
 409         background-color: $paler !important;
 410 }
 411
 412 .example_menu {
 413         font-size: 70%;
 414 }
 415
 416 .example_menu ul a:Subjective {
 417         font-weight: normal;
 418 }
 419 .example_menu ul a:hover {
 420         background: #f5f5f5;
 421         text-decoration: underline;
 422 }
 423
 424 .div-message {
 425         background-color: white;
 426         color: gray;
 427         margin: 5 0 5 0px;
 428         border: 1px solid $darker;
 429         /*RP_ADDED 7/5/2016*/
 430         padding: 5px;
 431         width: 648px;
 432 }
 433 .signout-content {
 434         background: $paler;
 435         /*RP_ADDED 8/27/2016*/
 436 }
 437 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~search div ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 438
 439 div.section, div.borderbox {
 440         border-color: $darkest !important;
 441         background-color: $palepale;
 442 }
 443 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~search div ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 444
 445 @import "colors/openemr5/login";
 446 @import "colors/openemr5/fee-sheet";
 447 @import "colors/openemr5/tabs-full";
 448
 449 /* Form styles */
 450
 451 .formtable {
 452         font-size: 13px;
 453 }
 454
 455 .report_search_bar {
 456         background-color: $palepale;
 457 }
 458
 459 .error-message {
 460         font-size: 11px;
 461 }
 462 /* flow board filters*/
 463
 464 #flow_board_parameters {
 465         width: 1041px;
 466         background-color: $palepale;
 467 }
 468 #flow_board_parameters table {
 469         border: solid 1px $darkest;
 470 }
 471
 472 .divider {
 473         border-color: $darkest !important;
 474 }
 475 /* flow board filters*/
 476
 477 @import "colors/openemr5/external-data";
 478 @import "colors/openemr5/ros";
 479 @import "colors/openemr5/codes";
 480 @import "colors/openemr5/bootstrap-nav-menu";
 481 @import "colors/openemr5/bootstrap";
 482
 483 #globals_form_search {
 484         margin-top: -3px;
 485         padding: 2px 3px 1px 3px;
 486 }
 487 th.currentvalues, th.historicalvalues {
 488         background: $dark !important;
 489 }
 490
 491 @import "colors/openemr5/batch-payments";
 492 @import "colors/openemr5/recall-flow-board";
 493 @import "colors/openemr5/help-files";
 494 @import "oe-common/all-common-import";
 495
 496 @include if-rtl {
 497         @include rtl_style;
 498 }