cryptpad/customize.dist/src/less2/include/toolbar-history.less

283 lines
8.1 KiB
Plaintext

@import (reference) "./colortheme-all.less";
.history_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-toolbar-history {
@history_lineBg: #FFFFFF;
@history_userBg1: #DDD;
@history_userBg2: #BBB;
@pos-color: @cryptpad_text_col;
@fill-width: 40px;
display: none;
width: 100%;
padding: 10px 0 0;
align-items: center;
justify-content: center;
color: @cryptpad_text_col;
* {
font: @colortheme_app-font;
}
.cp-toolbar-history-timeline {
display: flex;
flex-flow: column;
flex: 1;
margin-left: 10px;
margin-right: @fill-width;
}
.cp-toolbar-history-actions {
display: flex;
justify-content: space-between;
align-items: center;
height: 39px;
align-self: baseline;
margin-right: 5px;
.cp-history-actions-first {
margin-right: @fill-width;
}
button {
margin: 0 5px;
border: 1px solid @cryptpad_text_col;
text-transform: uppercase;
.fa:not(:last-child) {
margin-right: 5px;
}
}
}
&.cp-history-drive {
.cp-history-timeline-container {
height: 20px !important;
}
.cp-history-timeline-users {
display: none !important;
}
.cp-history-timeline-legend {
display: none !important;
}
.cp-history-timeline-pos {
height: 18px !important;
}
.cp-toolbar-history-loadmore {
font-size: 10px !important;
}
.cp-history-timeline-actions {
margin-left: 21px !important;
}
}
&.cp-smallpatch {
.cp-history-snapshot {
border: none !important;
width: 2px !important;
background: @pos-color;
}
.cp-history-timeline-pos {
border: none !important;
width: 2px !important;
background: @pos-color;
&:after {
margin-left: -8px !important;
top: -8px !important;
}
}
}
.cp-history-timeline-line {
display: flex;
.cp-history-timeline-legend {
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
margin-right: 4px;
}
.cp-history-timeline-loadmore {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
button {
padding: 0;
width: 100%;
height: 100%;
background: @history_lineBg;
margin-right: 1px;
.fa-refresh {
font-size: 13px;
}
}
}
.cp-history-timeline-container {
flex: 1;
position: relative;
background-color: @history_lineBg;
height: 39px;
}
.cp-history-timeline-bar {
display: flex;
flex-flow: column;
padding: 1px;
& > span {
height: 18px;
display: flex;
}
.cp-history-timeline-users {
margin-bottom: 1px;
.cp-history-bar-el {
background-color: @history_userBg1;
&:nth-child(2n) {
background-color: @history_userBg2;
}
}
}
.cp-history-timeline-user {
.cp-history-bar-el {
background-color: @history_userBg2;
&:nth-child(2n) {
background-color: @history_userBg1;
}
}
}
.cp-history-snapshots {
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
.cp-history-snapshot {
position: absolute;
border: 2px solid @cryptpad_text_col;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.cp-history-timeline-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 40px;
button {
width: 50px;
.fa:first-child:not(:last-child) {
margin-right: 5px;
}
}
.cp-history-timeline-next {
button:last-child {
margin-right: 0;
}
}
.cp-history-timeline-prev {
button:first-child {
margin-left: 0;
}
}
}
.cp-history-timeline-pos {
//width: 2px;
border: 2px solid @cryptpad_text_col;
height: 37px;
//background: @pos-color;
position: absolute;
&:after {
content: '';
border: 9px solid transparent;
border-top-color: @pos-color;
position: absolute;
top: -9px;
margin-left: -1px;
width: 100%;
}
}
/*
.cp-history-filler {
flex: 1;
}
.cp-toolbar-history-close,
.cp-toolbar-history-revert {
background: white;
color: black;
//margin-top: 5px;
&:hover {
background-color: #e6e6e6;
}
}
.cp-toolbar-history-loadmore {
height: 100%;
color: black;
width: 25px;
position: absolute;
left: 0;
padding: 0;
}
.cp-toolbar-history-version {
position: absolute;
height: 25px;
line-height: 25px;
width: 100%;
text-align: center;
color: black;
}
.cp-toolbar-history-goto {
display: inline-block;
vertical-align: middle;
text-align: center;
flex: 1;
flex-basis: 80%;
min-width: 0;
max-width: 600px;
input { width: 75px; }
}
.cp-toolbar-history-goto-input {
padding-left: 5px;
margin-left: 5px;
vertical-align: middle;
}
.cp-toolbar-history-bar {
width: 100%;
background: white;
height: 25px;
margin: auto;
position: relative;
}
.cp-toolbar-history-pos-container {
width: ~"calc(100% - 2px)";
height: 25px;
position: relative;
}
@pos-color: #55FF55;
.cp-toolbar-history-pos {
width: 2px;
height: 25px;
background: @pos-color;
&:after {
content: '';
border: 6px solid transparent;
border-top-color: @pos-color;
margin-left: -5px;
}
}
button {
color: @cryptpad_text_col;
background-color: rgba(0,0,0,0.2);
&:hover {
background-color: rgba(0,0,0,0.4);
}
}
.fa-spinner {
font-size: 66px;
}
*/
}
}