overleaf/services/web/frontend/stylesheets/app/editor/history.less
nate stemen 2d9b089e16 Merge pull request #2401 from overleaf/cmg-ns-pretty-less
Fix inconsistent use of tabs and spaces in less files

GitOrigin-RevId: c69667f0dc6bc70ea3623890e2b2b741e358d454
2019-12-06 04:19:26 +00:00

344 lines
7.4 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;
@history-toolbar-height: 32px;
#history {
.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: (@line-height-computed / 2) @line-height-computed;
width: 400px;
background-color: white;
border-radius: 8px;
}
.message-wider {
width: 650px;
margin-top: 60px;
padding: 0;
}
.message-header {
.modal-header;
}
.message-body {
.modal-body;
}
}
.diff-panel,
.point-in-time-panel {
.full-size;
margin-right: @changesListWidth;
}
.diff {
.full-size;
.toolbar {
padding: 3px;
height: @history-toolbar-height;
.name {
color: #fff;
float: left;
padding: 3px @line-height-computed / 4;
display: inline-block;
}
}
.diff-editor-v2 {
.full-size;
}
.diff-editor {
.full-size;
top: @history-toolbar-height;
}
.diff-deleted {
padding: @line-height-computed;
}
.deleted-warning {
background-color: @brand-danger;
color: white;
padding: @line-height-computed / 2;
margin-right: @line-height-computed / 4;
}
&-binary {
.alert {
margin: @line-height-computed / 2;
}
}
}
aside.change-list {
border-left: 1px solid @editor-border-color;
height: 100%;
width: @changesListWidth;
position: absolute;
right: 0;
.loading {
text-align: center;
font-family: @font-family-serif;
margin-top: (@line-height-computed / 2);
}
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 @editor-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 @editor-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;
}
.doc {
font-size: 0.9rem;
font-weight: bold;
}
.action {
color: @gray;
text-transform: uppercase;
font-size: 0.7em;
margin-bottom: -2px;
margin-top: 2px;
&-edited {
margin-top: 0;
}
}
}
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;
}
}
}
}
}
}
.diff-deleted {
padding-top: 15px;
}
.hide-ace-cursor {
.ace_active-line,
.ace_cursor-layer,
.ace_bracket {
display: none;
}
.ace_gutter-active-line {
background-color: transparent;
}
}
.editor-dark {
#history {
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;
}
}
}
}
}
}