diff --git a/scss/import/_colors.scss b/scss/import/_colors.scss index ad7bb65..a63612b 100644 --- a/scss/import/_colors.scss +++ b/scss/import/_colors.scss @@ -2,3 +2,13 @@ $green: rgb(100, 200, 130); $green-dark: rgb(80, 180, 110); $red: rgb(255, 130, 130); $red-dark: rgb(255, 110, 110); +$white: rgb(245, 245, 255); +$white-dark: rgb(225, 225, 235); +$white-light: rgb(255, 255, 255); +$white-disabled: rgb(150, 150, 160); + +$bg30: rgb(30, 30, 45); +$bg40: rgb(40, 40, 60); +$bg50: rgb(50, 50, 75); +$bg60: rgb(60, 60, 90); +$bg70: rgb(70, 70, 105); diff --git a/scss/import/user.scss b/scss/import/user.scss index 806f161..74b3068 100644 --- a/scss/import/user.scss +++ b/scss/import/user.scss @@ -216,3 +216,98 @@ } } } + + +/* user: notification */ + +.user.notification { + .container { + h1.dividing.header { + border: 0; + color: $white; + } + .top.attached.tabular.menu { + border: 0; + .item { + border: 0; + color: $white-light; + &.active { + background: rgb(50, 50, 75); + color: $white-light; + } + .label { + background: $white; + color: rgb(60, 60, 90); + } + } + } + .bottom.attached.tab.segment { + background: $bg50; + border: 0; + table#notification_table { + background: $bg50; + tbody { + tr { + transition: background .2s; + &:hover { + background: $bg40; + } + td { // 1st row + span { + &.blue { + svg.octicon-pin { + fill: $white; + } + } + &.green { + svg.octicon-issue-opened { + fill: $green; + } + } + &.red { + svg.octicon-issue-closed { + fill: $red; + } + } + } + } + td { // 4th row + form { + button.mini.button { + background: $bg70; + transition: background .2s; + &:hover { + background: $bg60; + } + svg { + fill: $white-light; + } + } + } + } + } + } + } + } + .page.buttons { + .pagination.menu { + background: $bg60; + border: 0; + .item { + color: $white; + transition: background .2s; + &:hover { + background: $bg50; + } + &.active { + background: $bg50; + color: $white-light; + } + &.disabled { + color: $white-disabled; + } + } + } + } + } +}