infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Continue toolbar redesign

Browse Source
master
David Benqué 3 years ago
parent c2c9857387
commit a574cfe1e2
3 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File

2
customize.dist/src/less2/include/drive.less
Unescape Escape View File

@ -486,7 +486,7 @@
position: absolute; position: absolute;
z-index: 50; z-index: 50;
} }
&.cp-app-drive-readonly { // XXX NOW &.cp-app-drive-readonly { // XXX DB find new appearance for disabled/read-only drive?
background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%)); background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
} }
h1 { h1 {

10
customize.dist/src/less2/include/toolbar-history.less
Unescape Escape View File

@ -89,7 +89,9 @@
} }
button { button {
margin: 0 5px; margin: 0 5px;
border: 1px solid @cryptpad_text_col; border: 1px solid @cp_toolbar-fg;
background-color: @cp_toolbar-fg;
color: @cp_toolbar-fg-inv;
border-radius: @variables_radius; border-radius: @variables_radius;
text-transform: uppercase; text-transform: uppercase;
display: inline-flex; display: inline-flex;
@ -97,6 +99,9 @@
.fa:not(:last-child) { .fa:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
&:hover {
background-color: fade(@cp_toolbar-fg, 70%);
}
&:disabled { &:disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
opacity: 0.6; opacity: 0.6;
@ -235,9 +240,10 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 40px; margin: 5px 0px 5px 40px;
button { button {
width: 50px; width: 50px;
border-radius: @variables_radius;
.fa:first-child:not(:last-child) { .fa:first-child:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }

42
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -897,8 +897,8 @@
} }
.cp-toolbar-history, .cp-toolbar-snapshots { .cp-toolbar-history, .cp-toolbar-snapshots {
background-color: @toolbar-bg-color-light; // XXX NOW background-color: @cp_toolbar-bg;
background-color: var(--toolbar-bg-color-light); //background-color: var(--toolbar-bg-color-light);
color: @toolbar-color; color: @toolbar-color;
} }
.cp-toolbar-snapshots { .cp-toolbar-snapshots {
@ -956,9 +956,6 @@
button { button {
border: 1px solid @cp_toolbar-bottom-fg; border: 1px solid @cp_toolbar-bottom-fg;
background-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-fg-inv;
//border-color: var(--toolbar-bg-color-active);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
margin: 0px; margin: 0px;
@ -973,15 +970,26 @@
background-color: fade(@cp_toolbar-bottom-fg, 70%); background-color: fade(@cp_toolbar-bottom-fg, 70%);
} }
} }
button.cp-toolbar-button-active { .cp-toolbar-bottom-left > button,
background-color: @cp_toolbar-bg; .cp-toolbar-bottom-mid > button,
border-color: @cp_toolbar-bottom-fg; .cp-toolbar-bottom-right > button,
color: @cp_toolbar-bottom-fg; .cp-toolbar-bottom-right > span > button {
background-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-fg-inv;
&:hover { &:hover {
background-color: fade(@cp_toolbar-bottom-fg, 30%); background-color: fade(@cp_toolbar-bottom-fg, 70%);
}
&.cp-toolbar-button-active {
background-color: @cp_toolbar-bg;
border-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-bottom-fg;
&:hover {
background-color: fade(@cp_toolbar-bottom-fg, 30%);
}
} }
} }
button.cp-toolbar-button-primary { button.cp-toolbar-button-primary {
background-color: @toolbar-bg-color; background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color);
@ -1105,6 +1113,7 @@
} }
.cp-toolbar-drawer-content { .cp-toolbar-drawer-content {
box-shadow: 0px 1px 5px 0px @cp_shadow-color; box-shadow: 0px 1px 5px 0px @cp_shadow-color;
border-radius: @variables_radius;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
&.cp-dropdown-visible { &.cp-dropdown-visible {
@ -1113,13 +1122,14 @@
position: absolute; position: absolute;
left: 0px; left: 0px;
top: @toolbar_line-height; top: @toolbar_line-height;
margin: -1px; //margin: -1px;
padding: 5px;
min-width: 50px; min-width: 50px;
background: @cp_dropdown-bg; // XXX not applied background: @cp_dropdown-bg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
z-index: 10000; //Z cp-toolbar-drawer-content z-index: 10000; //Z cp-toolbar-drawer-content
color: @cp_dropdown-fg; // XXX not applied color: @cp_dropdown-fg;
.tools_unselectable(); .tools_unselectable();
.fa { .fa {
font-size: 17px; font-size: 17px;
@ -1129,15 +1139,15 @@
box-sizing: border-box; box-sizing: border-box;
min-width: 150px; min-width: 150px;
height: @toolbar_line-height; height: @toolbar_line-height;
border-radius: 0; border-radius: @variables_radius;
border: 0; border: 0;
} }
button { button {
white-space: nowrap; white-space: nowrap;
padding: 5px 16px; padding: 5px;
text-align: left; text-align: left;
margin: 0; margin: 0;
border-radius: 0; border-radius: @variables_radius;
border: 0; border: 0;
width: 100%; width: 100%;
line-height: 1em; line-height: 1em;

Write Preview
Loading…
Cancel
Save