_styles.sass

// cf. "Resize" hook
.no-user-select
  user-select: none

.no-pointer-events
  pointer-events: none

.side-panel
  background-color: #fff
  padding: 0.3em
  width: 50vw
  top: 3.7em
  position: fixed
  z-index: 1

  .list-group
    .list-group-item-heading
      display: inline-block
      width: 60px

  @include right-handed
    right: space-x(1)

    .header
      float: right

  @include left-handed
    left: space-x(1)

    .header
      float: left

  // @TODO: better side panel management
  .texts-sidepanel

    &__header
      padding: $card-spacer-y $card-spacer-x 0
      font-size: 20px
      text-align: right

    &__body
      padding-left: $card-spacer-x
      padding-right: $card-spacer-x

      .document-layout__title
        font-size: 21px

      .document-layout__abstract__content
        // max-height: 200px
        // overflow-y: scroll
        font-size: 16px



/* */

.join-button
  padding-bottom: 100px
  padding-top: 100px

// Add pointer to Bootstrap Select
select.form-control
  cursor: pointer


#app
  width: 100%

.router

  &__inner
    display: flex
    position: relative

    @include left-handed
      flex-direction: row-reverse

    @include right-handed
      flex-direction: row

  &__aside
    // @TODO: topbar width
    $offset-y: 56px
    $min-width: 200px
    $default-width: 280px

    flex-grow: 0
    flex-shrink: 0
    width: $default-width
    min-width: $min-width
    height: calc(100vh - #{ $offset-y })
    z-index: z-index('main', 'sidebar')

    &__inner
      height: inherit
      width: inherit
      min-width: inherit
      position: fixed

    &__handle
      min-width: inherit
      width: inherit
      height: inherit
      position: fixed
      z-index: z-index('main', 'handlebar')
      pointer-events: none

      &__action
        $handle-width: 8px

        width: $handle-width
        height: inherit
        background: transparent
        cursor: col-resize
        position: absolute
        right: - #{ $handle-width / 2 }
        pointer-events: all


  &__body
    position: relative
    flex-grow: 1
    flex-shrink: 1


.main-page
  $self: &
  $page-padding: space-x(3) space-x(4)

  position: relative

  &__main-row
    display: flex

    &--with-y-tiles

      #{ $self }__main-route
        width: 60%
      #{ $self }__vertical-tiles
        width: 40%

    &--only-y-tiles
      // ensure minimum height, so that the border delimiting "main route" and
      // its "vertical tiles" will not end abruptly
      min-height: calc( 100vh - #{ $topbar-height })

  // main route ~ main tile
  &__main-route
    padding: $page-padding
    width: 100%

  // optional vertical tiles ~ y axis column
  &__vertical-tiles
    display: flex
    flex-direction: column

  // optional horizontal tiles ~ x axis row
  &__horizontal-tiles
    display: flex
    flex-direction: row

    // dynamic width according to number of tiles
    @for $i from 1 through 10

      &--#{ $i } .tile-block
        width: calc( 100% / #{ $i })

.tile-block
  $tile-padding: space-x(0.5) space-x(2) space-x(1.5)

  &__header
    display: flex

    @include right-handed
      justify-content: flex-end

    @include left-handed
      justify-content: flex-start

  &__body
    padding: $tile-padding

.action-upload-button
  $spinner-size: 23px // @TODO use futur bootstrap button deferred status here
  $spinner-left-offset: -32px
  $spinner-top-offset: 6px

  position: relative

  &__spinner
    position: absolute
    width: $spinner-size
    height: $spinner-size
    left: $spinner-left-offset
    top: $spinner-top-offset

// @TODO expand <tabs> to fit a ".main-page__main-route" with its padding
//       really KISS solution, better prevent the whole padding set (as the
//       likes of many pages, such as the Graph Explorer one)
.nodes-lists-layout-tabs,
.nodes-texts-layout-tabs,
.nodes-annuaire-layout-tabs

  .nav.nav-tabs
    margin-left: -32px
    margin-right: -32px
    padding-left: 32px
    padding-right: 32px


.jitsi-iframe
  height: 70em


// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
  background: rgba(51, 122, 183, 0.1)
  border-radius: 100%
  height: calc(var(--size, 14) * 1px)
  overflow: hidden
  position: relative
  width: calc(var(--size, 14) * 1px)

  .progress-pie-segment
    --a: calc(var(--over50, 0) * -100%)
    --b: calc((1 + var(--over50, 0)) * 100%)
    --degrees: calc((var(--offset, 0) / 100) * 360)
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    height: 100%
    position: absolute
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
    transform-origin: 50% 100%
    width: 100%
    z-index: calc(1 + var(--over50))

    &:after,
    &:before
      background: var(--bg, rgb(51, 122, 183))
      content: ''
      height: 100%
      position: absolute
      width: 100%

    &:before
      --degrees: calc((var(--value, 45) / 100) * 360)
      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
      transform-origin: 50% 0%

    &:after
      opacity: var(--over50, 0)

/////////////////////////////////////////////:

// @TODO better responsive display for tablet screens
.home-title
  $raw-logo-width: 334px

  padding: space-x(3)
  display: flex
  gap: space-x(3)
  margin-bottom: space-x(5)

  &__logo
    flex-basis: $raw-logo-width
    flex-shrink: 1

  &__jumbo
    flex-grow: 1
    position: relative

  &__folders

    &:not(:first-child)
      margin-top: space-x(3)


.home-tutorial
  // for preload purpose
  $card-estimated-width: 712px
  $card-estimated-height: 164px

  text-align: center

  .card
    min-width: $card-estimated-width
    display: inline-flex

    &:not(:last-child)
      margin-bottom: space-x(3)

  .card-body
    min-height: $card-estimated-height

  .folder-view
    display: inline-flex
    flex-wrap: unset


.home-license
  font-size: 15px

  .b-icon
    font-size: 12px

/////////////////////////////////////////////

.glyphitem
  top: 0
  display: inline-block
  float: right
  opacity: 0.6
  padding-right: 5px
  cursor: pointer
  transition: transform 0.1s ease-out 0s
  font-size: 15px
  text-align: center

  &:hover
    display: inline-block
    opacity: 1
    transform: scale(1.4)