agenda-libre-ruby/app/assets/stylesheets/events.css.sass

@import compass
@import awesome_mixins

header.calendar-header
  font-size: 1.5em
  margin-top: 0.4em
  font-weight: bolder
  a
    font-weight: normal
    &:first-child, &:last-child
      margin: 0 0.3em

em.locality.fa
  color: gray

span.city:after, strong.city:after, em.city:after
  content: ':'

p.full_address
  span:after
    content: ','
  span:last-child:after
    content: ''

.calendar-header, .month
  text-transform: capitalize

body.events.index table
  width: 90%
  max-width: 100%
  // So we can ellipse past events
  table-layout: fixed
  tr
    th
      padding-bottom: 0.35em
      text-transform: capitalize
    td
      width: 14%
      height: 4.8em
      border: 1px solid #89B7E5
      padding: 1px
      position: relative
      vertical-align: top
      background-color: #A1C3E7
      &.past .event
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
      &.today
        border: 1px solid #FFB578
        background-color: #FFE0C7
        .day_number
          color: #531
        .event
          a:link, a:visited
            color: #730
      &.future
        border-color: rgb(150, 207, 255)
        background-color: #C6E5FF
      &.prev-month, &.next-month
        border: none
        background-color: #ededed
        li
          color: #555
        .event
          a:link, a:visited
            color: #444

      .day_number
        float: left
        color: #111
        font-size: 0.6em
        font-weight: bolder
        line-height: 1.2em
        letter-spacing: 2px
      &:hover .day_number
        color: black

      ul
        clear: left
        margin: 0
        padding: 0
        li
          color: #444
          margin: 0
          padding: 0
          em.fa.fa-globe
            color: red
            font-size: smaller

        .event
          padding-left: 0.2em
          a:link, a:visited
            color: #111
            font-size: smaller
            &:hover
              color: black
              font-weight: bolder

.formats
  float: right
  font-size: smaller
  margin-right: 5%
  padding-right: 2px

a#banner
  float: left
  margin-left: 5%
  padding-left: 2px

body.events.show main
  padding: 1em
  max-width: 60em
  +box-shadow(1px 1px 5px gray)
  +border-radius(0.4em)
  h2
    margin-top: 1em

aside#lug-list
  float: right
  width: 16em
  border: 1px solid #96CFFF
  margin: 0 1.2em
  padding: 5px
  font-size: 0.7em
  margin-right: -4em
  background-color: #D6ECFF
  +box-shadow(4px 4px 1em gray)
  +border-radius(10px)
  h1
    font-weight: normal
    border-bottom: 1px black solid
    padding-bottom: 0.3em
  h2
    margin: 0
    font-size: larger
    a
      padding: 0.5em 0
      display: block

#advises
  border: 1px solid #FFB578
  padding-left: 10px
  padding-right: 10px
  margin-bottom: 1.2em
  background-color: #ffe0c7
  h1
    font-size: 1.9em
    font-weight: normal
  a
    color: #8F4900

.events form, .moderations form
  .field, .actions
    max-width: 70em
    text-align: left
    margin-left: auto
    margin-right: auto
    *
      vertical-align: middle
    .helper p
      color: gray
      margin: 0
      font-style: italic
      margin-left: 8em
      padding-left: 0.4em
    label
      width: 8em
      +inline-block()
    input, select, .select2-container ul
      +border-top-left-radius(0)
      +border-bottom-left-radius(0)
    input[type=radio] + label
      width: 20em
      &:after
        content: ''

    input[type=text], input[type=url], input[type=email],
    .select2-container, .select2-container ul, .mce-tinymce
      min-width: 22em

    .mce-tinymce
      font-size: inherit
      font-family: inherit
      +inline-block()
      +border-radius(0.4em)
      +border-top-left-radius(0)
      +border-bottom-left-radius(0)
      .mce-container-body
        .mce-panel.mce-first
          +border-top-right-radius(0.4em)
        .mce-panel.mce-last
          +border-bottom-right-radius(0.4em)

  .field label:before
    color: gray
  .field.title label
    +fa-icon('')
  .field.start_time label
    +fa-icon('')
  .field.end_time label
    +fa-icon('')
  .field.description label
    +fa-icon('')
  .field.address label
    +fa-icon('')
  .field.city label
    +fa-icon('')
  .field.region label
    +fa-icon('')
  .field.locality label
    +fa-icon('')
  .field.contact label
    +fa-icon('')
  .field.submitter label
    +fa-icon('')
  .field.url label
    +fa-icon('')
  .field.tags label
    +fa-icon('')

  .actions
    text-align: center
    input
      font-size: x-large

.description, body.mce-content-body
  img
    margin-left: 1%
    margin-right: 1%
  h2, h3, h4
    clear: both