Base Directory:
/home/ecedu/public_html/cce/assets/css
View File: _main.css
.bg-image {
/*height: 0 !important;*/
margin: 0 !important;
padding: 0 !important;
}
.recentcomments a {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
}
.youtube-video {
aspect-ratio: 16 / 8;
width: 100%;
}
.comment-form-container {
background: #F0F0F0;
border: #e0dfdf 1px solid;
padding: 20px;
border-radius: 4px;
}
.input-row {
margin-bottom: 20px;
}
.input-field {
width: 100%;
border-radius: 4px;
padding: 10px;
border: #e0dfdf 1px solid;
}
.btn-submit {
padding: 10px 20px;
background: #333;
border: #1d1d1d 1px solid;
color: #f0f0f0;
font-size: 0.9em;
width: 100px;
border-radius: 4px;
cursor: pointer;
}
ul {
list-style-type: none;
}
.comment-row {
border-bottom: #e0dfdf 1px solid;
margin-bottom: 5px;
padding: 5px;
}
.outer-comment {
background: #F0F0F0;
padding: 10px;
border: #dedddd 1px solid;
border-radius: 4px;
}
span.comment-row-label {
color: #484848;
}
span.posted-by {
font-weight: bold;
color: red;
}
.comment-info {
font-size: 0.9em;
padding: 0 0 10px 0;
}
.comment-text {
margin: 5px 0px 5px 0;
}
.btn-reply {
color: #2f20d1;
cursor: pointer;
text-decoration: none;
}
.btn-reply:hover {
text-decoration: underline;
}
#comment-message {
margin-left: 10px;
color: #005e00;
display: none;
}
.label {
padding: 0 0 4px 0;
}
body.custom-background {
/* background-image: url("assets/img/bgg-1.png");
background-position: left top;
background-size: auto;
background-repeat: repeat;
background-attachment: fixed;*/
}
.font-family h1, .font-family h2, .font-family h3, .font-family h4, .font-family h5, .font-family h6, .font-family .h1, .font-family .h2, .font-family .h3, .font-family .h4, .font-family .h5, .font-family .h6, .font-family .navbar-nav, .menu-mobile a, .u-breadcrumb .breadcrumb-item, .post-content .tags-list li:first-child {
font-family: "Roboto", sans-serif;
}
body, html, .container, main {
margin-top: 0 !important;
padding-top: 0 !important;
}
body {
font-family: "Open Sans", sans-serif;
}
.full-width {
background: #ffffff !important;
}
.dark-skin.full-width {
background: #1b1b1b !important;
}
.primary {
color: #0080C0; /*#6610f2*/
}
.center-backline:before, .center-backline-lg:before, .title-arrow:before {
background-color: #0080C0 !important;
}
.bg-primary, .progress-bar, .badge-primary {
background-color: #0080C0 !important;
}
.box-title:before {
border-top-color: #0080C0;
}
.badge-primary {
color: #ffffff !important;
}
.fa-stack-sea {
border: #0080C0 3px solid;
}
.form-control:focus {
border-color: #0080C0; /*#0080C0*/
}
.hover-a:hover .fa-play-circle {
background: #0080C0; /*#0080C0*/
border: #0080C0 2px solid;
}
.page-link, .btn-link {
color: #0080C0; /*#0080C0*/
}
a:hover {
color: #0080C0;
}
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h3 > a:hover, .h4 > a:hover, .h5 > a:hover, .h6 > a:hover {
color: #0080C0;
}
.hover-a:hover h1 > a, .hover-a:hover h2 > a, .hover-a:hover h3 > a, .hover-a:hover h4 > a, .hover-a:hover h5 > a, .hover-a:hover h6 > a, .hover-a:hover .h1 > a, .hover-a:hover .h2 > a, .hover-a:hover .h3 > a, .hover-a:hover .h4 > a, .hover-a:hover .h5 > a, .hover-a:hover .h6 > a, .hover-a:hover p > a, .prev-post-start a:hover, .next-post-end a:hover {
color: #0080C0;
}
.nav-tabs .nav-link.active, .sidenav-menu .dropdown a.show {
color: #0080C0;
}
.nav-tabs .nav-item.show .nav-link {
color: #0080C0;
}
.navbar-nav .dropdown-item:hover, #main-menu .vertical-tabs .nav-tabs .nav-link.active, .dropdown-item.active, .dropdown-item:active, a {
color: #0080C0;
}
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-nav .dropdown-item:hover, .text-primary {
color: #0080C0 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .custom-range::-ms-thumb, .custom-range::-moz-range-thumb, .custom-range::-webkit-slider-thumb, .custom-radio .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before, .dropdown-item.active, .dropdown-item:active {
background-color: #0080C0;
}
.dropdown-menu.mega .container, .dropdown-menu, .border-primary {
border-color: #0080C0 !important;
}
.list-group-item.active, .btn-outline-primary {
color: #0080C0;
border-color: #0080C0;
}
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle, .page-link:hover, .page-item.active .page-link, .btn-primary, .btn-outline-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
background-color: #0080C0;
border-color: #0080C0;
}
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
opacity: .98;
}
.page-link:hover {
color: #fff;
}
.big-nav .list-group-item.active {
color: #ffffff;
background-color: #0080C0;
border-color: #0080C0;
}
.big-nav.carousel-indicators li:hover {
background-color: #0080C0;
color: #ffffff;
}
.hover-a li:hover a {
color: #0080C0;
}
.hover-a:hover a.h1, .hover-a:hover a.h2, .hover-a:hover a.h3, .hover-a:hover a.h4, .hover-a:hover a.h5, .hover-a:hover a.h6 {
color: #0080C0;
}
li:hover a.h5 {
color: #0080C0;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #ffffff;
background-color: #0080C0;
border-color: #0080C0;
}
.sidetabs .nav-link.active:hover {
border-color: #0080C0;
}
.card-list li:hover a {
color: #0080C0;
}
.nav-block-link li a.nav-link.active, .nav-block-link1 li a.nav-link.active, .nav-block-link2 li a.nav-link.active, .nav-block-link3 li a.nav-link.active, .nav-block-link4 li a.nav-link.active, .nav-block-link5 li a.nav-link.active, .nav-block-link6 li a.nav-link.active, .nav-block-link7 li a.nav-link.active, .nav-block-more li a.nav-link.active {
color: #0080C0 !important;
background-color: transparent;
}
.nav-block-link li a.nav-link.active, .nav-block-link li a.nav-link:hover, .nav-block-link1 li a.nav-link.active, .nav-block-link1 li a.nav-link:hover, .nav-block-link2 li a.nav-link.active, .nav-block-link2 li a.nav-link:hover, .nav-block-link3 li a.nav-link.active, .nav-block-link3 li a.nav-link:hover, .nav-block-link4 li a.nav-link.active, .nav-block-link4 li a.nav-link:hover, .nav-block-link5 li a.nav-link.active, .nav-block-link5 li a.nav-link:hover, .nav-block-link6 li a.nav-link.active, .nav-block-link6 li a.nav-link:hover, .nav-block-link7 li a.nav-link.active, .nav-block-link7 li a.nav-link:hover, .nav-block-more li a.nav-link.active, .nav-block-more li a.nav-link:hover {
color: #0080C0;
}
.widget ol li a:hover, .widget ul li a:hover {
color: #0080C0;
}
.owl-carousel button.owl-dot.active {
background: #0080C0;
}
.suggestion-box {
border-top: 4px solid #0080C0;
}
.side-link li a:hover, .side-link li a.active, .sidebar-link li a:hover, .sidebar-link li a.active {
background-color: transparent;
color: #0080C0;
}
.side-link li ul li a:hover, .sidebar-link li ul li a:hover {
color: #0080C0;
}
.side-link li a.caret-collapse, .sidebar-link li a.caret-collapse {
color: #0080C0;
}
.side-link li a.caret-collapse.collapsed:hover, .sidebar-link li a.caret-collapse.collapsed:hover {
color: #0080C0;
}
.post-number li:hover a::before {
color: #0080C0 !important;
}
.timeline-post > li a .timeline-date:hover, .timeline-post > li a .timeline-title:hover {
color: #0080C0 !important;
}
.hover-mode .main-nav li:hover > a {
color: #0080C0;
}
.sidenav-menu li.show > a.dropdown-toggle, .navbar-light .nav-item:hover > .nav-link {
color: #0080C0;
}
.timeline-post > li:hover:before {
background: #0080C0 !important;
}
.side-link li a.caret-collapse.collapsed, .sidebar-link li a.caret-collapse.collapsed {
color: #161616;
}
.bg-secondary {
background-color: #000000 !important;
}
.main-menu.navbar-dark .navbar-nav > .nav-item.active, .main-menu.navbar-dark .navbar-nav > .nav-item:hover {
background: #0080C0 !important;
}
.btn-secondary {
color: #ffffff;
background-color: #000000;
border-color: #000000;
}
.btn-secondary:hover {
background-color: #000000;
border-color: #000000;
}
.btn-secondary.disabled, .btn-secondary:disabled {
background-color: #000000;
border-color: #000000;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
background-color: #000000;
border-color: #000000;
}
.btn-outline-secondary {
color: #000000;
border-color: #000000;
}
.btn-outline-secondary:hover {
background-color: #000000;
border-color: #000000;
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
color: #000000;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
background-color: #000000;
border-color: #000000;
}
.badge-secondary {
color: #ffffff;
background-color: #000000;
}
.badge-secondary[href]:hover, .badge-secondary[href]:focus {
color: #ffffff;
background-color: #000000;
}
.alert-secondary .alert-link {
color: #000000;
}
.list-group-item-secondary {
color: #000000;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
color: #000000;
}
.list-group-item-secondary.list-group-item-action.active {
background-color: #000000;
border-color: #000000;
}
a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
background-color: #000000 !important;
}
.border-secondary {
border-color: #000000 !important;
}
.text-secondary {
color: #000000 !important;
}
.main-menu.navbar-dark .hover-a:hover .h1 > a, .main-menu.navbar-dark .hover-a:hover .h2 > a, .main-menu.navbar-dark .hover-a:hover .h3 > a, .main-menu.navbar-dark .hover-a:hover .h4 > a, .main-menu.navbar-dark .hover-a:hover .h5 > a, .main-menu.navbar-dark .hover-a:hover .h6 > a, .main-menu.navbar-dark .hover-a:hover h1 > a, .main-menu.navbar-dark .hover-a:hover h2 > a, .main-menu.navbar-dark .hover-a:hover h3 > a, .main-menu.navbar-dark .hover-a:hover h4 > a, .main-menu.navbar-dark .hover-a:hover h5 > a, .main-menu.navbar-dark .hover-a:hover h6 > a {
color: #0080C0 !important;
}
a.text-secondary:hover, a.text-secondary:focus {
color: #000000 !important;
}
.main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item.active, .main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
color: #0080C0 !important;
}
.dark-skin .hover-a:hover .h1 > a, .dark-skin .hover-a:hover .h2 > a, .dark-skin .hover-a:hover .h3 > a, .dark-skin .hover-a:hover .h4 > a, .dark-skin .hover-a:hover .h5 > a, .dark-skin .hover-a:hover .h6 > a, .dark-skin .hover-a:hover h1 > a, .dark-skin .hover-a:hover h2 > a, .dark-skin .hover-a:hover h3 > a, .dark-skin .hover-a:hover h4 > a, .dark-skin .hover-a:hover h5 > a, .dark-skin .hover-a:hover h6 > a {
color: #0080C0 !important;
}
.dark-skin .side-link li a.active, .dark-skin .side-link li a.caret-collapse.collapsed.active, .dark-skin .side-link li a.caret-collapse.collapsed:hover, .dark-skin .side-link li a:hover, .dark-skin .sidebar-link li a.active, .dark-skin .sidebar-link li a.caret-collapse.collapsed.active, .dark-skin .sidebar-link li a.caret-collapse.collapsed:hover, .dark-skin .sidebar-link li a:hover {
color: #0080C0;
}
.next-post-right a:hover, .prev-post-left a:hover, .footer-dark a:hover, .layout-dark a:hover, .dark-skin .next-post-right > a:hover, .dark-skin .prev-post-left > a:hover, .footer-dark a.btn:hover, .dark-skin a.btn-outline-light:hover strong {
color: #0080C0;
}
.footer-dark .widget ul li a:hover, .footer-dark .widget ol li a:hover {
color: #0080C0;
}
.btn-primary.disabled, .btn-primary:disabled, .btn-primary:hover {
background-color: #0080C0;
border-color: #0080C0;
}
.post-page blockquote, .u-blockquote, .wp-block-quote {
border-left: 3px solid #0080C0;
}
.tags-links a:hover {
background-color: #0080C0;
}
.bg-custom-footer {
background-color: #31b1f9;
}
#showbacktop.bg-navcustom {
background: #31b1f9 !important;
}
.main-menu.nav-custom.navbar-dark .dropdown-menu h1 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h2 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h3 > a, .main-menu.nav-custom.navbar-dark h4 > a, .main-menu.nav-custom.navbar-dark h5 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h6 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h1 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h2 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h3 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h4 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h5 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h6 > a {
color: #23282d !important;
}
.main-menu.nav-custom.navbar-dark a.dropdown-item {
color: #23282d !important;
}
.main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu {
background-color: #fff;
}
.main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover, .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item.active {
background: rgb(255, 255, 255);
}
.nav-custom.navbar-dark .vertical-tabs {
background: #f8f8f8;
border-color: #f8f8f8;
}
.nav-custom.main-menu.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link {
border-color: #f8f8f8;
}
.nav-custom.main-menu.navbar-dark .vertical-tabs a {
color: #495057 !important;
}
.main-menu.nav-custom.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link.active, .main-menu.nav-custom.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link:hover {
border-color: #fff;
background-color: #fff !important;
}
.bg-navcustom {
background: #31b1f9 !important;
}
.taxonomy-description {
margin-left: auto;
margin-right: auto;
max-width: 80%;
text-align: center;
}
.mobile-nav-custom img {
max-width: 200px
}
.wp-block-embed.is-type-video {
width: 100%;
}
.wp-block-embed iframe {
max-width: 100%;
}
.wp-block-table table {
border: #dee2e6 1px solid;
}
.wp-block-table table tr, .wp-block-table table th, .wp-block-table table td {
border: #dee2e6 1px solid;
}
.post-content img {
height: auto;
}
@media (min-width: 992px) {
#showbacktop.bg-navcustom.is-visible {
background: #31b1f9 !important;
}
.nav-custom.navbar-dark .hover-mode li:hover > a {
background: #fff !important;
}
.mobile-nav-custom, .mobile-nav-custom img {
max-width: 0;
display: none;
}
.post-content .wp-block-embed {
padding-bottom: 46.25%;
}
}
@media (min-width: 992px) {
.main-menu.navbar-dark .hover-mode .main-nav > li:hover > a, .main-menu.navbar-dark .hover-mode .main-nav > li > a.active {
background-color: #0080C0 !important;
}
.main-menu.navbar-dark .hover-mode .main-nav li:hover > a {
color: #0080C0 !important;
}
.main-menu.navbar-dark .hover-mode .main-nav > li:hover > a {
color: #fff !important;
}
.logo-full .main-logo img {
max-width: 25rem;
}
.search-top-right, .social-top-left {
top: 50%;
margin-top: -23px;
position: absolute;
}
#showbacktop .logo-showbacktop.still-show {
display: block;
}
#showbacktop .logo-showbacktop.still-show img {
max-height: 2.3rem;
margin-right: 1rem;
display: block;
}
#showbacktop.is-visible .logo-showbacktop.still-show {
display: none;
height: 0;
}
}
@media (min-width: 768px) {
.grid-six .image {
width: 70%;
}
.grid-six .caption {
position: absolute;
width: 50%;
top: 50%;
right: 0;
padding: 2rem;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.six-box-box {
padding-left: .875rem;
padding-right: .875rem
}
@media (max-width: 991.98px) {
.admin-bar .mobile-sticky.is-sticky {
top: 30px;
z-index: 1000;
}
}
@media (max-width: 400px) {
.top-space {
top: 20%;
}
}
/* انتقال سلس */
body {
transition: background-color .3s,color .3s;
}
.card, .table, .btn, .form-control {
transition: background-color .3s,color .3s,border-color .3s;
}
.image-box {
height: 238px;
}
.x-card {
height: 100px;
}
@media (max-width: 730px) {
.image-box {
height: 150px;
}
.x-card {
height: 80px;
}
}
#sid-menu .navbar-nav li a {
font-weight: 500;
padding: 10px 16px;
color: #2c3e50;
}
-->
#sid-menu .navbar-nav .dropdown-menu {
border-radius: 0;
border: none;
margin-top: 12px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
#sid-menu .dropdown-toggle::after {
content: " ▾";
font-size: 10px;
margin-left: 4px;
}
#sid-menu .dropdown-toggle1::after {
content: " ";
font-size: 10px;
margin-left: 4px;
}
@media (max-width: 991.98px) {
#sid-menu .accordion-button {
font-weight: bold;
background-color: #f8f9fa;
}
#sid-menu .accordion-button::after {
background-image: none;
font-size: 20px;
color: #333;
float: right;
}
#sid-menu .accordion-button-arrow::after {
content: " ▾";
}
#sid-menu .accordion-button-arrow:not(.collapsed)::after {
content: " ▴";
}
#sid-menu .accordion-button-arrow-1::after {
content: " ";
}
#sid-menu .accordion-button-arrow-1:not(.collapsed)::after {
content: " ";
}
#sid-menu .accordion-body {
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
#sid-menu .accordion-item a.accordion-button {
display: block;
text-decoration: none;
font-weight: normal;
background-color: #ffffff;
color: #007bff;
}
#sid-menu .accordion-item a.accordion-button:hover {
text-decoration: underline;
}
}
.logo-sidenav {
position: sticky;
top: 0;
background-color: white;
z-index: 1000000000;
padding: 10px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sidenav-menu {
overflow-y: auto; /* تأكد أن القائمة قابلة للتمرير */
max-height: 80vh; /* ارتفاع محدد للقائمة الجانبية */
}
.comment-section {
max-width: 800px;
margin: 2rem auto;
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.comment-box {
background: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
transition: transform 0.2s;
border: 1px solid #e9ecef;
}
.comment-box:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* الدائرة الملوَّنة حول الحرف */
.user-avatar {
width: 40px; /* أو 50px حسب التصميم */
height: 40px;
line-height: 40px;
border-radius: 50%;
font-weight: 600;
font-size: .85rem;
color: #fff;
text-align: center;
user-select: none;
/* اللون يُحقن في المتغيّر التالي من HTML */
background: var(--av-color, #0d6efd);
border: 3px solid var(--av-color, #0d6efd);
}
.comment-input {
border-radius: 20px;
padding: 15px 20px;
border: 2px solid #e9ecef;
transition: all 0.3s;
}
.comment-input:focus {
box-shadow: none;
border-color: #86b7fe;
}
.btn-comment {
border-radius: 20px;
padding: 8px 25px;
background: #0d6efd;
border: none;
transition: all 0.3s;
}
.btn-comment:hover {
background: #0b5ed7;
transform: translateY(-1px);
}
.comment-actions {
font-size: 0.9rem;
}
.comment-actions a {
color: #6c757d;
text-decoration: none;
margin-right: 15px;
transition: color 0.2s;
}
.comment-actions a:hover {
color: #0d6efd;
}
.comment-time {
color: #adb5bd;
font-size: 0.85rem;
}
.reply-section {
margin-left: 60px;
border-left: 2px solid #e9ecef;
padding-left: 20px;
}
.reply-section {
border-left-color: #ced4da
}
.reply-section .reply-section {
border-left-color: #adb5bd
}
.reply-section .reply-section .reply-section {
border-left-color: #868e96
}