overleaf/services/web/public/stylesheets/app/editor/history-v2.less
Paulo Jorge Reis 4563ce864c Merge pull request #1285 from sharelatex/pr-history-compare-labels-fixes
History compare labels fixes

GitOrigin-RevId: 176750c4017e5511a22f1792e37ab8918a142ec3
2018-12-18 11:48:49 +00:00

352 lines
7.7 KiB
Text

.history-toolbar {
display: flex;
align-items: center;
position: absolute;
width: 100%;
top: @ide-body-top-offset;
height: @editor-toolbar-height;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
z-index: 1;
color: @history-toolbar-color;
padding-left: (@line-height-computed / 2);
}
.history-compare-mode-toolbar {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
height: @editor-toolbar-height;
color: @history-toolbar-color;
padding: 0 10px;
}
.history-toolbar when (@is-overleaf = false) or (@is-overleaf-light) {
border-bottom: @toolbar-border-bottom;
}
.history-toolbar-selected-version {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: (@line-height-computed / 2);
}
.history-toolbar-time,
.history-toolbar-selected-label {
font-weight: bold;
}
.history-toolbar-actions {
flex-grow: 1;
flex-shrink: 0;
}
.history-toolbar-btn,
.history-toolbar-btn-danger {
.btn;
.btn-xs;
padding-left: @padding-small-horizontal;
padding-right: @padding-small-horizontal;
margin-right: (@line-height-computed / 2);
}
.history-toolbar-btn {
.btn-info;
}
.history-toolbar-btn-danger {
.btn-danger;
}
.history-toolbar-entries-list {
flex: 0 0 @changesListWidth;
padding: 0 10px;
border-left: 1px solid @editor-border-color;
}
.history-entries {
font-size: @history-base-font-size;
color: @history-base-color;
height: 100%;
background-color: @history-base-bg;
}
.history-entry-day {
display: block;
background-color: @history-entry-day-bg;
color: #FFF;
padding: 5px 10px;
line-height: 1;
}
.history-entry-details {
background-color: #FFF;
margin-bottom: 2px;
padding: 5px 10px;
cursor: pointer;
.history-entry-selected &,
.history-entry-label-selected & {
background-color: @history-entry-selected-bg;
color: #FFF;
}
}
.history-label {
display: inline-block;
color: @history-entry-label-color;
font-size: @font-size-small;
margin-bottom: 3px;
margin-right: 10px;
white-space: nowrap;
.history-entry-selected &,
.history-entry-label-selected & {
color: @history-entry-selected-label-color;
}
&.history-label-pseudo-current-state {
.history-entry-selected &,
.history-entry-label-selected & {
color: @history-entry-selected-pseudo-label-color;
}
}
}
.history-label-comment,
.history-label-delete-btn {
padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
border: 0;
background-color: @history-entry-label-bg-color;
.history-label-pseudo-current-state & {
background-color: @history-entry-pseudo-label-bg-color;
}
.history-entry-selected &,
.history-entry-label-selected & {
background-color: @history-entry-selected-label-bg-color;
}
}
.history-label-comment {
display: block;
float: left;
border-radius: 9999px;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
.history-label-own & {
padding-right: (@padding-xs-horizontal / 2);
border-radius: 9999px 0 0 9999px;
}
}
.history-label-delete-btn {
padding-left: (@padding-xs-horizontal / 2);
padding-right: @padding-xs-horizontal;
border-radius: 0 9999px 9999px 0;
&:hover {
background-color: darken(@history-entry-label-bg-color, 8%);
.history-entry-selected &,
.history-entry-label-selected & {
background-color: darken(@history-entry-selected-label-bg-color, 8%);
}
}
}
.history-label-tooltip {
white-space: normal;
padding: (@line-height-computed / 4);
text-align: left;
}
.history-label-tooltip-title,
.history-label-tooltip-owner,
.history-label-tooltip-datetime {
margin: 0 0 (@line-height-computed / 4) 0;
}
.history-label-tooltip-title {
font-weight: bold;
}
.history-label-tooltip-datetime {
margin-bottom: 0;
}
.history-entry-changes {
.list-unstyled;
margin-bottom: 3px;
}
.history-entry-change {
}
.history-entry-change-action {
margin-right: 0.5em;
}
.history-entry-change-doc {
color: @history-highlight-color;
font-weight: bold;
word-break: break-all;
.history-entry-selected &,
.history-entry-label-selected & {
color: #FFF;
}
}
.history-entry-metadata {
}
.history-entry-metadata-time {
white-space: nowrap;
}
.history-entry-metadata-users {
display: inline;
padding: 0;
}
.history-entry-metadata-user {
display: inline;
&::after {
content: ', ';
}
&:last-of-type::after {
content: none;
}
}
.history-entries-list-upgrade-prompt {
background-color: #FFF;
margin-bottom: 2px;
padding: 5px 10px;
.change-list-compare & {
font-size: @font-size-small;
}
}
.history-labels-list,
.history-labels-list-compare {
.history-entries;
overflow-y: auto;
}
.history-labels-list-compare {
background-color: transparent;
}
.history-entry-label {
.history-entry-details;
padding: 7px 10px;
&.history-entry-label-selected {
background-color: @history-entry-selected-bg;
color: #FFF;
}
}
.history-file-tree-inner {
.full-size;
overflow-y: auto;
background-color: @file-tree-bg;
.loading {
color: #FFF;
font-size: @history-base-font-size;
text-align: center;
font-family: @font-family-serif;
}
}
.tooltip-history-file-tree {
font-size: 12px;
.tooltip-inner {
max-width: 400px;
text-align: left;
}
}
.history-file-tree-inner when (@is-overleaf = false) {
font-size: 0.8rem;
}
.history-file-entity-wrapper {
color: #FFF;
margin-left: (@line-height-computed / 2);
}
.history-file-entity-link {
display: block;
position: relative;
color: @file-tree-item-color;
line-height: @file-tree-line-height;
&:hover {
background-color: @file-tree-item-hover-bg;
color: @file-tree-item-color;
text-decoration: none;
}
&:focus {
color: @file-tree-item-focus-color;
outline: none;
text-decoration: none;
}
&:hover when (@is-overleaf = true) {
.fake-full-width-bg(@file-tree-item-hover-bg);
}
}
.history-file-entity-link-selected {
background-color: @file-tree-item-selected-bg;
font-weight: bold;
color: #FFF;
.fake-full-width-bg(@file-tree-item-selected-bg);
&:hover {
background-color: @file-tree-item-hover-bg;
}
&:focus {
color: @file-tree-item-focus-selected-color;
}
}
.history-file-entity-name-container {
display: flex;
align-items: center;
}
.history-file-entity-name {
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-file-entity-operation-badge {
flex: 0 0 auto;
text-transform: lowercase;
margin-left: .5em;
font-size: .7em;
background: @history-file-badge-bg;
color: @history-file-badge-color;
border-radius: 8px;
line-height: 1;
padding: 2px 4px 3px;
margin-top: 2px;
}
.history-file-entity-icon,
.history-file-operation-icon {
flex: 0 0 auto;
color: @file-tree-item-icon-color;
font-size: 14px;
margin-right: .5em;
.history-file-entity-link-selected & {
color: #FFF;
}
}
.history-file-operation-icon {
margin-left: .5em;
margin-right: 0;
}
.history-file-entity-name-edited,
.history-file-entity-name-added,
.history-file-entity-name-removed,
.history-file-entity-name-renamed {
}
.history-file-entity-name-removed {
text-decoration: line-through;
}
.history-file-entity-link-selected when (@is-overleaf = false) {
color: @brand-primary;
&:hover,
&:focus {
color: @brand-primary;
}
.history-file-entity-icon {
color: @brand-primary;
}
}