osbridge/openconferenceware

View on GitHub
app/assets/stylesheets/open_conference_ware/custom.css.scss

Summary

Maintainability
Test Coverage
div.skip-link a {
  position: absolute;
  right: 0px;
  top: -99px;
  background: none repeat scroll 0% 0% rgb(17, 109, 182);
  color: rgb(255, 255, 255);
  padding: 0.5em;
  font-size: 0.7em;
  text-decoration: none;
}

#content {
  position: relative;
}

/* @group Common Helper Classes */

div.admin-only {
  padding: 0.5em;
  margin: 0.5em 0 0.5em 0;
}

.admin-only {
  background: #F9EAE9;
  border: 1px solid #B81F16;
}

span.admin-only {
  border: 0;
  color: #B81F16;
}

.admin-only input[type=submit],
.admin-only form,
.admin-only form div {
  display: inline;
}

.inlined, .inlined div, .record-controls div {
  display: inline;
}

.quagmire {
  display: none;
}

.wide {
  width: 100%;
}

.narrow {
  width: 0%;
}

.nowrap {
  white-space: nowrap;
}

.hidden {
  display: none;
}

.visible {
  visible: visible;
}

.empty-text {
  text-align: center;
  font-style: italic;
  white-space: nowrap;
}

/* Loading box of width=height=100px with a spinner placed at the center */
#page_spinner {
  display: none;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  color: black;
  background: image-url('open_conference_ware/spinner-big.gif') no-repeat center #F7F1A3;
  text-align: center;
  padding: 10px;
  font: normal 16px Tahoma, Geneva, sans-serif;
  border: 1px solid #666;
  margin-left: -50px;
  margin-top: -50px;
  z-index: 2;
  overflow: auto;
}

/* @end */

/* @group Icon Additions */

.addable,
.showable,
.editable,
.cancelable,
.deletable,
.confirmable,
.feedable,
.snippet_edit_link,
.spinning,
.to_top {
  margin-right: 10px;
  padding-left: 20px;
  background-position: left center;
  background-repeat: no-repeat;
}

.addable {
  background-image: image-url('open_conference_ware/plus.png');
}

.showable {
  background-image: image-url('open_conference_ware/document.png');
}

.editable,
.snippet_edit_link {
  background-image: image-url('open_conference_ware/edit.png');
}

.cancelable {
  background-image: image-url('open_conference_ware/arrow-out.png');
}

.deletable {
  background-image: image-url('open_conference_ware/delete.png');
}

.confirmable {
  background-image: image-url('open_conference_ware/accept.png');
}

.feedable {
  background-image: image-url('open_conference_ware/feed.png');
}

.spinning {
  background-image: image-url('open_conference_ware/spinner.gif');
}

.to_top {
  background-image: image-url('open_conference_ware/arrow-up.png');
}

.popup {
  margin-right: 10px;
  padding-left: 20px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: image-url('open_conference_ware/new_window.gif');
}

/* @end */

/* @group Forms */

.required-field {
  padding: 0 0.25em;
  color: red;
}

.private-field {
  padding: 0 0.25em;
  color: green;
}

.record-controls {
  margin: 1em;
}

.record-controls input {
  margin-right: 1em;
}

/* @group Standard Form */

.standard-form table {
  width: 100%;
}

.standard-form td {
  padding: 0.5em;
  text-align: left;
  vertical-align: top;
}

.standard-form div.preview {
  background: #DDF;
  border: 1px solid #00F;
  margin: 5px;
  padding: 10px;
}

.standard-form div.preview h3 {
  color: #000;
}

.standard-form div.preview .inner {
  background: #EEE;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

.standard-form .label-cell {
  padding-left: 0;
  text-align: right;
  white-space: nowrap;
  width: auto;
}

.standard-form .label-cell label {
  font-size: 1.1em;
}

.standard-form .data-cell {
  width: 98%;
}

.standard-form input[type=checkbox] {
  padding: 0;
  margin: 0 0.5em 0 0;
}

.standard-form input[type=text],
  .standard-form input[type=password],
  .standard-form textarea {
  width: 97%;
  padding: .3em;
}

.standard-form input[type=submit] {
  font-size: 100%;
}



/* @end */

/* @group Radio Set */

ul.radio-set {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  border-top: 1px solid #aaa;
}

ul.radio-set li {
  background: #eee;
  padding: .5em .5em .5em 35px;
  border-bottom: 1px solid #aaa;
  position: relative;
}

ul.radio-set input {
  position: absolute;
  left: 10px;
  top: .9em;
}

ul.radio-set label {
  font-style: normal;
  display: block;
}

ul.radio-set p {
  font-size: .85em;
  margin: 0;
}

/* @end */

/* @end */

/* @group Snippets */

.snippet_preview {
  margin: 0;
  padding: 0.5em;
  border: 1px dotted #116db6;
}

.snippet_form input[type=text] {
  width: 100%;
}

.snippet_form textarea {
  height: 12em;
  width: 100%;
}

/* @end */

/* @group Login Form */

#session_form input[type=text], #session_form input[type=password] {
  width: 24em;
}

