app/Resources/assets/css/events.scss
@import 'mixins';
.event,
.eventdata {
.wiki-row {
margin-bottom: 13px;
&:first-child .remove-wiki {
display: none;
}
&:not(:first-child) .label-group {
visibility: hidden;
}
}
.event__time-selector .form-group {
margin-bottom: 0;
}
// Remove the page-header bottom styling, to move the metadata up a bit.
.page-header {
border-bottom: 0;
padding-bottom: 0;
}
// Event metadata (shows dates and wikis).
.event-metadata {
margin-bottom: 1em;
th {
padding-right: 10px;
}
}
.event-stats-status {
margin-top: 8px;
}
.event-errorbox {
padding: 20px;
margin: 0 0 10px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
h3 {
margin-top: 0 !important;
}
&.success {
border-left-color: $bootstrap-success-text;
}
&.success h3 {
color: $bootstrap-success-text;
}
&.warn {
border-left-color: #eea236;
}
&.warn h3 {
color: #eea236;
}
&.error {
border-left-color: #d9534f;
}
&.error h3 {
color: #d9534f;
}
}
.panel-heading .glyphicon {
display: inline-block;
margin-left: 1em;
&.error {
color: #d9534f;
}
&.warn {
color: #f0ad4e;
}
&.success {
color: $bootstrap-success-text;
}
&.primary {
color: $bootstrap-primary;
}
}
.event-filters {
margin-top: 20px;
}
.event-stats-block {
margin-bottom: 10px;
}
.event-stats,
.event-wiki-stats {
header {
h3 {
color: #a2a9b1;
font-size: 3rem;
font-variant: small-caps;
font-weight: 100;
margin: 3rem 0 0;
text-transform: uppercase;
a {
border-bottom: 1px solid;
font-size: 2rem;
font-variant: normal;
text-transform: none;
&:hover {
border-bottom: 2px solid;
text-decoration: none;
}
}
}
}
.info-icon {
display: inline-block;
margin-left: 0.5rem;
opacity: 0.3;
}
dl {
margin-bottom: 10px;
dt {
color: #777777;
font-size: 1.3rem;
font-variant: small-caps;
height: 50px;
text-transform: uppercase;
// Cheap workaround, flex box won't allow the info icon to inline with the text.
display: table-cell;
vertical-align: bottom;
}
dd {
font-size: 4rem;
font-weight: 800;
line-height: 1.2;
}
.tooltip {
font-variant: normal;
text-transform: none;
}
&:hover .info-icon {
opacity: 1;
}
}
}
// Make per-wiki metrics table scrollable so that it is more mobile-friendly.
.event-wiki-stats {
overflow-y: auto;
header {
margin-bottom: 10px;
}
}
.event-wiki-stats--table {
thead th {
border-bottom: 1px solid #72777d;
color: #777777;
font-size: 1.3rem;
font-variant: small-caps;
font-weight: 600;
height: 50px;
padding: 7px 15px 7px;
text-transform: uppercase;
&:first-child {
background-color: #eaf3ff;
}
}
tbody tr td:first-child {
background-color: #eaf3ff;
border-right: 1px solid #72777d;
}
td {
border-bottom: 1px solid #eaecf0;
height: 45px;
line-height: 45px;
padding: 0 15px;
}
.sort-entry--pages-improved,
.sort-entry--edits {
border-left: 1px solid #72777d;
}
}
.save-participants-form {
.new-participants-label label::after {
// @TODO Other labels should be updated to include the colon.
content: '';
}
.event-new-participants {
max-height: 120px;
}
// Scroll the participants' rows if there are very many.
.event__participants {
max-height: 400px;
overflow: auto;
.row {
// Keep the text boxes lined up at the left side.
margin-right: 0;
}
}
}
.save-categories-form {
.save-categories-form__description {
font-weight: bold;
}
ul {
margin-top: -5px;
padding-left: 16px;
margin-bottom: 30px;
}
}
.event-revisions {
font-size: 13.5px;
margin-top: 20px;
}
.pagination {
margin-bottom: 0;
}
.add-wiki--all-wikipedias {
display: inline;
}
&.disabled-state {
// FIXME: re-implements Bootstrap's .disabled. We should be importing it (might have to switch to LESS).
.event-process-btn,
.event-export-btn,
.pagination {
background-color: #e0e0e0;
background-image: none;
border-color: #ccc;
cursor: not-allowed;
opacity: .65;
pointer-events: none;
}
}
.event-state--queued .inner {
display: flex;
.dots {
text-align: center;
margin-left: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.dots .dot {
flex: 1;
position: relative;
background-color: #a9adb2;
border-radius: 4px;
width: 8px;
height: 8px;
margin: 0 4px;
}
.dots .dot1 {
animation: dot1 1.5s infinite linear;
}
.dots .dot2 {
animation: dot2 1.5s infinite linear;
}
.dots .dot3 {
animation: dot3 1.5s infinite linear;
}
@keyframes dot1 {
0% { transform: scale(1); }
20% { transform: scale(1.2); }
40% { transform: scale(1.6); }
60% { transform: scale(1); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes dot2 {
0% { transform: scale(1); }
20% { transform: scale(1); }
40% { transform: scale(1.2); }
60% { transform: scale(1.6); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes dot3 {
0% { transform: scale(1); }
20% { transform: scale(1); }
40% { transform: scale(1); }
60% { transform: scale(1.2); }
80% { transform: scale(1.6); }
100% { transform: scale(1); }
}
}
.event-state--queued,
.event-state--started,
.event-state--failed-timeout,
.event-state--failed-unknown {
display: none;
}
}
#download-modal p.event-status {
font-size: smaller;
margin: 0;
}