nerdzero Posted May 29, 2022 Share Posted May 29, 2022 (edited) Description: A Material dark theme for Cachet, the open source status page. Also fixes the timeline view line to not extend off the ends. Note: This style does not, and can not, affect the metrics graphs font color. Preview: https://imgur.com/1fbYQpl https://imgur.com/BOCaskJ Cachet > Settings > Theme Background Color: #263238 Text Color: #ECEFF1 Red: #FF1744 Blue: #00BCD4 Green: #1DE9B6 Yellow: #FFC400 Orange: #FF9100 Metrics Fill: #0DCCC0 Links: #00FFCC Background Fills: #455A64 Cachet > Settings > Stylesheet body.status-page .list-group .list-group-item.group-name { background-color: #607D8B; } body.status-page .list-group.components { border-color: #455A64; } body.status-page .list-group .list-group-item { border-color: #11171A; } body.status-page .list-group .list-group-item { background-color: #37474F; } body.status-page .list-group.components a { color: #ECEFF1 !important; } body.status-page .timeline .moment .status-icon { background: #11171A; font-size: 16px; text-align: center; line-height: 31px; border-color: #607D8B; border-width: 2px; } body.status-page .timeline .moment .status-icon.status-1 { background: #F44336; } body.status-page .timeline .moment .status-icon.status-2 { background: #FFC107; } body.status-page .timeline .moment .status-icon.status-3 { background: #03A9F4; } body.status-page .timeline .moment .status-icon.status-4 { background: #1DE9B6; } body.status-page .timeline .moment::before { background: #607D8B; } body.status-page .timeline .moment .status-icon .icon { position: initial; color: #000 !important; } body.status-page .timeline .moment .panel-message.list-group.components, body.status-page .timeline .moment .panel.panel-message, .incident { background-color: #37474F; border-color: #455A64; } .btn.btn-default { background: transparent; color: #B0BEC5; border-color: #607D8B; } .btn.btn-default:hover { background: #546E7A; color: #FFF; border-color: #607D8B; } .btn.btn-danger { background: transparent; color: #F44336; border-color: #607D8B; } .btn.btn-danger:hover { background: #F44336; color: #FFF; border-color: #607D8B; } body.status-page .timeline .moment .status-icon.status-1 .icon:before { content: "" !important; } body.status-page .timeline .moment .status-icon.status-3 .icon:before { content: "" !important; } .alert.alert-success { color: #000; } .group-toggle { display: none; } body.status-page .timeline .moment:last-child::before { height: 48px; } body.status-page .timeline .moment:first-child::before { top: 48px; } body.status-page .timeline .moment:only-child::before { display: none; } .panel.panel-message::before { border-left-color: #455A64 !important; border-right-color: #455A64 !important; left: 0px !important; } .panel.panel-message::after { border-left-color: #37474F !important; border-right-color: #37474F !important; } a { color: #00ffcc; } Edited May 29, 2022 by nerdzero Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.