mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Website: Fix homepage image border and background. (#16559)
Closes: https://github.com/fleetdm/fleet/issues/16558 Changes: - Updated the styles for the boxes in the "An open interface for every endpoint" callout box on the homepage to resolve a bug affecting older browser versions.
This commit is contained in:
Eric
GitHub
parent
9ac8ab203a
commit
fc8c78ae77
23
website/assets/styles/pages/homepage.less
vendored
23
website/assets/styles/pages/homepage.less
vendored
@ -513,7 +513,15 @@
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
[purpose='endpoint-empty-image-box'] {
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
border: 1px dashed #C5C7D1;
|
||||
}
|
||||
[purpose='endpoint-image-box'] {
|
||||
background: #FFF;
|
||||
border: 1px solid #C5C7D1;
|
||||
}
|
||||
[purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
|
||||
display: flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@ -523,12 +531,6 @@
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed #C5C7D1;
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
&:has(img) {
|
||||
border: 1px solid #C5C7D1;
|
||||
background: #FFF;
|
||||
}
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
img {
|
||||
@ -853,6 +855,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[purpose='endpoints-banner'] {
|
||||
max-height: 282px;
|
||||
padding-left: 40px;
|
||||
@ -866,7 +869,7 @@
|
||||
[purpose='endpoints-images'] {
|
||||
[purpose='endpoint-images-row'] {
|
||||
margin-bottom: 12px;
|
||||
[purpose='endpoint-image-box'] {
|
||||
[purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 12px 7.5px 5.25px 7.5px;
|
||||
@ -1074,7 +1077,7 @@
|
||||
margin-left: 0px;
|
||||
[purpose='endpoint-images-row'] {
|
||||
min-height: 80px;
|
||||
[purpose='endpoint-image-box'] {
|
||||
[purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
|
||||
display: flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@ -1337,7 +1340,7 @@
|
||||
[purpose='endpoint-images-row'] {
|
||||
min-height: 60px;
|
||||
margin-bottom: 12px;
|
||||
[purpose='endpoint-image-box'] {
|
||||
[purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 12px 7.5px 5.25px 7.5px;
|
||||
@ -1432,7 +1435,7 @@
|
||||
[purpose='endpoint-images-row'] {
|
||||
min-height: 54.427px;
|
||||
margin-bottom: 12px;
|
||||
[purpose='endpoint-image-box'] {
|
||||
[purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
|
||||
width: 54.427px;
|
||||
height: 54.427px;
|
||||
padding: 10.885px 6.803px 4.762px 6.803px;
|
||||
|
||||
48
website/views/pages/homepage.ejs
vendored
48
website/views/pages/homepage.ejs
vendored
@ -190,14 +190,14 @@
|
||||
</div>
|
||||
<div purpose="endpoints-images">
|
||||
<div purpose="endpoint-images-row" class="d-md-flex d-none">
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
</div>
|
||||
<div purpose="endpoint-images-row">
|
||||
<div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-image-box">
|
||||
<img alt="AWS" src="/images/logo-aws-36x36@2x.png">
|
||||
<p>AWS</p>
|
||||
@ -218,12 +218,12 @@
|
||||
<img alt="IOT" src="/images/icon-iot-36x36@2x.png">
|
||||
<p>IoT (Linux)</p>
|
||||
</div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
</div>
|
||||
<div purpose="endpoint-images-row">
|
||||
<div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
|
||||
<div purpose="endpoint-image-box">
|
||||
<img alt="macOS" src="/images/logo-apple-36x36@2x.png">
|
||||
<p>macOS</p>
|
||||
@ -248,11 +248,11 @@
|
||||
<img alt="Containers" src="/images/logo-docker-40x40@2x.png">
|
||||
<p>Containers</p>
|
||||
</div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
</div>
|
||||
<div purpose="endpoint-images-row">
|
||||
<div purpose="endpoint-image-box" class="d-md-flex d-none"></div>
|
||||
<div purpose="endpoint-empty-image-box" class="d-md-flex d-none"></div>
|
||||
<div purpose="endpoint-image-box" class="d-md-flex d-none">
|
||||
<img alt="ChromeOS" src="/images/logo-chrome-36x37@2x.png">
|
||||
<p>Chromebook</p>
|
||||
@ -265,19 +265,19 @@
|
||||
<img alt="IOT" src="/images/icon-iot-36x36@2x.png">
|
||||
<p>IoT (Linux)</p>
|
||||
</div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
</div>
|
||||
<div purpose="endpoint-images-row">
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
<div purpose="endpoint-empty-image-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user