#session_form input {
  clear: both;
}

#session_form .rightish {
  width: 12em;
  text-align: right;
  display: block;
  float: left;
  text-align: right;
  padding-right: 1em;
}

/* @end */

/* @group Submit a Talk Button */

.rnd_top, .rnd_bottom {
  display: block;
  background: #FFFFFF;
  font-size: 1px;
}

.rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {
  display: block;
  overflow: hidden;
}

.rnd_b1, .rnd_b2, .rnd_b3 {
  height: 1px;
}

.rnd_b2, .rnd_b3, .rnd_b4 {
  background: #DAF4D4;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
}

.rnd_b1 {
  margin: 0 5px;
  background: #CCCCCC;
}

.rnd_b2 {
  margin: 0 3px;
  border-width: 0 2px;
}

.rnd_b3 {
  margin: 0 2px;
}

.rnd_b4 {
  height: 2px;
  margin: 0 1px;
}

.rnd_content {
  display: block;
  border: 0 solid #CCCCCC;
  border-width: 0 1px;
  padding: 4px;
  background: #DAF4D4;
  color: #000000;
}

div.rnd_content {
  margin: 0;
}

/* FIXME how to automatically size width of the box? */

.submit-a-proposal-wrapper {
  margin: 1em 0;
  text-align: center
}

/* @end */

/* @group Tracks */

.track {
  background: #666;
  color: #fff;
}

.track.block {
  color: #fff;
  text-transform: uppercase;
  padding: .5em;
}

.track.block a {
  color: #fff
}

/* @end */

/* @group Users */

.user-meta, .user-photo, .proposal-meta {
  float: right;
  margin: 0 0 1em 1em;
  clear: right;
}

strong.admin {
  color: red;
  font-weight: normal;
}

/* @end */

/* @group Proposals */

/* @group Index */

table.proposals {
  margin: 1em 0;
  width: 100%;
}

table.proposals td {
  border-top: 1px solid #aaa;
}

table.proposals td.schedule_header {
  background: #116db6;
  color: #fff;
  border-bottom: 1em solid #fff;
}

table.proposals h3 {
  margin: .3em 0 .5em;
}

table.proposals h3 span.proposal-status,
table.proposals h3 span.vote-status {
  font-size: .7em;
}

table.proposals h3 span.proposal-status.proposed {
  color: #222;
  display: none;
}

table.proposals h3 span.proposal-status.confirmed {
  color: green;
}

table.proposals h3 span.proposal-status.rejected {
  color: red;
}

table.proposals h3 span.proposal-status.junk {
  color: #aaa;
}

table.proposals .date, table.proposals .track {
  font-size: .9em;
  text-align: center;
  line-height: 2em;
  padding: .5em 1em;
  height: 2em;
}

table.proposals .date, table.proposals .track {
  font-size: .9em;
  text-align: center;
  line-height: 2em;
  padding: .5em 1em;
  height: 2em;
  min-width: 80px;
}

table.kind_sessions .track {
}

table.proposals .date {
  background: #eee;
}

table.proposals .speakers {
  font-size: .9em;
  border-top: none;
  padding: .5em 0 1em 0;
  vertical-align: top;
}

table.proposals .description {
  padding: 0 1em 1em 0;
}

/* @end */

/* @group Show */

.proposal-slug {
  font-weight: bold;
  font-size: .8em;
  padding: .5em;
}

.proposal-audience_level {
  display: block;
  background: #ccc;
  color: black;
  text-decoration: none;
  font-size: .8em;
  padding: .3em 0;
}

.proposal-meta {
  text-align: center;
  border: 1px solid #666;
  width: 10em;
}

.proposal-meta a.session_type {
  display: block;
  background: #999;
  color: #fff;
  text-decoration: none;
  font-size: .8em;
  padding: .3em 0;
}

