FILE / Unmei/Frontend
src/components/App/App.sass
Исходный файл и его история в репозитории.
114 lines
2.9 KiB
Sass
Executable File
114 lines
2.9 KiB
Sass
Executable File
@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
|
|
margin: 0
|
|
padding: 0
|
|
font-family: 'Roboto', sans-serif
|
|
|
|
--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
|
|
font-family: 'Roboto', sans-serif
|
|
margin: 0
|
|
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}
|
|
|
|
a
|
|
color: var(--main-color)
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
color: var(--link-color)
|
|
|
|
input, button, textarea
|
|
color: var(--main-color)
|
|
|
|
button
|
|
cursor: pointer
|
|
border-radius: $borderRadius
|
|
background-color: var(--block-color)
|
|
border: 1px solid var(--main-color)
|
|
|
|
&:hover
|
|
background-color: var(--block-sec-color)
|
|
color: var(--link-color)
|
|
border: 1px solid var(--link-color)
|
|
|
|
|
|
input
|
|
background-color: var(--sec-block-color) !important
|
|
border: none
|
|
border-bottom: 1px solid var(--main-color) !important
|
|
|
|
*
|
|
scrollbar-color: #eee #222
|
|
scrollbar-width: thin
|
|
|
|
.Container
|
|
max-width: 1200px
|
|
min-height: calc( 100% - 4rem )
|
|
margin: .5rem auto
|
|
|
|
.Notifications
|
|
position: fixed
|
|
bottom: 0
|
|
left: 0
|
|
z-index: 100000
|
|
padding: 1rem
|
|
|
|
.Error
|
|
border: var(--link-color) 1px solid
|
|
padding: 1rem
|
|
border-radius: 3px
|