isite/apps/client-side/site_files/css/theme.css

Create High Level Multi-Language Web Site [Fast and Easy]

:root {
  --theme-color: #283e4a;
  --theme-color2: #2f8033;
  --font-family: 'Arabic', sans-serif, Tahoma, serif;
  --font-weight: normal;
  --font-size: 14px;
  --line-height: 1.4;
  --float: left;
  --direction: ltr;
  --text-align: left;
  --color: #ffffff;
  --background-color: #607d8b;
  --box-shadow-color: #272727;
  --border: 1px solid #353535;
  --zoom: 90%;
  --user-select: text;

  --body-background: #607d8b;
  --body-margin-top: 70px;
  --body-margin-bottom: 200px;

  --h-font-weight: normal;

  --navbar-color: #fff;
  --navbar-span-color: #ffffff;
  --navbar-background-color: #283e4a;
  --navbar-box-shadow-color: #272727;
  --navbar-li-border-radius: 8px;
  --navbar-li-border: none;

  --tabs-color: #fff;
  --tabs-background-color: #283e4a;
  --tabs-background-color2: rgb(60, 85, 97);
  --tabs-header-width: 20%;
  --tabs-content-width: 80%;
  --tabs-header-link-color: #ffffff;
  --tabs-header-link-color2: #ffffff;
  --tabs-header-link-background: none;
  --tabs-header-link-border: none;
  --tabs-header-link-border-bottom: none;
  --tabs-header-link-radius: 4px;
  --tab-animation-name: animatetabs;
  --tab-animation-duration: 0.5s;

  --treeview-color: #ffffff;
  --treeview-color2: #ffffff;
  --treeview-background-color: none;
  --treeview-border-color: #000000;
  --treeview-background-color2: rgb(60, 85, 97);
  --treeview-display-color: #0000ff;

  --form-color: #ffffff;
  --form-background-color: none;
  --label-font-size: 12px;
  --label-font-weight: bold;
  --label-text-align: center;

  --input-color: #ffeb3b;
  --input-background-color: #3c5d6f;
  --input-height: 33px;
  --input-padding: 6px 12px;
  --input-font-size: 14px;
  --input-font-wight: bold;
  --input-border-radius: 4px;
  --input-border-width: 1px;
  --input-border-color: #272727;
  --input-focus-border-width: 2px;
  --input-focus-border-color: var(--input-color);

  --textarea-border-width: 1px;
  --select-appearance: menulist;
  --select-font-size: 14px;
  --select-color: #000000;
  --select-height: 33px;

  --btn-color: #ffffff;
  --btn-background: #283e4a;
  --btn-add-color: #ffffff;
  --btn-add-background-color: #118011;
  --btn-update-color: #ffffff;
  --btn-update-background-color: #117380;
  --btn-save-color: #ffffff;
  --btn-save-background-color: #117380;
  --btn-delete-color: #ffffff;
  --btn-delete-background-color: #801117;
  --btn-view-color: #ffffff;
  --btn-view-background-color: #451180;
  --btn-exit-color: #ffffff;
  --btn-exit-background-color: #811e1e;
  --btn-search-color: #ffffff;
  --btn-search-background-color: #243688;
  --btn-print-color: #ffffff;
  --btn-print-background-color: #000000;
  --btn-export-color: #000000;
  --btn-export-background-color: #ffffff;
  --btn-sgin-color: #283e4a;
  --btn-sgin-background-color: #ffffff;
  --btn-box-shadow-color: #272727;
  --btn-border-radius: 5px;

  --i-image-border: 3px dashed var(--modal-header-background-color);
  --i-image-view-border: 2px solid var(--modal-header-background-color);

  --fieldset-border: 2px solid #283e4a;
  --fieldset-background: none;
  --fieldset-margin : 1%;
  --fieldset-padding: 5px;
  --legend-color: #fff;
  --legend-text-shadow: none;
  --legend-font-size: 16px;
  --legend-font-weight: bold;
  --legend-border: none;

  --modal-background: rgba(0, 0, 0, 0.6);
  --modal-content-background: #607d8b;
  --modal-content-border: none;
  --modal-color: #000;
  --modal-animation-name: animatetop;
  --modal-animation-duration: 0.4s;
  --modal-header-color: #000000;
  --modal-footer-color: #000000;
  --modal-header-background-color: #283e4a;
  --modal-footer-background-color: #bbb;
  --modal-box-shadow-color: #000000;

  --table-color: #030303;
  --table-background-color: #ffffff;
  --table-border: 1px solid #bbb;
  --table-hover-background-color: yellow;
  --table-th-color: #fff;

  --help-height: 110px;
  --help-border: none;
  --help-border-radius: 10px;
  --help-background-color: #283e4a;
  --help-opacity: 1;
  --help-content-color: #ffffff;

  --main-menu-item-padding: 2px;
  --main-menu-item-border: 1px solid #ddd;
  --main-menu-item-border-radius: 0px;
  --main-menu-item-background-color: #283e4a;
  --main-menu-h2-color: #ffffff;
  --main-menu-p-color: #ffffff;

  --scrollbar-width : 10px;
  --scrollbar-color: #ffeb3b;
  --scrollbar-outline:1px solid var(--scrollbar-color);
  --scrollbar-background-color: #272727;
  --scrollbar-box-shadow: inset 0 0 6px #4caf50;
}