c9b593741c
- Desktop:
- Shortcuts is now centered
- Avoid setting hard min width for document title
- Tablet: Better presentation when on read only mode
- Document name is now fully visible using all available space
- Fix layout when on using tablet in portrait
- When editing:
- All top elements are now vertically centered
- Document name uses better the available space
- Tablet: document-name-input: Fix shadow on iOS
- Safari was overriding it with its own styles
- Generic:
- Document name: do not use ellipsis if the text fits
when porting this please be sure that 81a5d029e was reverted first
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I82abe930ba5e26c004b387fbf4047de8412b8a36
162 lines
No EOL
4.7 KiB
CSS
162 lines
No EOL
4.7 KiB
CSS
/* CSS specific for tablets. */
|
|
|
|
/* Disable tooltips when on touch devices */
|
|
.w2ui-tag .w2ui-tag-top {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Make the upper toolbar scrollable using swipe as on phones. */
|
|
#toolbar-up > .w2ui-scroll-wrapper {
|
|
overflow-x: scroll !important;
|
|
scrollbar-width: none; /*css draft (firefox only)*/
|
|
-ms-scrollbar: none; /*ie*/
|
|
}
|
|
#toolbar-up > .w2ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
|
|
display: none;
|
|
}
|
|
#toolbar-up .w2ui-scroll-left, #toolbar-up .w2ui-scroll-right{
|
|
background: none;
|
|
height: 100%;
|
|
width: 0px;
|
|
top: 0%;
|
|
box-shadow: 8px 0 13px 2px #0b87e7, -6px 0px 6px 6px #007cdc;
|
|
border-radius: 0px;
|
|
}
|
|
#toolbar-up .w2ui-scroll-right{
|
|
right: 0;
|
|
-webkit-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Additions for the main menu. */
|
|
.main-nav {
|
|
margin: 0;
|
|
}
|
|
.main-nav.hasnotebookbar {
|
|
overflow: visible; /*make sure #Menubar's contents are visible*/
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
}
|
|
.hasnotebookbar{
|
|
min-width: 808px; /*set a minimum so the logo fits*/
|
|
overflow: auto hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.hasnotebookbar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.vex-content .loleaflet-annotation-img {
|
|
box-sizing: content-box !important;
|
|
}
|
|
|
|
/* pan tabs & overflow indicator */
|
|
|
|
.notebookbar-tabs-container > div {
|
|
white-space: nowrap;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 0 auto;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.notebookbar-tabs-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.notebookbar-tabs-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-pack: start;
|
|
-webkit-justify-content: flex-start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
-webkit-overflow-scrolling: touch;
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
-ms-autohiding-scrollbar: none;
|
|
scrollbar-width: none;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
word-wrap: nowrap;
|
|
max-width: 60%;
|
|
background: transparent no-repeat;
|
|
background-image: -webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), -webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
|
|
background-image: -o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), -o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
|
|
background-image: radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));
|
|
background-position: 0 0, 100% 0;
|
|
background-size: 1rem 100%;
|
|
height: 24px;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar .notebookbar-tabs-container {
|
|
display: none;
|
|
}
|
|
|
|
.notebookbar-tabs-container:after,
|
|
.notebookbar-tabs-container:before {
|
|
content: '';
|
|
position: relative;
|
|
z-index: -1;
|
|
display: block;
|
|
min-width: 2rem;
|
|
margin: 0;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 0 auto;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.notebookbar-tabs-container::before {
|
|
max-width: 2rem;
|
|
background: -webkit-gradient(linear,left top, right top,from(var(--gray-light-bg-color)),color-stop(50%, var(--gray-light-bg-color)),to(rgba(255,255,255,0)));
|
|
background: -webkit-linear-gradient(left,var(--gray-light-bg-color),var(--gray-light-bg-color) 50%,rgba(255,255,255,0));
|
|
background: -o-linear-gradient(left,var(--gray-light-bg-color),var(--gray-light-bg-color) 50%,rgba(255,255,255,0));
|
|
background: linear-gradient(to right,var(--gray-light-bg-color),var(--gray-light-bg-color) 50%,rgba(255,255,255,0));
|
|
}
|
|
|
|
.notebookbar-tabs-container:after {
|
|
background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, var(--gray-light-bg-color)),to(var(--gray-light-bg-color)));
|
|
background: -webkit-linear-gradient(left,rgba(255,255,255,0),var(--gray-light-bg-color) 50%,var(--gray-light-bg-color));
|
|
background: -o-linear-gradient(left,rgba(255,255,255,0),var(--gray-light-bg-color) 50%,var(--gray-light-bg-color));
|
|
background: linear-gradient(to right,rgba(255,255,255,0),var(--gray-light-bg-color) 50%,var(--gray-light-bg-color));
|
|
}
|
|
|
|
.hasnotebookbar #document-titlebar {
|
|
position: static;
|
|
display: inline-flex;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar #document-titlebar {
|
|
width: auto;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar #document-name-input {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar #document-title-pencil {
|
|
min-width: 24px;
|
|
margin: 0;
|
|
} |