aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/DocumentDecorations.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/DocumentDecorations.scss')
-rw-r--r--src/client/views/DocumentDecorations.scss498
1 files changed, 227 insertions, 271 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 82dca1287..481b90249 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -4,8 +4,8 @@ $linkGap: 3px;
.documentDecorations-Dark,
.documentDecorations {
- position: absolute;
- z-index: 2000;
+ position: absolute;
+ z-index: 2000;
}
.documentDecorations-Dark {
background: dimgray;
@@ -17,11 +17,11 @@ $linkGap: 3px;
left: 0;
display: grid;
grid-template-rows: 20px 8px 1fr 8px;
- grid-template-columns: 8px 16px 1fr 8px 8px;
+ grid-template-columns: 8px 1fr 8px;
pointer-events: none;
.documentDecorations-centerCont {
- grid-column: 3;
+ grid-column: 2;
background: none;
}
@@ -41,6 +41,7 @@ $linkGap: 3px;
opacity: 1;
transform: translate(10px, 10px);
grid-row: 4;
+ grid-column: 3
}
.documentDecorations-topLeftResizer,
@@ -73,20 +74,18 @@ $linkGap: 3px;
.documentDecorations-topResizer,
.documentDecorations-bottomResizer {
- grid-column-start: 2;
- grid-column-end: 5;
+ grid-column: 2;
}
.documentDecorations-bottomRightResizer,
.documentDecorations-topRightResizer,
.documentDecorations-rightResizer {
- grid-column-start: 5;
- grid-column-end: 7;
+ grid-column: 3;
}
.documentDecorations-rotation,
.documentDecorations-borderRadius {
- grid-column: 5;
+ grid-column: 3;
grid-row: 4;
border-radius: 100%;
background: black;
@@ -132,114 +131,114 @@ $linkGap: 3px;
opacity: 1;
}
- .documentDecorations-topLeftResizer,
- .documentDecorations-leftResizer,
- .documentDecorations-bottomLeftResizer {
- grid-column: 1;
- }
-
- .documentDecorations-topResizer,
- .documentDecorations-bottomResizer {
- grid-column-start: 2;
- grid-column-end: 5;
- }
-
- .documentDecorations-bottomRightResizer,
- .documentDecorations-topRightResizer,
- .documentDecorations-rightResizer {
- grid-column-start: 5;
- grid-column-end: 7;
- }
-
- .documentDecorations-rotation,
- .documentDecorations-borderRadius {
- grid-column: 5;
- grid-row: 4;
- border-radius: 100%;
- background: black;
- height: 8;
- right: -12;
- top: 12;
- position: relative;
- pointer-events: all;
- cursor: nwse-resize;
-
- .borderRadiusTooltip {
- width: 10px;
- height: 10px;
- position: absolute;
- }
- }
- .documentDecorations-rotation {
- background: transparent;
- right: -15;
- }
-
- .documentDecorations-topLeftResizer,
- .documentDecorations-bottomRightResizer {
- cursor: nwse-resize;
- background: unset;
- opacity: 1;
- }
+ .documentDecorations-topLeftResizer,
+ .documentDecorations-leftResizer,
+ .documentDecorations-bottomLeftResizer {
+ grid-column: 1;
+ }
- .documentDecorations-topLeftResizer {
- border-left: 2px solid;
- border-top: solid 2px;
- }
+ .documentDecorations-topResizer,
+ .documentDecorations-bottomResizer {
+ grid-column: 2;
+ }
- .documentDecorations-bottomRightResizer {
- border-right: 2px solid;
- border-bottom: solid 2px;
- }
+ .documentDecorations-bottomRightResizer,
+ .documentDecorations-topRightResizer,
+ .documentDecorations-rightResizer {
+ grid-column: 3
+ }
- .documentDecorations-topLeftResizer:hover,
- .documentDecorations-bottomRightResizer:hover {
- opacity: 1;
- }
+ .documentDecorations-rotation,
+ .documentDecorations-borderRadius {
+ grid-column: 3;
+ grid-row: 4;
+ border-radius: 100%;
+ background: black;
+ height: 8;
+ right: -12;
+ top: 12;
+ position: relative;
+ pointer-events: all;
+ cursor: nwse-resize;
- .documentDecorations-bottomRightResizer {
- grid-row: 4;
- }
+ .borderRadiusTooltip {
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ }
+ }
+ .documentDecorations-rotation {
+ background: transparent;
+ right: -15;
+ }
- .documentDecorations-topRightResizer,
- .documentDecorations-bottomLeftResizer {
- cursor: nesw-resize;
- background: unset;
- opacity: 1;
- }
+ .documentDecorations-topLeftResizer,
+ .documentDecorations-bottomRightResizer {
+ cursor: nwse-resize;
+ background: unset;
+ opacity: 1;
+ }
+
+ .documentDecorations-topLeftResizer {
+ border-left: 2px solid;
+ border-top: solid 2px;
+ }
+
+ .documentDecorations-bottomRightResizer {
+ border-right: 2px solid;
+ border-bottom: solid 2px;
+ }
+
+ .documentDecorations-topLeftResizer:hover,
+ .documentDecorations-bottomRightResizer:hover {
+ opacity: 1;
+ }
+
+ .documentDecorations-bottomRightResizer {
+ grid-row: 4;
+ }
+
+ .documentDecorations-topRightResizer,
+ .documentDecorations-bottomLeftResizer {
+ cursor: nesw-resize;
+ background: unset;
+ opacity: 1;
+ }
- .documentDecorations-topRightResizer {
- border-right: 2px solid;
- border-top: 2px solid;
- }
+ .documentDecorations-topRightResizer {
+ border-right: 2px solid;
+ border-top: 2px solid;
+ }
- .documentDecorations-bottomLeftResizer {
- border-left: 2px solid;
- border-bottom: 2px solid;
- }
+ .documentDecorations-bottomLeftResizer {
+ border-left: 2px solid;
+ border-bottom: 2px solid;
+ }
- .documentDecorations-topRightResizer:hover,
- .documentDecorations-bottomLeftResizer:hover {
+.documentDecorations-topRightResizer:hover,
+.documentDecorations-bottomLeftResizer:hover {
cursor: nesw-resize;
background: black;
opacity: 1;
- }
+}
- .documentDecorations-topResizer,
- .documentDecorations-bottomResizer {
+.documentDecorations-topResizer,
+.documentDecorations-bottomResizer {
cursor: ns-resize;
- }
+}
- .documentDecorations-title-Dark,
- .documentDecorations-title {
+.documentDecorations-title-Dark,
+.documentDecorations-title {
opacity: 1;
- grid-column-start: 2;
- grid-column-end: 4;
+ width: calc(100% - 8px); // = margin-left + margin-right
+ grid-column: 2;
+ grid-column-end: 2;
pointer-events: auto;
overflow: hidden;
text-align: center;
display: flex;
- margin-left: 5px;
+ margin-left: 6px; // closeButton width (14) - leftColumn width (8)
+ margin-right: 2px;
height: 20px;
position: absolute;
border-radius: 8px;
@@ -247,7 +246,7 @@ $linkGap: 3px;
.documentDecorations-titleSpan,
.documentDecorations-titleSpan-Dark {
- width: 100%;
+ width: 100% ;
border-radius: 8px;
background: #ffffffa0;
position: absolute;
@@ -263,105 +262,62 @@ $linkGap: 3px;
background: black;
}
- .documentDecorations-contextMenu {
- width: 25px;
- height: calc(100% + 8px); // 8px for the height of the top resizer bar
- grid-column-start: 2;
- grid-column-end: 2;
- pointer-events: all;
- padding-left: 5px;
- cursor: pointer;
- }
-
- .documentDecorations-titleBackground {
- background: #ffffffcf;
- border-radius: 8px;
- width: 100%;
- height: 100%;
- position: absolute;
- }
-
- .documentDecorations-title {
- opacity: 1;
- grid-column-start: 2;
- grid-column-end: 4;
- pointer-events: auto;
- overflow: hidden;
- text-align: center;
- display: flex;
- margin-left: 5px;
- height: 20px;
- position: absolute;
- .documentDecorations-titleSpan {
- width: 100%;
- border-radius: 8px;
- background: #ffffffcf;
- position: absolute;
- display: inline-block;
- cursor: move;
- }
- }
-
- .focus-visible {
- margin-left: 0px;
- }
-}
+ .documentDecorations-titleBackground {
+ background: #ffffffcf;
+ border-radius: 8px;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ }
-.documentDecorations-iconifyButton {
- opacity: 1;
- grid-column-start: 4;
- grid-column-end: 4;
- pointer-events: all;
- right: 0;
- cursor: pointer;
- position: absolute;
- width: 20px;
+ .focus-visible {
+ margin-left: 0px;
+ }
}
.documentDecorations-openButton {
- display: flex;
- align-items: center;
- opacity: 1;
- grid-column-start: 5;
- grid-column-end: 5;
- pointer-events: all;
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ opacity: 1;
+ grid-column-start: 3;
+ pointer-events: all;
+ cursor: pointer;
}
.documentDecorations-closeButton {
- display: flex;
- align-items: center;
- opacity: 1;
- grid-column-start: 1;
- grid-column-end: 3;
- pointer-events: all;
- cursor: pointer;
-
- > svg {
- margin: 0;
- }
+ display: flex;
+ align-items: center;
+ opacity: 1;
+ grid-column: 1;
+ pointer-events: all;
+ width: 14px;
+ cursor: pointer;
+
+ > svg {
+ margin: 0;
+ }
}
.documentDecorations-background {
- background: lightblue;
- position: absolute;
- opacity: 0.1;
+ background: lightblue;
+ position: absolute;
+ opacity: 0.1;
}
.linkFlyout {
- grid-column: 2/4;
+ grid-column: 2/4;
}
.linkButton-empty:hover {
- background: $medium-gray;
- transform: scale(1.05);
- cursor: pointer;
+ background: $medium-gray;
+ transform: scale(1.05);
+ cursor: pointer;
}
.linkButton-nonempty:hover {
- background: $medium-gray;
- transform: scale(1.05);
- cursor: pointer;
+ background: $medium-gray;
+ transform: scale(1.05);
+ cursor: pointer;
}
.link-button-container {
@@ -379,132 +335,132 @@ $linkGap: 3px;
}
.linkButtonWrapper {
- pointer-events: auto;
- padding-right: 5px;
- width: 25px;
+ pointer-events: auto;
+ padding-right: 5px;
+ width: 25px;
}
.linkButton-linker {
- height: 20px;
- width: 20px;
- text-align: center;
- border-radius: 50%;
- pointer-events: auto;
- color: $dark-gray;
- border: $dark-gray 1px solid;
+ height: 20px;
+ width: 20px;
+ text-align: center;
+ border-radius: 50%;
+ pointer-events: auto;
+ color: $dark-gray;
+ border: $dark-gray 1px solid;
}
.linkButton-linker:hover {
- cursor: pointer;
- transform: scale(1.05);
+ cursor: pointer;
+ transform: scale(1.05);
}
.linkButton-empty,
.linkButton-nonempty {
- height: 20px;
- width: 20px;
- border-radius: 50%;
- opacity: 0.9;
- pointer-events: auto;
- background-color: $dark-gray;
- color: $white;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- transition: transform 0.2s;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &:hover {
- background: $medium-gray;
- transform: scale(1.05);
- cursor: pointer;
- }
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ opacity: 0.9;
+ pointer-events: auto;
+ background-color: $dark-gray;
+ color: $white;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ transition: transform 0.2s;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ background: $medium-gray;
+ transform: scale(1.05);
+ cursor: pointer;
+ }
}
.templating-menu {
- position: absolute;
- pointer-events: auto;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- transition: transform 0.2s;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
+ position: absolute;
+ pointer-events: auto;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ transition: transform 0.2s;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.documentdecorations-icon {
- margin: 0px;
+ margin: 0px;
}
.templating-button,
.docDecs-tagButton {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- opacity: 0.9;
- font-size: 14;
- background-color: $dark-gray;
- color: $white;
- text-align: center;
- cursor: pointer;
-
- &:hover {
- background: $medium-gray;
- transform: scale(1.05);
- }
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ opacity: 0.9;
+ font-size: 14;
+ background-color: $dark-gray;
+ color: $white;
+ text-align: center;
+ cursor: pointer;
+
+ &:hover {
+ background: $medium-gray;
+ transform: scale(1.05);
+ }
}
#template-list {
- position: absolute;
- top: 25px;
- left: 0px;
- width: max-content;
- font-family: $sans-serif;
- font-size: 12px;
- background-color: $light-gray;
- padding: 2px 12px;
- list-style: none;
-
- .templateToggle,
- .chromeToggle {
- text-align: left;
- }
-
- input {
- margin-right: 10px;
- }
+ position: absolute;
+ top: 25px;
+ left: 0px;
+ width: max-content;
+ font-family: $sans-serif;
+ font-size: 12px;
+ background-color: $light-gray;
+ padding: 2px 12px;
+ list-style: none;
+
+ .templateToggle,
+ .chromeToggle {
+ text-align: left;
+ }
+
+ input {
+ margin-right: 10px;
+ }
}
@-moz-keyframes spin {
- 100% {
- -moz-transform: rotate(360deg);
- }
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
}
@-webkit-keyframes spin {
- 100% {
- -webkit-transform: rotate(360deg);
- }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
}
@keyframes spin {
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
}
@keyframes shadow-pulse {
- 0% {
- box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
- }
+ 0% {
+ box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
+ }
- 100% {
- box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
- }
+ 100% {
+ box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+ }
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 10:39:46 +0000