.proposal-meta .proposal-status {
  background: #116db6;
  color: #fff;
  text-transform: uppercase;
  font-size: .9em;
  padding: .5em;
  border-bottom: 1px solid black;
}

.proposal-meta .proposal-status.confirmed {
  background-color: #08b9a6;
}

.proposal-meta .proposal-scheduling {
  background: #D7E0D5;
  color: black;
  padding: .5em;
  font-size: .9em;
}

/* @group Comments */

ul.proposal-comments {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.proposal-comments li {
  border-bottom: 1px solid #ccc;
  padding: 1em 0;
}

ul.proposal-comments div.proposal-title {
  margin-top: .5em;
}

ul.proposal-comments blockquote {
  margin-top: .5em;
}

/* @end */

/* @group Speaker List */

ul.speakers {
  margin: 0;
  list-style: none;
}

ul.speakers li.vcard {
  border-bottom: 1px solid #aaa;
  margin-top: 1em;
}

ul.speakers .note {
  font-size: .9em;
  padding: 1em 2em 0;
}

ul.speakers .note li {
  border: none;
}

/* @end */



/* @end */

/* @group Edit */

#manage-speakers td {
  padding: 0.1em;
}

#manage-speakers {
  width: 55%;
}

#add-speakers {
  background: #eee;
  border-left: 1px solid #aaa;
  padding: 1em 1em 0;
  width: 40%;
  float: right;
}

#add-speakers input {
  width: auto;
}

#speaker-search-results li p {
  font-size: .85em;
  margin: 0;
}

#speaker-search-results ul {
  list-style: none;
  padding: 0;
  margin: 1em -1em 0;
}

#speaker-search-results li {
  padding: .5em 1em .5em 40px;
  position: relative;
  border-top: 1px solid #aaa;
}

#speaker-search-results a.addable,
#speaker-search-results a.spinning {
  width: 16px;
  display: block;
  overflow: hidden;
  padding-left: 0;
  text-indent: -999px;
  position: absolute;
  left: 1em;
}

#speaker-selector #complete_profile_user_url {
  width: 100%;
}

/* @end */

/* @end */

/* @group Schedule */

#content .schedule {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1em;
}

.schedule td {
  vertical-align: top;
  padding: 0;
}

.schedule h4 {
  margin-top: 0;
  background: #116db6;
  padding: .3em .4em;
  border-bottom: 1px solid #9cbdd6;
  color: #fff;
}

.schedule h4 abbr,
.schedule .time abbr {
  border: none;
}

.schedule a.to_top {
  float: right;
}

.schedule .schedule_block {
  border-left: 4px solid #116db6;
  border-bottom: 1px solid #b8cbd8;
  border-right: 1px solid #b8cbd8;
  background: #ddebff;
}

ul.calendar_items {
  margin: 0;
  padding: 0;
}

.calendar_items .concise a {
  color: #222;
  text-decoration: none;
}

.calendar_items .concise a:hover {
  text-decoration: underline;
}

.calendar_items .summary {
  font-weight: bold;
}

.calendar_items li {
  list-style: none;
}


.calendar_items li.vevent {
  position: relative;
  margin: 0 .5em .5em;
    padding: .2em 9em .2em .5em;
    display: block;
    color: #222;
}

.calendar_items .vevent.generic_item {
  border: 1px solid #116db6;
  background: #fff;
}

.calendar_items .vevent .room {
  position: absolute;
  top: 0;
  right: .2em;
  border-left: 1px dotted #fff;
  border-bottom: 1px dotted #fff;
  padding: .2em .5em;
  width: 7em;
}

.calendar_items .session_info {
  background: white;
  border: 2px solid #999;
  position: absolute;
  padding: .5em;
  width: 20em;
  font-size: .9em;
  z-index: 9;
  display: none;
  right: -21em;
  top: 0;
}

.calendar_items li:hover .session_info,
.calendar_items li.hover .session_info {
  display: block;
}

#list_user_favorites {
  margin-top: 3em;
}

.schedule_color_key {
  margin: 4em 0 .5em;
}

.schedule_color_key .definition {
  color: #222;
  font-weight: bold;
  padding: 0.25em;
}

.schedule_color_key a {
  color: #222;
  text-decoration: none;
}

.schedule_color_key a:hover {
  text-decoration: underline;
}

