mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix Scaffold for redesign

Browse source
This commit is contained in:
windingwind 2023-12-24 13:13:25 +08:00 committed by Dan Stillman
parent b649a1a953
commit a3dec4be45
5 changed files with 109 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
chrome/content/scaffold/scaffold.xhtml
View file

@ -371,7 +371,7 @@
</toolbarbutton>
</hbox>
</toolbar>
<hbox flex="1">
<hbox id="appcontent" flex="1">
<tabbox id="left-tabbox" flex="2" width="300">
<tabs id="tabs">
<tab id="tab-metadata" label="&scaffold.tabs.metadata.label;"/>
@ -496,7 +496,7 @@
</tabpanel>
</tabpanels>
</tabbox>
<splitter resizeafter="farthest" />
<splitter id="pane-splitter" resizeafter="farthest" />
<vbox id="right-pane" flex="1">
<html:textarea style="-moz-box-flex: 1" id="output" readonly="true"/>

6
scss/components/_button.scss
View file

@ -31,3 +31,9 @@
}
}
button {
@media (-moz-platform: macos) {
// Prevent ugly non-native button styles on macOS
max-height: 25px;
}
}

76
scss/mac/_tabbox.scss Normal file
View file

@ -0,0 +1,76 @@
tabbox {
tabs {
tab {
appearance: none;
// Since the tab with opacity is weird, we just use hard-coded colors
@include light-dark(background, #ededed, #343434);
box-shadow:
0px 2px 2px -2px var(--fill-quarternary) inset,
0px -2px 2px -2px var(--fill-quarternary) inset,
0px 4px 4px -4px var(--fill-quinary) inset,
0px -4px 4px -4px var(--fill-quinary) inset;
&::before {
content: "";
position: absolute;
height: 14px;
top: 5px;
border-left: 1px solid var(--fill-quarternary);
}
&:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:
0px 2px 2px -2px var(--fill-quarternary) inset,
0px -2px 2px -2px var(--fill-quarternary) inset,
0px 4px 4px -4px var(--fill-quinary) inset,
0px -4px 4px -4px var(--fill-quinary) inset,
2px 0px 2px -2px var(--fill-quarternary) inset,
4px 0px 4px -4px var(--fill-quinary) inset;
&::before {
display: none;
}
}
&:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow:
0px 2px 2px -2px var(--fill-quarternary) inset,
0px -2px 2px -2px var(--fill-quarternary) inset,
0px 4px 4px -4px var(--fill-quinary) inset,
0px -4px 4px -4px var(--fill-quinary) inset,
-2px 0px 2px -2px var(--fill-quarternary) inset,
-4px 0px 4px -4px var(--fill-quinary) inset;
}
&[visuallyselected=true] {
& + tab {
&::before {
display: none;
}
}
&::before {
display: none;
}
.tab-middle {
border-radius: 5px;
background: var(--material-button);
box-shadow:
0px 1px 0.75px 0px var(--fill-quinary),
0px 0.25px 0.25px 0px var(--color-border);;
border: 0.5px solid var(--fill-senary);
}
}
}
}
tabpanels {
appearance: none;
background: var(--color-sidepane);
border: 1px solid var(--fill-quinary);
border-radius: 5px;
}
}

37
scss/scaffold.scss
View file

@ -96,20 +96,22 @@ richlistbox {
min-width:200px;
}
#zotero-toolbar {
margin-bottom: 3px;
}
#zotero-toolbar toolbarseparator {
height: 18px;
}
browser {
background: white;
browser,
#appcontent
{
background: var(--material-toolbar);
}
#appcontent {
padding: 16px;
}
vbox > splitter {
cursor: row-resize;
cursor: row-rgb(4, 4, 4)e;
}
/* Adapted from Mozilla common-shared.css */
@ -120,8 +122,8 @@ listheader,
richlistbox {
appearance: none;
margin-inline: 0;
background-color: #fff;
border: 1px solid #ccc;
background: var(--material-background);
border: var(--material-panedivider);
}
listheader {
@ -164,7 +166,7 @@ dialog richlistbox > richlistitem[disabled] {
}
#left-tabbox {
margin-top: 5px;
margin: 5px;
}
#checkboxes-translatorType checkbox {
@ -176,7 +178,16 @@ dialog richlistbox > richlistitem[disabled] {
text-align: right;
}
#right-pane textarea {
margin-right: 5px;
margin-bottom: 5px;
#pane-splitter {
// 16px (padding of tabbox container) - 9px
margin-left: 7px;
}
#right-pane {
margin: -16px -16px -16px 0px;
border-left: var(--material-panedivider);
textarea {
outline: none;
border: 0;
}
}

1
scss/zotero-mac.scss
View file

@ -7,6 +7,7 @@
@import "mac/createParent";
@import "mac/editable";
@import "mac/tabBar";
@import "mac/tabbox";
@import "mac/menupopup";
// Elements