Skip to content

Updated StatusPal CSS to fix always on hover issue #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alex-solcast merged 36 commits into from
Dec 16, 2024
Merged

Updated StatusPal CSS to fix always on hover issue #38

Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
4a60aa9
Hero Counter additon and update to main script file.
Rework-Digital Oct 1, 2024
4161537
Updated gap on Proof Splide
Rework-Digital Oct 2, 2024
8a25f16
Updated Gap
Rework-Digital Oct 2, 2024
534e332
Update to main script
Rework-Digital Oct 21, 2024
e283466
Updated Splide JS
Rework-Digital Oct 21, 2024
1fe8bc0
Update to Testimonial Slider to fix mobile view
Rework-Digital Nov 1, 2024
58bc237
Splitting component scripts out
Rework-Digital Nov 1, 2024
474c798
Blog Template Page customisations and scripts.
Rework-Digital Nov 4, 2024
0f614ef
Update to CSS file
Rework-Digital Nov 4, 2024
73c415d
Updated Class Selector for Section Banner
Rework-Digital Nov 4, 2024
62a8762
Refactored CSS code to remove !important
Rework-Digital Nov 4, 2024
a262a39
Updated comments on css file.
Rework-Digital Nov 4, 2024
5b08c50
Update to CSS formatting
Rework-Digital Nov 6, 2024
9d447ac
Updates to CSS and JS files for new components
Rework-Digital Nov 25, 2024
ec781a3
update to css file
Rework-Digital Nov 25, 2024
7c15756
Fix issues in css file
Rework-Digital Nov 25, 2024
224b36c
Merge branch 'main' into main
Rework-Digital Nov 25, 2024
32addb7
Splitting Font Update CSS
Rework-Digital Nov 26, 2024
0176364
updated js files and split js from main solcast.webflow.scripts.js in…
Rework-Digital Nov 27, 2024
5f7dda3
Navbar Animation
Rework-Digital Dec 4, 2024
306dc3d
Formatting clean up in css file and additional comments in footer js …
Rework-Digital Dec 4, 2024
efd4548
Merge branch 'main' into main
Rework-Digital Dec 4, 2024
c737c2b
Update of Font import and Pricing Table Tab Selector Script
Rework-Digital Dec 9, 2024
d9f42a8
Update to Hightlight Script and CSS file
Rework-Digital Dec 11, 2024
da143d7
Fixed comment spelling
Rework-Digital Dec 11, 2024
e2df99d
Merge branch 'main' into main
Rework-Digital Dec 11, 2024
e65a7be
Updated absolute paths to relative
Rework-Digital Dec 11, 2024
21139a7
additional css
Rework-Digital Dec 11, 2024
b65a6ab
Update to Page Banner page break
Rework-Digital Dec 13, 2024
3d64110
adding swiper-bundle.min.css file to main repo
Rework-Digital Dec 16, 2024
2828c07
Updated Status Pal CSS
Rework-Digital Dec 16, 2024
231d9eb
Updated Status pal css
Rework-Digital Dec 16, 2024
ac60db7
Merge branch 'main' into main
Rework-Digital Dec 16, 2024
c72ce83
Added credit to statuspal css
Rework-Digital Dec 16, 2024
eee9a70
Merge branch 'main' of https://github.com/Rework-Digital/webflow
Rework-Digital Dec 16, 2024
f60b971
Updated Credit
Rework-Digital Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 32 additions & 23 deletions assets/css/solcast.webflow.style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -663,21 +663,23 @@ table tbody tr:last-child td:last-child{
right: 0;
}

/* API Status Styling */

/* API Status Styling - Styling information adapted from https://statuspal.io/js/widget.js */
.sp-status {
position: relative;
display: inline-block;
}

/* Status Badge Styles */
.sp-status .sp-status-badge {
width: 0.8em;
height: 0.8em;
margin-left: 0.3em;
display: inline-block;
border-radius: 50%;
}

.sp-status .sp-status-badge.sp-status-ok {
background: rgb(52, 200, 0);
background: #34c800;
}
.sp-status .sp-status-badge.sp-status-scheduled {
background: #2498ec;
Expand All @@ -689,72 +691,79 @@ table tbody tr:last-child td:last-child{
background: #ff231f;
}

/* Tooltip text */
/* Tooltip Base Styles */
.sp-status .sp-tooltip {
font-size: 12px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
padding: 5px 8px;
border-radius: 4px;
position: absolute;
z-index: 1;
max-width: 130px;
word-break: break-word;
max-width: max-content;
visibility: hidden;
white-space: nowrap;
}

/* Tooltip Arrow */
.sp-status .sp-tooltip::after {
content: " ";
content: "";
position: absolute;
margin-left: -5px;
border-width: 5px;
border-style: solid;
color: black;
}
.sp-status .sp-tooltip--top, .sp-status .sp-tooltip--bottom {
margin-left: -65px;

/* Tooltip Positions */
.sp-status .sp-tooltip--top,
.sp-status .sp-tooltip--bottom {
left: 50%;
transform: translateX(-50%);
}
.sp-status .sp-tooltip--top {
bottom: 120%;
}
.sp-status .sp-tooltip--top::after {
top: 100%; /* At the bottom of the tooltip */
top: 100%;
left: 50%;
transform: translateX(-50%);
border-color: black transparent transparent transparent;
}
.sp-status .sp-tooltip--bottom {
top: 120%;
}
.sp-status .sp-tooltip--bottom::after {
top: -10px; /* At the bottom of the tooltip */
top: -10px;
left: 50%;
transform: translateX(-50%);
border-color: transparent transparent black transparent;
}
.sp-status .sp-tooltip--left, .sp-status .sp-tooltip--right {

.sp-status .sp-tooltip--left,
.sp-status .sp-tooltip--right {
top: 50%;
transform: translateY(-50%);
}
.sp-status .sp-tooltip--left::after, .sp-status .sp-tooltip--right::after {
top: calc(50% - 5px);
border-color: transparent transparent transparent black;
}
.sp-status .sp-tooltip--left {
right: 105%;
}
.sp-status .sp-tooltip--left::after {
left: calc(100% + 5px);
left: 100%;
top: 50%;
transform: translateY(-50%);
border-color: transparent transparent transparent black;
}
.sp-status .sp-tooltip--right {
left: 105%;
}
.sp-status .sp-tooltip--right::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-color: transparent black transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */

/* Show Tooltip on Hover */
.sp-status:hover .sp-tooltip {
visibility: visible;
}
Expand Down Expand Up @@ -877,7 +886,7 @@ img[style-image-object-fit="cover"] {
}

@media (max-width: 990px) {
.component_brand-feature_columns {
.component_brand-feature_columns, .component_brand-feature_columns.is-split-1-3-2-3 {
grid-template-columns: 1fr;
}
}
Expand Down
Loading