.schedule_color_key .definition.generic_item {
  border: 1px solid #116db6;
  background: #fff;
}

/* @end */

/* @group Speaker List */

.user_list {
  margin: 0;
  padding: 0;
}

.user_box .user_head {
  background: #116db6;
  padding: .4em;
  border-bottom: 1px solid #9cbdd6;
  color: #fff;
}

.user_box.admin .user_head {
  background: #AB1D14;
}

.user_box.admin .user_head h3:after {
  content: " (admin)";
  color: #fff;
}

.user_box {
  clear: both;
  list-style: none;
  margin-bottom: 2em;
}

.user_box .user_body {
  padding: 1em .5em;
}

.user_box .user_head h3 {
  display: inline;
}

.user_box h4.sessions {
  clear: both;
}

.user_box .affiliation {
  float: right;
  font-style: italic;
  font-size: .9em;
}


.user_box .user-photo {
  border: 3px solid #222;
  background: #222;
}

.user_box .user_head h3 a {
  text-decoration: none;
  color: #fff;
}

.user_box .user_head h3 a:hover {
  text-decoration: underline;
}

.user_box .user_links {
  font-weight: bold;
}

.user_box .user_links a {
  font-weight: normal;
}

.user_box .user_links ul {
  margin: 0 0 1em 0;
}

.user_box .user_links li {
  list-style: none;
}

.user_box .user_head h4 {
  color: #116db6;
  margin-bottom: .4em;
}

/* @end */

/* @group Favorites */

.proposals_sub_list_for_kind_toggle {
  margin-bottom: 1em;
}

.sub_list_for_many_events {
  margin-left: 2em;
}

.sub_list_for_many_events h3 {
  margin-left: -1em;
}

.sub_list_for_many_events h4 {
  margin-left: -0.75em;
}

.sub_list_for_event h4 {
  color: #116DB6;
}

.sub_list_for_event,
.sub_list_for_many_events {
  clear: both;
}

.favorite {
  background-image: image-url('open_conference_ware/favorite.png');
  background-position: left -36px;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  display: inline-block;
  overflow: hidden;
}

.favorite span {
  visibility: hidden;
}


.calendar_items .concise a.favorite,
.calendar_items .concise a:hover.favorite,
a.favorite,
a:hover.favorite {
  text-decoration: none;
}

.favorite.checked {
  background-position: left 0;
}

.favorite.disabled {
  background-position: left -54px;
}

.favorite.working {
  background-position: left -18px;
}

body.proposals.session_show #content > .favorite,
body.proposals.show #content > .favorite {
  position: absolute;
  top: .5em;
}

body.proposals.session_show #content h2.page_title,
body.proposals.show #content h2.page_title {
  text-indent: 25px;
}

#proposal-accepted {
  background: #F1F9FF;
  border: 1px solid #116DB6;
  padding : 1em;
  margin-bottom : 1em;
}

a.to_favorites {
  background: image-url('open_conference_ware/star.png') no-repeat left center;
  padding: 0 0 0 22px;
}
/* @end */

body.users.show h2.page_title {
  display: none;
}

.locked {
  background: image-url('open_conference_ware/lock.png') no-repeat 0 2px;
  padding-left: 23px;
  margin: 1em 0;
}

.room-image {
  float: right;
}

.submit_a_proposal,
.sidebar .submit_a_proposal {
  font-weight: bold;
  background: #08b9a6;
  color: #fff;
  padding: .3em .5em;
  display: block;
  margin: .3em 0 0 -.5em;
  border: 3px solid #109A8B;
}

.selector-vote-form table {
  margin: 0;
}

.selector-vote-form td {
  vertical-align: top;
}

.selector-vote-form-comment-cell {
  width: 100%;
}

.selector-vote-form-comment-cell textarea {
  width: 100%;
}

.selector-vote-form-protip {
  line-height: 1;
  font-size: 80%;
  font-style: italic;
}

.selector_votes_index {}
  .selector_votes_index th {
    background-color: #EEE; }
  .selector_votes_index .proposal_details {
    border-top: 2px solid #AAA }
  .selector_votes_index td {
    vertical-align: top; }
  .selector_votes_index .subrow table {
    width: 100%; }
  .selector_votes_index .subrow > td {
    padding-left: 4em; }

.auth-provider {
  border-top: 1px solid #eee;
  padding: 1em;
}
.auth-provider h3 {
  margin-top: 0
}

.auth-provider.developer {
  background: #fff0e3;
}