Skip to content

Commit ca58635

Browse files
pclslopespclslopes
committed
fix for buttons in tailwind
1 parent d41d44e commit ca58635

2 files changed

Lines changed: 107 additions & 24 deletions

File tree

‎css/SimpleCalendarJs.css‎

Lines changed: 106 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -947,6 +947,110 @@ html[data-bs-theme="dark"] #calendar .view-dropdown-item.active {
947947
TAILWIND CSS COMPATIBILITY OVERRIDES
948948
================================================ */
949949

950+
/* CRITICAL: Override Tailwind button defaults with maximum specificity */
951+
#calendar button.cal-nav-button,
952+
#calendar .cal-nav-button,
953+
#calendar button.cal-nav-button.cal-nav-button,
954+
#calendar .cal-nav-button.cal-nav-button {
955+
/* Reset Tailwind button defaults */
956+
all: unset !important;
957+
/* Restore calendar button styles */
958+
display: inline-block !important;
959+
cursor: pointer !important;
960+
padding: 6px 12px !important;
961+
margin: 0 2px !important;
962+
border-radius: 4px !important;
963+
font-size: 14px !important;
964+
transition: all 0.2s ease !important;
965+
text-decoration: none !important;
966+
box-sizing: border-box !important;
967+
font-family: inherit !important;
968+
line-height: normal !important;
969+
vertical-align: baseline !important;
970+
background-color: #f8f9fa !important;
971+
border: 1px solid #dee2e6 !important;
972+
color: #374151 !important;
973+
}
974+
975+
/* Transparent buttons when showBackground is false - MAXIMUM specificity */
976+
#calendar:not(.calendar-with-background) button.cal-nav-button,
977+
#calendar:not(.calendar-with-background) .cal-nav-button,
978+
#calendar:not(.calendar-with-background) button.cal-nav-button.cal-nav-button,
979+
#calendar:not(.calendar-with-background) .cal-nav-button.cal-nav-button {
980+
background-color: transparent !important;
981+
border-color: transparent !important;
982+
color: inherit !important;
983+
box-shadow: none !important;
984+
}
985+
986+
/* Hover states for transparent buttons */
987+
#calendar:not(.calendar-with-background) button.cal-nav-button:hover,
988+
#calendar:not(.calendar-with-background) .cal-nav-button:hover,
989+
#calendar:not(.calendar-with-background) button.cal-nav-button.cal-nav-button:hover,
990+
#calendar:not(.calendar-with-background) .cal-nav-button.cal-nav-button:hover {
991+
background-color: rgba(0,0,0,0.05) !important;
992+
border-color: transparent !important;
993+
color: inherit !important;
994+
}
995+
996+
/* Primary button styles */
997+
#calendar button.cal-nav-button.cal-nav-primary,
998+
#calendar .cal-nav-button.cal-nav-primary,
999+
#calendar button.cal-nav-button.cal-nav-primary.cal-nav-button,
1000+
#calendar .cal-nav-button.cal-nav-primary.cal-nav-button {
1001+
background-color: #e9ecef !important;
1002+
border-color: #adb5bd !important;
1003+
color: #374151 !important;
1004+
}
1005+
1006+
/* Primary button transparent states */
1007+
#calendar:not(.calendar-with-background) button.cal-nav-button.cal-nav-primary,
1008+
#calendar:not(.calendar-with-background) .cal-nav-button.cal-nav-primary,
1009+
#calendar:not(.calendar-with-background) button.cal-nav-button.cal-nav-primary.cal-nav-button,
1010+
#calendar:not(.calendar-with-background) .cal-nav-button.cal-nav-primary.cal-nav-button {
1011+
background-color: transparent !important;
1012+
border-color: transparent !important;
1013+
color: inherit !important;
1014+
}
1015+
1016+
/* DARK MODE button overrides with maximum specificity */
1017+
[data-bs-theme="dark"] #calendar button.cal-nav-button,
1018+
[data-bs-theme="dark"] #calendar .cal-nav-button,
1019+
[data-bs-theme="dark"] #calendar button.cal-nav-button.cal-nav-button,
1020+
[data-bs-theme="dark"] #calendar .cal-nav-button.cal-nav-button {
1021+
background-color: #404040 !important;
1022+
border-color: #555555 !important;
1023+
color: #f1f5f9 !important;
1024+
}
1025+
1026+
[data-bs-theme="dark"] #calendar button.cal-nav-button.cal-nav-primary,
1027+
[data-bs-theme="dark"] #calendar .cal-nav-button.cal-nav-primary,
1028+
[data-bs-theme="dark"] #calendar button.cal-nav-button.cal-nav-primary.cal-nav-button,
1029+
[data-bs-theme="dark"] #calendar .cal-nav-button.cal-nav-primary.cal-nav-button {
1030+
background-color: #555555 !important;
1031+
border-color: #666666 !important;
1032+
color: #f1f5f9 !important;
1033+
}
1034+
1035+
/* Dark mode transparent buttons */
1036+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) button.cal-nav-button,
1037+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) .cal-nav-button,
1038+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) button.cal-nav-button.cal-nav-button,
1039+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) .cal-nav-button.cal-nav-button {
1040+
background-color: transparent !important;
1041+
border-color: transparent !important;
1042+
color: inherit !important;
1043+
}
1044+
1045+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) button.cal-nav-button:hover,
1046+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) .cal-nav-button:hover,
1047+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) button.cal-nav-button.cal-nav-button:hover,
1048+
[data-bs-theme="dark"] #calendar:not(.calendar-with-background) .cal-nav-button.cal-nav-button:hover {
1049+
background-color: rgba(255,255,255,0.1) !important;
1050+
border-color: transparent !important;
1051+
color: inherit !important;
1052+
}
1053+
9501054
/* Force higher specificity for calendar elements to override Tailwind utilities */
9511055
#calendar .calendar-table * {
9521056
box-sizing: border-box !important;
@@ -960,15 +1064,14 @@ html[data-bs-theme="dark"] #calendar .view-dropdown-item.active {
9601064
font-family: inherit !important;
9611065
}
9621066

