about summary refs log blame commit diff
path: root/app/javascript/flavours/glitch/styles/components/accounts.scss
blob: fcae59a01a55aba6a7e68d7279879c47a3c52e2e (plain) (tree)
1
2
3
4
5
6
7
8
9

                                                       
                        


                          
                              


                          










                                                      






                          
                     













                           
                     






















                               



                                          
                      
                          






















                               







                                                       


                            
                     



                           
                 
                                                     
                  
                                       


                   

                                                 



                              
                              














                               
                                 

   














                                  
                        
                  
                            


                     
                                 




























                                                       
                            


                      




                            
 
                  


                              








                              
                                              









                                                   





                                
                       
                           
































                                                     
     






                        
                   
                             
                     
                 
                      
                                             
                            


                     



               
 
                             
                  
                   

                        

                         
                     

                     






                                     
 
                          
                            
                                                       
                  
                
                 
 

                                           
              

         
     
                   
                   
                              
                    
                     
                       
                          
 
              
                                   











                                    
                                                                          





                                                             











                                                       
                            























                                    
 






                            







                                         
                        
                          




                       



















































































                                                             
     


                                                  
                       
             
                                 





















                                            












































                                                          
                  

                        
                                               













                                                      
                       




                                                       

               














                            
                                             















                                    


                              
























































                                                         
 
.account {
  padding: 10px;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  color: inherit;
  text-decoration: none;

  .account__display-name {
    flex: 1 1 auto;
    display: block;
    color: $darker-text-color;
    overflow: hidden;
    text-decoration: none;
    font-size: 14px;
  }

  &.small {
    border: none;
    padding: 0;

    & > .account__avatar-wrapper { margin: 0 8px 0 0 }

    & > .display-name {
      height: 24px;
      line-height: 24px;
    }
  }
}

.account__wrapper {
  display: flex;
}

.account__avatar-wrapper {
  float: left;
  margin-left: 12px;
  margin-right: 12px;
}

.account__avatar {
  @include avatar-radius();
  position: relative;
  cursor: pointer;

  &-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }
}

.account__avatar-overlay {
  position: relative;
  @include avatar-size(48px);

  &-base {
    @include avatar-radius();
    @include avatar-size(36px);
  }

  &-overlay {
    @include avatar-radius();
    @include avatar-size(24px);

    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
}

.account__relationship {
  height: 18px;
  padding: 10px;
  white-space: nowrap;
}

.account__header__wrapper {
  flex: 0 0 auto;
  background: lighten($ui-base-color, 4%);
}

.account__disclaimer {
  padding: 10px;
  color: $dark-text-color;

  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }

  a {
    font-weight: 500;
    color: inherit;
    text-decoration: underline;

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }
}

.account__action-bar {
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  line-height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
}

.account__action-bar-links {
  display: flex;
  flex: 1 1 auto;
  line-height: 18px;
  text-align: center;
}

.account__action-bar__tab {
  text-decoration: none;
  overflow: hidden;
  flex: 0 1 100%;
  border-left: 1px solid lighten($ui-base-color, 8%);
  padding: 10px 0;
  border-bottom: 4px solid transparent;

  &:first-child {
    border-left: 0;
  }

  &.active {
    border-bottom: 4px solid $ui-highlight-color;
  }

  & > span {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    color: $darker-text-color;
  }

  strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: $primary-text-color;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }

  abbr {
    color: $highlight-text-color;
  }
}

.account-authorize {
  padding: 14px 10px;

  .detailed-status__display-name {
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
  }
}

.account-authorize__avatar {
  float: left;
  margin-right: 10px;
}

