Skip to content

Commit

Permalink
Merge pull request #310 from damonsson/2.0
Browse files Browse the repository at this point in the history 
replace font by Arial to save 800kb, fix contrast problem
  • Loading branch information
@damonsson
damonsson authored Nov 23, 2024
2 parents b687560 + 4ef91d8 commit 1347704
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 141 deletions.
5 changes: 5 additions & 0 deletions config/packages/sylius_twig_hooks.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ sylius_twig_hooks:
template: "analytics.html.twig"
priority: 100

'sylius_shop.base#stylesheets':
override:
template: "css_override.html.twig"
priority: 100

'sylius_shop.account.login.content.login_container':
analytics:
template: "shop_demo_credentials.html.twig"
Expand Down
1 change: 1 addition & 0 deletions templates/css_override.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<style>.info-box{position:fixed;bottom:20px;left:20px;z-index:9998;display:none;padding:25px 25px 80px;border-radius:6px;color:#fff;font-size:16px!important;line-height:1.6;box-shadow:0 6px 18px 0 rgba(0,0,0,.22);background:rgba(16,116,93,.9);backdrop-filter:blur(10px);overflow:hidden}.info-box.show,.info-toggle.show>svg:last-child,.info-toggle>svg:first-child{display:block}.info-box a{color:#fff;text-decoration:underline}.info-box a:hover{color:rgba(255,255,255,.85)!important;text-decoration:underline}.info-box label{font-size:16px!important;font-weight:700;padding:0!important;margin:0!important}.info-box select{width:100%;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:4px 10px!important}.info-cta,.info-toggle{display:flex;height:48px;border-radius:6px}.info-box__item{margin-bottom:10px}@media (min-width:600px){.info-box__item{display:flex;align-items:center;min-height:30px}}.info-box__item__label{flex-shrink:0;width:130px}.info-box__item__content{flex-grow:1}.select-color-green{background:rgba(16,116,93,.9)!important}.info-cta{position:absolute;bottom:20px;left:80px;align-items:center;padding:0 20px;background:#1e2e3e}.info-cta a{color:#fff;text-decoration:none}.info-toggle{position:fixed;bottom:40px;left:40px;z-index:9999;align-items:center;justify-content:center;width:48px;color:#1e2e3e;box-shadow:0 6px 18px 0 rgba(0,0,0,.05);background:#22b99a;cursor:pointer;transition:.2s}.info-toggle:hover{background:rgba(34,185,154,.8)!important}.info-toggle.show{background:#22b99a}.info-toggle.show>svg:first-child,.info-toggle>svg:last-child{display:none}.admin-layout .admin-layout__sidebar{z-index:997}.admin-layout__nav .sylius-admin-menu{padding-bottom:94px}.bg-success-subtle.text-success{color:#157247!important}button,html{letter-spacing:.03em}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{text-shadow:0 .01em,.01em 0,.01em .01em}*{font-family:Arial,serif}</style>
141 changes: 0 additions & 141 deletions templates/info_box.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,147 +1,6 @@
{% set admin_url = 'https://v2.demo.sylius.com/admin' %}
{% set api_url = 'https://v2.demo.sylius.com/api/v2' %}

<style>
.info-box {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9998;
display: none;
padding: 25px 25px 80px;
border-radius: 6px;
color: #fff;
font-size: 16px !important;
line-height: 1.6;
box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.22);
background: rgba(16, 116, 93, 0.9);
backdrop-filter: blur(10px);
overflow: hidden;
}
.info-box.show {
display: block;
}
.info-box a {
color: rgba(255, 255, 255, 1);
text-decoration: underline;
}
.info-box a:hover {
color: rgba(255, 255, 255, 0.85) !important;
text-decoration: underline;
}
.info-box label {
font-size: 16px !important;
font-weight: bold;
padding: 0 !important;
margin: 0 !important;
}
.info-box select {
width: 100%;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
padding: 4px 10px !important;
}
.info-box__item {
margin-bottom: 10px;
}
@media (min-width: 600px) {
.info-box__item {
display: flex;
align-items: center;
min-height: 30px;
}
}
.info-box__item__label {
flex-shrink: 0;
width: 130px;
}
.info-box__item__content {
flex-grow: 1;
}
.select-color-green {
background: rgba(16, 116, 93, 0.9) !important;
}
.info-cta {
position: absolute;
bottom: 20px;
left: 80px;
display: flex;
align-items: center;
height: 48px;
padding: 0 20px;
border-radius: 6px;
background: #1E2E3E;
}
.info-cta a {
color: #fff;
text-decoration: none;
}
.info-toggle {
position: fixed;
bottom: 40px;
left: 40px;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 6px;
color: #1E2E3E;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.05);
background: #22B99A;
cursor: pointer;
transition: all 0.2s;
}
.info-toggle:hover {
background: rgba(34, 185, 154, 0.8) !important;
}
.info-toggle.show {
background: #22B99A;
}
.info-toggle > svg:first-child {
display: block;
}
.info-toggle > svg:last-child {
display: none;
}
.info-toggle.show > svg:first-child {
display: none;
}
.info-toggle.show > svg:last-child {
display: block;
}
.admin-layout .admin-layout__sidebar {
z-index: 997;
}
.admin-layout__nav .sylius-admin-menu {
padding-bottom: 94px;
}
</style>

<div class="info-toggle" id="info-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-lg" viewBox="0 0 16 16">
<path d="m9.708 6.075-3.024.379-.108.502.595.108c.387.093.464.232.38.619l-.975 4.577c-.255 1.183.14 1.74 1.067 1.74.72 0 1.554-.332 1.933-.789l.116-.549c-.263.232-.65.325-.905.325-.363 0-.494-.255-.402-.704l1.323-6.208Zm.091-2.755a1.32 1.32 0 1 1-2.64 0 1.32 1.32 0 0 1 2.64 0Z"/>
Expand Down

0 comments on commit 1347704

Please sign in to comment.