overleaf/services/web/public/stylesheets/app/editor/track-changes.less
Shane Kilkelly 7bc9218b3c Fix up a bunch of issues with the track-changes list view.
- not crash when a user is null
- fix alignment of user color square
- if first and last name are absent, display email instead
- truncate overly long display name with '...'
2015-09-14 12:08:05 +01:00

291 lines
5.3 KiB
Text

@changesListWidth: 250px;
@changesListPadding: @line-height-computed / 2;
@selector-padding-vertical: 10px;
@selector-padding-horizontal: @line-height-computed / 2;
@day-header-height: 24px;
@range-bar-color: @link-color;
@range-bar-selected-offset: 14px;
#trackChanges {
.upgrade-prompt {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: rgba(128,128,128,0.4);
.message {
margin: auto;
margin-top: 100px;
padding: 10px 10px 14px 10px;
width: 500px;
font-weight: bold;
text-align: center;
background-color: white;
border-radius: 8px;
}
}
.diff-panel {
.full-size;
margin-right: @changesListWidth;
}
.diff {
.full-size;
.toolbar {
padding: 3px;
.name {
float: left;
padding: 3px @line-height-computed / 4;
display: inline-block;
}
}
.diff-editor {
.full-size;
top: 40px;
}
.hide-ace-cursor {
.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
display: none;
}
}
.diff-deleted {
padding: @line-height-computed;
}
}
aside.change-list {
border-left: 1px solid @toolbar-border-color;
height: 100%;
width: @changesListWidth;
position: absolute;
right: 0;
.loading {
text-align: center;
font-family: @font-family-serif;
}
ul {
li.change {
position: relative;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
.day {
background-color: #fafafa;
border-bottom: 1px solid @toolbar-border-color;
padding: 4px;
font-weight: bold;
text-align: center;
height: @day-header-height;
font-size: 14px;
line-height: 1;
}
.selectors {
input {
margin: 0;
}
position: absolute;
left: @selector-padding-horizontal;
top: 0;
bottom: 0;
width: 24px;
.selector-from {
position: absolute;
bottom: @selector-padding-vertical;
left: 0;
opacity: 0.8;
}
.selector-to {
position: absolute;
top: @selector-padding-vertical;
left: 0;
opacity: 0.8;
}
.range {
position: absolute;
left: 5px;
width: 4px;
top: 0;
bottom: 0;
}
}
.description {
padding: (@line-height-computed / 4);
padding-left: 38px;
min-height: 38px;
border-bottom: 1px solid @toolbar-border-color;
cursor: pointer;
&:hover {
background-color: @gray-lightest;
}
}
.users {
.user {
font-size: 0.8rem;
color: @gray;
text-transform: capitalize;
position: relative;
padding-left: 16px;
.color-square {
height: 12px;
width: 12px;
border-radius: 3px;
position: absolute;
left: 0;
bottom: 3px;
}
.name {
width: 94%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.time {
float: right;
color: @gray;
display: inline-block;
padding-right: (@line-height-computed / 2);
font-size: 0.8rem;
line-height: @line-height-computed;
}
.docs {
font-weight: bold;
font-size: 0.9rem;
}
}
li.loading-changes, li.empty-message {
padding: 6px;
cursor: default;
&:hover {
background-color: inherit;
}
}
li.selected {
border-left: 4px solid @range-bar-color;
.day {
padding-left: 0;
}
.description {
padding-left: 34px;
}
.selectors {
left: @selector-padding-horizontal - 4px;
.range {
background-color: @range-bar-color;
}
}
}
li.selected-to {
.selectors {
.range {
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
}
}
}
li.selected-from {
.selectors {
.range {
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day {
.selectors {
.selector-to {
top: @day-header-height + @selector-padding-vertical;
}
}
}
li.first-in-day.selected-to {
.selectors {
.range {
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
ul.hover-state {
li {
.selectors {
.range {
background-color: transparent;
top: 0;
bottom: 0;
}
}
}
li.hover-selected {
.selectors {
.range {
top: 0;
background-color: @gray-light;
}
}
}
li.hover-selected-to {
.selectors {
.range {
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
}
}
}
li.hover-selected-from {
.selectors {
.range {
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day.hover-selected-to {
.selectors {
.range {
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
}
}
.editor-dark {
#trackChanges {
aside.change-list {
border-color: @editor-dark-toolbar-border-color;
ul li.change {
.day {
background-color: darken(@editor-dark-background-color, 10%);
border-bottom: 1px solid @editor-dark-toolbar-border-color;
}
.description {
border-bottom: 1px solid @editor-dark-toolbar-border-color;
&:hover {
background-color: black;
}
}
}
}
}
}