You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
643 lines
12 KiB
643 lines
12 KiB
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import '~cropper/dist/cropper.css';
|
|
//@import "~flag-icons/sass/flag-icons.scss";
|
|
@import "~select2/dist/css/select2.css";
|
|
@import "~bootstrap-daterangepicker/daterangepicker.css";
|
|
//@import '~jquery-ui/themes/base/all.css';
|
|
|
|
@import "tinymce/skins/ui/oxide/skin.css";
|
|
|
|
// TAILWIND COLOR DEFINITION https://tailwindcss.com/docs/customizing-colors#using-css-variables
|
|
@layer base {
|
|
:root {
|
|
--color-primary-base: 46 117 163;
|
|
--color-primary-gradient: 36 77 103;
|
|
--color-primary-button-text: 46 117 163;
|
|
--color-primary-button-alternative-text: 255 255 255;
|
|
|
|
--color-secondary-base: 243 126 47;
|
|
--color-secondary-gradient: 224 100 16;
|
|
--color-secondary-button-text: 255 255 255;
|
|
|
|
--color-tertiary-base: 51 51 51;
|
|
--color-tertiary-gradient: 0 0 0;
|
|
--color-tertiary-button-text: 255 255 255;
|
|
|
|
--color-success-base: 119 170 12;
|
|
--color-success-gradient: 83 127 0;
|
|
--color-success-button-text: 255 255 255;
|
|
|
|
--color-info-base: 13 123 253;
|
|
--color-info-gradient: 0 84 211;
|
|
--color-info-button-text: 255 255 255;
|
|
|
|
--color-warning-base: 245 206 1;
|
|
--color-warning-gradient: 186 152 0;
|
|
--color-warning-button-text: 0 0 0;
|
|
|
|
--color-danger-base: 223 59 59;
|
|
--color-danger-gradient: 180 0 21;
|
|
--color-danger-button-text: 255 255 255;
|
|
|
|
--color-form-base: 46 117 163;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.border-gray-300 {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgba(156, 163, 175, var(--tw-border-opacity));
|
|
}
|
|
.border-gray-100 {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgba(247, 250, 252, var(--tw-border-opacity));
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.card {
|
|
@apply rounded shadow-lg w-full;
|
|
}
|
|
|
|
// Buttons with icons.
|
|
.btn > .svg {
|
|
@apply -ml-1 mr-1 h-4 w-5 fill-current ;
|
|
}
|
|
|
|
// Forms.
|
|
|
|
.help-block {
|
|
@apply mt-2 text-caption;
|
|
}
|
|
|
|
.has-error .ch-form-label {
|
|
@apply h-8;
|
|
}
|
|
|
|
.has-error .help-block {
|
|
@apply italic text-caption;
|
|
}
|
|
|
|
.has-error .ch-form-control {
|
|
}
|
|
|
|
// List
|
|
|
|
.list-group {
|
|
@apply flex flex-col mr-4;
|
|
}
|
|
|
|
.list-group-item {
|
|
@apply flex flex-row justify-start gap-2 border rounded-sm px-3 py-3 items-center;
|
|
}
|
|
|
|
#lp_item_list .list-group-item {
|
|
align-items: normal !important;
|
|
}
|
|
|
|
.data_table, .table-striped {
|
|
@apply border-collapse w-full mt-2;
|
|
|
|
thead th {
|
|
@apply bg-gray-20 text-gray-90 font-semibold text-left px-4 py-3 border-b border-gray-30 border-t border-l border-r border-gray-30 text-center;
|
|
}
|
|
|
|
tbody td {
|
|
@apply px-4 py-3 border-b border-gray-30 border-l border-r border-gray-30;
|
|
}
|
|
|
|
tbody tr:nth-child(odd) {
|
|
@apply bg-gray-5;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: #eff6ff;
|
|
}
|
|
|
|
.checkbox label {
|
|
@apply pl-4;
|
|
}
|
|
|
|
i.mdi {
|
|
@apply align-middle;
|
|
}
|
|
|
|
.mdi::before {
|
|
@apply inline-block;
|
|
font-size: inherit;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
|
|
.sortable-container {
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.toolbar-action {
|
|
.p-toolbar-group-start.p-toolbar-group-left {
|
|
display: flex;
|
|
padding: 10px;
|
|
background: #f0f0f0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.p-toolbar-group-start.p-toolbar-group-left .btn {
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
color: #333;
|
|
background-color: #e7e7e7;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.p-toolbar-group-start.p-toolbar-group-left .btn:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.p-toolbar-group-start.p-toolbar-group-left .btn.active {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border-color: #007bff;
|
|
}
|
|
|
|
.p-toolbar-group-start.p-toolbar-group-left .btn + .btn {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.sortable-buttons-actions {
|
|
@apply bg-gray-5 border border-gray-20 rounded shadow;
|
|
|
|
.btn {
|
|
@apply px-4 bg-white border border-gray-30 py-2 mr-2 text-gray-90 rounded cursor-pointer transition-all;
|
|
height: 35px;
|
|
}
|
|
|
|
.btn--action {
|
|
@apply bg-white border border-gray-30 py-1 px-3 text-sm rounded cursor-pointer text-gray-90;
|
|
}
|
|
|
|
.btn:hover, .plane:hover {
|
|
@apply bg-gray-25 text-gray-90;
|
|
}
|
|
}
|
|
|
|
// Card
|
|
.card {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
|
|
background-color: #fff;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card .flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.card .flex .relative {
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card .flex a {
|
|
margin-left: 10px;
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
|
|
.card .sectioncomment {
|
|
padding: 15px;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.card span {
|
|
float: right;
|
|
margin-right: 15px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.card .stat-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
// Alerts
|
|
|
|
.alert {
|
|
@apply p-3.5 mb-5 border border-transparent rounded;
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border-color: #ffeeba;
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border-color: #f5c6cb;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border-color: #bee5eb;
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border-color: #c3e6cb;
|
|
}
|
|
|
|
|
|
// Tabs
|
|
|
|
.tab_wrapper nav {
|
|
@apply card flex flex-row justify-between gap-4;
|
|
}
|
|
|
|
.tab_wrapper nav a {
|
|
@apply p-4;
|
|
}
|
|
|
|
// Calendar
|
|
|
|
#calendar .fc-toolbar-chunk {
|
|
@apply flex flex-row;
|
|
}
|
|
|
|
// Page header
|
|
|
|
.page-header {
|
|
@apply text-h3 flex flex-row gap-2;
|
|
}
|
|
|
|
#no-data-view {
|
|
@apply flex flex-col items-center justify-center p-4 space-y-4 antialiased;
|
|
}
|
|
|
|
.pull-right {
|
|
@apply flex justify-end;
|
|
}
|
|
|
|
.header-border-bottom {
|
|
border-bottom: 1px solid #e4e9ed !important;
|
|
}
|
|
|
|
.ch-tool-icon {
|
|
@apply font-extrabold text-primary;
|
|
}
|
|
.ch-toolbar-icon {
|
|
@apply font-extrabold text-primary leading-none;
|
|
}
|
|
.ch-tool-icon-disabled {
|
|
@apply font-extrabold text-gray-50;
|
|
}
|
|
.ch-tool-icon-gradient {
|
|
@apply font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-primary to-primary-gradient;
|
|
}
|
|
.ch-tool-icon-button {
|
|
@apply font-extrabold bg-clip-text;
|
|
}
|
|
|
|
#course-search-keyword {
|
|
@apply w-auto;
|
|
}
|
|
|
|
// Forms
|
|
input {
|
|
appearance: auto !important;
|
|
border-width: 1px !important;
|
|
}
|
|
|
|
.has-error input, .has-error select {
|
|
border-color: red !important;
|
|
}
|
|
|
|
// Special
|
|
|
|
// Progress bars
|
|
.progress {
|
|
@apply rounded-sm ring-1 text-center min-h-full ml-12 mr-4;
|
|
}
|
|
|
|
.log-container {
|
|
height: 300px;
|
|
overflow-y: scroll;
|
|
background-color: #000;
|
|
padding: 10px;
|
|
}
|
|
|
|
.terminal {
|
|
color: #00ff00; /* Green */
|
|
font-family: monospace;
|
|
}
|
|
|
|
.terms-container {
|
|
overflow-y: scroll;
|
|
height: 180px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
// Pager
|
|
.pager-bar {
|
|
}
|
|
.pager-bar .pager-select {
|
|
}
|
|
.pager-bar .pager-counter {
|
|
@apply mt-4;
|
|
}
|
|
.pager-bar .pager-jumper {
|
|
@apply mt-4;
|
|
}
|
|
.pager-bar .pager-jumper .btn-link {
|
|
@apply -mt-2 mx-2;
|
|
}
|
|
|
|
// free-jqGrid override
|
|
.ui-jqgrid-bootstrap.modal {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
|
|
@import "scss/index.scss";
|
|
|
|
.field > small.p-error {
|
|
@apply text-error;
|
|
}
|
|
|
|
// tabs
|
|
.tab-content {
|
|
> .tab-pane {
|
|
display: none;
|
|
}
|
|
> .active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.col-md-offset-0 {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.col-md-offset-1 {
|
|
margin-left: 5% !important;
|
|
}
|
|
|
|
.col-md-offset-2 {
|
|
margin-left: 10% !important;
|
|
}
|
|
|
|
.col-md-offset-3 {
|
|
margin-left: 15% !important;
|
|
}
|
|
|
|
.col-md-offset-4 {
|
|
margin-left: 20% !important;
|
|
}
|
|
|
|
.custom-message {
|
|
padding: 15px;
|
|
}
|
|
|
|
.custom-message {
|
|
ol,
|
|
ul,
|
|
menu {
|
|
list-style: initial;
|
|
}
|
|
}
|
|
|
|
.custom-link {
|
|
color: blue;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#date_fields label,
|
|
.p-float-label .datepicker-label {
|
|
top: 0px;
|
|
left: 0.5rem;
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
--tw-text-opacity: 1;
|
|
color: rgb(46 117 163 / var(--tw-text-opacity));
|
|
font-size: 12px;
|
|
}
|
|
|
|
.question_options .droppable {
|
|
padding: 5px;
|
|
text-align: center;
|
|
background-color: #ECF0F1;
|
|
border: dotted #dddddd 2px;
|
|
border-radius: 4px;
|
|
color: #666666;
|
|
display: inline-block;
|
|
width: 85%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.question_options .droppable-item {
|
|
background-color: #84bd00;
|
|
color: #FFF;
|
|
padding: 3px 0 3px 5px;
|
|
width: 20%;
|
|
}
|
|
|
|
.question_options .droppable-item .number {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
}
|
|
|
|
.hide-label-title {
|
|
color: #0a0a0a;
|
|
}
|
|
|
|
#global-modal {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.documents-layout {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.template-list-container {
|
|
flex-basis: 20%;
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.documents-form-container {
|
|
flex-basis: 78%;
|
|
}
|
|
|
|
.template-item img {
|
|
border: 1px solid #ccc;
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.template-item img:hover {
|
|
transform: scale(1.05);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.template-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.template-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.template-item img {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
height: auto;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.template-item:hover {
|
|
background-color: #ececec;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.users-list {
|
|
.nav-tabs {
|
|
display: flex;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
border-bottom: 1px solid #ddd;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.nav-tabs .nav-item {
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
margin-right: 0.1rem;
|
|
background: #f8f8f8;
|
|
border: 1px solid #ddd;
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
text-decoration: none;
|
|
color: #555;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
color: #495057;
|
|
background-color: #fff;
|
|
border-color: #ddd #ddd #fff;
|
|
border-bottom-color: transparent;
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
form .field {
|
|
.help-text {
|
|
color: #666;
|
|
font-family: 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
background-color: #f8f8f8;
|
|
border-left: 4px solid #007bff;
|
|
padding: 10px 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
max-width: 80%;
|
|
display: inline-block;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.freeze {
|
|
display: block;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.freeze + label,
|
|
.advmultiselect + label,
|
|
textarea + label.settings-label
|
|
{
|
|
font-size: 13px;
|
|
@apply absolute top-0 left-0 text-support-3 text-caption px-1 bg-white text-primary;
|
|
}
|
|
}
|
|
|
|
.flatpickr-calendar .flatpickr-validate-btn {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
padding: 5px;
|
|
background-color: #569ff7;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.mce-translatehtml, span[lang] {
|
|
display: none;
|
|
}
|
|
|
|
.sub-item-indent {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.sub-item-indent.active {
|
|
background-color: #e0e0e0;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
//@import 'primevue-md-light-indigo/theme.css';
|
|
//@import '~primevue/resources/primevue.min.css';
|
|
//@import '~primeflex/primeflex.css';
|
|
//@import "~primeicons/primeicons.css";
|
|
|
|
@import 'primeflex/core/_variables.scss';
|
|
@import 'primeflex/core/_formlayout.scss';
|
|
|
|
//@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
|
|
@import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
|
|
@import "~timepicker/jquery.timepicker.min.css";
|
|
@import "~qtip2/dist/jquery.qtip.min.css";
|
|
|