963-
/* Dark theme day numbers */
1067+
/* Dark theme day numbers - FIXED for visibility */
9641068
[data-bs-theme="dark"] #calendar .calendar-day .date,
9651069
[data-bs-theme="dark"] #calendar .date {
9661070
color: #f1f5f9 !important; /* Bright white for better contrast */
9671071
}
9681072

9691073
/* Dark theme headers and navigation - ensure bright white text */
970-
[data-bs-theme="dark"] #calendar .calendar-table thead .c-name,
971-
[data-bs-theme="dark"] #calendar .cal-nav-button {
1074+
[data-bs-theme="dark"] #calendar .calendar-table thead .c-name {
9721075
color: #f1f5f9 !important;
9731076
}
9741077

@@ -987,26 +1090,6 @@ html[data-bs-theme="dark"] #calendar .view-dropdown-item.active {
9871090
color: #e74c3c !important;
9881091
}
9891092

990-
/* Button text colors - force inheritance from parent */
991-
#calendar .cal-nav-button,
992-
#calendar .cal-nav-button * {
993-
text-decoration: none !important;
994-
}
995-
996-
/* Force transparent backgrounds when showBackground is false */
997-
#calendar:not(.calendar-with-background) .cal-nav-button {
998-
background: transparent !important;
999-
border-color: transparent !important;
1000-
box-shadow: none !important;
1001-
}
1002-
1003-
/* Reset any inherited Tailwind button styles */
1004-
#calendar .cal-nav-button {
1005-
appearance: none !important;
1006-
-webkit-appearance: none !important;
1007-
-moz-appearance: none !important;
1008-
}
1009-
10101093
/* Ensure proper font rendering */
10111094
#calendar, #calendar * {
10121095
-webkit-font-smoothing: antialiased !important;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "simple-calendar-js",
3-
"version": "1.0.11",
3+
"version": "1.0.12",
44
"description": "A clean, modern, and feature-rich JavaScript calendar component with zero dependencies. Responsive design and intuitive navigation.",
55
"main": "js/SimpleCalendarJs.js",
66
"style": "css/SimpleCalendarJs.css",

0 commit comments

Comments
 (0)