.notification__message {
  margin-left: 42px;
  padding: 8px 0 0 26px;
  cursor: default;
  color: $darker-text-color;
  font-size: 15px;
  position: relative;

  .fa {
    color: $highlight-text-color;
  }

  > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.account--panel {
  background: lighten($ui-base-color, 4%);
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  display: flex;
  flex-direction: row;
  padding: 10px 0;
}

.account--panel__button,
.detailed-status__button {
  flex: 1 1 auto;
  text-align: center;
}

.column-settings__outer {
  background: lighten($ui-base-color, 8%);
  padding: 15px;
}

.column-settings__section {
  color: $darker-text-color;
  cursor: default;
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
}

.column-settings__hashtags {
  .column-settings__row {
    margin-bottom: 15px;
  }

  .column-select {
    &__control {
      @include search-input();
    }

    &__placeholder {
      color: $dark-text-color;
      padding-left: 2px;
      font-size: 12px;
    }

    &__value-container {
      padding-left: 6px;
    }

    &__multi-value {
      background: lighten($ui-base-color, 8%);

      &__remove {
        cursor: pointer;

        &:hover,
        &:active,
        &:focus {
          background: lighten($ui-base-color, 12%);
          color: lighten($darker-text-color, 4%);
        }
      }
    }

    &__multi-value__label,
    &__input {
      color: $darker-text-color;
    }

    &__clear-indicator,
    &__dropdown-indicator {
      cursor: pointer;
      transition: none;
      color: $dark-text-color;

      &:hover,
      &:active,
      &:focus {
        color: lighten($dark-text-color, 4%);
      }
    }

    &__indicator-separator {
      background-color: lighten($ui-base-color, 8%);
    }

    &__menu {
      @include search-popout();
      padding: 0;
      background: $ui-secondary-color;
    }

    &__menu-list {
      padding: 6px;
    }

    &__option {
      color: $inverted-text-color;
      border-radius: 4px;
      font-size: 14px;

      &--is-focused,
      &--is-selected {
        background: darken($ui-secondary-color, 10%);
      }
    }
  }
}

.column-settings__row {
  .text-btn {
    margin-bottom: 15px;
  }
}

.relationship-tag {
  color: $primary-text-color;
  margin-bottom: 4px;
  display: block;
  vertical-align: top;
  background-color: $base-overlay-background;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.7;

  &:hover {
    opacity: 1;
  }
}

.account-gallery__container {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 2px;
}

.account-gallery__item {
  border: none;
  box-sizing: border-box;
  display: block;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin: 2px;

  &__icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
  }
}

.notification__filter-bar,
.account__section-headline {
  background: darken($ui-base-color, 4%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  cursor: default;
  display: flex;
  flex-shrink: 0;

  button {
    background: darken($ui-base-color, 4%);
    border: 0;
    margin: 0;
  }

  button,
  a {
    display: block;
    flex: 1 1 auto;
    color: $darker-text-color;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    position: relative;

    &.active {
      color: $secondary-text-color;

      &::before,
      &::after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        transform: translateX(-50%);
        border-style: solid;
        border-width: 0 10px 10px;
        border-color: transparent transparent lighten($ui-base-color, 8%);
      }

      &::after {
        bottom: -1px;
        border-color: transparent transparent $ui-base-color;
      }
    }
  }
}

