瀏覽代碼

Added depth effect to boxes

full-screen-logo-homepage
Said Achmiz 5 年之前
父節點
當前提交
d5c6b7ddcf
共有 1 個檔案被更改,包括 15 行新增7 行删除
  1. 15
    7
      assets/css/main.css

+ 15
- 7
assets/css/main.css 查看文件



--deus-box-background-color: var(--deus-color-dark-grey); --deus-box-background-color: var(--deus-color-dark-grey);
--deus-box-border-color: var(--deus-color-gold); --deus-box-border-color: var(--deus-color-gold);
--deus-box-shadow-color: var(--deus-color-gold-shadow);


--deus-body-text-color: var(--deus-color-white); --deus-body-text-color: var(--deus-color-white);
--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter); --deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);
width: 100%; width: 100%;
padding: 0.75em 1.25em; padding: 0.75em 1.25em;
border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color); border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: 0 1px 0 0 var(--deus-box-shadow-color);
z-index: 1001; z-index: 1001;
transition: transition:
top 0.3s ease, top 0.3s ease,
padding: var(--deus-post-padding); padding: var(--deus-post-padding);
background-color: var(--deus-box-background-color); background-color: var(--deus-box-background-color);
border: var(--deus-box-border-width) solid var(--deus-box-border-color); border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: 0 0 0 1px var(--deus-body-background-color);
box-shadow:
0 0 0 1px var(--deus-box-shadow-color),
0 0 0 2px var(--deus-body-background-color);
z-index: 1; z-index: 1;
} }
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) { @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
background-color: var(--deus-box-background-color); background-color: var(--deus-box-background-color);
border: var(--deus-box-border-width) solid var(--deus-box-border-color); border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: box-shadow:
calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 var(--deus-body-background-color),
0 calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
calc(-1 * var(--deus-post-heading-spacing)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(-1 * var(--deus-box-border-width)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(-1 * var(--deus-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color);
0 0 0 1px var(--deus-box-shadow-color),
calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
calc(-1 * var(--deus-post-heading-spacing)) 0 0 1px var(--deus-body-background-color),
0 calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color);
font-family: var(--deus-heading-font); font-family: var(--deus-heading-font);
font-size: var(--deus-heading-font-size); font-size: var(--deus-heading-font-size);
font-weight: var(--deus-heading-font-weight); font-weight: var(--deus-heading-font-weight);

Loading…
取消
儲存