mirror
/
FediAct
kopia lustrzana https://github.com/lartsch/FediAct
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

cross-browser css prefixes

pull/36/head
lartsch 2022-12-20 15:16:18 -05:00
rodzic 250e0b0ec0
commit ff0a65943e
4 zmienionych plików z 64 dodań i 22 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
src/content_styles.css
Wyświetl plik

@ -24,7 +24,9 @@
max-width: 300px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
margin: 0;
padding: 0;
@ -40,7 +42,8 @@
cursor: pointer;
width: 100%;
padding: 5px 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.fediactmodallink {
@ -118,7 +121,6 @@
color: blue !important;
}
/*
We insert these styles for the DOMNodeAppeared function as separate stylesheet (see manifest) to fix
Firefox blocking script-inserted <style> elements due to the site's CSP (long time bug)

2
src/content_styles.min.css vendored
Wyświetl plik

File diff suppressed because one or more lines are too long

74
src/popup_styles.css
Wyświetl plik

@ -13,13 +13,20 @@ html {
--radius: 12px;
--popup-height: 400px;
overflow: hidden !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
body {
/* width: 300px; */
flex-grow: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-height: var(--popup-height);
overflow: hidden;
}
@ -37,16 +44,24 @@ h2 {
display: contents;
}
form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
.scroller {
height: 0;
overflow-y: auto;
flex-grow: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
fieldset {
border: 0;
@ -60,12 +75,18 @@ fieldset > h2, summary {
.row {
background-color: var(--highlight);
padding: .8em;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 2px;
position: relative;
gap: .4em;
-webkit-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
.row:hover, .row:focus-within {
@ -81,7 +102,9 @@ fieldset > h2, summary {
}
label {
width: 0;
flex-grow: 9999;
-webkit-box-flex: 9999;
-ms-flex-positive: 9999;
flex-grow: 9999;
}
label::before { /* Make entire .row clickable */
content: "";
@ -102,8 +125,11 @@ input, textarea, select {
padding: .7em;
border-radius: calc(var(--radius) / 2);
font-size: inherit;
flex-grow: 1;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
z-index: 2;
}
@ -124,17 +150,27 @@ select {
}
.footer {
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-top: 1px dashed var(--border-2);
position: relative;
background-color: var(--highlight);
box-shadow: 0 0 24px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 24px rgba(0,0,0,0.1);
box-shadow: 0 0 24px rgba(0,0,0,0.1);
}
[type="submit"] {
flex-grow: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
padding-inline: 2em;
}
[type="submit"]:not(:hover):not(:focus) {
@ -142,7 +178,9 @@ select {
}
.footer span {
width: 0;
flex-grow: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: right;
padding-inline: 1em;
}
@ -152,7 +190,9 @@ select {
color: inherit;
}
#indicator {
order: -1;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
width: calc(100% + 20px);
font-weight: 600;
padding: .7em;

2
src/popup_styles.min.css vendored
Wyświetl plik

@ -1 +1 @@
html,body{margin:0;height:var(--popup-height);min-width:300px}html{--highlight:rgba(130,130,150,0.1);--confirmation:#268500;--hover:rgba(120,120,130,0.15);--border:rgba(120,120,130,0.3);--border-2:rgba(130,130,150,0.3);--radius:12px;--popup-height:400px;overflow:hidden !important;display:flex;flex-direction:column;height:100%}body{flex-grow:1;min-height:var(--popup-height);overflow:hidden}.hide{display:none}h1{font-size:1em;margin-block:.2em}h2{font-size:1em}#mhi-wrapper,#mhi-containers{display:contents}form{display:flex;flex-direction:column;height:100%}.scroller{height:0;overflow-y:auto;flex-grow:1;padding:10px;box-sizing:border-box}fieldset{border:0;padding:0;margin:0}fieldset>h2,summary{margin-inline:.6em;margin-bottom:.4em}.row{background-color:var(--highlight);padding:.8em;box-sizing:border-box;display:flex;flex-wrap:wrap;margin-bottom:2px;position:relative;gap:.4em;transition:background-color .1s}.row:hover,.row:focus-within{background:var(--hover)}.row:first-of-type{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.row:last-of-type{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}label{width:0;flex-grow:9999}label::before{content:"";position:absolute;inset:0}label span{display:block;font-size:.9em;opacity:.7;margin-top:.2em}input[type="text"]{width:100%}input,textarea,select{border:1px solid var(--border);padding:.7em;border-radius:calc(var(--radius) / 2);font-size:inherit;flex-grow:1;box-sizing:border-box;position:relative;z-index:2}.textarea-container{width:calc(100% - .14em);border-radius:inherit}textarea{resize:vertical;width:100%}select{margin-block:-.8em;padding-block:.4em;border:0;background:0;text-align:right}.footer{padding:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px dashed var(--border-2);position:relative;background-color:var(--highlight);box-shadow:0 0 24px rgba(0,0,0,0.1)}[type="submit"]{flex-grow:0;padding-inline:2em}[type="submit"]:not(:hover):not(:focus){background:0}.footer span{width:0;flex-grow:1;text-align:right;padding-inline:1em}.footer a{opacity:.7;text-underline-offset:.2em;color:inherit}#indicator{order:-1;width:calc(100% + 20px);font-weight:600;padding:.7em;margin:-10px;margin-bottom:8px;background-color:var(--confirmation);text-align:center;color:white}@media(prefers-color-scheme:dark){body{color:white}}
html,body{margin:0;height:var(--popup-height);min-width:300px}html{--highlight:rgba(130,130,150,0.1);--confirmation:#268500;--hover:rgba(120,120,130,0.15);--border:rgba(120,120,130,0.3);--border-2:rgba(130,130,150,0.3);--radius:12px;--popup-height:400px;overflow:hidden !important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-height:var(--popup-height);overflow:hidden}.hide{display:none}h1{font-size:1em;margin-block:.2em}h2{font-size:1em}#mhi-wrapper,#mhi-containers{display:contents}form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.scroller{height:0;overflow-y:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}fieldset{border:0;padding:0;margin:0}fieldset>h2,summary{margin-inline:.6em;margin-bottom:.4em}.row{background-color:var(--highlight);padding:.8em;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:2px;position:relative;gap:.4em;-webkit-transition:background-color .1s;-o-transition:background-color .1s;transition:background-color .1s}.row:hover,.row:focus-within{background:var(--hover)}.row:first-of-type{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.row:last-of-type{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}label{width:0;-webkit-box-flex:9999;-ms-flex-positive:9999;flex-grow:9999}label::before{content:"";position:absolute;inset:0}label span{display:block;font-size:.9em;opacity:.7;margin-top:.2em}input[type="text"]{width:100%}input,textarea,select{border:1px solid var(--border);padding:.7em;border-radius:calc(var(--radius) / 2);font-size:inherit;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:2}.textarea-container{width:calc(100% - .14em);border-radius:inherit}textarea{resize:vertical;width:100%}select{margin-block:-.8em;padding-block:.4em;border:0;background:0;text-align:right}.footer{padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-top:1px dashed var(--border-2);position:relative;background-color:var(--highlight);-webkit-box-shadow:0 0 24px rgba(0,0,0,0.1);box-shadow:0 0 24px rgba(0,0,0,0.1)}[type="submit"]{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding-inline:2em}[type="submit"]:not(:hover):not(:focus){background:0}.footer span{width:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right;padding-inline:1em}.footer a{opacity:.7;text-underline-offset:.2em;color:inherit}#indicator{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;width:calc(100% + 20px);font-weight:600;padding:.7em;margin:-10px;margin-bottom:8px;background-color:var(--confirmation);text-align:center;color:white}@media(prefers-color-scheme:dark){body{color:white}}