/* Ορισμός custom χρωμάτων */ :root { --primary_color: #514C71; /* μωβ */ --primary_light_color: #d7d4ea; /* ανοιχτό μωβ */ --primary_dark_color: #4e40a3; /* σκούρο μπλε */ /* --secondary_color: #D32F2F; --secondary_light_color: #EF5350; --secondary_dark_color: #B71C1C; */ --secondary_color: #e31e26; --secondary_light_color: #ed7c81; --secondary_dark_color: #bd1a21; --vertical_navbar_color: #D7D8DA; --white: #FFFFFF; --text_color: #212529; --standard_font_size: 1.1rem; } body { //font-family: Roboto; font-family: Calibri; font-size: var(--standard_font_size) !important; } #logo { cursor: pointer; } /* Αυτό χρειάζεται όταν χρησιμοποιούμε standart mode () για να μην γίνονται μακρόστενα τα κουμπιά που περιέχουν icon. */ button.btn:has(> i) { padding-top: 0; padding-bottom: 0; } /* ΤΕΛΟΣ */ .navbar { backdrop-filter: blur(8px); flex-wrap: wrap; font-size: 1.2rem; } #vertical_navbar { background-color: var(--vertical_navbar_color) !important; } .text-primary, button.accordion-button.collapsed, .btn-outline-primary { color: var(--primary_color) !important; } .bg-primary, .btn-primary, .text-bg-primary { background-color: var(--primary_color) !important; } .bg-primary-subtle { background-color: var(--primary_light_color) !important; } .btn-primary, .btn-outline-primary { border-color: var(--primary_color) !important; font-size: var(--standard_font_size) !important; } .btn-primary:hover { background-color: var(--primary_dark_color) !important; border-color: var(--primary_dark_color) !important; } a.nav-link:hover, .navbar-toggler:hover, a.dropdown-item:hover, .btn-outline-primary:hover { /* button.accordion-button:not(.collapsed) */ background-color: var(--primary_color); color: white !important; } .navbar-toggler, .border-primary { border-color: var(--primary_color) !important; color: var(--primary_color) !important; } .border-primary-subtle { border-color: var(--primary_light_color) !important; } .text_color { color: var(--text_color) !important; } th, td, input, textarea, select, option, caption, a.dropdown-item { font-size: var(--standard_font_size) !important; } .text-secondary { color: var(--secondary_color) !important; } .bg-secondary, .btn-secondary, .text-bg-secondary { background-color: var(--secondary_color) !important; } .bg-secondary-subtle { background-color: var(--secondary_light_color) !important; } .btn-secondary, .btn-outline-secondary { border-color: var(--secondary_color) !important; font-size: var(--standard_font_size) !important; } .btn-secondary:hover { background-color: var(--secondary_dark_color) !important; border-color: var(--secondary_dark_color) !important; } /* Απόκρυψη του tox-promotion και του tox-statusbar στον TinyMCE text editor. Αυτό είναι ένα επιπλέον επίπεδο ασφαλείας ώστε να μην εμφανιστούν αυτά τα δύο. Το βασικό είναι οι δύο σχετικές εντολές που έχω βάλει στην javascript στο tinymce.init. */ .tox-promotion, .tox-statusbar { display: none !important; } html body .tox-tinymce { border-color: var(--primary_light_color) !important; } /* .bg-secondary-color { background-color: var(--secondary_color); } */ @media (min-width: 1200px) { #logo { width: 80%; } #platform_title { font-size: 2.5rem !important; } #user_account { display: none; } } @media (min-width: 992px) and (max-width: 1199px) { #logo { width: 80%; } #platform_title { font-size: 2.5rem !important; } #user_account { display: none; } } @media (min-width: 768px) and (max-width: 991px) { #logo { width: 80%; } #platform_title { font-size: 2rem !important; } #user_account { display: inline-grid; } } @media (min-width: 576px) and (max-width: 767px) { #logo { width: 80%; } #platform_title { font-size: 1.7rem !important; } #user_account { display: inline-grid; } } @media (max-width: 575px) { #logo { width: 160%; } #platform_title { font-size: 1.6rem !important; } #user_account { display: inline-grid; } }