FILE / Unmei/Frontend
src/pages/App/App.sass
Исходный файл и его история в репозитории.
114 lines
2.9 KiB
Sass
114 lines
2.9 KiB
Sass
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
|
|
@import "../../Constants"
|
|
|
|
html, body, #root
|
|
width: 100%
|
|
height: 100%
|
|
|
|
body, pre, textarea
|
|
font-family: 'Roboto', sans-serif
|
|
|
|
h1, h2, h3, h4, h5, h6, p, body, pre
|
|
margin: 0
|
|
|
|
body
|
|
padding: 0
|
|
|
|
--main-color: #{$mainColor}
|
|
--sec-color: #{$secondaryColor}
|
|
--link-color: #{$linkHoverColor}
|
|
|
|
--main-bg-color: #{$primaryBackgroundColor}
|
|
--sec-bg-color: #{$secondaryBackgroundColor}
|
|
--block-color: #{$blockBackgroundColor}
|
|
--block-sec-color: #{$blockSecondaryBackgroundColor}
|
|
--nav-bg-color: #{$navbarBackgroundColor}
|
|
|
|
--error-bg-color: #{$errorBackgroundColor}
|
|
--success-bg-color: #{$successBackgroundColor}
|
|
|
|
color: var(--main-color)
|
|
background: var(--main-bg-color)
|
|
|
|
pre
|
|
white-space: pre-wrap
|
|
|
|
body[theme='red']
|
|
--main-bg-color: #{$primaryBackgroundColorRed}
|
|
--sec-bg-color: #{$secondaryBackgroundColorRed}
|
|
--block-color: #{$blockBackgroundColorRed}
|
|
--block-sec-color: #{$blockSecondaryBackgroundColorRed}
|
|
--nav-bg-color: #{$navbarBackgroundColorRed}
|
|
|
|
body[theme='blue']
|
|
--main-bg-color: #{$primaryBackgroundColorBlue}
|
|
--sec-bg-color: #{$secondaryBackgroundColorBlue}
|
|
--block-color: #{$blockBackgroundColorBlue}
|
|
--block-sec-color: #{$blockSecondaryBackgroundColorBlue}
|
|
--nav-bg-color: #{$navbarBackgroundColorBlue}
|
|
|
|
body[theme='green']
|
|
--main-bg-color: #{$primaryBackgroundColorGreen}
|
|
--sec-bg-color: #{$secondaryBackgroundColorGreen}
|
|
--block-color: #{$blockBackgroundColorGreen}
|
|
--block-sec-color: #{$blockSecondaryBackgroundColorGreen}
|
|
--nav-bg-color: #{$navbarBackgroundColorGreen}
|
|
|
|
body[theme='light']
|
|
--main-color: #{$mainColorLight}
|
|
--link-color: #{$linkHoverColorLight}
|
|
--sec-color: #{$secondaryColorLight}
|
|
|
|
--main-bg-color: #{$primaryBackgroundColorLight}
|
|
--sec-bg-color: #{$secondaryBackgroundColorLight}
|
|
--block-color: #{$blockBackgroundColorLight}
|
|
--block-sec-color: #{$blockSecondaryBackgroundColorLight}
|
|
--nav-bg-color: #{$navbarBackgroundColorLight}
|
|
|
|
body[theme='win95']
|
|
--main-color: #{$mainColorLight}
|
|
--link-color: #{$linkHoverColorLight}
|
|
--sec-color: #{$secondaryColorLight}
|
|
|
|
--main-bg-color: #008083
|
|
--sec-bg-color: #c0c0c0
|
|
--nav-bg-color: #c0c0c0
|
|
|
|
.Navbar
|
|
box-shadow: 0 1px 1px 1px white
|
|
|
|
a
|
|
color: var(--main-color)
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
color: var(--link-color)
|
|
|
|
*
|
|
scrollbar-color: #eee #222
|
|
scrollbar-width: thin
|
|
|
|
.Container
|
|
max-width: 1200px
|
|
min-height: calc(100vh - 16rem)
|
|
margin: .5rem auto
|
|
|
|
.Notifications
|
|
@media (min-width: 500px)
|
|
padding: 1rem
|
|
box-sizing: border-box
|
|
|
|
.Successful, .Error
|
|
border: var(--link-color) 1px solid
|
|
padding: .5rem
|
|
border-radius: 3px
|
|
margin-bottom: 1rem
|
|
|
|
.Error
|
|
color: #{mainColor}
|
|
background-color: var(--error-bg-color)
|
|
|
|
.Successful
|
|
color: #{mainColor}
|
|
background-color: var(--success-bg-color)
|