fixed darkmode color bug
parent
ddc6d618d1
commit
d474a946ab
@ -1,63 +0,0 @@
|
|||||||
@import '../../../styles/mixins.sass'
|
|
||||||
@import '../../../styles/vars.sass'
|
|
||||||
|
|
||||||
button
|
|
||||||
border: 2px solid $cHeadPrimaryBackground
|
|
||||||
margin-top: 0.125em
|
|
||||||
padding: 0.125em
|
|
||||||
background-color: $cHeadPrimaryBackground
|
|
||||||
color: $cHeadFontColor
|
|
||||||
font-weight: bold
|
|
||||||
transition-duration: 0.25s
|
|
||||||
|
|
||||||
button:hover
|
|
||||||
background-color: lighten($cHeadPrimaryBackground, 10%)
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
button:active
|
|
||||||
background-color: darken($cHeadPrimaryBackground, 5%)
|
|
||||||
box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25)
|
|
||||||
|
|
||||||
h1
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
line-height: 100%
|
|
||||||
margin-left: 0.5em
|
|
||||||
margin-top: 0.25em
|
|
||||||
|
|
||||||
#tab-home
|
|
||||||
@include gridPosition(1, 2, 2, 3)
|
|
||||||
|
|
||||||
#tab-profile
|
|
||||||
@include gridPosition(1, 2, 3, 4)
|
|
||||||
|
|
||||||
#tab-about
|
|
||||||
@include gridPosition(1, 2, 4, 5)
|
|
||||||
|
|
||||||
#tab-imprint
|
|
||||||
@include gridPosition(1, 2, 5, 6)
|
|
||||||
|
|
||||||
#tab-login
|
|
||||||
@include gridPosition(1, 2, 6, 7)
|
|
||||||
|
|
||||||
#dropdown
|
|
||||||
@include gridPosition(1, 2, 7, 8)
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
margin-left: 2em
|
|
||||||
span
|
|
||||||
margin-left: 1em
|
|
||||||
#symbol
|
|
||||||
span:hover
|
|
||||||
background-color: lighten($cHeadPrimaryBackground, 10%)
|
|
||||||
cursor: pointer
|
|
||||||
#dropdown-content
|
|
||||||
position: absolute
|
|
||||||
background-color: $cHeadPrimaryBackground
|
|
||||||
min-width: 160px
|
|
||||||
margin-top: 7vh
|
|
||||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
|
|
||||||
padding: 12px 16px
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
#logoutbutton
|
|
||||||
@include gridPosition(1, 2, 8, 9)
|
|
@ -1,91 +0,0 @@
|
|||||||
@import '../../../styles/mixins.sass'
|
|
||||||
@import '../../../styles/vars.sass'
|
|
||||||
|
|
||||||
#chat
|
|
||||||
display: grid
|
|
||||||
grid-template: 7.5% 82.5% 10%/100%
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
#header
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
background-color: $cBoxHeaderBackground
|
|
||||||
display: grid
|
|
||||||
grid-template: 100% /20% 80%
|
|
||||||
|
|
||||||
span
|
|
||||||
color: $cFontWhite
|
|
||||||
span.title
|
|
||||||
@include gridPosition(1, 2, 2, 3)
|
|
||||||
margin-top: 0.25em
|
|
||||||
margin-left: 0.25em
|
|
||||||
line-height: 100%
|
|
||||||
font-size: 2em
|
|
||||||
|
|
||||||
button
|
|
||||||
background-color: $cBoxHeaderBackground
|
|
||||||
border: none
|
|
||||||
|
|
||||||
button:hover
|
|
||||||
background-color: lighten($cBoxHeaderBackground, 10%)
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
button:active
|
|
||||||
background-color: darken($cBoxHeaderBackground, 5%)
|
|
||||||
|
|
||||||
#goback
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
|
|
||||||
#chatheader
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
display: grid
|
|
||||||
grid-template: 100% /10% 90%
|
|
||||||
#goback
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
#name
|
|
||||||
@include gridPosition(1, 2, 2, 3)
|
|
||||||
|
|
||||||
#messagecontainer
|
|
||||||
@include gridPosition(2, 3, 1, 2)
|
|
||||||
overflow: auto
|
|
||||||
.chatmessage
|
|
||||||
width: 100%
|
|
||||||
#ownmessage
|
|
||||||
text-align: right
|
|
||||||
margin: 0.5em
|
|
||||||
span
|
|
||||||
background-color: $cMessageOwn
|
|
||||||
border: solid
|
|
||||||
border-color: $cMessageOwn
|
|
||||||
border-radius: 0.25em
|
|
||||||
#foreignmessage
|
|
||||||
text-align: left
|
|
||||||
margin: 0.5em
|
|
||||||
span
|
|
||||||
background-color: $cMessageForeign
|
|
||||||
border: solid
|
|
||||||
border-color: $cMessageForeign
|
|
||||||
border-radius: 0.25em
|
|
||||||
|
|
||||||
|
|
||||||
#newmessage
|
|
||||||
@include gridPosition(3, 4, 1, 2)
|
|
||||||
margin: 0.5em
|
|
||||||
display: grid
|
|
||||||
grid-template: 100% /80% 20%
|
|
||||||
#input
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
border-radius: 0.25em
|
|
||||||
border: 1px solid $cFeedInputBorder
|
|
||||||
padding: 0.125em
|
|
||||||
resize: none
|
|
||||||
#send
|
|
||||||
@include gridPosition(1, 2, 2, 3)
|
|
||||||
button
|
|
||||||
background-color: $cFeedChooserBackground
|
|
||||||
color: $cFontWhite
|
|
||||||
border: none
|
|
||||||
border-radius: 0.5em
|
|
||||||
button:hover
|
|
||||||
background-color: lighten($cFeedChooserBackground, 10%)
|
|
||||||
cursor: pointer
|
|
@ -1,71 +0,0 @@
|
|||||||
@import '../../../styles/mixins.sass'
|
|
||||||
@import '../../../styles/vars.sass'
|
|
||||||
|
|
||||||
#chatlist
|
|
||||||
display: grid
|
|
||||||
grid-template: 7.5% 92.5%/100%
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
#header
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
background-color: $cBoxHeaderBackground
|
|
||||||
display: grid
|
|
||||||
grid-template: 100% /80% 20%
|
|
||||||
|
|
||||||
span
|
|
||||||
color: $cFontWhite
|
|
||||||
span.title
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
margin-top: 0.25em
|
|
||||||
margin-left: 0.25em
|
|
||||||
line-height: 100%
|
|
||||||
font-size: 2em
|
|
||||||
|
|
||||||
button
|
|
||||||
background-color: $cBoxHeaderBackground
|
|
||||||
border: none
|
|
||||||
|
|
||||||
button:hover
|
|
||||||
background-color: lighten($cBoxHeaderBackground, 10%)
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
button:active
|
|
||||||
background-color: darken($cBoxHeaderBackground, 5%)
|
|
||||||
|
|
||||||
#newchat
|
|
||||||
@include gridPosition(1, 2, 2, 3)
|
|
||||||
|
|
||||||
#chats
|
|
||||||
overflow: auto
|
|
||||||
@include gridPosition(2, 3, 1, 2)
|
|
||||||
|
|
||||||
div:hover
|
|
||||||
background-color: darken($cPrimaryBackground, 10%)
|
|
||||||
cursor: pointer
|
|
||||||
.chatitem
|
|
||||||
background-color: $cPrimaryBackground
|
|
||||||
height: 3em
|
|
||||||
margin: 0.2em
|
|
||||||
padding: 0.25em
|
|
||||||
border-radius: 0.25em
|
|
||||||
display: grid
|
|
||||||
grid-template: 100% / 20% 60% 20%
|
|
||||||
.picture
|
|
||||||
@include gridPosition(1, 2, 1, 2)
|
|
||||||
border: solid
|
|
||||||
.name, .date
|
|
||||||
margin-top: auto
|
|
||||||
margin-bottom: auto
|
|
||||||
.name
|
|
||||||
@include gridPosition(1, 2, 2, 3)
|
|
||||||
font-weight: bold
|
|
||||||
text-align: left
|
|
||||||
padding-left: 0.5em
|
|
||||||
span
|
|
||||||
font-size: 125%
|
|
||||||
.date
|
|
||||||
@include gridPosition(1, 2, 3, 4)
|
|
||||||
color: $cInactiveText
|
|
||||||
text-align: right
|
|
||||||
padding-right: 0.5em
|
|
@ -1,27 +1,6 @@
|
|||||||
$cPrimaryBackground: #fff
|
@import '~@angular/material/theming'
|
||||||
$cSecondaryBackground: #ddd
|
|
||||||
$cInactiveText: #555
|
|
||||||
$cPrimarySurface: #fff
|
|
||||||
|
|
||||||
//Headerbar
|
$primary: mat-palette($mat-light-green);
|
||||||
$cHeadPrimaryBackground: #0d6b14
|
$primary-color: mat-color($primary);
|
||||||
$cHeadFontColor: #adffc1ee
|
|
||||||
|
|
||||||
//Home -- Feed
|
|
||||||
$cFeedPrimaryFontColor: #243dca
|
|
||||||
$cFeedSecondaryFontColor: #243dca
|
|
||||||
$cFeedInputBorder: #396d51
|
|
||||||
$cFeedItemBackground: #b0ecb0fb
|
|
||||||
$cFeedChooserBackground: #259145
|
|
||||||
$cFeedBackground: #36ce64
|
|
||||||
$cFeedUpVote: #2cb149
|
|
||||||
$cFeedDownVote: #ff5f5f
|
|
||||||
|
|
||||||
//Home -- Chat, Friends, Groups
|
|
||||||
$cFontWhite: #fff//#adffc1ee //this is also the background color lol
|
|
||||||
$cBoxHeaderBackground: #259145
|
|
||||||
$cBoxBodyBackground: #fff//#3deb71
|
|
||||||
$cMessageOwn: #cfe4c9
|
|
||||||
$cMessageForeign: #baca5d
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue