open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

manage: fix applies-to overflow with long strings; add some vars

Browse Source
This commit is contained in:
tophf 2017-11-29 15:14:14 +03:00
parent e90de3783a
commit d72aa0fa36
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
manage/manage.css
View File

@ -1,3 +1,12 @@
:root {
--header-width: 280px;
--checkbox-width: 24px;
--name-padding-left: 40px;
--name-padding-right: 40px;
--actions-width: 75px;
--onoffswitch-width: 60px;
}
body { body {
margin: 0; margin: 0;
font: 12px arial, sans-serif; font: 12px arial, sans-serif;
@ -31,13 +40,14 @@ select {
} }
#header { #header {
width: 280px; width: var(--header-width);
height: 100vh; height: 100vh;
position: fixed; position: fixed;
top: 0; top: 0;
padding: 15px; padding: 15px;
border-right: 1px dashed #AAA; border-right: 1px dashed #AAA;
-webkit-box-shadow: 0 0 50px -18px black; -webkit-box-shadow: 0 0 50px -18px black;
box-shadow: 0 0 50px -18px black;
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
z-index: 9; z-index: 9;
@ -79,7 +89,7 @@ label.nobreak input {
#installed { #installed {
position: relative; position: relative;
padding-left: 280px; padding-left: var(--header-width);
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
} }
@ -255,15 +265,15 @@ summary {
.newUI .checker { .newUI .checker {
position: relative; position: relative;
top: 1px; top: 1px;
margin-right: 1ex; margin: 0 1ex 0 0;
} }
.newUI .style-name { .newUI .style-name {
font-size: 14px; font-size: 14px;
font-family: sans-serif; font-family: sans-serif;
text-indent: -2em; text-indent: calc(var(--checkbox-width) - var(--name-padding-left) - 1ex);
padding-left: 3em; padding-left: var(--name-padding-left);
padding-right: 40px; padding-right: var(--name-padding-right);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
@ -290,7 +300,7 @@ summary {
} }
.newUI .actions { .newUI .actions {
width: 75px; width: var(--actions-width);
height: 20px; height: 20px;
white-space: nowrap; white-space: nowrap;
} }
@ -411,7 +421,7 @@ summary {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: calc(100vw - 280px - 60px - 25vw - 3rem); max-width: calc(100vw - var(--header-width) - var(--actions-width) - var(--name-padding-left) - 25vw - var(--name-padding-right));
box-sizing: border-box; box-sizing: border-box;
padding-right: 1rem; padding-right: 1rem;
line-height: 18px; line-height: 18px;
@ -735,7 +745,7 @@ fieldset select {
.config-dialog input, .config-dialog input,
.config-dialog select, .config-dialog select,
.config-dialog .onoffswitch { .config-dialog .onoffswitch {
width: 60px; width: var(--onoffswitch-width);
margin: 0; margin: 0;
height: 2em; height: 2em;
box-sizing: border-box; box-sizing: border-box;
@ -744,7 +754,7 @@ fieldset select {
.config-dialog select { .config-dialog select {
width: auto; width: auto;
min-width: 60px; min-width: var(--onoffswitch-width);
max-width: 124px; max-width: 124px;
} }
@ -768,7 +778,7 @@ fieldset select {
.cm-colorview::before, .cm-colorview::before,
.color-swatch { .color-swatch {
width: 60px !important; width: var(--onoffswitch-width) !important;
height: 20px !important; height: 20px !important;
} }
@ -890,7 +900,7 @@ fieldset select {
} }
.newUI .target { .newUI .target {
max-width: calc(50vw - 60px); max-width: calc(50vw - var(--actions-width));
} }
} }