overleaf/services/web/public/stylesheets/app/editor/history.less

342 lines
6.1 KiB
Text
Raw Normal View History

@changesListWidth: 250px;
2014-06-26 11:39:52 -04:00
@changesListPadding: @line-height-computed / 2;
2014-06-26 12:22:06 -04:00
@selector-padding-vertical: 10px;
2014-06-26 11:39:52 -04:00
@selector-padding-horizontal: @line-height-computed / 2;
@day-header-height: 24px;
@range-bar-color: @link-color;
@range-bar-selected-offset: 14px;
2014-06-26 11:39:52 -04:00
@history-toolbar-height: 32px;
#history {
2014-07-03 06:18:15 -04:00
.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;
2016-02-18 09:51:55 -05:00
padding: (@line-height-computed / 2) @line-height-computed;
width: 400px;
2014-07-03 06:18:15 -04:00
background-color: white;
border-radius: 8px;
}
.message-wider {
width: 650px;
margin-top: 60px;
padding: 0;
}
.message-header {
.modal-header;
}
.message-body {
.modal-body;
}
2014-07-03 06:18:15 -04:00
}
2014-06-26 11:39:52 -04:00
.diff-panel,
.point-in-time-panel {
2014-07-11 08:55:14 -04:00
.full-size;
2014-06-27 07:45:37 -04:00
margin-right: @changesListWidth;
2014-07-11 08:55:14 -04:00
}
.diff {
.full-size;
.toolbar {
padding: 3px;
height: @history-toolbar-height;
2014-07-11 08:55:14 -04:00
.name {
color: #FFF;
2014-07-11 08:55:14 -04:00
float: left;
padding: 3px @line-height-computed / 4;
display: inline-block;
}
}
.diff-editor-v2 {
.full-size;
}
2014-07-11 08:55:14 -04:00
.diff-editor {
.full-size;
top: @history-toolbar-height;
2014-07-11 08:55:14 -04:00
}
2014-06-27 12:11:26 -04:00
.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;
}
}
2014-06-27 07:45:37 -04:00
}
2014-06-26 11:39:52 -04:00
aside.change-list {
2017-11-13 07:03:28 -05:00
border-left: 1px solid @editor-border-color;
2014-06-26 11:39:52 -04:00
height: 100%;
width: @changesListWidth;
position: absolute;
right: 0;
.loading {
text-align: center;
font-family: @font-family-serif;
2018-05-30 12:34:46 -04:00
margin-top: (@line-height-computed / 2);
}
2014-06-26 11:39:52 -04:00
ul {
li.change {
position: relative;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
.day {
background-color: #fafafa;
2017-11-13 07:03:28 -05:00
border-bottom: 1px solid @editor-border-color;
2014-06-26 11:39:52 -04:00
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;
2017-11-13 07:03:28 -05:00
border-bottom: 1px solid @editor-border-color;
cursor: pointer;
&:hover {
background-color: @gray-lightest;
}
2014-06-26 11:39:52 -04:00
}
.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;
}
}
2014-06-26 11:39:52 -04:00
}
.time {
float: right;
color: @gray;
display: inline-block;
padding-right: (@line-height-computed / 2);
font-size: 0.8rem;
line-height: @line-height-computed;
}
.doc {
2017-12-13 11:48:48 -05:00
font-size: 0.9rem;
font-weight: bold;
2017-12-13 11:48:48 -05:00
}
.action {
color: @gray;
text-transform: uppercase;
font-size: 0.7em;
margin-bottom: -2px;
margin-top: 2px;
&-edited {
margin-top: 0;
2017-12-13 11:48:48 -05:00
}
2014-06-26 11:39:52 -04:00
}
}
li.loading-changes, li.empty-message {
padding: 6px;
cursor: default;
&:hover {
background-color: inherit;
}
}
li.selected {
border-left: 4px solid @range-bar-color;
2014-06-26 12:22:06 -04:00
.day {
padding-left: 0;
}
2014-06-26 11:39:52 -04:00
.description {
padding-left: 34px;
}
.selectors {
left: @selector-padding-horizontal - 4px;
.range {
background-color: @range-bar-color;
}
}
}
li.selected-to {
.selectors {
.range {
2014-06-26 12:22:06 -04:00
top: @range-bar-selected-offset;
2014-06-26 11:39:52 -04:00
}
.selector-to {
opacity: 1;
}
}
}
li.selected-from {
.selectors {
.range {
2014-06-26 12:22:06 -04:00
bottom: @range-bar-selected-offset;
2014-06-26 11:39:52 -04:00
}
.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 {
2014-06-26 12:22:06 -04:00
top: @day-header-height + @range-bar-selected-offset;
2014-06-26 11:39:52 -04:00
}
}
}
}
2014-06-26 12:22:06 -04:00
ul.hover-state {
2014-06-26 11:39:52 -04:00
li {
.selectors {
.range {
background-color: transparent;
top: 0;
bottom: 0;
}
}
}
li.hover-selected {
.selectors {
.range {
top: 0;
2014-06-26 12:22:06 -04:00
background-color: @gray-light;
2014-06-26 11:39:52 -04:00
}
}
}
li.hover-selected-to {
.selectors {
.range {
2014-06-26 12:22:06 -04:00
top: @range-bar-selected-offset;
2014-06-26 11:39:52 -04:00
}
.selector-to {
opacity: 1;
}
}
}
li.hover-selected-from {
.selectors {
.range {
2014-06-26 12:22:06 -04:00
bottom: @range-bar-selected-offset;
2014-06-26 11:39:52 -04:00
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day.hover-selected-to {
.selectors {
.range {
2014-06-26 12:22:06 -04:00
top: @day-header-height + @range-bar-selected-offset;
2014-06-26 11:39:52 -04:00
}
}
}
}
}
2014-07-11 08:55:14 -04:00
}
.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;
}
}
}
}
}
}