app/assets/stylesheets/application.css.scss
/*
*=require vendor_libs
*=require formtastic_changes
*=require jquery-ui/datepicker
*=require jquery.ui.autocomplete_changes
*/
@import "mixins/grid";
@import "mixins/helper";
@import "mixins/reset";
@import "mixins/text";
$color1: #009933;
$color2: #5ad295;
$color3: #b0dff5;
$color4: #ffffe0;
$color5: #336699;
html {
background: white url(image-path("bg.png")) repeat-x center top;
color: #333333; }
a {
color: $color5; }
a:hover {
color: $color5 + #333333; }
.auto_focus, .hidden {
display: none; }
#header {
@include grid(12);
height: 90px;
color: $color1;
position: relative;
img {
float: left;
padding-right: 5px; }
.logo {
float: left;
h1 {
display: none; }
strong {
position: absolute;
top: 0px;
right: 130px;
color: #999999; } }
ul#languages {
float: right;
overflow: hidden;
li {
float: left;
list-style: none;
span, a {
display: inline; } }
li:before {
content: "\00a0|\00a0";
display: inline; }
li:first-child:before {
content: "";
display: inherit; }
a {
color: $color1;
text-decoration: none; }
a:hover {
color: $color1 - #222222;
text-decoration: underline; } }
ul#menu {
overflow: hidden;
display: block;
position: absolute;
right: 0;
bottom: 0;
margin-bottom: 6px;
li {
float: left;
list-style: none;
background-color: $color1;
margin: 2px;
border: 2px solid $color3;
&.selected {
background-color: $color1 + #222222;
a {
color: $color4; } } }
a {
color: white;
padding: 10px;
line-height: 25px;
text-decoration: none; }
a:hover {
color: $color4;
text-decoration: underline; } } }
#footer {
@include grid(12);
color: #999999;
text-align: center;
font-size: 8pt;
margin-bottom: 20px; }
#container {
@include grid-system(12); }
#actions {
ul {
list-style-type: circle; }
h4 {
font-size: 15px;
margin: 6px 0; }
.charts {
display: none; } }
#content {
min-height: 590px;
p {
margin: 15px 0; }
h1 {
color: $color5;
border-bottom: 1px solid $color5;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis; }
h3 {
margin-top: 15px; }
h5 {
margin: 10px 0; }
dl {
dt {
font-weight: bold;
font-size: 1.3em;
margin: 5px 0;
padding-top: 10px; }
dd {
margin-bottom: 5px;
h1 {
font-size: 1.2em;
border: 0; }
h2 {
font-size: 1.1em; }
h3 {
font-size: 1em; }
ul {
padding-left: 2em; }
ol {
padding-left: 2em; } } }
table {
width: 100%;
border-collapse: collapse;
text-align: left;
margin: 5px 0;
th {
font-size: 1.2em;
font-weight: normal;
color: $color1;
padding: 10px 8px;
border-bottom: 2px solid $color1;
vertical-align: bottom; }
td {
border-bottom: 1px solid $color5;
padding: 6px 8px;
overflow: hidden;
text-overflow: ellipsis;
&.outcome {
font-size: 2em;
text-align: center;
vertical-align: middle;
padding: 0; } } } }
table.sessions {
table-layout: fixed;
th {
font-size: 80%;
&.title {
width: 50%;
}
}
&.reviews {
th.title{
width: 30%;
}
}
}
table.reviewers {
th.reviewer {
width: 40%; }
th.status {
width: 10%; }
th.count {
width: 5%; }
th.actions {
width: 10%; } }
table.reviews {
th.session {
width: 20%; }
th.confidence {
width: 10%; }
th.recommendation {
width: 40%; }
th.feedback {
width: 30%; } }
table.summary {
th {
color: black;
font-size: 1em;}
tr.total {
background-color: yellow;
}}
.selected {
font-weight: bold;
}
.commentCount {
font-size: 8px;
font-weight: bold;
padding: 1px 5px 0;
background: url(image-path("icon-comments.png")) left top no-repeat;
position: relative;
overflow: hidden;
display: inline;
color: #666666; }
.commentAnchor {
float: right; }
.commentBlock {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
padding: 5px;
margin: 10px 0;
.avatar {
float: none;
display: inline;
}
cite {
font-weight: bold;
clear: both; }
.commentDate {
float: right;
color: #999999;
font-size: 12px; } }
ul.piped {
overflow: hidden;
margin-bottom: 10px;
li {
float: left;
list-style: none;
font-size: 11px; }
li:before {
content: "\00a0|\00a0"; }
li:first-child:before {
content: ""; } }
ul.spaced {
overflow: hidden;
li {
float: left;
margin-right: 20px;
margin-top: 5px;
list-style: none;
font-size: 12px; }
li.first {
font-weight: bold; } }
#pagination {
width: 100%;
text-align: center;
.pagination {
font-size: 11px;
display: inline-block;
span {
border: 0;
margin: 0;
padding: 0;
margin-right: 2px; }
a {
border: solid 1px $color5;
margin-right: 2px; }
.disabled {
border: solid 1px #dedede;
color: #888888;
display: block;
float: left;
font-weight: bold;
margin-right: 2px;
padding: 3px 4px; }
.next_page, .previous_page {
font-weight: bold; }
em {
background: $color2;
color: white;
font-weight: bold;
display: block;
float: left;
padding: 4px 6px; }
span.gap {
float: left; }
a:link, a:visited {
color: $color2;
display: block;
float: left;
padding: 3px 6px;
text-decoration: none; }
a:hover {
border: solid 1px $color2; } } }
.flash_notice, .flash_error, .flash_news, .flash_alert {
padding: 5px 8px;
margin: 10px 0; }
.flash_notice {
background-color: #ccffcc;
border: solid 1px #66cc66; }
.flash_error, .flash_alert {
background-color: #ffcccc;
border: solid 1px #cc6666; }
.flash_news {
background-color: #fff6bf;
border: solid 1px #ffd324; }
.fieldWithErrors {
display: inline; }
.resizable-textarea {
textarea {
margin-bottom: 0pt;
width: 95%;
height: 20%; }
.grippie {
background: #eeeeee url(image-path("grippie.png")) no-repeat scroll center 2px;
border-color: #dddddd;
border-style: solid;
border-width: 0pt 1px 1px;
cursor: s-resize;
height: 9px;
overflow: hidden; } }
#date {
overflow: hidden;
display: block;
right: 0;
bottom: 0;
color: white;
background-color: $color5;
border: 2px solid $color3;
text-align: center;
font-size: 14px;
margin-bottom: 6px;
p {
margin: 2px;
padding: 4px; } }
#warning {
overflow: hidden;
display: block;
right: 0;
bottom: 0;
background-color: $color4;
border: 2px solid $color3;
font-size: 12px;
margin-bottom: 6px;
p {
margin: 2px;
padding: 4px; } }
#textile_help {
.example {
@include grid(9);
.raw {
@include grid(4);
border: 1px dashed #666;
padding: 10px;
min-height: 150px; }
.space {
@include grid(1); }
.preview {
@include grid(4);
border: 1px dashed #666;
padding: 10px;
min-height: 150px;
p {
margin: 0px; }
ul {
padding-left: 10px; }
ol {
padding-left: 10px; }
>ul,>ol {
margin-bottom: 16px; } } } }
form.session {
li#session_mechanics_input {
abbr {
display: none; } }
li#tagList {
.warning {
visibility: hidden;
font-weight: normal;
color: red;
&.show {
visibility: inherit; } } } }
li#user_wants_to_submit_input {
background-color: #d8ffdc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px dashed #1c8c1c;
padding: 10px;
width: 74%; }
.form_tip {
background-color: #d8ffdc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px dashed #1c8c1c;
padding: 10px;
&.diversity {
margin-bottom: 1.5em; }
}
form {
.agreement {
width: 100%;
display: block;
background-color: $color4;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px dashed $color3;
padding: 10px;
font-size: 8pt;
p {
white-space: initial; } }
}
form.reviewer, form.review_feedback {
fieldset.inputs li {
float: left;
margin-bottom: 0;
&.boolean, &.select {
width: 35%; }
label {
width: 50%; }
ul.errors {
float: left;
width: 100%; } }
fieldset.actions {
margin-top: 15px; }
p.inline-hints {
float: left;
width: 74%;
color: #999999;
font-style: italic; }
pre#reviewer_agreement {
width: 80%;
}
.hints {
width: 74%;
color: #999999;
font-style: italic;
float: left; }
fieldset.accept {
width: 100%;
li.boolean {
width: 100%; } } }
p#review_decision {
background-color: #d8ffdc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px dashed #1c8c1c;
padding: 10px;
}
form.review.formtastic {
fieldset.inputs {
legend {
font-size: 14pt;
color: black;
border-bottom: 1px solid black;
width: 100%;
}
ol {
float: none;
width: 100%;
li {
width: 100%;
fieldset {
width: 100%;
legend.label {
border-bottom: 0;
label {
font-size: 10pt;
}
}
}
textarea {
width: 100%;
}
}
li.hidden {
display: inline;
}
li label {
display: inline;
}
li.radio fieldset {
legend.label {
position: relative; }
ol {
padding-top: 1.5em;
padding-left: 0px;
}
}
}
}
.session_info {
background-color: $color4;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px dashed $color3;
padding: 10px;
ol {
list-style: decimal outside;
padding-left: 1em;
li {
margin-bottom: 0px;
display: list-item;
margin-left: 0.5em;
}
}
ul {
list-style: disc outside;
padding-left: 1em;
li {
margin-bottom: 0px;
display: list-item;
margin-left: 0.5em;
}
}
p strong {
font-weight: bold;
}
}
select {
display: inline;
}
fieldset ol li ul.errors {
float: none;
}
}
#content form.review_feedback.formtastic {
fieldset.review_evaluation {
h3 {
color: $color1;
border-bottom: 3px solid $color1;
margin-bottom: 10px;
}
p {
background-color: $color4;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px dashed $color3;
padding: 10px;
margin: 0px;
}
}
legend {
font-size: 14pt;
color: black;
border-bottom: 1px solid black;
width: 100%;
}
ol {
float: none;
list-style: none;
padding: 0px;
width: 100%;
li {
float: none;
margin: 0px 0.5em 1em 0px;
&.hidden {
margin: 0px;
padding: 0px;
display: none;
}
label {
display: inline;
width: 100%;
}
fieldset legend.label {
border-bottom: 0;
label {
font-size: 80%;
float: none;
}
}
&.text textarea, &.string input {
width: 100%;
}
&.radio {
display: list-item;
label {
width: 100%;
position: relative;
}
fieldset {
legend.label {
position: relative;
}
ol {
padding: 0px;
li {
margin: 0px;
padding: 0px 0.5em;
}
}
}
}
}
}
}
form.session_filter.formtastic {
display: grid;
grid-template-columns: 1fr 1fr;
&.reviews {
grid-template-columns: 1fr;
}
grid-gap: 20px;
fieldset {
width: 100%;
ol li {
width: 100%;
margin: 0;
label{
width: 100%;
float: none;
}
input,select {
width: 100%;
}
}
&.actions {
grid-column: 1/3;
text-align: center;
}
}
}
#reviewers_emails {
ul {
display: inline-block;
list-style-type: none;
li.inline {
padding-left: 1em;
}
}
}
.inline {
display: inline-block;
&.hidden {
display: none;
}
}
.copy_value {
background: #efefff;
border: 1px solid black;
padding: 1em;
font-size: 75%;
white-space: pre-wrap;
}
.clickable {
cursor: pointer;
}
#review_progress_count, #review_decisions_progress_count {
font-size: 8pt;
padding-bottom: 4px; }
.placeholder {
color: #999;
}
.avatar {
float: right;
text-align: right;
img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.tip {
color: #999;
font-style: italic;
font-size: 8pt;
width: 150px;
}
}
.hint {
color: #666666;
font-style: italic;
}
.download {
float: right;
clear: both;
img {
vertical-align: middle;
}
}
form.conference .logo_preview {
max-width: 300px;
max-height: 80px;
}
form.conference .logo.error {
color: red;
}
form.conference .logo .errors {
list-style-type: none;
}
form.conference .logo .errors .error {
display: inline;
}
#session_types .duration_template {
display: none;
}
button::disabled {
color: gray;
}
#content .tagcloud {
max-width: 100%;
position: relative;
}
.tabs.ui-tabs.ui-widget {
border-radius: 0;
border: 0;
margin: .5rem 0;
.navigation-container {
position: relative;
&.with-scroll {
> div {
&.scroll_left, &.scroll_right {
display: inline-block;
background-color: white;
height: 24px;
padding: 0 .25rem;
cursor: pointer;
width: 1.5rem;
box-sizing: border-box;
}
&.scroll_left {
float: left;
text-align: left;
}
&.scroll_right {
float: right;
text-align: right;
}
}
> ul.ui-tabs-nav {
overflow: hidden;
margin-right: 3.5rem;
li {
&.ui-tabs-active {
position: relative;
border-bottom: 1px solid #fff;
}
&.add_tab {
position: absolute;
right: 1.5rem;
z-index: 1;
overflow: visible;
}
}
}
}
div.scroll_left, div.scroll_right {
display: none;
}
ul.ui-tabs-nav {
border-radius: 0;
background: transparent;
height: 24px;
white-space: nowrap;
li {
background: #ccc;
border: 1px solid #999;
border-bottom: 1px solid #333;
border-radius: 0;
display: inline-block;
height: 23px;
max-width: 10rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0.25rem;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
};
&.scroll_left, &.scroll_right {
display: none;
}
&.dirty {
color: red;
a {
color: red;
}
}
&.dirty a::before {
content: '*';
}
&.ui-state-hover {
background: #eee;
border: 1px solid #666;
border-bottom: 1px solid #333;
}
&.ui-tabs-active {
background: #fff;
border: 1px solid #333;
border-bottom: 1px solid #fff;
margin-bottom: 0;
}
&.add_tab {
width: 1.5rem;
text-align: center;
a {
width: 100%;
padding-left: 0;
padding-right: 0;
}
}
a {
color: black;
border: 0;
border-radius: 0;
padding: 0.25rem 0.5rem 0 0.5rem;
line-height: 1.3rem;
}
}
}
}
div.ui-tabs-panel {
border: 1px solid #333;
border-radius: 0;
background: transparent;
padding: 0.5em;
label.field {
display: table;
width: 100%;
margin-bottom: .5rem;
span.text {
width: 1%;
display: table-cell;
box-sizing: border-box;
padding-right: 1rem;
}
input[type='text'] {
width: 99%;
display: table-cell;
}
}
.description {
.help {
font-size: 70%;
}
.preview {
margin: .5rem 0;
border: 1px dashed #ccc;
max-height: 7rem;
overflow: scroll;
}
textarea {
min-height: 6rem;
}
textarea, .grippie {
width: 100%;
}
}
input[type='submit'] {
margin: .5rem 0;
width: 100%;
background-color: #336699;
color: #fff;
padding: 0.5rem;
text-align: center;
border: 0;
text-transform: uppercase;
}
}
}
form.formtastic.user,form.formtastic.comment fieldset.inputs {
width: 100%;
}
form.formtastic.user fieldset.actions {
display: block;
}
.organizer_sessions {
.sort {
clear: both;
}
li {
display: inline-block;
&:not(:last-child) {
margin-right: 1em;
}
}
.session {
border-top: 1px solid lightgray;
margin-top: 1em;
padding-top: .5em;
.session-header, .session-details, .session-review, .session-actions {
display: flex;
}
.session-details {
.author:last-child:before { content: '\00a0/\00a0'; }
}
.session-review {
justify-content: space-between;
flex-wrap: wrap;
gap: 1em;
}
.session-actions {
justify-content: flex-end;
gap: 1em;
}
.session_id, .title, .author, .track {
& > span:first-child { display: none; }
}
.session_id > span:last-child {
&:before { content: '#'; }
&:after { content: ':\00a0'; }
}
.track { margin-left: auto; }
}
}