.account__moved-note {
  padding: 14px 10px;
  padding-bottom: 16px;
  background: lighten($ui-base-color, 4%);
  border-top: 1px solid lighten($ui-base-color, 8%);
  border-bottom: 1px solid lighten($ui-base-color, 8%);

  &__message {
    position: relative;
    margin-left: 58px;
    color: $dark-text-color;
    padding: 8px 0;
    padding-top: 0;
    padding-bottom: 4px;
    font-size: 14px;

    > span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &__icon-wrapper {
    left: -26px;
    position: absolute;
  }

  .detailed-status__display-avatar {
    position: relative;
  }

  .detailed-status__display-name {
    margin-bottom: 0;
  }
}

.account__header__content {
  color: $darker-text-color;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;

	.emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0;
  }

  .hoverplay:hover { padding-left: 20px }

  p, pre, blockquote {
    margin-bottom: 20px;
    white-space: pre-wrap;

    &:last-child {
      margin-bottom: 0;
    }
  }

	h1, h2, h3, h4, h5, h6 {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	h1, h2 {
		font-weight: 700;
		font-size: 18px;
	}

	h2 {
		font-size: 16px;
	}

	h3, h4, h5, h6 {
		font-weight: 500;
	}

	blockquote {
		padding-left: 10px;
		border-left: 3px solid $darker-text-color;
		color: $darker-text-color;
		white-space: normal;
		font-style: italic;

		p:last-child {
			margin-bottom: 20px;
		}
	}

	b, strong {
		font-weight: 700;
	}

	em, i {
		font-style: italic;
	}

	sub {
		font-size: smaller;
		text-align: sub;
	}

	sup {
		vertical-align: super;
		font-size: smaller;
	}

	ul, ol {
		margin-left: 1em;

		p {
			margin: 0;
		}

		li:last-child {
			margin-bottom: 20px;
		}
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}

	s, del {
		text-decoration: line-through;
	}

	hr {
		border-color: lighten($dark-text-color, 10%);
	}

	pre, code {
		color: lighten($dark-text-color, 33%);
	}

	mark {
		background-color: #ccff15;
		color: black;
	}

  a {
    background-color: lighten($ui-base-color, 7%);
    color: darken($secondary-text-color, 10%);
    text-decoration: none;
    padding: 2px;
    border-radius: 8px;

    &:hover {
      text-decoration: underline;
      color: lighten($dark-text-color, 10%);
    }

    &.mention {
      &:hover {
        text-decoration: none;

        span {
          text-decoration: underline;
        }
      }
    }

    .fa {
      color: $dark-text-color;
    }
  }

  p {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.account__header {
  overflow: hidden;

  &.inactive {
    opacity: 0.5;

    .account__header__image,
    .account__avatar {
      filter: grayscale(100%);
    }
  }

  &__info {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  &__image {
    overflow: hidden;
    height: 145px;
    position: relative;
    background: darken($ui-base-color, 4%);

    img {
      object-fit: cover;
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }

  &__bar {
    position: relative;
    background: lighten($ui-base-color, 4%);
    padding: 5px;
    border-bottom: 1px solid lighten($ui-base-color, 12%);

    .avatar {
      display: block;
      flex: 0 0 auto;
      width: 94px;
      margin-left: -2px;

      .account__avatar {
        background: darken($ui-base-color, 8%);
        border: 2px solid lighten($ui-base-color, 4%);
      }
    }
  }

  &__tabs {
    display: flex;
    align-items: flex-start;
    padding: 7px 5px;
    margin-top: -55px;

    &__buttons {
      display: flex;
      align-items: center;
      padding-top: 55px;
      overflow: hidden;

      .icon-button {
        border: 1px solid lighten($ui-base-color, 12%);
        border-radius: 4px;
        box-sizing: content-box;
        padding: 2px;
      }

      .button {
        margin: 0 8px;
      }
    }

    &__name {
      padding: 5px;

      .account-role {
        vertical-align: top;
      }

      .emojione {
        width: 22px;
        height: 22px;
      }

      .hoverplay:hover { padding-left: 22px }

      h1 {
        font-size: 16px;
        line-height: 24px;
        color: $primary-text-color;
        font-weight: 500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        small {
          display: block;
          font-size: 14px;
          color: $darker-text-color;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .roles {
          white-space: normal;
        }
      }
    }

    .spacer {
      flex: 1 1 auto;
    }
  }

  &__bio {
    overflow: hidden;
    margin: 0 -5px;

    .account__header__content {
      padding: 20px 15px;
      padding-bottom: 5px;
      color: $primary-text-color;
    }

    .account__header__fields {
      margin: 0;
      border-top: 1px solid lighten($ui-base-color, 12%);

      a {
        color: lighten($ui-highlight-color, 8%);
      }

      dl:first-child .verified {
        border-radius: 0 4px 0 0;
      }

      .verified a {
        color: $valid-value-color;
      }
    }
  }

  &__extra {
    margin-top: 4px;

    &__links {
      font-size: 14px;
      color: $darker-text-color;

      a {
        display: inline-block;
        color: $darker-text-color;
        text-decoration: none;
        padding: 10px;
        padding-top: 20px;
        font-weight: 500;

        strong {
          font-weight: 700;
          color: $primary-text-color;
        }
      }
    }
  }
}