indentlabs/notebook

$transition-effects: color 1s ease, background-color 1s ease;

body {
    background-color: #eee;
  transition: $transition-effects;

    &.dark {
        background-color: #202123;
        color: #fff;
        nav {
            background-color: #2196F3;
        }

        .card, .card-panel {
            background-color: rgba(255, 255, 255, 0.2);

      .card-title {
        color: #fff;
      }

            .card-content {

                p {
                    color: #ddd;
                }
            }
    }
    .card-reveal {
      background-color: #3B4043;
        }
        .dropdown-content {
            background-color: #2D2D31;
            a {
                color: #ccc;
                &:hover {
                    background-color: #3B4043;
                }
            }

            li.optgroup > span {
                color: #ccc;
            }
        }
    .modal {
      background-color: #2D2D31;
    }
        .btn {
            background-color: #000000;
            border: 1px solid #aaa;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #888;
            color: #ccc;
        }
        .divider {
            opacity: 0.2;
        }
        .input-field {
            .helper-text {
                color: #ccc;
            }
        }
    textarea, input {
      color: #fff;

      &::placeholder {
        color: #aaa;
      }
    }
    .collapsible-header {
            background-color: #3B4043;
            
            &:active {
                background: #2196F3;
            }
    }
        .sidenav, .collapsible-body {
            background-color: #2D2D31;
            li {
                a {
                    &:not(.subheader){
                        color: #89B2F5;
                        &:hover {
                            background-color: #3B4043;
                        }
                    }
                    &.subheader {
                        color:#9AA0A6; 
                    }
                    .material-icons {
                        color: #9AA0A6;
                    }
                }
            }
        }
        .collection {
            border: 1px solid rgba(255,255,255,0.2);
            background: black;
            
            .collection-header {
                background: #3B4043;
            }

            .collection-item {
                background-color: rgba(255, 255, 255, 0.2);
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            }
        }
        #editor {
            background-color: #3B4043;
            color: white;
        }

        #notifications-dropdown .notification-link {
            color: white;
        }

        .unread-notification .notification-link {
            background: #E3F2FD;

            div {
              color: black;
            }
        }

        #thredded--container {
            input {
                color: white;
            }

            .thredded--post--dropdown--actions--item {
                color: black;

                &:hover {
                    color: white;
                }
            }

            .thredded--currently-online {
                border: 1px solid black;
            }

            .thredded--form.thredded--navigation--search.thredded--navigation--search-topics input {
                background-color: #2196F3;
            }

            .thredded--form {
                input, textarea {
                    color: white;
                    background-color: #3B4043;

                    &::placeholder {
                        color: #ddd;
                    }
                }

                .thredded--preview-area {
                    color: #ddd;
                }

                .thredded--form--submit {
                    background-color: #2196F3;
                    color: white;
                }
            }

            .thredded--messageboard, .thredded--form {
                background-color: #3B4043;
            }

            .thredded--messageboard--description {
                color: white;
            }

            .thredded--messageboard--byline, .thredded--messageboard--meta--counts, .thredded--navigation-breadcrumbs li a {
                color: #9AA0A6;
            }

            .thredded--nav-text {
                color: #ddd;
            }

            .thredded--post--created-at {
                color: #9AA0A6;
            }

            .thredded--topic-header {
                .thredded--topic-header--title {
                    color: white;
                }

                .thredded--topic-header--started-by, .thredded--topic-followers, .thredded--topic-header--follow-info--reason {
                    color: #9AA0A6;

                    a {
                        color: #4CAF50;
                    }
                }
            }

            .thredded--post--user {
                color: black;

                a {
                    color: #4CAF50;
                }
            }

            .thredded--post {
                background: #3B4043;
                color: white;

                border-bottom: 1px solid #333;
                border-top: 1px solid #666;
            }
            
            .muted-thredded-post {
                color: lightgrey;
                background-color: #202123 !important;
                border-bottom: 0 !important;
            }

            nav.thredded--pagination {
                background: #3B4043;
                a {
                    color: lightgrey;

                    &:hover {
                        color: white;
                    }
                }
            }

            .thredded--topics--topic {
                background-color: #3B4043;
                
                .thredded--topics--title a {
                    color: white;
                }

                .thredded--topics--updated-by {
                    color: #9AA0A6;

                    a {
                        color: #4CAF50;
                    }
                }

                .thredded--topics--posts-count {
                    border: 1px solid #555;
                }
            }

            .thredded--currently-online {
                background-color: #3B4043;

                .thredded--currently-online--title {
                    color: #9AA0A6;
                }
            }

            .thredded--user-navigation--item a {
                &:hover {
                    color: #000;
                }
            }
        }

        .thredded--post-form--title {
            color: #9AA0A6;
        }

        .tribute-container ul {
            background-color: #2D2D31;
        }

        .iconpicker-search {
            color: black;
        }
    }
}