libreoffice-online/browser/css/device-tablet.css
Pedro Pinto Silva c623afe97e Tablet: Tabbed view: tabs container too wide
Tab buttons and their background (gray) looks odd, extending the full
width even if there is no more tabs to show.

This sub container cannot be allow to extend (flex-grow). Otherwise,
we end up with tabs background extending all the available area.
We can safely turn this off because the parent element
".notebookbar-tabs-container" already sits in place and extends the
whole area.

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I6ec3fa6f40d4138420569e9acf60c906a7c43035
2024-05-20 16:38:32 +01:00

134 lines
2.8 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. */
.ui-scroll-wrapper {
overflow-x: scroll !important;
scrollbar-width: none; /*css draft (firefox only)*/
-ms-scrollbar: none; /*ie*/
}
.ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
display: none;
}
.ui-scroll-left,
.ui-scroll-right {
background: none;
height: 100%;
width: 0px;
top: 0%;
box-shadow: 8px 0 13px 2px var(--color-primary), -6px 0px 6px 6px var(--color-primary);
border-radius: 0px;
}
.ui-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{
overflow: auto hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hasnotebookbar::-webkit-scrollbar {
width: 0;
height: 0;
}
.cool-annotation-img {
box-sizing: content-box !important;
}
/* pan tabs & overflow indicator */
.notebookbar-tabs-container > div {
white-space: nowrap;
flex: 0 0 auto;
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;
}
.main-nav.readonly.hasnotebookbar .notebookbar-tabs-container {
display: none;
}
.hasnotebookbar #document-titlebar {
position: static;
display: inline-flex;
margin: 0 32px 0 4px;
width: auto;
}
.main-nav:not(.readonly) #document-name-input {
display: none;
}
.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: var(--btn-size);
margin: 0;
}
#coolwsd-version span:before,
#lokit-version > span:before {
content: ' (';
white-space: pre;
}
#coolwsd-version span:after,
#lokit-version > span:after {
content: ')';
}