Skip to content

Commit 064541d

Browse files
idanlodzkiidanlodzki
authored
Merge pull request #94 from Nexvyn/feature-redesign-features-section
Fixes dark mode styling for admonition blocks on documentation pages #82
2 parents bc0983f + ed07bb8 commit 064541d

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

‎opsimate-docs/src/css/custom.css‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -877,3 +877,246 @@ button[class*="toggle"] {
877877
.admonitionContent_pbrs p a:hover {
878878
text-decoration-color: currentColor;
879879
}
880+
881+
/* ===== DARK MODE ADMONITION STYLES ===== */
882+
883+
/* Base admonition styles for dark mode */
884+
[data-theme="dark"] .admonition {
885+
background-color: #1a1a1a !important;
886+
border: 1px solid #333333 !important;
887+
color: #e6eef6 !important;
888+
}
889+
890+
/* Tip admonition (Our Mission block) - Using a more harmonious indigo shade */
891+
[data-theme="dark"] .admonition-tip {
892+
background-color: #252a4b !important; /* Darker, more muted indigo */
893+
border: 1px solid #3949ab !important; /* Primary indigo color */
894+
color: #e3f2fd !important;
895+
}
896+
897+
[data-theme="dark"] .admonition-tip .admonitionHeading {
898+
background-color: rgba(57, 73, 171, 0.2) !important; /* Transparent indigo */
899+
color: #bbdefb !important; /* Light blue text */
900+
border-bottom: 1px solid #3949ab !important;
901+
}
902+
903+
/* Info admonition - Using a harmonious blue shade */
904+
[data-theme="dark"] .admonition-info {
905+
background-color: #1a237e !important; /* Darker indigo-blue */
906+
border: 1px solid #303f9f !important; /* Slightly lighter blue */
907+
color: #e3f2fd !important;
908+
}
909+
910+
[data-theme="dark"] .admonition-info .admonitionHeading {
911+
background-color: rgba(48, 63, 159, 0.2) !important; /* Transparent blue */
912+
color: #bbdefb !important;
913+
border-bottom: 1px solid #303f9f !important;
914+
}
915+
916+
/* Caution admonition - Using a harmonious amber shade */
917+
[data-theme="dark"] .admonition-caution {
918+
background-color: #342d1d !important; /* Dark amber background */
919+
border: 1px solid #5d4037 !important; /* Brownish amber border */
920+
color: #ffecb3 !important;
921+
}
922+
923+
[data-theme="dark"] .admonition-caution .admonitionHeading {
924+
background-color: rgba(93, 64, 55, 0.2) !important; /* Transparent amber */
925+
color: #ffecb3 !important;
926+
border-bottom: 1px solid #5d4037 !important;
927+
}
928+
929+
/* Danger admonition - Using a harmonious red shade */
930+
[data-theme="dark"] .admonition-danger {
931+
background-color: #2d1b1b !important; /* Dark red background */
932+
border: 1px solid #6d4c41 !important; /* Brownish red border */
933+
color: #ffcdd2 !important;
934+
}
935+
936+
[data-theme="dark"] .admonition-danger .admonitionHeading {
937+
background-color: rgba(109, 76, 65, 0.2) !important; /* Transparent red */
938+
color: #ffcdd2 !important;
939+
border-bottom: 1px solid #6d4c41 !important;
940+
}
941+
942+
/* Ensure content text is properly styled */
943+
[data-theme="dark"] .admonitionContent_pbrs {
944+
color: inherit !important;
945+
}
946+
947+
[data-theme="dark"] .admonitionContent_pbrs p {
948+
color: inherit !important;
949+
margin: 0 !important;
950+
}
951+
952+
[data-theme="dark"] .admonitionContent_pbrs p a {
953+
color: inherit !important;
954+
text-decoration: underline !important;
955+
}
956+
957+
/* ===== ALERT STYLES FOR BOTH LIGHT AND DARK MODES ===== */
958+
959+
/* Base alert styles for consistent appearance */
960+
.alert {
961+
color: #e6eef6 !important;
962+
}
963+
964+
/* Light mode base styles */
965+
html[data-theme="light"] .alert,
966+
[data-theme="light"] .alert {
967+
background-color: #e8f5e9 !important; /* Light green background */
968+
border: 1px solid #4caf50 !important; /* Green border */
969+
color: #2e7d32 !important; /* Dark green text */
970+
}
971+
972+
/* Dark mode base styles */
973+
html[data-theme="dark"] .alert,
974+
[data-theme="dark"] .alert {
975+
background-color: #121212 !important; /* Dark background */
976+
border: 1px solid #333333 !important; /* Dark border */
977+
color: #e6eef6 !important; /* Light text */
978+
}
979+
980+
/* Tip alert - Light mode */
981+
html[data-theme="light"] .alert--tip,
982+
[data-theme="light"] .alert--tip {
983+
background-color: #e8f5e9 !important; /* Light green background */
984+
border: 1px solid #4caf50 !important; /* Green border */
985+
color: #2e7d32 !important; /* Dark green text */
986+
}
987+
988+
/* Info alert - Light mode */
989+
html[data-theme="light"] .alert--info,
990+
[data-theme="light"] .alert--info {
991+
background-color: #e3f2fd !important; /* Light blue background */
992+
border: 1px solid #2196f3 !important; /* Blue border */
993+
color: #1565c0 !important; /* Dark blue text */
994+
}
995+
996+
/* Caution alert - Light mode */
997+
html[data-theme="light"] .alert--caution,
998+
[data-theme="light"] .alert--caution {
999+
background-color: #fff8e1 !important; /* Light amber background */
1000+
border: 1px solid #ffc107 !important; /* Amber border */
1001+
color: #ff8f00 !important; /* Dark amber text */
1002+
}
1003+
1004+
/* Danger alert - Light mode */
1005+
html[data-theme="light"] .alert--danger,
1006+
[data-theme="light"] .alert--danger {
1007+
background-color: #ffebee !important; /* Light red background */
1008+
border: 1px solid #f44336 !important; /* Red border */
1009+
color: #c62828 !important; /* Dark red text */
1010+
}
1011+
1012+
/* Tip alert - Dark mode */
1013+
html[data-theme="dark"] .alert--tip,
1014+
[data-theme="dark"] .alert--tip {
1015+
background-color: #121212 !important; /* Dark background */
1016+
border: 1px solid #3949ab !important; /* Indigo border */
1017+
color: #e3f2fd !important; /* Light text */
1018+
}
1019+
1020+
/* Info alert - Dark mode */
1021+
html[data-theme="dark"] .alert--info,
1022+
[data-theme="dark"] .alert--info {
1023+
background-color: #121212 !important; /* Dark background */
1024+
border: 1px solid #303f9f !important; /* Indigo blue border */
1025+
color: #e3f2fd !important; /* Light text */
1026+
}
1027+
1028+
/* Caution alert - Dark mode */
1029+
html[data-theme="dark"] .alert--caution,
1030+
[data-theme="dark"] .alert--caution {
1031+
background-color: #121212 !important; /* Dark background */
1032+
border: 1px solid #5d4037 !important; /* Brownish amber border */
1033+
color: #ffecb3 !important; /* Light amber text */
1034+
}
1035+
1036+
/* Danger alert - Dark mode */
1037+
html[data-theme="dark"] .alert--danger,
1038+
[data-theme="dark"] .alert--danger {
1039+
background-color: #121212 !important; /* Dark background */
1040+
border: 1px solid #6d4c41 !important; /* Brownish red border */
1041+
color: #ffcdd2 !important; /* Light red text */
1042+
}
1043+
1044+
/* Ensure alert content is properly styled */
1045+
.alert__content {
1046+
color: inherit !important;
1047+
}
1048+
1049+
.alert__content p {
1050+
color: inherit !important;
1051+
margin: 0 !important;
1052+
}
1053+
1054+
.alert__content a {
1055+
color: inherit !important;
1056+
text-decoration: underline !important;
1057+
}
1058+
1059+
/* ===== DARK MODE SPECIFIC OVERRIDES (if needed) ===== */
1060+
1061+
/* Dark mode alert background */
1062+
[data-theme="dark"]:root {
1063+
--ifm-alert-background-color: #121212 !important;
1064+
}
1065+
1066+
/* Alternative approach - direct styling for alerts in dark mode */
1067+
html[data-theme="dark"] .alert,
1068+
[data-theme="dark"] .alert {
1069+
background-color: #121212 !important;
1070+
border: 1px solid #333333 !important;
1071+
color: #e6eef6 !important;
1072+
}
1073+
1074+
/* Tip alert (Our Mission block) - Dark mode */
1075+
html[data-theme="dark"] .alert--tip,
1076+
[data-theme="dark"] .alert--tip {
1077+
background-color: #121212 !important;
1078+
border: 1px solid #3949ab !important; /* Primary indigo color */
1079+
color: #e3f2fd !important;
1080+
}
1081+
1082+
/* Info alert - Dark mode */
1083+
html[data-theme="dark"] .alert--info,
1084+
[data-theme="dark"] .alert--info {
1085+
background-color: #121212 !important;
1086+
border: 1px solid #303f9f !important; /* Indigo blue */
1087+
color: #e3f2fd !important;
1088+
}
1089+
1090+
/* Caution alert - Dark mode */
1091+
html[data-theme="dark"] .alert--caution,
1092+
[data-theme="dark"] .alert--caution {
1093+
background-color: #121212 !important;
1094+
border: 1px solid #5d4037 !important; /* Brownish amber */
1095+
color: #ffecb3 !important;
1096+
}
1097+
1098+
/* Danger alert - Dark mode */
1099+
html[data-theme="dark"] .alert--danger,
1100+
[data-theme="dark"] .alert--danger {
1101+
background-color: #121212 !important;
1102+
border: 1px solid #6d4c41 !important; /* Brownish red */
1103+
color: #ffcdd2 !important;
1104+
}
1105+
1106+
/* Ensure alert content is properly styled with higher specificity for dark mode */
1107+
html[data-theme="dark"] .alert__content,
1108+
[data-theme="dark"] .alert__content {
1109+
color: inherit !important;
1110+
}
1111+
1112+
html[data-theme="dark"] .alert__content p,
1113+
[data-theme="dark"] .alert__content p {
1114+
color: inherit !important;
1115+
margin: 0 !important;
1116+
}
1117+
1118+
html[data-theme="dark"] .alert__content a,
1119+
[data-theme="dark"] .alert__content a {
1120+
color: inherit !important;
1121+
text-decoration: underline !important;
1122+
}

0 commit comments

Comments
 (0)