# The Events Calendar – Custom Dashboard Styling

Acest fișier CSS este gândit pentru a suprascrie stilurile default ale pluginului:

* The Events Calendar

și pentru a le integra vizual cu dashboard-ul Paradisul Verde.

Paleta cromatică și design-ul urmează aceeași direcție:

* minimalist
* premium
* clean
* residential portal

---

## Recomandare

Ideal:

```php
wp_enqueue_style(
    'pv-events-calendar',
    get_stylesheet_directory_uri() . '/assets/css/pv-events-calendar.css',
    array(),
    '1.0'
);
```

---

## pv-events-calendar.css

```css
/* ==========================================
PARADISUL VERDE
THE EVENTS CALENDAR OVERRIDES
========================================== */


/*Hand Drawn*/

#tribe-events-view-selector-content,
.tribe-events .tribe-events-c-events-bar__views,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__content{
	display:none!important;
}

.tribe-events .tribe-events-c-events-bar .tribe-common-form-control-text__input{
	padding-left:42px!important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-common-c-btn.tribe-events-c-search__button{
	margin-left:21px;
}

.tribe-events-event-meta:before, .tribe-events-event-meta~div:not(.tribe-events-event-meta,.event-tickets){
	display:none!important;
}

#tribe-events-footer{
	border:none!important;
}

#tribe-events-content{
	margin-bottom:91px;
}

:root {
    --pv-green: #1E5449;
    --pv-beige: #E8CBAB;
    --pv-gold: #C39E76;
    --pv-cream: #FFEEDB;
    --pv-light: #F6F6F6;
}


/* ==========================================
GENERAL WRAPPER
========================================== */

.tribe-events {
    color: #2f2f2f!important;
}

.tribe-common {
    font-family: inherit!important;
}


/* ==========================================
EVENTS CONTAINER
========================================== */

.tribe-events-view {
    background: transparent!important;
}

.tribe-events-calendar-list,
.tribe-events-calendar-month {
    background: transparent!important;
}


/* ==========================================
EVENT CARD
========================================== */

.tribe-common-g-row.tribe-events-calendar-list__event-row {
    background: white!important;

    border-radius: 28px!important;

    padding: 28px!important;

    margin-bottom: 30px!important;

    box-shadow: 0 12px 35px rgba(0,0,0,0.05)!important;

    border: 1px solid rgba(0,0,0,0.04)!important;

    transition: all 0.3s ease!important;
}

.tribe-common-g-row.tribe-events-calendar-list__event-row:hover {
    transform: translateY(-4px)!important;

    box-shadow: 0 16px 40px rgba(0,0,0,0.08)!important;
}


/* ==========================================
EVENT TITLE
========================================== */

.tribe-events-calendar-list__event-title,
.tribe-events-single-event-title {
    font-size: 32px!important;

    line-height: 1.3!important;

    color: var(--pv-green)!important;

    margin-bottom: 16px!important;
}

.tribe-events-calendar-list__event-title a,
.tribe-events-single-event-title {
    color: var(--pv-green)!important;

    text-decoration: none!important;

    transition: all 0.3s ease!important;
}

.tribe-events-calendar-list__event-title a:hover {
    color: var(--pv-gold)!important;
}


/* ==========================================
EVENT META
========================================== */

.tribe-events-calendar-list__event-datetime,
.tribe-events-event-meta,
.tribe-event-date-start,
.tribe-event-time {
    color: #666!important;

    font-size: 15px!important;

    line-height: 1.7!important;
}


/* ==========================================
EVENT DESCRIPTION
========================================== */

.tribe-events-calendar-list__event-description,
.tribe-events-single-event-description {
    color: #666!important;

    line-height: 1.8!important;

    font-size: 16px!important;
}


/* ==========================================
EVENT IMAGE
========================================== */

.tribe-events-calendar-list__event-featured-image-wrapper img,
.tribe-events-event-image img {
    border-radius: 22px!important;

    overflow: hidden!important;
}


/* ==========================================
BUTTONS
========================================== */

.tribe-events-c-small-cta__price,
.tribe-events .tribe-events-c-button,
.tribe-events-button,
.tribe-common-c-btn,
.tribe-common-c-btn-border,
.tribe-events-cal-links a {

    background: var(--pv-green)!important;

    color: white!important;

    border-radius: 14px!important;

    padding: 14px 22px!important;

    border: none!important;

    font-weight: 700!important;

    transition: all 0.3s ease!important;

    text-decoration: none!important;
}

.tribe-events .tribe-events-c-button:hover,
.tribe-events-button:hover,
.tribe-common-c-btn:hover,
.tribe-common-c-btn-border:hover,
.tribe-events-cal-links a:hover {

    background: #27695b!important;

    color: white!important;
}


/* ==========================================
SEARCH BAR
========================================== */

.tribe-events-header__events-bar {
    background: white!important;

    border-radius: 24px!important;

    padding: 20px!important;

    box-shadow: 0 10px 25px rgba(0,0,0,0.04)!important;

    border: 1px solid rgba(0,0,0,0.04)!important;

    margin-bottom: 35px!important;
}

.tribe-events .tribe-events-c-search__input-control--keyword input,
.tribe-events .tribe-events-c-search__input-control--datepicker input {

    border-radius: 14px!important;

    border: 1px solid rgba(0,0,0,0.08)!important;

    padding: 14px 18px!important;

    background: var(--pv-light)!important;
}


/* ==========================================
MONTH VIEW
========================================== */

.tribe-events-calendar-month__day {
    background: white!important;

    border-radius: 18px!important;

    transition: all 0.3s ease!important;
}

.tribe-events-calendar-month__day:hover {
    background: var(--pv-cream)!important;
}

.tribe-events-calendar-month__day-cell--selected,
.tribe-events-calendar-month__day--current {
    background: var(--pv-cream)!important;
}


/* ==========================================
TODAY LABEL
========================================== */

.tribe-events-calendar-month__day-date-daynum-current {
    color: var(--pv-green)!important;

    font-weight: bold!important;
}


/* ==========================================
EVENT DOTS / TAGS
========================================== */

.tribe-events-calendar-month__calendar-event-title,
.tribe-events-calendar-month__multiday-event-bar-title {
    color: var(--pv-green)!important;
}


/* ==========================================
SINGLE EVENT PAGE
========================================== */

.single-tribe_events .tribe-events-single {
    background: white!important;

    border-radius: 30px!important;

    padding: 40px!important;

    box-shadow: 0 12px 35px rgba(0,0,0,0.05)!important;

    border: 1px solid rgba(0,0,0,0.04)!important;
}


/* ==========================================
EVENT META BOX
========================================== */

.tribe-events-single-section {
    background: var(--pv-light)!important;

    border-radius: 22px!important;

    padding: 25px!important;

    border: none!important;
}


/* ==========================================
NAVIGATION
========================================== */

.tribe-events-c-nav__prev,
.tribe-events-c-nav__next {
    color: var(--pv-green)!important;

    transition: all 0.3s ease!important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
    color: var(--pv-gold)!important;
}


/* ==========================================
MOBILE
========================================== */

@media(max-width: 768px){

    .tribe-common-g-row.tribe-events-calendar-list__event-row {
        padding: 24px!important;

        border-radius: 22px!important;
    }

    .tribe-events-calendar-list__event-title,
    .tribe-events-single-event-title {
        font-size: 24px!important;
    }

    .single-tribe_events .tribe-events-single {
        padding: 28px!important;

        border-radius: 24px!important;
    }

}
```

---

## Important Notes

The Events Calendar:

* are multe view-uri diferite,
* iar clasele pot varia între versiuni.

Acest stylesheet este construit pentru:

* List View
* Month View
* Single Event View

și va acoperi majoritatea use-case-urilor standard.

---

## Recomandare UX

Pentru Paradisul Verde:

* List View va arăta cel mai elegant
* Month View este bun ca secundar

List View se potrivește mai bine unui:

* community portal
* residential dashboard
* modern private platform

și este mai ușor de navigat pentru utilizatori non-tehnici.