1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-21 14:19:42 +02:00
codex.docs/src/frontend/styles/vars.pcss

83 lines
2 KiB
Text
Raw Normal View History

2018-09-18 13:10:44 +03:00
:root {
--color-text-main: #313649;
--color-text-second: #5d6068;
2018-09-18 13:10:44 +03:00
--color-line-gray: #E8E8EB;
--color-link-active: #2071cc;
--color-link-hover: #F3F6F8;
--color-bg-light: #f8f7fa;
--color-page-active: #ff1767;
2018-09-18 13:10:44 +03:00
--color-button-primary: #3389FF;
--color-button-primary-hover: #2E7AE6;
--color-button-primary-active: #296DCC;
--color-button-secondary: #717682;
--color-button-secondary-hover: #5D6068;
--color-button-secondary-active: #4B4F5B;
--color-button-warning: #EF5C5C;
--color-button-warning-hover: #D65151;
--color-button-warning-active: #BD4848;
2018-09-18 13:10:44 +03:00
/**
* Site layout sizes
*/
--layout-padding-horizontal: 16px;
--layout-padding-vertical: 30px;
--layout-width-aside: 300px;
2018-09-18 13:10:44 +03:00
--layout-width-main-col: 650px;
@media (--mobile) {
--layout-padding-horizontal: 15px;
--layout-padding-vertical: 15px;
}
--font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
--font-serif {
font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Arial, sans-serif;
letter-spacing: -0.03em;
}
--button {
display: inline-block;
padding: 9px 15px;
border-radius: 3px;
color: #6c6375;
background: #fcfcff;
box-shadow: inset 0 0 0 1px rgba(184, 189, 206, 0.2);
font-size: 14px;
line-height: 1em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
-webkit-appearance: none;
border: 0;
svg {
margin: 0 0.3em 0 -0.05em;
}
}
--button-primary {
background: var(--color-link-active);
color: #fff;
box-shadow: none;
&:hover {
background: color-mod(var(--color-link-active) blackness(+10%));
}
}
2018-09-18 13:10:44 +03:00
}
/**
* Custom media queries
*/
2021-04-19 17:57:33 +03:00
@custom-media --wide-desktop all and (min-width: 1300px);
@custom-media --desktop all and (min-width: 1050px);
2021-04-19 17:57:33 +03:00
@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
@custom-media --mobile all and (max-width: 980px);
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);