diff --git a/src/styles.css b/src/styles.css
index 2c7abda..eee69bf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -87,7 +87,7 @@ button {
.workspace {
display: grid;
- grid-template-rows: 34px 36px minmax(0, 1fr) 28px;
+ grid-template-rows: 34px minmax(0, 1fr) 28px;
min-width: 0;
min-height: 0;
height: 100%;
@@ -329,18 +329,53 @@ button {
.word-module-toolbar {
display: block;
- min-height: 118px;
+ min-height: 154px;
padding: 0;
overflow: hidden;
}
+.word-ribbon-tabs {
+ display: flex;
+ align-items: center;
+ min-width: 100%;
+ height: 36px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ border-bottom: 1px solid #d6dde8;
+ background: #ffffff;
+}
+
+.word-ribbon-tabs button {
+ flex: 0 0 auto;
+ height: 36px;
+ padding: 0 13px;
+ border: 0;
+ border-bottom: 2px solid transparent;
+ background: transparent;
+ color: #2f343c;
+ cursor: pointer;
+ font-size: 13px;
+}
+
+.word-ribbon-tabs button.is-active {
+ border-bottom-color: #2f5f9f;
+ color: #1f4f8a;
+ font-weight: 700;
+}
+
+.word-ribbon-tabs button:hover {
+ background: #edf4fb;
+}
+
.word-ribbon {
display: flex;
align-items: stretch;
width: 100%;
min-width: 100%;
+ height: 118px;
min-height: 118px;
- overflow: hidden;
+ overflow-x: auto;
+ overflow-y: hidden;
background: #ffffff;
}
@@ -349,6 +384,7 @@ button {
grid-template-rows: minmax(0, 1fr) 18px;
align-items: stretch;
gap: 4px;
+ height: 118px;
min-height: 118px;
min-width: 0;
padding: 8px 10px 4px;
@@ -459,10 +495,17 @@ button {
}
.word-font-group {
- flex: 1 1 266px;
+ flex: 0 0 266px;
+ grid-template-rows: 28px 28px minmax(0, 1fr) 18px;
grid-template-columns: minmax(0, 1fr);
}
+.word-ribbon select {
+ height: 28px;
+ border-radius: 3px;
+ font-size: 12px;
+}
+
.word-font-select {
min-width: 0;
flex: 1 1 170px;
@@ -476,16 +519,18 @@ button {
.word-format-tools {
width: fit-content;
max-width: 100%;
- margin-top: 6px;
+ margin-top: 0;
}
.word-color-row {
flex-wrap: wrap;
- margin-top: 6px;
+ gap: 4px;
+ margin-top: 0;
+ overflow: hidden;
}
.word-color-row .text-color-tools {
- min-height: 26px;
+ min-height: 22px;
padding-left: 0;
border-left: 0;
}
@@ -497,6 +542,7 @@ button {
.word-paragraph-group {
flex: 0 0 170px;
+ grid-template-rows: 28px 28px minmax(0, 1fr) 18px;
grid-template-columns: minmax(0, 1fr);
}
@@ -510,20 +556,22 @@ button {
}
.word-styles-group {
- flex: 0 1 210px;
+ flex: 0 0 360px;
grid-template-columns: minmax(0, 1fr);
}
.word-style-gallery {
- display: grid;
- grid-template-columns: repeat(2, minmax(74px, 1fr));
+ display: flex;
+ align-items: stretch;
gap: 6px;
min-width: 0;
+ overflow: hidden;
}
.word-style-gallery button {
display: grid;
align-content: center;
+ flex: 0 0 82px;
min-height: 64px;
padding: 6px 8px;
border: 1px solid #d6dde8;
@@ -563,6 +611,17 @@ button {
font-size: 11px;
}
+.word-ribbon .segmented-tools button {
+ width: 30px;
+ height: 28px;
+}
+
+.word-ribbon .compact-command {
+ height: 28px;
+ padding: 0 8px;
+ font-size: 12px;
+}
+
.hidden-file-input {
display: none;
}
@@ -809,7 +868,7 @@ button {
.page-ruler {
display: grid;
grid-template-columns: repeat(9, 1fr);
- width: clamp(794px, calc(100% - 80px), 1000px);
+ width: var(--qword-page-width, 794px);
height: 26px;
margin: 12px auto 0;
color: #7a8797;
@@ -845,12 +904,12 @@ button {
.paper-frame {
position: relative;
- width: clamp(794px, calc(100% - 80px), 1000px);
+ width: var(--qword-page-width, 794px);
margin: 0 auto 38px;
}
.paper {
- --qword-page-height: 1180px;
+ --qword-page-height: 1123px;
min-height: var(--qword-page-height);
width: 100%;
margin: 0;