/* app css stylesheet */ @font-face{ font-family:"Aachen W01 Medium"; src:url("/fonts/4df8fc71-c86d-4b91-ab04-54d64066ddb4.eot?#iefix"); src:url("/fonts/4df8fc71-c86d-4b91-ab04-54d64066ddb4.eot?#iefix") format("eot"),url("/fonts/23733875-aa28-42d9-bb46-22f2df4a12b5.woff2") format("woff2"),url("/fonts/a3f29b0f-9d59-4f76-8c3a-286abf3927b1.woff") format("woff"),url("/fonts/8b641a92-8133-4079-9e38-edaaa430babc.ttf") format("truetype"),url("/fonts/f1c655d5-fe06-4d94-97e4-6a060423131b.svg#f1c655d5-fe06-4d94-97e4-6a060423131b") format("svg"); } @font-face{ font-family:"Aachen W01 Bold"; src:url("/fonts/b2389136-99bf-4399-a37e-6fed79d5f961.eot?#iefix"); src:url("/fonts/b2389136-99bf-4399-a37e-6fed79d5f961.eot?#iefix") format("eot"),url("/fonts/f6fdb5ed-3079-4ae1-9a3c-16936ecde7d2.woff2") format("woff2"),url("/fonts/e915df79-1925-45ae-857c-3e9defbdc227.woff") format("woff"),url("/fonts/89307659-78b5-46fd-b762-0c70a32f9b94.ttf") format("truetype"),url("/fonts/f7be2e13-5840-4a43-b0ad-5b14b32573d6.svg#f7be2e13-5840-4a43-b0ad-5b14b32573d6") format("svg"); } @font-face{ font-family:"DIN1451W01-Mittelschrif"; src:url("/fonts/6fbbcc3a-dcc4-4329-b8f0-d8ffbf33d780.eot?#iefix"); src:url("/fonts/6fbbcc3a-dcc4-4329-b8f0-d8ffbf33d780.eot?#iefix") format("eot"),url("/fonts/541ba45a-88db-4353-b55f-a4f0ed5cc5ff.woff2") format("woff2"),url("/fonts/13fe8920-dbf9-4ae8-a75f-da9fef5a43da.woff") format("woff"),url("/fonts/655304d7-ab13-4c9f-ba13-42c6162e4c76.ttf") format("truetype"),url("/fonts/f8eacca5-c56e-4ca0-8b62-e9c7cd78def7.svg#f8eacca5-c56e-4ca0-8b62-e9c7cd78def7") format("svg"); } @font-face{ font-family:"News Gothic W01"; src:url("/fonts/7feeddb9-43b6-461a-97b6-b56aff5e8106.eot?#iefix"); src:url("/fonts/7feeddb9-43b6-461a-97b6-b56aff5e8106.eot?#iefix") format("eot"),url("/fonts/288db151-e7a2-4878-becc-a2fcf43b7413.woff2") format("woff2"),url("/fonts/16d0ae15-a315-4df1-a24c-7addb09b5eef.woff") format("woff"),url("/fonts/f87bf9c6-814b-4e50-bc84-247e8b0a841d.ttf") format("truetype"),url("/fonts/3f2579a8-dff8-4c55-8a9d-ba8ec6b7c5b0.svg#3f2579a8-dff8-4c55-8a9d-ba8ec6b7c5b0") format("svg"); } @font-face{ font-family:"News Gothic W01 Oblique"; src:url("/fonts/302acc16-1365-43c8-b8c4-8be28e5905ad.eot?#iefix"); src:url("/fonts/302acc16-1365-43c8-b8c4-8be28e5905ad.eot?#iefix") format("eot"),url("/fonts/fec84589-a697-494f-a972-ac99c3864cac.woff2") format("woff2"),url("/fonts/f18e48ac-e2e8-45c1-83de-897e623ebb4b.woff") format("woff"),url("/fonts/02e54570-f12b-4886-ae4f-8f94d53a7505.ttf") format("truetype"),url("/fonts/4f75819c-28c7-4b57-852b-92c29c51cae2.svg#4f75819c-28c7-4b57-852b-92c29c51cae2") format("svg"); } @font-face{ font-family:"News Gothic W01 Bold"; src:url("/fonts/2f1e98db-85dd-4534-94c9-c229191511d4.eot?#iefix"); src:url("/fonts/2f1e98db-85dd-4534-94c9-c229191511d4.eot?#iefix") format("eot"),url("/fonts/56b92164-b225-4957-8c67-71be001ca592.woff2") format("woff2"),url("/fonts/c9c438fb-cc69-4afa-8784-732af7594cc5.woff") format("woff"),url("/fonts/4dd05b9f-d17c-4622-9bb5-4f9dc0902f05.ttf") format("truetype"),url("/fonts/db64de75-8a77-4996-b276-5453aba0b2c1.svg#db64de75-8a77-4996-b276-5453aba0b2c1") format("svg"); } @font-face{ font-family:"NewsGothicW01-BoldObliq"; src:url("/fonts/e3954a10-02a5-49ac-a4f2-545c2a322962.eot?#iefix"); src:url("/fonts/e3954a10-02a5-49ac-a4f2-545c2a322962.eot?#iefix") format("eot"),url("/fonts/a23ae5e8-72ff-4c11-9ce6-37ee631926dc.woff2") format("woff2"),url("/fonts/fad4f089-e899-4631-93c4-3bef1a50591e.woff") format("woff"),url("/fonts/b1e5e207-dba4-4814-bc34-f68bbf7c5387.ttf") format("truetype"),url("/fonts/e6e369b2-6e0d-4cfd-bd2a-271f264ade4c.svg#e6e369b2-6e0d-4cfd-bd2a-271f264ade4c") format("svg"); } @font-face{ font-family:"Stymie W01 Light 710780"; src:url("/fonts/f712242a-d71b-44f3-b850-8a9f7d202db4.eot?#iefix"); src:url("/fonts/f712242a-d71b-44f3-b850-8a9f7d202db4.eot?#iefix") format("eot"),url("/fonts/1b040e7f-6139-41b2-ad3a-a974a1135d53.woff2") format("woff2"),url("/fonts/8b34e551-042d-4861-82c8-119497b531a3.woff") format("woff"),url("/fonts/d4db8d9b-34d0-4118-baa9-1d1aa67b399c.ttf") format("truetype"),url("/fonts/75e1f303-80be-47a6-a860-9d388c9e88ca.svg#75e1f303-80be-47a6-a860-9d388c9e88ca") format("svg"); } @font-face{ font-family:"Stymie W01 Medium 710783"; src:url("/fonts/c0b188f1-f4aa-4dae-8acc-6c2411f4f665.eot?#iefix"); src:url("/fonts/c0b188f1-f4aa-4dae-8acc-6c2411f4f665.eot?#iefix") format("eot"),url("/fonts/e4e49c5c-fda7-4128-886b-d8e3781f3ba7.woff2") format("woff2"),url("/fonts/372980ae-d45c-47f6-a1d8-787b50a7f6ab.woff") format("woff"),url("/fonts/d9f0d65b-25c4-454f-a7a3-806315df3e6e.ttf") format("truetype"),url("/fonts/6cef751d-f383-42e4-bc2f-3591a209b3a1.svg#6cef751d-f383-42e4-bc2f-3591a209b3a1") format("svg"); } @font-face{ font-family:"Stymie W01 Bold"; src:url("/fonts/4d039724-7ed8-41ea-9334-dc27e649ea4a.eot?#iefix"); src:url("/fonts/4d039724-7ed8-41ea-9334-dc27e649ea4a.eot?#iefix") format("eot"),url("/fonts/c74263e4-cd6f-4ddc-8ac6-e47849602e99.woff2") format("woff2"),url("/fonts/6fe8b307-6229-48f3-8b1d-5ccba075ebbf.woff") format("woff"),url("/fonts/8be4e9c7-15e1-48f9-9d5f-4d5a90b6b243.ttf") format("truetype"),url("/fonts/084ef5dd-4029-4d57-9a2d-89c77f4c8e39.svg#084ef5dd-4029-4d57-9a2d-89c77f4c8e39") format("svg"); } @font-face{ font-family:"Stymie W01 Black 710771"; src:url("/fonts/cc128bcd-5d66-4f65-b633-2f3fc2952bd9.eot?#iefix"); src:url("/fonts/cc128bcd-5d66-4f65-b633-2f3fc2952bd9.eot?#iefix") format("eot"),url("/fonts/2a54b902-21c3-4bd0-8afe-3a6a762899c6.woff2") format("woff2"),url("/fonts/5691bdf6-de01-4db1-93c3-7c9b9c11c76e.woff") format("woff"),url("/fonts/688ca022-f346-48e0-9f3d-ae3fe868ff3e.ttf") format("truetype"),url("/fonts/d412c54d-9067-4c7e-847d-6304afb44831.svg#d412c54d-9067-4c7e-847d-6304afb44831") format("svg"); } @font-face{ font-family:"StymieW01-MediumCondens 710786"; src:url("/fonts/d94d107a-8746-44ab-978d-f2485fcae552.eot?#iefix"); src:url("/fonts/d94d107a-8746-44ab-978d-f2485fcae552.eot?#iefix") format("eot"),url("/fonts/821b1059-d69b-4252-88bc-7d8ebacd04b4.woff2") format("woff2"),url("/fonts/749915f5-1f08-4d9c-a392-278720a46979.woff") format("woff"),url("/fonts/17383eb1-42b9-4000-a54b-998f0700f029.ttf") format("truetype"),url("/fonts/2156eede-4a85-4f4f-852d-f4791ab6d4e9.svg#2156eede-4a85-4f4f-852d-f4791ab6d4e9") format("svg"); } @font-face{ font-family:"StymieW01-BoldCondensed"; src:url("/fonts/d06fb800-a3e7-4a04-b8b8-a1f5d23f4439.eot?#iefix"); src:url("/fonts/d06fb800-a3e7-4a04-b8b8-a1f5d23f4439.eot?#iefix") format("eot"),url("/fonts/917cefa0-8659-4ad4-a4bf-b0ec714d1cfb.woff2") format("woff2"),url("/fonts/065df875-84bb-45cd-afa3-d42b170797be.woff") format("woff"),url("/fonts/cababd22-b9ea-4e13-90dd-cd914957484d.ttf") format("truetype"),url("/fonts/f0dd5dec-6055-4f3d-bde2-b382ada1e3b8.svg#f0dd5dec-6055-4f3d-bde2-b382ada1e3b8") format("svg"); } /* 11.5pt is the FLOOR for any type a field is set in, and not merely the size the page happens to open at. It is the size an item's Time rows are set in - the row that reads "Edited" beside a bullet and a date - and that row is the one the bullets were sized against: 7.37px of ink is 1.7x a real U+2022 in this type, and the mark's vertical-align puts its centre 5.06px above the baseline where a real one here sits at 5.08px. The three field editors and the edit view were each set a point or two under this. Each was legible on its own; beside a Time row they read as an afterthought, and the mark next to them was then the wrong size for its own line. All of them are brought up to this rather than the mark being redrawn per context - one mark, one size, correct wherever the type is at the floor. Anything smaller than this below is a control or a label, never a field. */ body { font-family: times; font-size: 11.5pt; line-height: 18px; } h1, h2, h3, h4 { font-family: "Stymie W01 Light 710780"; } .navbar { border-radius:0; margin-bottom:0; font-family: "Stymie W01 Light 710780"; } .navbar-nav { font-family: 'DIN', 'Yanone Kaffeesatz', sans-serif; font-weight: 500; } .navbar-inverse .navbar-nav>li>a { color:white; } .navbar-inverse .navbar-nav>li>a:hover { color: #9d9d9d; } #login { position: relative; top: 50%; transform: translateY(-50%); width: 360px; margin:0 auto; } #login .form-group { padding: 2px; } #login .form-control { border-radius: 0; text-align: center; border: 2px solid black; font-size: 20px; line-height: 36px; height: 39px; font-family:'DIN1451W01-Mittelschrif', sans-serif; } #login .form-control::-webkit-input-placeholder { color:black; font-size: 20px; } #login .form-control::-moz-placeholder { color:black; font-size: 20px; } /* firefox 19+ */ #login .form-control:-ms-input-placeholder { color:black; font-size: 20px; } /* ie */ #login .form-control:-moz-placeholder { color:black; font-size: 20px; } header { padding: 6px 15px; background: #97aecb; -webkit-box-shadow: 0px -3px 21px 4px rgba(0,0,0,0.36); -moz-box-shadow: 0px -3px 21px 4px rgba(0,0,0,0.36); box-shadow: 0px -3px 21px 4px rgba(0,0,0,0.36); min-height: 35px; } header h3 { margin:0; font-family: "Stymie W01 Light 710780"; color:white; font-weight:100; } .breadcrumb { padding: 0; margin: 0; background-color:transparent; font-family: "Stymie W01 Light 710780"; color:white; font-weight:100; font-size: 18px; } .breadcrumb .archive { display:inline-block; opacity: .25; transition: all .25s ease; } .breadcrumb .archive.active { opacity: 1; } /* The spinner that says a list is coming, kept out of the list's way. It is drawn from a block of no height, so it takes part in the flow without taking any room in it, and the icon is painted down out of that block into the space the list is about to fill. Written to need nothing of the elements around it - the alternative was making .scrollable-content a positioning context, which every other view in the app shares. Above the list, because it comes before the list in the template and would otherwise paint underneath it; and deaf to the mouse, because it now sits over rows a click could be meant for. */ .list-spinner { position: relative; height: 0; text-align: center; z-index: 3; pointer-events: none; } .list-spinner .fa { position: relative; top: 40px; } .list-group { background-image: -webkit-linear-gradient(#e5e5e5 49px,#eaeaea 49px); background-image: linear-gradient(#e5e5e5 49px,#eaeaea 49px); -webkit-background-size: 100% 98px; background-size: 100% 98px; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); } .app-body .list-group { margin-bottom:0; } .list-group .list-group-item { border-radius:0; padding: 15px 20px; transition: all .25s ease; } .list-group .list-group-item.no-lag { transition: none; } li.list-group-item.ng-scope.primary { background-color: aliceblue; } .list-group .list-group-item.highlight { background-color: rgb(225, 252, 225); padding: 25px 20px; } .archived .contact-summary { opacity: .25; } /* The head of a list is not one of the things in it, and should not have to be read twice to work that out. It is built like a row - a summary line, and a panel that opens underneath it - and told apart by colour: the left nav's grey with white type, so the top of a list looks like the thing the nav sent you to. There was a 3px rule in #046bc7 down the left edge as well, the heaviest weight of the mark the nav puts on the branch you are inside and a row's .actv puts on the active row. It is gone. Being a border it was also 3px of box, so every cell in a head sat three pixels right of the same cell in the rows underneath and a head did not share a left edge with its own list. */ .list-group .list-group-item.list-head { background-color: #a7a9ac; color: white; } /* The status box is an input, and an input keeps its own colour and its own white box unless told otherwise. On this line it is neither: it reads as the rest of the line, and shows itself when it is being typed in. */ .list-group .list-group-item.list-head .contact-summary .status-editor input { color: white; background-color: transparent; border-color: rgba(255,255,255,.35); } .list-group .list-group-item.list-head .contact-summary .status-editor input::-webkit-input-placeholder { color: rgba(255,255,255,.6); } /* A panel is nearly all white cards, so the background behind them is only ever seen as a thin band framing them. On a row that band is #F7F7F7 - white line, grey band, one step apart. A head was given the same #F7F7F7, which made the two look alike at exactly the moment they should not: a head rests in the nav's grey and then opened into a row's panel. So it takes the same step from where it starts. #a7a9ac is the nav's own ground and the colour of the line above; #c7c8ca is the next rung in, what the nav paints the branch you are inside. The band is that. Nothing new is invented and nothing is flat - it is a step lighter than the line, not a copy of it. The band only. What it frames - the cards, the fields, the type on them - is untouched, which is why the type stays #333: on a mid grey it still reads, and turning it white would be answering a question nobody asked. */ .list-group .list-group-item.list-head .contact-detail { color: #333; background-color: #c7c8ca; } .list-group .list-group-item.warn { background-color: rgb(252, 241, 225); padding: 25px 20px; } .list-group .list-group-item.actv { border-left: 2px solid #046bc7; } .list-group .list-group-item.selected { border-left: 2px solid #33D310; } .list-group .list-group-item .editor{ padding: 1px 10px 10px 10px; margin: 7px -20px -17px -20px; background-color: #F7F7F7; } .list-group .list-group-item .contact-detail { padding: 1px 0px; margin: 7px -20px -17px -20px; background-color: #F7F7F7; } .list-group .list-group-item .editor .properties, .small-menu, .group { padding: 10px; background-image: -webkit-linear-gradient(#e5e5e5 49px,#eaeaea 49px); background-image: linear-gradient(#e5e5e5 49px,#eaeaea 49px); -webkit-background-size: 100% 98px; background-size: 100% 98px; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); margin-bottom: 20px; background:white; } /* This was an inline style="margin:10px" on the panel itself, which no stylesheet could get underneath. It has to be a rule so a head can turn it off: a margin has nothing to collapse against sideways, but the top one collapses straight out through a head - which has no padding and no border - and gets painted by the list's own gradient instead of the head's tint, so the head reads as having no space above it at all. */ .content-form.group { margin: 10px; } .categories .list-group { margin-right: -5px; margin-left: -5px; margin-bottom:0; background-image: none; box-shadow: none; } .categories .list-group .list-group-item { border-left: 0; padding-right:5px; transition: all .05s ease; } .categories .list-group-item.open { border-left: 2px solid #046bc7; padding-bottom:0; } .categories .list-group .list-group-item.open .list-group-item { border-left: 15px #ECECEC solid; margin-left:-15px; } .categories li.active > a { font-weight: 900; color: #042848; } .small-menu { max-width:600px; margin:0 auto; } .btn-group-vertical { display:block; } .button { cursor:pointer; padding: 0 8px; transition: color .25s ease; } a.button { color: #555; } .button:hover, .button.active { color:#ccc; } .button.disabled { opacity:.5; cursor:default; } .button.disabled:hover { color: #555; } ul.categories { margin:0; padding:0; font-family: 'DIN1451W01-Mittelschrif', 'Yanone Kaffeesatz', sans-serif; font-size: 11pt; } .categories li { font-family: 'DIN1451W01-Mittelschrif', sans-serif; font-weight: 200; font-size: 14px; line-height: 22px; text-transform: uppercase; color: #767676; white-space: nowrap; } ul.categories, .categories ul { list-style-type: none; } .categories ul { } ul.categories .root-cat { padding-left:0; } .categories .row .button { opacity: 0; display:none; transition:opacity .2s ease; } .editing.categories .row .button { display:block; opacity: 1; } .categories .selected { } .categories.nav { margin-top: 20px; } .categories.nav .button { color:#337ab7; } .categories.nav > li li { display:none; } .categories.nav > li.active li { display:block; } .categories.nav .current-category > ul > li, .categories.nav .current-parent > ul > li { display:block; /*font-size: 13px; line-height: 18px;*/ } .categories.nav .current-category > .button, .categories.nav .current-parent > .button { color:black; } /* 15px to match .list-group .list-group-item above, not 9px. The column header and the rows it labels are the same kind of thing seen twice, and they were built from two different paddings, so the header band has always been shorter than the rows under it. grep says .controls is written in exactly one place - index.html, the list header - so this reaches nothing else. See the row-height block further down for the other half. */ .controls { padding: 15px 20px; background-color:#eee; border-bottom:1px solid #ccc; } .scrollable-header .controls > .row { } .contact-summary { } .form-cluster { padding: 10px; margin-bottom: 10px; background-color:#F4F4F4 } .form-cluster h5 { margin-top: 0; font-size: 20px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #D8D5D5; } .form-cluster .row > div { transition: all .25s ease; } .form-cluster .row.highlight > div { background-color: rgba(250, 191, 191, 0.38); } .note .button { /*opacity:0;*/ } .note:hover .button { /*opacity:1;*/ } .zeroclipboard-is-hover.button { opacity:1; } /*.dropzone { background-color: #ECECEC; padding: 5px 20px 20px 20px; text-align: center; border: dashed 1px #ccc; transition: all .25s ease; } .dropzone.dragover { background-color: #FFE9C0; }*/ .images, .documents { background-color: #ECECEC; padding:10px; margin-bottom: 10px; } .images .img-container { background-color: rgb(244, 244, 244) !important; padding:5px; /*float:left;*/ vertical-align:text-top; display:inline-block; margin: 0 10px 10px 0; } .images .img-container-placeholder { width: 165px; height: 165px; display:inline-block; margin: 0 10px 10px 0; background-color:rgb(224, 224, 224) !important; vertical-align:text-top; } .images .image { width: 160px; height: 160px; background-size:contain !important; } .images .image.big { width: 300px; height: 300px; } .list li .glyphicon, .list div .glyphicon { opacity:0; color:white; padding: 3px; border-radius: 5px; background-color: rgba(0,0,0,.4); transition: all .25s ease; } .list li:hover .glyphicon, .list div:hover .glyphicon { opacity:1; } .list.folder-group { min-height:40px; } .image .edit-doc { width: 100%; height: 90%; cursor: pointer; } .document-editor { display:table; width:100%; } .document-editor > div { display: table-cell; } .document-editor .left { background: url('/img/arrow-L-black.png') no-repeat center left; opacity:0; } .document-editor .right { background: url('/img/arrow-R-black.png') no-repeat center right; opacity:0; } .document-editor:hover .left, .document-editor:hover .right { opacity:1; } .document-editor .left, .document-editor .right { width:5%; cursor:pointer; transition:opacity .25s ease; } .document-editor .left:hover, .document-editor .right:hover { opacity:.45; } .document-editor .body { width:90%; } .document-editor img { background-color: #ccc; margin-bottom: 20px; max-width:100%; max-height: 500px; } .documents ul { margin:0; padding:0; } .documents ul li { position:relative; display:inline-block; width: 160px; height: 100px; margin: 0 10px 10px 0; padding:5px; background-color: rgb(244, 244, 244) !important; vertical-align:top; } .documents ul li .edit-doc { padding: 5% 0; width: 100%; height: 90%; cursor: pointer; } .filter { padding: 0; } .filter.active { color:black; font-weight:900; } .filter.active.reverse:before { content: " - "; } .cat-list { list-style-type:none; margin-left:0; } .pdf-preview { position: relative; padding-top:80%; margin-bottom: 20px; } .pdf-preview iframe { position:absolute; top:0; left:0; bottom:0; right:0; width: 100%; border: 0; height: 100%; background-color: white; } .pdf-preview-frame.zoomed { background-color:white; position:fixed; width:100%; height:100%; top:0; left:0; right:0; bottom:0; z-index:1000; } .pdf-preview-frame.zoomed .pdf-preview { padding-top:0; margin-bottom: 0; width:100%; height:94%; } .pdf-preview-frame.zoomed .fullscreen-toggle { padding: 15px; } .new-contact { padding:15px; border: 1px dashed #ccc; margin-bottom:20px; } .sub-group { margin: 15px 0 0 5px; } .category-manager ul { list-style-type:none; padding-left:20px; padding-top: 5px; } .category-manager > ul { padding-left:0; } .category-manager ul li { padding: 4px 0; } .category-manager .detail { background-color: #F9F9F9; padding: 5px; } .category-manager .detail .glyphicon-pencil { opacity:0; transition:all .25s ease; } .category-manager .detail:hover .glyphicon-pencil { opacity:1; } .category-manager .editor { border: 1px solid #F9F9F9; border-top:0; padding: 10px; } #contact_search { width: 30%; float:right; margin-top:-5px; } #contact_search .input-group-addon { background-color: rgb(217, 229, 245); } @media (max-width: 1200px) { #contact_search { width: 50%; } } .status-selector { height:20px; } .drag-handle { cursor: row-resize; } .filename { word-break: break-all; } .sort { height:0; width:100%; display:block; } .dropzone.sort { height: 200px; } .breadcrumb > li > a { color:white; } .folder .breadcrumb { margin-bottom:10px; } .folder .breadcrumb span { color: #9E9E9E; } .folder .breadcrumb span.button { color: #337ab7; } .folder ul.file-list { list-style-type:none; margin:0; padding:0; background-color: #E8E8E8; min-height: 40px; } .folder ul.file-list li { background-color: white; } /* GRID VIEW */ .folder.grid ul.file-list li { display:inline-block; width: 200px; height: 180px; margin: 5px; } .folder.grid ul.file-list li .row { border-bottom:0; margin:0; position:relative; } .folder.grid ul.file-list li .col-xs-1 { margin-top:20px; display:block; width: 100%; text-align:center; } .folder.grid ul.file-list li .col-xs-1 .glyphicon { font-size: 40px; line-height: 100px; } .folder.grid ul.file-list li .col-xs-1 .img-preview { width: 100%; height: 100px; } .folder.grid ul.file-list li .col-xs-7 { display:block; text-align:center; width: 100%; margin:8px 0 4px 0; padding:0; } .folder.grid ul.file-list .glyphicon-remove { float:left !important; } .folder.grid ul.file-list li .col-xs-4 { display:block; position:absolute; top:5px; width: 100%; margin:0; padding:0; } /* LARGE GRID VIEW */ .folder.largegrid ul.file-list li { display:inline-block; width: 300px; height: 270px; margin: 5px; } .folder.largegrid ul.file-list li .row { border-bottom:0; margin:0; position:relative; } .folder.largegrid ul.file-list li .col-xs-1 { margin-top:20px; display:block; width: 100%; text-align:center; } .folder.largegrid ul.file-list li .col-xs-1 .glyphicon { font-size: 60px; line-height: 150px; } .folder.largegrid ul.file-list li .col-xs-1 .img-preview { width: 100%; height: 150px; } .folder.largegrid ul.file-list li .col-xs-7 { display:block; text-align:center; width: 100%; margin:8px 0 4px 0; padding:0; } .folder.largegrid ul.file-list .glyphicon-remove { float:left !important; } .folder.largegrid ul.file-list li .col-xs-4 { display:block; position:absolute; top:5px; width: 100%; margin:0; padding:0; } .folder ul.file-list li:hover { background-color: #F5F5F5; } .folder ul.file-list li > .row { padding: 8px 0; margin: 0px 15px 0px 15px; border-bottom: 1px solid #E8E8E8; } .folder.dragover ul.file-list { background-color:#DCDCBB; } iframe.doc-preview { border:0; width:100%; min-height: 600px; } .folder ul.file-list li.file-note.editing .col-xs-1 { display:none; } .folder ul.file-list li.file-note.editing { display:block; width:99%; height:auto; } .folder ul.file-list li.message { display:block; width:100%; margin:0; background:transparent; text-align:center; font-size: 20px; color:white; line-height: 100px; font-weight:100; height:100px; } .modal.modal-overlay { overflow-y:auto; } .modal { display:block; } .dropdown-menu .disabled { color: #CCC; } .click-to-edit input { display:none; border:0; width:auto; margin: 0; } .click-to-edit input:focus { outline: 0; } .click-to-edit.active input { display:inline-block; } .click-to-edit.active .text { visibility:hidden; position:absolute; left:-1000; top:-1000; } .click-to-edit.active .placeholder { display:none; } .placeholder { opacity: .4; } .content-header h2 { font-family: 'Yanone Kaffeesatz', serif; font-weight: 800; margin-bottom:0; } .content-header h4 { font-family: 'Yanone Kaffeesatz', serif; font-weight: 500; } /* At rest this holds the name and nothing else (#205). The 15px it carries from edit-block was the gap between the company line and the first email under it, and the fields have their own gap now - see .head-fields - so left here it would be a second one stacked on theirs. A class on a condition rather than a change to edit-block, because under Show info the same element still holds the whole stack and the margin is still its own, and the editor's header - which is the stack in both modes - never stops needing it. */ .content-header.heading-only { margin-bottom: 0; } .edit-block { margin-bottom:15px; } .hover-button { opacity:0; transition: all .25s 1s ease; } .hover-block { max-height:20px; opacity:0; transition: all .25s 1s ease; } .hover-delete { position:absolute; left:-10px; opacity:0; cursor:pointer; transition:all .45s 1s ease; } .edit-block:hover > .hover-block { max-height:1000px; opacity:1; transition:all .45s 1s ease; } div:hover > .hover-delete { opacity:1; transition:all .45s 1s ease; } .edit-block:hover .hover-button { opacity:.8; transition:all .45s 1s ease; } .edit-block .hover-button:hover { opacity:.6; cursor:pointer; transition:all .45s 0s ease; } .content-cat-selector li { max-height:0; overflow:hidden; transition:all .45s 1s ease; } .content-cat-selector .categories > li { max-height:10000px; } .content-cat-selector li.selected { max-height:10000px; transition:all .45s 0s ease; } .content-cat-selector .categories > li:hover li { max-height:10000px; transition:all .45s .25s ease; } /* A branch with a tick somewhere beneath it, held open so the tick can be seen. The rule above opens a ticked row, which is not the same thing: the row opened inside an ancestor that was still clipped, so a category two levels down showed no tick at all and the panel that exists to change where an item is filed said it was filed nowhere. Which branches those are is decided in the directive - see markOpenPath - because an ancestor is not something a selector can ask for. Only while the picker is open. Shut, the list is the categories the item is in and it is drawn flat; opening branches there would draw the ones under another selected category a second time, nested, under the copy of themselves. */ .content-cat-selector.expanded li.open { max-height:10000px; transition:all .45s 0s ease; } .content-form .address { margin-bottom:5px; } .no-field { border: 0; padding:0; } .status-editor { display:inline-block; margin-left:10px; } .status-editor > input { line-height:16px; height:16px; } .contact-summary .status-editor { margin-left:0; } /* The tick and the flag are two marks on one row and belong side by side. They were stacking, and not only at narrow windows - at 1400px the cell's content box is 59px and the pair measures 63, so the flag has been sitting under the tick at every size the app has ever been opened at, dropping another line as the window came in. Fixed at the cell rather than by widening it: col-xs-1's 8.33% is what lines this row up with the head above it and with every other row, so the width has to stand. What is spent inside it does not - 30px of the 89 went on grid gutters and another 32 on padding either side of two glyphs that come to 27px between them. The gutter goes on the left only, the padding closes to a hair, and nowrap holds the line at widths narrow enough that nothing would fit however it were divided up. Overflowing a few pixels into the next cell's gutter there is the better failure: the pair still reads as a pair, which is the thing that was asked for. Not scoped to .contact-summary any more. The column header carries the same pair - a select-all tick and the star that filters to starred rows - and it lives in .controls, not in a row. The class is what names the cell, and both cells are the same cell one line apart; scoping the rule to one of them was what let the header's copy drift out of line with the rows beneath it. The left gutter was 8px, then 3, and is 1. Every request for more room inside this cell is a request for room it does not have: at 500px it measures 38px, and the pair is 34 of it with the outer padding already zeroed. So the gap between the marks was bought from the space in front of them, and so was the width the larger star needed. That space is the one part of the cell nothing is read against - what the eye checks down the page is that the two marks line up with the two above, and they still do, further left each time. marks.js is what says whether the bill has been paid: it measures the pair against its own cell at nine widths, and it failed at 500px on the first attempt at the wider gap, which had the gap and kept the gutter. */ .row-marks { white-space:nowrap; } /* Padding between the two and nowhere else. Outside edges are the cell's business and spending the cell's width on them is what left no room in the middle. */ .row-marks .button { padding:0 5px; } .row-marks .button:first-child { padding-left:0; } .row-marks .button:last-child { padding-right:0; } /* The two marks are drawn here rather than set in a typeface. FontAwesome's square and its star are two glyphs designed apart: they share an em box and nothing else, so their ink sits at different heights within it and their outlines are different weights. Lining them up meant nudging one, which is a number that holds at one font size and at no other. Drawn to one 16-unit box at one stroke width, the alignment and the matched weight are facts about the markup instead of a correction on top of it. */ /* Flat px, not an em. These are marks at a fixed size rather than type, they have to be identical in the header and in a row whatever either is set in, and the cell they sit in is 38px wide at 500px - so their width is a number the layout depends on and not one that should move when a font-size somewhere above them does. Two viewBoxes, one scale. Both are 18 units tall rendered at 13.5px, which is 0.75px per unit for both - the same 0.75 the pair has had since it was drawn (12px / 16u). That equal scale is the load-bearing part: it is what lets a number written in one shape mean the same thing in the other, so the star's lighter stroke below is a real step lighter on screen and not just a smaller number in a different coordinate system. Equal HEIGHT is load-bearing for a second reason - it keeps the two boxes the same size, and marks.js reads "these two are on one line" as "these two share a top". Let the star's box grow taller than the tick's and that battery goes red at all nine widths for a fault that is not there. The widths differ because the shapes do: a five-pointed star is wider than it is tall (12.5px against 11.9), a square is neither. Padding the star's box out to square would have spent 1.5px of a cell with 1px spare to buy nothing. */ /* Scoped to the MARK and not to the cell, from here down. What a mark looks like is a property of the mark; where it sits is the cell's business. The two were one rule while the marks only ever appeared in .row-marks, and they stopped being one the moment the star had to appear somewhere else - beside the collapse angle in the Name header, where it stands as the only remaining sign that the list is filtered. Under the old scoping that star would have been an unstyled 18px SVG, and the fix for it would have been a second copy of every rule below, kept in step by hand. .mark-box and .mark-star are specific enough to carry this: grep says they exist in exactly the two places the marks are written. The layout rules above stay on .row-marks, because the gutter and the 5px between the pair really are facts about that cell. */ .mark-box svg, .mark-star svg { height:13.5px; vertical-align:middle; } .mark-box svg { width:12px; } .mark-star svg { width:13.5px; } .mark-box svg rect, .mark-box svg polyline, .mark-star svg path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; } /* Both shapes end at 16.75 of 18 along the bottom, and both boxes are 18 tall at one scale, so they stand on one baseline with neither of them nudged onto it. The star is the {5/2} star polygon: its inner points sit where the five chords actually cross, which is r/R = cos72/cos36 = 0.381966 and nothing else. At that ratio an edge leaving an outer point continues dead straight across the middle and out the far side as the edge opposite. Any other inner radius puts a kink at every inner point, which is what reads as wrong even when it is hard to name. */ /* A step lighter than the box, deliberately, because equal is not equal to the eye. The star is a lattice of ten corners and five thin diagonals; the box is four fat right angles. At one weight the star carries more strokes over less area and reads heavier than the thing beside it. 1.25 against 1.5 is that step, and it is a real one only because both shapes are drawn at 0.75px per unit - see above. */ .mark-star svg path { stroke-width:1.25; } /* Selected is blue, and the same blue the nav and the breadcrumb already use for a thing you can act on. Amber said "flagged" - a category of item - when what is being shown is a control that is currently on. */ .mark-star.on svg path { fill:#337ab7; stroke:#337ab7; } /* THE FIELD BULLET A third mark, and the only one of the four that is not drawn to the shared 18-unit box. The field toggles inside the editors are set/unset, and a star drawn five-pointed reads as a rating - one of several, ranked - when there is nothing here to rank. A bullet has no such second meaning, so filled and hollow is the whole of what it says. It began at the shared 10.88px of ink and was three times too big, because the other three marks stand for themselves and this one stands for a character. What it has to match is a bullet in the type it is set beside, and that was measured two ways in the app's own 13px Times rather than guessed: U+2022 has 3.688px of ink, centred 4.307px above the baseline the disc Chrome draws for a list item is 4px, centred 4px above it So a literal bullet is a shade under 4px, and drawn at that it disappears: this one is also a two-state control, and a ring with a 2.6px hole does not read as hollow next to itself filled. 7.375px is twice the glyph, which is the size the eye settled on and is the largest it can be while still being read as a bullet rather than as a circle. Sized in px and not em, which was tried first and is wrong here: the anchor holding the mark inherits the body's 15.33px in the edit view and 12px in the name, company and qualifier rows, so an em is a different number in each place and the same mark came out three sizes. The type it is set beside is 13px in all five. THE BOX IS ALL BUT THE INK. viewBox 8 wide, r 3.25 about a centre at 4: geometry 6.5 units, and the stroke grows the silhouette by half its width on each side. At 7.692px the box is 0.9615px per unit, so 6.25px of geometry plus a 1.125px stroke is 7.375px of ink with 0.16px of air a side. 1.125px is the tick box's weight, which is what the stroke-width of 1.17 units buys back - left at 1.5 the line came out at 1.44px and this would have been the heaviest mark in the app as well as the smallest. DOWN. An inline-block's baseline is its bottom edge, so the ink centre sits half the box above that edge and vertical-align makes up the rest. It sat at 1.233px, which put the centre 5.08px up - and the panel's font, measured on the page, has a cap height of 10.14px, so the mark was centred on the capital and not on the word. A row reads as a line of lower case with the odd capital in it, and a mark centred on the capital rides above that line. -0.333px centres it on 3.51px, half the measured x-height of 7.02px: level with the middle of an o. In px rather than 0.5ex because 1ex resolves to 6.875px in this browser against a true x-height of 7.021px - the unit that names the intent is the one that misses it. */ .mark-bullet svg { height:7.692px; width:7.692px; vertical-align:-0.333px; } .mark-bullet svg circle { fill:none; stroke:currentColor; stroke-width:1.17; } /* The x that takes a row away, drawn to the bullet's box and stroked at the bullet's weight - the two sit at opposite ends of the same row, so a difference in either reads as one of them mattering more. It was a font glyph before, which meant its weight was the typeface's rather than ours: the name rows were set at font-weight 800 and the browser synthesised a bold for an icon font that has no bold, so the x at the end of a name came out visibly fatter than the x at the end of a phone number. The arms end where they would meet the bullet's own outline - 4 +/- 3.25/sqrt2 - so the x is the one that fits inside the circle rather than the one that fills the same square, a square-filling x reading larger than the circle by its diagonals. Sits on the bullet's line for the same reason it is the bullet's size: they are the two ends of one row. See the bullet for why -0.333px. */ .mark-x svg { height:7.692px; width:7.692px; vertical-align:-0.333px; } .mark-x svg line { stroke:currentColor; stroke-width:1.17; stroke-linecap:round; } /* The handle that says this row can be moved, drawn to the bullet's box like the x. It was fa-bars, which is three lines - a menu glyph, borrowed for a job it does not name. Two lines are what a handle is, and they are what the eye reads as "this slides". Centred on the bullet rather than sitting on the type's baseline: y 2.75 and 5.25 about the same centre of 4 the circle uses, spanning the circle's own 6.5 units across, so the two marks at the head of a row have one middle and one width between them. The font glyph could not do either - its height was the typeface's and its centre was wherever the font put it. */ .mark-equals svg { height:7.692px; width:7.692px; vertical-align:-0.333px; } .mark-equals svg line { stroke:currentColor; stroke-width:1.17; stroke-linecap:round; } /* On is a fill, and the fill is the nav blue the star filter and the breadcrumb already use for a control that is currently on. Set through currentColor rather than named twice, so the outline and the fill cannot drift apart. */ .mark-bullet.on { color:#337ab7; } .mark-bullet.on svg circle { fill:currentColor; } /* THE ADMIN WHEEL A fourth mark, drawn to the same box as the other three, and the only one of the four that was not drawn here. It was a glyphicon: solid, in a bar of thin outlines, and a font glyph besides, so its weight and its size were whatever the typeface decided and could not be set apart from each other. Generating a wheel from scratch was tried at five, six, eight, ten and twelve teeth and at several depths, and the drawing was the part that never came right - at 10.88px of ink there is room for about two pixels of tooth, which is too little to read as a machine part and quite enough to read as a flower. What is here instead is supplied artwork, traced to a path and then normalised to the same 18-unit box the others use, so the shape is drawn by someone who can draw and the WEIGHT is still ours. Two subpaths of the four in the original, and which two is the decision. The artwork is two thin rings - a gear ring and a hub ring - each traced as an outer and an inner edge, and its line is about a fifth of a pixel wide at this size, a hairline that would render as a grey ghost and would carry a baked-in weight we could not set. So the outer edge of each ring is kept and stroked at our own weight, and the inner edges are dropped: it is the artwork's SHAPE with the app's line. The hub is not optional. Silhouette-only was rendered beside silhouette-plus-hub at the real 13.5px, and without the hub it reads as a blob - a flower again. The inner line that an earlier pass ruled out is the thing that makes it legible as a gear. 1.25, the star's weight rather than the box's 1.5, for the star's reason: two concentric rings and nine teeth carry a lot of ink over a small area, and at 1.5 the wheel reads heavier than anything beside it. Both are drawn at 0.75px per unit, so that is a real step and not just a smaller number in a different coordinate system. */ .mark-cog svg { height:13.5px; width:13.5px; /* The one place this mark departs from the other three, and the bar is the reason. vertical-align:middle - what the box, the star and the bullet all use - centres the mark on the baseline plus half the X-HEIGHT, which is the optical middle of a line of mixed-case text. This bar has no mixed-case text in it: ONLINE, FEED and MENU are caps, and [ui-toggle] carries text-transform:uppercase besides. On a line of capitals there are no x-height letters for the eye to centre on, so the optical middle is the middle of the CAP BAND, half a cap height above the baseline - and middle therefore hangs the wheel (cap - xHeight)/2 too low. Measured at 1.521px low against FEED's cap band, which is the same 1.5px that was visible in an earlier pass and named before any number was taken. A length rather than a keyword, because no keyword means "cap middle". With vertical-align: the mark's box BOTTOM sits that far above the baseline, and the ink is centred in the box - it spans 1.75..16.25 of 18, about 9 - so the ink centre is half the box height above the box bottom. Wanted: half a cap height above the baseline. So the value is capHeight/2 - boxHeight/2, which is negative here because half this box is taller than half a capital. 0.33081em is half the cap height of the face actually rendering (cap = 0.66162em, read off the font through canvas, not guessed), and 6.75px is half of 13.5. Written as a calc so the em term tracks font-size: change the bar's type size and the alignment still holds. It does NOT survive a change of TYPEFACE, since the cap ratio is that face's own - cog.js asserts the resulting position, so a font swap fails loudly here rather than drifting quietly. */ vertical-align:calc(0.33081em - 6.75px); } .mark-cog svg path { fill:none; stroke:currentColor; stroke-width:1.25; stroke-linejoin:round; stroke-linecap:round; } /* WHERE THE WHEEL SITS - the same column as the "+" above the list and the three dots on every row. Placement, so it is scoped to the button and not to the mark: what the mark looks like is the mark's business, per the note above the tick box. That column is a right edge and not a centre, which is the whole reason this needed measuring. The "+" ink is 12.05px wide and the three-dot ink 3.29px, and they are not centred on each other at all - their centres are 4.38px apart. What they share, to a thousandth of a pixel, is a right edge, because .btn-group.pull-right puts one there and .text-right puts the other there. So "the same column" means that right edge. Read three ways before it was believed, because a font glyph drawn on a ::before has no node to measure and the first two readings were wrong: canvas measureText silently reported a fallback's notdef box, first because a quoted multi-family stack breaks the font shorthand whole, and then because document.fonts.check is FALSE for a loaded FontAwesome - with no second argument it tests "BESbswy", Latin letters this font does not contain. Third reading passed the glyph itself, and a pixel scan of a screenshot agreed with it. The wheel's own ink is read off the two paths rather than the svg box. The number is an offset from the right rather than anything inherited, because there is no shared grid to inherit from: the wheel is in the blue bar and the column is in the list below it, two rows that share no ancestor narrower than .scrollable-header. Both are anchored to the right edge, so one offset holds at every width - which is asserted rather than assumed, at two widths, in tests/browser/cog.js. It lands within half a pixel of concentric with the "+", since the two shapes are almost the same width. That is a coincidence of this artwork and not the rule; the rule is the right edge, and it is what the battery reads. */ .app-content .scrollable-header [ui-toggle="uiSidebarRight"] { padding-right:25.78px; } /* The tick is drawn at the outline's own weight rather than knocked out of a filled block. Filled, the checked box carried far more ink than the star beside it, so a column of ticked rows read as heavier than a column of starred ones for no reason anyone chose. */ .mark-box .tick { display:none; } .mark-box.on .tick { display:inline; stroke:#000; } /* THE COLLAPSED MARKS COLUMN Thirty ticks and thirty stars down the page is clutter most of the time, and the column holding them is 8.33% of the width - about 117px at 1400 - spent on two glyphs. The collapsed state gives that width back to the four columns that hold written things. The marks column is a FIXED GUTTER and not a twelfth of the grid, and that is what makes the two states one layout instead of two. A twelfth is 89px at 1400 wrapped around a pair of marks that measures 35.5px and never changes, so 53px of it was empty - and that empty space was what sat between the star and the angle, which is why the angle read as part of the word Name rather than as the control for the column. Sized to its contents instead: 35.5px of marks with 12px of air on each side is 59.5px, at every window width. Everything else is elevenths in BOTH states. The five remaining columns are 3/3/2/2/1 of whatever is left over, and all the collapsed state does is stop taking the gutter out first: expanded Name 3/11 of (100% - 59.5px) ... trailing 1/11 of (100% - 59.5px) collapsed Name 3/11 of 100% ... trailing 1/11 of 100% So Name equals Company and Status equals Time in both states, which they could not do while the marks column was a twelfth: dropping a twelfth leaves N+N+S+S+1 = 11, and 2N+2S = 11 has no integer answer. The earlier version of this block solved that by using twelfths expanded and elevenths collapsed, which held the pairing collapsed and lost it expanded. Subtracting a fixed gutter holds it in both, and the freed width is still shared in proportion rather than dumped on whichever column looked short. DIRECT CHILDREN, deliberately. The Name and Company cells hold field directives, and a descendant selector would reach down into any grid one of them grows later and restyle a column that has nothing to do with this one. :first-child and :last-child on the col-xs-1 rules because there are two of them in every row - the marks gutter at one end and the three-dot column at the other - and they are the one pair whose widths must NOT move together. All four row kinds at once, from one class on the template root. The comment above the column header warns these six widths repeat across the header, a folder head, a company head and an item, and have to move together or the columns stop lining up down the page. They can: all 24 cells are in index.html, four rows by six, and the only other template using col-xs is categories-manager.html, which is a route template and is never nested inside a list row. */ /* The padding is horizontal ONLY. A first version of this gutter padded 6px all round, which read as even inside the cell and was wrong on the page: the marks cell became the tallest thing in the row at 30px, so it set the row's height, and the box and star ended up sitting 6px BELOW the centre line of the text beside them. The cell has no business setting the row height - it holds two 13.5px glyphs and nothing that needs vertical room. So that 12px moved sideways, 6px to each side, which is where it does the work it was asked for: 12px of air left of the box and 12px right of the star. */ .controls > .row > .row-marks, .row.contact-summary > .col-xs-1:first-child { width:59.5px; padding:0 12px; } .controls > .row > .col-xs-3, .row.contact-summary > .col-xs-3 { width:calc((100% - 59.5px) * 3 / 11); } .controls > .row > .col-xs-2, .row.contact-summary > .col-xs-2 { width:calc((100% - 59.5px) * 2 / 11); } .controls > .row > .col-xs-1:last-child, .row.contact-summary > .col-xs-1:last-child { width:calc((100% - 59.5px) / 11); } .marks-collapsed .controls > .row > .row-marks, .marks-collapsed .row.contact-summary > .col-xs-1:first-child { display:none; } .marks-collapsed .controls > .row > .col-xs-3, .marks-collapsed .row.contact-summary > .col-xs-3 { width:27.27272727%; } .marks-collapsed .controls > .row > .col-xs-2, .marks-collapsed .row.contact-summary > .col-xs-2 { width:18.18181818%; } .marks-collapsed .controls > .row > .col-xs-1:last-child, .marks-collapsed .row.contact-summary > .col-xs-1:last-child { width:9.09090909%; } /* One height for all four row kinds. They were three different heights and none of it was chosen: the header band took its padding from .controls and the rows took theirs from .list-group-item (9px against 15px, fixed above), and on top of that the two head kinds have no marks cell, so a folder head came out 20.7px inside and a company head 18px while a row carrying the box and star came out taller still. Left alone the page steps up and down as you read down it for reasons that are all accidents of what each row happens to contain. A floor of 21px clears the tallest of them - the folder head's 20.7 - so every kind is padding + 21 and nothing is clipped: min-height, not height, because a Name that wraps at a narrow window must still be allowed to grow. */ .controls > .row, .row.contact-summary { min-height:21px; } /* The labels sit on the same line metric as the values they label. A row's name is drawn inside .name-row at line-height 1.35, and the header's labels are bare text inheriting 18px - same face, same 15.33px, same 17px of ink, but half a leading apart, so the word Name rode 1.1px higher than every name under it and higher than the box and star beside it. Nothing chose that; it is the difference between text in a span that was styled and text that was not. The text cells only. The marks gutter keeps the inherited 18px deliberately: the box and star are inline-blocks centred on their line box, and in an item row that line box is 18px, so moving the header's to 20.7 would drop the header's marks 1.35px and reopen the same crack one column to the left. */ .controls > .row > .col-xs-3, .controls > .row > .col-xs-2, .controls > .row > .col-xs-1:last-child { line-height:1.35; } /* The angle, and the star that keeps it company while the filter is on. Both sit in the Name header cell in every state - see index.html for why the control must not move. The whole marks region is ONE sequence of glyphs and gaps, and it is written here once so that the three states are the same sentence with words taken out of it: 12 | box 12 | 10 | star 13.5 | 12 | angle 6.75 | 12 | Name Collapsing drops a glyph TOGETHER WITH THE GAP TO ITS RIGHT and nothing else. Hiding the pair removes box+10 and star+12, which is 47.5, and Name moves from 78.25 to 30.75. Hiding the pair while the filter is on removes only box+10, which is 22, and Name moves to 56.25 with the star kept - and kept BEFORE the angle, because the angle is the thing that must stay adjacent to the label it opens. That is the reason for the numbers below rather than for centring anything: every gap in the sequence is a constant, so nothing around the angle changes width when a glyph leaves. An earlier version centred the angle in whatever space happened to be left, which made the gap either side of it a different size in each of the three states. The 12px to the angle's left is spent by whatever precedes it - the gutter's own right padding when the pair is showing, the angle's padding-left when it is not - so the angle never needs a negative margin to straddle the cell boundary. The 12px to its right is always its own padding-right. The word Name is placed the same way in the header and in the rows: the header spends the angle's box, the rows spend padding-left on the matching cell, and the two totals are written to be equal in all three states. The rows are the reason the numbers are not round - a column header that does not start where its column's contents start is the fault this layout has been corrected for three times now. */ .controls > .row > .name-head { padding-left:0; } .row.contact-summary > .col-xs-1 + .col-xs-3 { padding-left:18.75px; } .marks-collapsed .row.contact-summary > .col-xs-1 + .col-xs-3 { padding-left:30.75px; } .marks-collapsed.star-filtered .row.contact-summary > .col-xs-1 + .col-xs-3 { padding-left:56.25px; } /* line-height:0 because this box holds one drawing and no text. Left at the inherited 18px it is a text line with a picture in it: the strut makes the box 18px tall and sits the glyph on a text baseline, which put it 0.6px below the box and star it is meant to line up with. At 0 the box is exactly the 13.5px of the svg. */ .marks-toggle { display:inline-block; width:18.75px; padding:0 12px 0 0; line-height:0; vertical-align:middle; text-align:left; } .marks-collapsed .marks-toggle { width:30.75px; padding:0 12px; } /* Drawn rather than set. The angle was a FontAwesome glyph, and a glyph has one size control: font-size moves the height and the stroke weight together, so "larger but no heavier" is not a thing it can be asked for. As an outline it is two independent numbers, and it joins the box and the star on the conventions three paragraphs up - an 18-unit box drawn at 0.75px per unit, stroke on currentColor, corners rounded. stroke-width 1.25 is the star's, not the box's: like the star this is thin diagonals rather than fat right angles, and at 1.5 it would read heavier than both. The path spans units 2.25 to 16.75, which is the box's rect exactly - same 14.5 units, same top, same bottom - so the two glyphs are the same height by construction and not by a number that happens to match. The arms are at 45 degrees, so the horizontal run equals the half-height, 7.25 units, and the viewBox is 9 wide to hold it: 6.75px on the page against the box's 12. It is narrow because it is a corner and not a square. */ .marks-toggle svg { width:6.75px; height:13.5px; vertical-align:middle; } /* Every drawing in this cell rides 0.97px low, and the reason is the cell and not the drawing. The marks gutter holds glyphs and no text, so its line box is made by the inline-blocks in it; this cell holds the word Name, so its line box is made by the font, and vertical-align:middle resolves against a different half-leading. The same 13.5px svg therefore lands 0.97px lower here than it does two cells to the left - which is why the angle needed this before the star did, and why the star needed exactly the same number once it moved here. Two nudges of 0.97 would have been the same fact written twice, so it is written once, on the cell, and it will cover anything else drawn beside the label. Giving these hosts the gutter's line-height instead was tried and is worse, not better: at the inherited 20.7px the drop grows to 1.22px and at 18px to 1.56px, because a taller host also moves the line box it is being centred in. So the difference is stated and subtracted. If the marks' size or the label's font changes, re-measure it - markcol asserts both glyphs against the ones in the gutter, so it will say so. */ .controls > .row > .name-head svg { position:relative; top:-0.97px; } .marks-toggle svg path { fill:none; stroke:currentColor; stroke-width:1.25; stroke-linejoin:round; stroke-linecap:round; } /* Both directions are drawn and one is hidden, the same way .mark-box .tick is, rather than swapping the d attribute from the scope. The class on the control is what picks, so the direction stays visible to a selector - a test asking which way the angle points asks the DOM, not a rendered path string. */ .marks-toggle.angle-left .angle-r, .marks-toggle.angle-right .angle-l { display:none; } /* The kept star takes over the gutter's job of paying for its own left gap, because the gutter it used to sit in is the thing that just went away. 12 of padding plus the 13.5 of the svg is the 25.5 the sequence says it costs, and the angle's own padding-left supplies the 12 between them. */ .collapsed-filter { width:25.5px; padding:0 0 0 12px; line-height:0; vertical-align:middle; } /* FOLDERS */ .folders .panel-default>.panel-heading { border:0; padding:0; background:transparent; } .folders .panel-default>.panel-heading .accordion-toggle { text-decoration:none; } .folders .panel-default>.panel-heading .text { cursor:text; } .folders .folder { padding: 10px; background-image: -webkit-linear-gradient(#e5e5e5 49px,#eaeaea 49px); background-image: linear-gradient(#e5e5e5 49px,#eaeaea 49px); -webkit-background-size: 100% 98px; background-size: 100% 98px; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); margin-bottom: 20px; background: white; border-radius:0; border:0; } .folders .panel-default .panel-body { padding:0; border:0; } /* A shut subsection is one row. It was three stacked blocks: the title, a 40px window onto the rendered note, and a strip of thumbnails. The window showed the top of whatever came first - half a heading, the top of a picture, the first line of a tile - so the height of a shut subsection depended on its contents, and none of the three told you much. Now: name, the beginning of the note, and the pictures in the last third. The row is set to the thumbnail's own 40px, which is the tallest thing in it, so every shut subsection is the same height whatever it holds. */ .folders .folder .folder-nav { padding: 5px; position:relative; } /* The card IS the row. .folder carries 10px of padding all round, which made a shut subsection 81 tall where the row inside it was 61 - so the pictures could never reach the top and bottom edges however tall they were drawn. The 20px bottom margin stays: that is the gap between one subsection and the next, not part of either. */ .folders .folder.preview { padding: 0; } .folders .folder.preview .folder-nav { display: flex; align-items: stretch; flex-wrap: nowrap; padding: 0; /* Fixed, not a minimum. The height the strip of thumbnails already had - 10px of padding, a 40px picture, its 10px margin, measured at 61 - so a shut subsection is the height it has today whatever it holds, and two lines of text live inside that rather than growing it. */ height: 61px; overflow: hidden; } /* The name and the note, stacked. Only in the collapsed row: display:contents everywhere else means this wrapper is not in the layout at all when the subsection is open. */ .folders .folder .folder-nav .folder-peek-text { display: contents; } .folders .folder.preview .folder-nav .folder-peek-text { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; /* the inset the card's own padding used to give */ padding-left: 10px; } /* The name leads the row: bold, at the size the item's own name is set in - measured 15.33 at weight 400, so the size is shared and the weight is what separates them. The name is one line and trails off the same way the note does. It used to have the row to itself and could wrap freely. Sharing the line with the note and the pictures, a long one wrapped to two, three, four lines and took the row with it - measured 18, 36 and 72px of title against a row that is meant to be 61. 45% at most, so a long name cannot crowd out the note beside it. */ .folders .folder.preview .folder-nav click-to-edit { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; /* Larger than the note beneath it, which is what makes the row read as a name with its first words under it rather than as two lines of equal weight. 17 against the note's 15.33. 20 was tried and read as a title with a caption rather than a name with its first words; the weight is doing most of the separating, so the size only has to do a little. The leading is deliberately loose. 22 and 20 in a 61px row leaves 19 for air; at the tighter setting the two lines sat on each other. */ font-size: 17px; line-height: 22px; } .folders .folder.preview .folder-nav click-to-edit > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* min-width:0 is what makes the ellipsis possible: a flex item will not shrink below its own content without it, so the text would push the row wider instead of trailing off. */ .folders .folder .folder-nav .folder-peek { flex: 0 0 auto; min-width: 0; /* Its own line under the name. It trails off before it reaches the pictures, which the column's own width takes care of - the strip beside it is a sibling, so the text can never run under it. */ margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* The note's own colour, not a muted one. This is the note quoted, not a caption about it, so it is set at the density the note is set at and the name carries the emphasis. */ color: #333; font-size: 15.3333px; line-height: 20px; } /* The last third, and never more. In reading order, with whole pictures only: peekOverflow hides the ones that do not fit rather than letting the edge clip one in half, and shows the same ellipsis the text uses so a shortened strip says so. */ .folders .folder .folder-nav .folder-peek-pics { /* 0 0, not 0 1. With a shrink factor the row squeezed the strip narrower than the pictures inside it and overflow:hidden cut the last one down the middle - a half thumbnail at the edge, and no ellipsis, because nothing had been hidden. The strip is never wider than the third peekOverflow measured, so there is nothing to shrink; the words shrink instead, which is what puts their ellipsis in. */ flex: 0 0 auto; /* UP TO a third of the row, and a third is a real ceiling: enough pictures will reach it and stop, few pictures take only their own width. flex-basis auto with no grow is what makes it "up to" rather than "always". */ max-width: 33%; display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; margin-left: 12px; margin-right: 12px; /* The shading the strip of thumbnails already had - measured rgb(247,247,247) on the files block - kept behind the pictures alone rather than run across the whole row. It is the pictures that needed a ground to sit on; the text never did. */ background: #f7f7f7; /* 6 on the right, because the ellipsis sits against it and the air to its right has to match the 6px each picture carries on its own right - the mark is spaced like another picture in the line, not tucked into the corner. */ padding: 0 6px 0 10px; /* The grey reaches the top and bottom of the row - it is the old image area, and that area was the full height of the collapsed subsection. The pictures sit centred in it at their own size, which is how they sat before. */ /* Flush with the top and bottom of the row: the grey is the old image area, and that area was the full height of the collapsed subsection. The pictures stay 40px and sit centred in it. */ align-self: stretch; margin-top: 0; margin-bottom: 0; margin-left: 12px; /* The dots' whole column: 10px of air, the 19px glyph, 10px of air. They are absolutely positioned and so take no room of their own, which is why the picture block has to leave it - without this the grey ran underneath them. */ margin-right: 39px; } .folders .folder .folder-nav .peek-pic.wd-past-edge { display: none; } /* Put on for the length of one measurement and taken off again, never left on the element. It is how peekOverflow asks the browser what a third of this row currently is: the percentage lives here, in the stylesheet, and reading it back beats hard-coding a number in the directive that could drift from this one. */ .folders .folder .folder-nav .folder-peek-pics.wd-measuring { width: 33%; } /* Right up against the last picture, with the same 6px on either side of it that separates one picture from the next. Held to the right edge of a fixed third instead, the remainder that whole pictures always leave over showed as a gap that grew as the window widened and snapped shut when the next picture fitted. The right edge of the strip is anchored; it is the LEFT edge that gives - out to a third and then a little short of it, by however much the last picture did not need. */ .folders .folder .folder-nav .peek-more { flex: 0 0 auto; align-self: center; margin-left: 0; color: #8a8a8a; font-size: 13px; line-height: 40px; } .folders .folder .folder-nav .peek-pic { flex: 0 0 auto; /* The size they already were. The ROW is the height the old thumbnail strip had - 10px of padding, a 40px picture, its 10px margin - and the pictures inside it stay 40, sat in the middle of it, exactly as they were. Enlarging them to reach the edges was my own addition and not what was asked for. */ width: 40px; height: 40px; margin-right: 6px; border-radius: 2px; background-color: #E4E4E4; background-size: cover; background-position: center; } /* The blocks the row replaces. Both still exist for the open state. */ .folders .folder.preview .notes, .folders .folder.preview .files { display: none; } /* Narrow: the title, then the note under it over two lines, then the pictures on a line of their own - the shape the collapsed subsection had before the one-row version, with the type set exactly as it is set wide. */ @media (max-width: 767px) { .folders .folder.preview .folder-nav { flex-wrap: wrap; /* The 61 is a wide-view number: it is one name over one note, and it is fixed so a long note cannot grow the row. Here there are three lines to hold and the row is as tall as they come to. Left at 61 with overflow:hidden the second line of the note and the pictures under it were both simply cut off. */ height: auto; padding-bottom: 10px; } /* The whole first line, so the pictures are pushed onto the next one. The right inset clears the three dots, which stay pinned to the top corner. */ .folders .folder.preview .folder-nav .folder-peek-text { flex: 1 1 100%; padding-right: 39px; } /* Two lines, and the leading is the 20px it has wide - the note is the same note, set the same way, with one more line to run onto. line-clamp puts the ellipsis at the end of the second line, which no single-line rule can do; max-height holds the two lines even where line-clamp is not honoured. */ .folders .folder .folder-nav .folder-peek { flex: 0 0 auto; margin-left: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 20px; max-height: 40px; } /* A line of its own, the width of the row: there is no third to keep to when the pictures are not sharing a line with anything. peekOverflow measures the same way it does wide - it widens the box, reads it, puts it back - so what it reads here is the whole row and it hides only what will not fit on it. */ .folders .folder .folder-nav .folder-peek-pics { flex: 0 0 100%; max-width: 100%; align-self: auto; margin: 6px 0 0 0; padding: 6px 6px 6px 10px; } .folders .folder .folder-nav .folder-peek-pics.wd-measuring { width: 100%; } .folders .folder .folder-nav .peek-pic { margin-left: 0; margin-right: 6px; } } .folders .folder .folder-nav .parent { color: #C1C1C1; cursor:pointer; } .folders .folder .folder-nav .folder-opts { position:absolute; top:0; right:0 } /* The dots keep the air they always had. .folder used to carry 10px of padding all round, which is what held them 10 off the card's top and right edge. The collapsed row drops that padding - the pictures have to reach the top and bottom - so the same 10 is put back here rather than lost with it. The left is the same 10, and it is the picture strip that leaves it: these are absolutely positioned and take no width in the row, so measured, the grey ran 9px underneath them and the glyph itself touched the card edge. */ .folders .folder.preview .folder-nav .folder-opts { top: 10px; right: 10px; } .folders .folder .folder-nav .folder-opts .md-menu { } .folders .folder .children > div { padding: 10px; background-color: #F7F7F7; cursor:pointer; border: 1px solid #E8E8E8; } .notes { position:relative; } .notes .note.view { padding:10px; cursor: text; } .notes .note { border: 1px solid #E8E8E8; /*border-top:0;*/ min-height:40px; } /* The note toolbar floats. It had a grey slab behind it, which made a strip of chrome out of what is really a handful of marks sitting above the note - and the slab was the only thing on this panel with a fill of its own. Spacing is one measure: MARKS apart from each other, twice that between the last mark and the three dots. That gap is what says the dots are not part of the set. It is bought with `right`, since the dots sit outside this element. */ .notes .note .ta-toolbar { --wd-tool-gap: 9px; position:absolute; top: -30px; /* the dots' own column, plus the double gap. Measured to the dots' own left edge rather than reasoned from their box: at 34px the gap came out 15, because the glyph carries padding of its own. 37 puts it on 18, which is twice the 9 between marks. */ right: 37px; background: none; /* Above the sticky head. The head was given a white background and z-index 6 so scrolled text passes behind it. The toolbar is lifted into that same band by top:-30px but had no z-index of its own, so the head simply painted over it and the tools vanished - measured, the topmost element at a toolbar button was .folder-nav. One higher, and they are back on top of the band they sit in. */ z-index: 7; } /* textAngular groups its tools into .btn-group blocks; both the groups and the buttons inside them have to answer to the one measure, or the gap changes wherever a group happens to end. */ .notes .note .ta-toolbar .btn-group { margin: 0 0 0 var(--wd-tool-gap); } .notes .note .ta-toolbar .btn-group:first-child { margin-left: 0; } .notes .note .ta-toolbar .btn-group > .btn { width: auto; min-width: 0; height: 20px; padding: 0; margin: 0 0 0 var(--wd-tool-gap); border: 0; background: none; box-shadow: none; line-height: 20px; vertical-align: middle; /* An italic sans I is four pixels wide. Left to size itself it would sit in a hole twice as wide as every other gap, because the spacing is between boxes and its box is barely there. A floor under the width puts the ink back on the rhythm. */ min-width: 11px; text-align: center; } .notes .note .ta-toolbar .btn-group > .btn:first-child { margin-left: 0; } .notes .note .ta-toolbar .btn-group > .btn.active, .notes .note .ta-toolbar .btn-group > .btn:hover { background: none; box-shadow: none; color: #000; } /* One size for every mark, and it is square. The box stays 18 units and the rendered box stays square, so all six are drawn at one scale and carry one stroke - measured 1.33px, which is the weight the I had and the one the rest are matched to. A moment ago each viewBox was trimmed to its own ink and the scales came apart: the chain rendered at 1.85px and 22px wide against the I's 1.33px and 16px. Equal ink was bought with unequal weight, which is worse than what it fixed. Equal ink is in the drawings now - every one spans y 3.7 to 14.3 - so nothing here has to compensate for a mark being short. 1.067em against the letters' own 15px, which is 16px. In em rather than px because a 15px letter and a 16px mark round differently under zoom, and that is the likeliest reason the screen and the measurement disagreed for several rounds. Tied to the font size they scale together and cannot come apart. */ .notes .note .ta-toolbar [class^="mark-"], .notes .note .ta-toolbar [class*=" mark-"] { font-size: 15px; } .notes .note .ta-toolbar [class^="mark-"] svg, .notes .note .ta-toolbar [class*=" mark-"] svg { height: 1.067em; width: 1.067em; vertical-align: baseline; position: relative; /* Seated against the cap the browser reports, not one I measured. Every offset here used to be a number taken off a headless Chrome on this machine. If the browser actually looking at this resolves Helvetica Neue and that one falls back, the cap heights differ and the constants describe a rendering nobody sees - which is why the measurements kept reading "aligned" against a screen that plainly was not, and why B drifted worst: it was the only thing placed from those metrics. `cap` is the font's own cap height, resolved where the page is drawn. On the baseline an svg hangs by its bottom edge, so its ink centre sits half its height above the baseline; the cap's centre sits half a cap above. That difference is computed rather than supplied. The 0.071em taken off it is the one number here that is a judgement and not a measurement. Sat exactly on the cap's centre the marks read low beside B - they are a fifth shorter, and the eye weighs a short mark against the whole letter rather than against its middle. It is about a pixel, chosen by looking. */ top: calc(0.4625em - 0.5cap); } /* B is seated by the same rule as the marks: by where its ink sits, not by wherever a line box happens to leave it. Nothing about a text node's box is its ink - it carries ascender and descender room that no capital uses - so left alone B lands somewhere incidental and everything else has to be aligned to that accident. Measured, its ink centre sat 1.66px below the dots'. This puts it on them, and now a change of face moves B by rule instead of moving the strip's reference out from under the marks. In em against its own size, like everything else here, so zoom cannot separate them. */ .notes .note .ta-toolbar .ta-letter { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 20px; /* No offset at all. A letter on its baseline already has its cap centred half a cap above that baseline, which is the thing everything else is now matched to - so the correct value here is nothing, and any number would be one more constant measured somewhere other than where it is read. */ vertical-align: baseline; } .notes .note .ta-toolbar .ta-bold { font-weight: 700; } /* The closing quote hangs high in its line - it is a superscript form - so it is dropped to sit on the same optical centre as everything beside it. */ .notes .note .ta-toolbar .ta-quote { font-size: 20px; line-height: 20px; position: relative; top: 5px; } /* The editor is dressed as the rendered note, not the other way round. Measured on the same note, resting against editing: line-height 18px against 21.9048, padding 10px against 6px/12px. So the text set to a different rhythm and the block moved as you clicked in - and the resting one is the one that reads better, so it is the one both are now set to. Applied to the editor's inner boxes rather than to .note, because textAngular wraps the contenteditable in a scroll window of its own and that wrapper carries the padding. */ .notes .note .ta-scroll-window.form-control { border:0; border-radius:0; padding: 0; line-height: 18px; } .notes .note.edit .ta-bind { padding: 10px; line-height: 18px; min-height: 0; } .notes .note.edit .ta-bind p, .notes .note.edit .ta-bind div, .notes .note.view p, .notes .note.view div { line-height: 18px; } .notes .note .ta-scroll-window.form-control { border:0; border-radius:0; } .folders .folder.preview .files { padding: 10px 10px 0 10px; } .folders .folder.preview .files .tools { display:none; } .folders .folder.preview .files .file { width: 40px; height: 40px; padding: 0; margin: 0 10px 10px 0; } .folders .folder .notes { max-height:10000px; transition:all .5s ease; } .folders .folder.preview .notes { max-height: 40px; overflow:hidden; } /* A subsection arrives already collapsed, but it did not used to look that way. ngAnimate - pulled in by ngMaterial rather than asked for - stages the preview class as an animated addition: it writes preview-add, forces a reflow so the browser locks in the uncapped height, and only then adds preview. That makes the cap something the note transitions to rather than something it starts at, and the rule above runs it. With a 10000px sentinel against a note of a hundred-odd pixels, the half second is spent almost entirely descending through empty space and clips the note in its last sixty milliseconds - so opening an item read as its first subsection opening in full and then shutting itself, before anyone had touched it. Entering, there is no previous state to move from, so there is nothing to animate. A genuine toggle is untouched: it has no ng-enter on it. */ .folders .folder.ng-enter .notes { transition: none; } .folders .folder .notes .note .ta-toolbar .btn { border:0; border-radius:none; background:transparent; } /* Bin on the left, plus on the right, and they sat 1.9px apart vertically because each was finding its own line: the plus is a font glyph riding its baseline, the bin is a 13.5px drawing riding vertical-align. Neither is wrong on its own, which is why nudging one only moved the mismatch. The row centres them both instead - the float on the plus is inert inside a flex container, and space-between keeps it right even on a subsection that has no plus to draw. */ .bin-plus-row { display: flex; align-items: center; justify-content: space-between; } /* Centring the row centred the two spans, and the icons stayed 1.9px apart inside them: a span is only as tall as its own line box, and the two line boxes are built from different things. So the centring has to reach the icons, which means each is a block of its own height rather than a character sitting on a baseline. */ .bin-plus-row > .button { display: flex; align-items: center; } .bin-plus-row .mark-trash, .bin-plus-row .mark-plus { display: block; line-height: 1; } .folders .folder .options { padding: 10px; } .modal { position:absolute; overflow-y:auto; } .modal-sm { width:300px; margin:5% auto; } .files { background-color: #F7F7F7; border: 1px solid #E8E8E8; border-top:0; padding: 20px; } .files > .ng-scope > .tools.text-right { margin-bottom:10px; } .dragover .files { background-color: #FFECD4; } .files .file { position:relative; width: 160px; height: 160px; padding:2px; margin: 0 20px 20px 0; display:inline-block; vertical-align:text-top; text-align:center; } .files .file.selected { box-shadow: 0px 2px 10px 1px rgba(0,0,0,.5); } .files.view-mode-large .file { width: 300px; height: 300px; } .files .file > div { width: 100%; height: 100%; } .files .file .img-preview { width: 100%; height: 100%; background-color: #E4E4E4; background-repeat: none !important; background-position: center center; background-size: contain !important; font-size: 10px; line-height:14px; padding:8px 4px; white-space:break-word; word-wrap:break-word; overflow:hidden; } .files .file.failed { border: 2px solid #f3a0a0; } .files.view-mode-large .file .img-preview { font-size: 16px; line-height:20px; padding:20px 10px; } .large-image-preview { margin:0 auto; width:90%; min-height: 500px; background-size: contain !important; } .large-other-preview { background-color: #E4E4E4; margin:0 auto; width:90%; text-align:center; } .large-pdf-preview { margin:0 auto; width:90%; } .large-other-preview .placeholder { line-height: 500px; font-size: 200px; color:white; } .attachment-detail .att-container { position:relative; } .attachment-detail .right-nav, .attachment-detail .left-nav { position: absolute; top: 0; bottom: 0; height:100%; width: 20%; font-size: 60px; opacity:0; transition:all .5s ease; } .attachment-detail .right-nav > i, .attachment-detail .left-nav > i { position:absolute; top:42%; } .attachment-detail .right-nav > i { right: 10px; } .attachment-detail .left-nav > i { left: 10px; } .attachment-detail:hover .right-nav, .attachment-detail:hover .left-nav { opacity:.8; } .attachment-detail .left-nav { left:0; text-align:left; } .attachment-detail .right-nav { right: 0; text-align:right; } /* Four controls in a column instead of two here and two laid over the picture. The height was fixed at 100px for the two it used to hold; it is whatever four need now. font-size went with the glyphs - the marks carry their own size. */ .attachment-detail .tools { position:absolute; top:0; right:0; display:flex; flex-direction:column; align-items:center; gap:14px; padding:8px 8px 0 0; } .attachment-detail .tools > * { line-height:0; } /* The menu hangs off the right edge of the page from in here, so it opens leftward. */ .attachment-detail .tools .att-opts .dropdown-menu { right:0; left:auto; } /* Sized the two font glyphs this column used to hold. The marks are 13.5px of their own, and a 40px line box around a 13.5px drawing is what put the bin low in the corner it used to sit in. Only the fade is left. */ .attachment-detail .mark-share, .attachment-detail .mark-trash { transition: all .5s ease; } /* Faded in on hover back when it sat on top of the picture, where a control at rest would have been something drawn over the image. It stands in the column with the other three now, and one of four blank until you reach for it reads as a gap. */ .attachment { position:relative; } .attachment > .button { opacity: 0; transition: all .5s ease; } .attachment:hover > .button { opacity:1; color:black; text-shadow: 1px 1px 1px rgba(255,255,255,.8r); } /* Sat at top:0 left:-5px, which hung it off the left edge and pinned it to the top with no gap at all - two different offsets on the two axes, so it read as dropped in rather than placed. Equal on both, and the icon is 13.5px in an 18-unit box that already carries its own visual margin, so 5px of real gap is 5px on each side. */ /* The link at the other corner is floated, so it comes to rest against the container's content edge - measured at 8px in from the right, 0 down. The bin was absolutely placed at 5 and 5, and absolute placement is against the border edge, not the content edge, so the two were being measured from different lines: 20 down and 10 across against 0 and 8. Mirroring means taking the link's own resting place and swapping the axis, not picking a second pair of numbers that look even. */ .attachment > .button.mark-trash { position:absolute; /* Mirroring the two boxes was not enough - neither box is its drawing. The link is a 20px glyph in a 40px line box: 20 x 17.14 of ink, 13.00 in from the right, centred 18.43 down. The bin was 13.5px in that same box: ink 11.63 x 10.61 at 13.94 in and 16.76 down, so it read low and small from a pair of offsets that measured as an exact mirror. Sizing the bin up to 20px of ink was the wrong correction: the stroke is in user units, so a 23.23px box drew it at 1.94px and broke the one line weight the drawn family has. It stays 13.5px. What mirrors is the placement - equal gap from its own side, and the two inks level. Level means centres, not tops: the icons are different heights, so matching their top edges would tilt them apart by the difference. left = 13.00 (the link's gap) - 0.94 (ink inset of a 13.5px bin, 1.25/18 across) top = 18.43 (the link's ink centre) - 7.26 (ink centre of the bin, 9.675/18 down) */ display:block; line-height:0; padding:0; top:11.17px; left:12.06px; } .attachment-detail .meta { padding-top:20px; } .attachment-detail .meta > h4 { margin-bottom:4px; } .attachment-detail .notes { border-top: 1px solid #E8E8E8; background-color:white; } .ta-root.focussed > .ta-scroll-window.form-control { box-shadow: none; border: 0; cursor: text; } .attachment-detail .large-pdf-preview { text-align:center; position:relative; z-index:4; } .attachment-detail .large-pdf-preview iframe { border:0; margin: 0 auto; width:100%; min-height: 500px; } #attachment_modal .attachment-detail .att-container { text-align:center; } #attachment_modal.modal-overlay { background: rgba(51, 51, 51, .8); } #attachment_modal .large-image-preview, #attachment_modal .large-pdf-preview, #attachment_modal .large-other-preview { background-color:transparent !important; } #attachment_modal .large-image-preview .att-opts, #attachment_modal .large-pdf-preview .att-opts, #attachment_modal .large-other-preview .att-opts { position:absolute; top:0; right:0; } #attachment_modal .large-image-preview .mark-trash, #attachment_modal .large-pdf-preview .mark-trash, #attachment_modal .large-other-preview .mark-trash { color: #ccc; } #attachment_modal { color: #ccc; } /*#attachment_modal .large-pdf-preview iframe { position:relative; z-index:4; }*/ #attachment_modal .large-image-preview { display:block; width: auto; max-width: 90%; margin: 0 auto; min-height: 100% !important; text-align: center; } #attachment_modal .large-image-preview img { margin:0 auto; } .sort-button { cursor: pointer; } .nav-deck { display:table; width:100%; } .nav-deck > ul { display:table-cell; width:30%; } .nav-deck > ul:first-child { width:70%; } .nav-deck > .tags { display:none; } .nav-deck.current-category > .tags { display:table-cell; } .nav-deck .tags .button { color:black; } .nav-deck .tags.filtered .button { opacity: .4; } .nav-deck .tags.filtered .current-tag .button { opacity:1; } .fa.fa-arrows-v { cursor:move; } #back { display:none; } .modal-content { max-width: 800px; margin: 5% auto; } #attachment_modal .modal-content { max-width:10000px; margin:0; } .form-group .fa-plus.hover-button { margin-left:10px; } .content-detail { max-height: 5000px; transition:all .5s ease; } /* Folded means folded down to the name, not away to nothing. This was max-height:0 on the whole panel, which took the name line with it: a folded item had its subsections sitting at the very top of the panel, with nothing left on screen to say what the item was or to click to bring the fields back. Everything in the columns folds except the header row, which stays put and is what unfolds the rest again - and inside that row the fold goes one step further, in the rules below. */ .content-detail > div > * { max-height:5000px; transition:all .5s ease; } .content-detail.hide-detail > div > *:not(.content-header) { max-height:0; overflow:hidden; margin:0; padding:0; border:0; } /* The header keeps its name and loses the rest. What is folded away is being stood in front of by a subsection, and against that the qualifier and company line is the same kind of detail as everything below it - what survives is the one thing the panel cannot do without, which is what it is called. Written as its own rule rather than by narrowing the :not() above, because the heading is a grandchild of the column and that selector only reaches children. */ .content-header h2, .content-header h4 { max-height:5000px; transition:all .5s ease; } /* The half-second above is the fold's, and ngAnimate spent it on something else. It holds an element in the document for as long as the element's own CSS says it is transitioning, and the qualifier-and-company line is ng-if="!showAll" against the readonly stack's ng-if="showAll" - so on the way into Show info the line did not go when its condition did. It sat there, ng-leave-active, for 500ms with the stack already drawn underneath it, and the company was on screen twice. ng-animate is on the element only while ngAnimate is running enter or leave on it, which the fold is not: the fold is a class on .content-detail two levels up, and the transition it drives here is plain CSS on an element ngAnimate never touches. So this reaches the swap and leaves the fold alone. */ .content-header h2.ng-animate, .content-header h4.ng-animate { transition:none; } .content-detail.hide-detail .content-header h4 { max-height:0; overflow:hidden; margin:0; padding:0; border:0; } /* Folded, the header is the only thing in the row, so the column holding it stops being a third of the width. A name was being cut with an ellipsis at the third while the two columns beside it stood empty - the ellipsis is for a name too long for the panel, not for one too long for a column it is no longer sharing with anything. The other columns come along rather than being singled out, because folded they measure nothing high: a full-width one stacks under the header and shows nothing. min-height is what makes that last sentence true. A bootstrap grid column carries min-height:1px so an empty one still holds its place in a row, and at full width the emptied two no longer sit beside the header - they stack under it, a pixel each, and folding a head made the panel 2px TALLER than it was open. On a head there is nothing else for the fold to take back: the middle column is empty until Show info and the right one is a single Status line that already fits inside the height of the name, so those 2px were the whole of the measurable difference, and in the wrong direction. One telling does for both panels now - the editor laid its columns out with flex until #190 made it a bootstrap row like the viewer. */ .content-detail.hide-detail > div { width:100%; max-width:100%; min-height:0; /* The width waits for the fold. max-height above animates to 0 over half a second; this width went to 100% on the same frame the class landed. So opening an item re-laid the columns out at once - Status and the date dropped beneath the name - and only then did they collapse. Two moves, in the wrong order, for something that should read as one. Delayed by the length of the fold, so the columns keep their own width while they close and take the full width only once there is nothing left to see. Nothing about the folded state changes; only when it arrives. */ transition: width 0s .5s, max-width 0s .5s; } /* The three dots are a control, not a field, and folding an item puts its fields away. They went with them, and by two separate routes at once. They sit in the third column rather than inside the header, so the :not(.content-header) rule above zeroed them; and the rule directly above takes every column to full width, so even un-zeroed they would have landed on a line of their own under the name rather than at the end of it. Both halves are undone here, and folded is the only state that needs it - open, the float already holds the corner. Its own rule rather than a narrower :not() above, the same as the h2 and the h4: the fold is about the fields, and each exception to it says what it is on its own terms. Out of the flow and anchored to the row, which is what "the top right corner" has to mean once the column holding it is neither a third of the width nor beside the header any more. right:15px is the padding the float sat inside, so the dots land on the same pixel folded as open, and top:0 is level with the name for the same reason. The column gives up its own positioning for that moment, or the absolute above would anchor to a box that is itself already below the name. Nothing else in that column is positioned - the pencils and the field editors are all in the header's column, which this does not touch. */ .content-detail.hide-detail { position:relative; } .content-detail.hide-detail > .dots-col { position:static; } .content-detail.hide-detail > .dots-col > .dots-row { position:absolute; top:0; right:15px; max-height:5000px; overflow:visible; } /* One line, and with the rule above it a line the width of the panel. Unfolded a long name wraps onto a second and third line, which is right there and wrong folded: the fold is a name standing in for a panel, and a three-line one stops reading as a title and starts crowding the subsections it made room for. The ellipsis is the last resort and should almost never be seen - a name has the whole panel to run in before it is cut. The name-display carries the same three properties, because it is a block of its own inside the h2 and an ellipsis is only ever applied by the box that overflows. */ .content-detail.hide-detail .content-header h2, .content-detail.hide-detail .content-header h2 .name-display { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .content-detail > div { position:relative; } /* Was padding-left:5px, which put Tags 5px right of the Categories above it. Nothing ever wanted that: the two are the same column and start at the same edge. */ .content-detail .tag-selector { padding-left: 0; } #search .input-group-addon, #search .form-control { border-radius:0; } #search .clear-search { position:absolute; right:5px; z-index:5; } #search .search-filters { background-color: #DAECFF; padding: 5px; } .logo { padding: 10px; } .uib-dropdown { display:none; } .folder:hover .folder-nav .hover-button { opacity:1; } :focus { outline: 0; } md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) { background-color: #97aecb; color: rgba(255,255,255,0.87); } .sidebar.sidebar-left .scrollable-content { background-color: #a7a9ac; } .sidebar.sidebar-left .list-group { background: transparent; box-shadow: none; } .sidebar.sidebar-left .list-group .list-group-item { background: transparent; box-shadow: none; border: none; } #category_nav { padding: 0; } .categories.nav { padding-left:0; text-indent: 10px; } .categories.nav .button { color:white; } .categories.nav ul { padding-left:0; } .categories.nav > li > ul { text-indent: 20px; } .categories.nav > li > ul > .current-category > .tags li:first-child { margin-top:-17px; } .categories.nav > li > ul > li > ul { text-indent: 20px; } .categories.nav > li > ul > li > ul > li > ul { text-indent: 30px; } .categories.nav > li > ul > li > ul > li > ul > li > ul { text-indent: 40px; } .categories.nav > li > ul > li > ul > li > ul > li > ul > li > ul { text-indent: 50px; } .categories.nav > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul { text-indent: 60px; } .categories.nav > li > ul > li > ul li > span.button { font-size: 12px; line-height: 20px; color: #297abc; } .categories.nav > .current-parent { background-color: #c7c8ca; } .categories.nav .current-category { background-color:white; } #category_nav > div > ul > li > ul > li.current-parent { background-color:white; } #category_nav > div > ul > li > ul > li.current-parent > ul > li > .button { color: #297abc; } #category_nav > div > ul > li > ul > li.current-parent > ul > li.current-category > .button { color:black; } .categories.nav .current-category > ul > li > .button { color: #297abc; } #category_nav .tags .button { color: #54565e; } /* NOT TAGGED is a filter rather than one of the tags, so it sits a shade lighter than they do at every state (item 1680). */ #category_nav .tags .not-tagged .button { color: #9a9a9a; } .nav-deck .tags.filtered .not-tagged .button { opacity: .55; } .nav-deck .tags.filtered .not-tagged.current-tag .button { opacity: 1; } .tags li:first-child { /*margin-top: -17px;*/ } .categories.nav .current-category .tags > li { font-size: 13px; line-height: 16px; } .app-content .scrollable-header [ui-toggle] { color: white; text-transform:uppercase; } .categories.nav > li > ul > li > ul li > span { } #category_nav > div > ul > li > ul > li.current-parent > ul > li.current-parent > .button { color:black; } .chat, .todo { background-color: #F7F7F7; position: absolute; width: 100%; height: 86%; border: 1px solid #E8E8E8; cursor: default; font: 14px/16px sans-serif; margin-top: 10px; } .chat .discussion-panel, .todo .discussion-panel { position:relative; } .chat .discussion-panel > div, .todo .discussion-panel > div { padding: 0 5px 5px 5px; overflow: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .chat .discussion-panel .day, .todo .discussion-panel .day { margin-top: 10px; color: #868686; font-weight: 600; font-size: 12px; margin-bottom: -4px; } .chat .discussion-panel .convo, .todo .discussion-panel .convo { margin-top: 4px; } .todo .discussion-panel .convo.complete { opacity: .4; } /* #248. The AI panel. Everything below is scoped to .ai-panel so the chat between people keeps the shape it has always had. Nobody but the owner will ever read this conversation, so it carries no names and no timestamps: which side a turn sits on says who said it. Yours is a grey bubble on the right, the model's is plain text on the left, which is the shape every chat of this kind uses and the one on the reference screenshot. */ /* Capped at the window. The panel used to be 86% of the note column, so a long note gave a chat window taller than the screen with its composer somewhere below the fold. The cap leaves room for the top bar and the item header; the list inside scrolls once the exchange outgrows it. */ /* All three panels share the one column beside the note, so they get the one geometry. The AI panel was fitted first and chat and to-do were left as tall as the note - the same complaint, one panel later. */ .folder .chat, .folder .todo, .chat.ai-panel { /* Sticky, not absolute, and the two go together. Capping the height is only half of "never taller than the window": the base rule pins the panel to the top of the note column, so on a long note the column's top is scrolled off and the panel goes with it - measured at top:-269 with the composer at 580, a panel 850 tall of which the first 269 was above the window edge. In flow and sticky, it holds its own place until the column scrolls under it and then stays put. top:10 keeps it clear of the header above. */ position: sticky; /* 98, measured, not 10: the top bar is 36 and the list header under it takes the rest, so the note column's first pixel is 98 down the window and the panel comes to rest there. Sticking it at 10 asked for a place it never occupies, and the height then ran 42px past the bottom of the screen. Full height from there to the floor: the search footer measures 34 and sits flush on the bottom, so 98 + 12 above it + the 34 itself is the 144 taken off. */ /* 10, measured from the SCROLLPORT, not the window. 98 was the distance from the top of the window to the note column, and it is the wrong frame of reference: the page does not scroll, .scrollable-content does, and a sticky offset is taken from that box - which already begins below the top bar and the list header. Using 98 counted the header twice and left the panel 92px below the note it sits beside. */ top: 10px; /* A starting figure only. The real height is measured and written by the chat directive's fitToWindow, because the distance from the top of the window to the top of this panel is not a constant - it depends on what is above the note column, measured at 98 on one item and 186 on another. This keeps the panel sane for the one frame before that runs. */ height: calc(100vh - 144px); max-height: calc(100vh - 44px); background: #fff; display: flex; flex-direction: column; } /* The rule this replaces was height:100%, written for the absolute panel: in flow it resolves against a column as tall as the note, which is the thing being escaped. The directive measures and writes the real figure; this is the value for the frame before it runs. */ .folder .chat, .folder .todo { height: calc(100vh - 144px); max-height: calc(100vh - 44px); } /* Bottom up. The turns sit on the floor of the panel and grow towards the top, so the newest is always by the composer rather than stranded at the top of an empty box. margin-top:auto on the FIRST child, not justify-content:flex-end on the container: with flex-end an overflowing list has its top items pushed out of the scrollable area and they cannot be reached by scrolling at all. */ .chat.ai-panel .discussion-panel > div { display: flex; flex-direction: column; padding: 10px 12px; } .chat.ai-panel .discussion-panel > div > *:first-child { margin-top: auto; } .chat.ai-panel .discussion-panel .convo { margin-top: 14px; max-width: 78%; line-height: 19px; } /* Yours: right, in the bubble. */ .chat.ai-panel .discussion-panel .convo:not(.from-ai) { margin-left: auto; background: #f1f1f1; border-radius: 14px; padding: 8px 14px; } /* The model's: left, no bubble. Held to the same 78% yours is held to. It used to run the full width, which read fine in a 30% side panel and badly once the panel opens out across the note - a reply then crossed the whole screen while the question above it stopped three quarters of the way, and the exchange stopped looking like two sides of one conversation. Same measure both ways. */ .chat.ai-panel .discussion-panel .convo.from-ai { margin-right: auto; background: none; padding: 0; } /* The name goes; the clock stays. A name is noise in a conversation with two parties, one of whom is you - but when a thing was said is worth knowing, so the date heads the day and the time sits under each turn, small and grey enough to read past. */ .chat.ai-panel .discussion-panel .user { display: none; } .chat.ai-panel .discussion-panel .day { display: block; margin: 16px 0 2px; text-align: center; color: #a0a0a0; font-size: 11px; letter-spacing: 0.04em; } /* inline-block, not block: the copy mark sits beside it on the same line. */ .chat.ai-panel .discussion-panel .time { display: inline-block; vertical-align: middle; margin-top: 3px; color: #a8a8a8; font-size: 11px; line-height: 14px; font-weight: 400; } /* Your clock reads back under your bubble, on the same side the bubble is on. */ .chat.ai-panel .discussion-panel .convo:not(.from-ai) .time { text-align: right; } /* The model's formatting, at the density of the panel rather than the browser's defaults - a default ul indents 40px, which in a 30% column throws the text halfway across it. */ .chat.ai-panel .discussion-panel .convo ul, .chat.ai-panel .discussion-panel .convo ol { margin: 4px 0; padding-left: 20px; } .chat.ai-panel .discussion-panel .convo li { margin: 2px 0; } .chat.ai-panel .discussion-panel .convo .ai-h { margin: 10px 0 2px; } .chat.ai-panel .discussion-panel .convo .ai-h:first-child { margin-top: 0; } .chat.ai-panel .discussion-panel .convo a { color: #297abc; } /* The copy mark: the same drawn family as the pencil and the bin - one box, one scale, one stroke - and it only appears when the turn is under the pointer, so a read-back of the conversation is not a column of icons. */ .chat.ai-panel .discussion-panel .convo .turn-copy { display: inline-block; vertical-align: middle; margin: 3px 0 0 7px; opacity: 0; cursor: pointer; transition: opacity 120ms linear; } .chat.ai-panel .discussion-panel .convo:hover .turn-copy, .chat.ai-panel .discussion-panel .convo .turn-copy:focus { opacity: 1; } .mark-copy { font-style: normal; display: inline-block; line-height: 0; } /* Smaller than the marks in a toolbar: this one lives in a footnote line beside an 11px clock, not in a row of controls. */ .mark-copy svg { width: 0.85em; height: 0.85em; overflow: visible; } .mark-copy svg rect, .mark-copy svg polyline { fill: none; stroke: #8a8a8a; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; } .turn-copy:hover .mark-copy svg rect, .turn-copy:hover .mark-copy svg polyline { stroke: #297abc; } /* Block, so the bubble's padding sits around the whole message rather than around an inline run that wraps out of it. */ .chat.ai-panel .discussion-panel .convo .text { display: block; white-space: pre-wrap; } /* The composer keeps the panel's floor. A little more room than the chat between people, because a question to a model is usually a sentence rather than a line. */ .chat.ai-panel .chat-input { padding: 10px 12px; background: #fff; } /* Not a spinner: the wait is seconds long and a moving thing in the corner of the eye is worse than a word. It goes when the reply arrives. */ .chat .discussion-panel .convo.thinking .text { color: #8a8a8a; font-style: italic; } .chat .discussion-panel .convo .mention, .todo .discussion-panel .convo .mention { color: #297abc; } .todo .discussion-panel .convo.complete .mention { color: #333333; } .chat .discussion-panel .time, .todo .discussion-panel .time { color: #868686; font-weight: 100; font-size: 12px; } .chat .chat-input, .todo .todo-input { resize:none; border: 0; border-top: 1px solid #E8E8E8; padding: 2px 6px; } .chat-container { position:relative; min-height:160px; } .folder .chat, .folder .todo { margin-top:0; height:100%; } /* The same override a folder's chat gets, for the copy on an item or list header. The 86% in the base rule is a folder's proportion: there the chat is a 30% column beside the folder body and the 14% it leaves is the input row below it. A header's container is only ever as tall as the chat, so 86% would leave a strip of nothing under it and the panel would come up short of the floor .chat-container sets. */ .content-detail > .chat-container > .chat, .content-detail > .chat-container > .todo { margin-top:0; height:100%; /* Both edges rather than width:100%, which is what put the panel 30px past the end of the header. The base rule is position:absolute + width:100%, and those two do not measure from the same place: the 100% is taken against the containing block's PADDING box, while left is auto and so falls at the static position, which is the CONTENT edge. In a box with gutters that is an overhang of exactly the two gutters, wherever it is put - it was 30px in the dots column and it was still 30px once the panel had been moved out to a full-width row of its own. 15px is this row's gutter, the same one every col-sm-4 above it uses, so pinning to it lands the conversation on the header's own left and right edges: under the name at one end and under the three dots at the other. */ left:15px; right:15px; width:auto; } item-settings { display:inline-block; vertical-align:middle; } /* One centre line through the x, its label and the dots. They were three inline boxes, each settling on the line by its own rule - the mark off its baseline, the label off the chip's, the dots off an icon font's - so nothing lined the three up with each other and the chip sat low against the control it belongs beside. */ .item-settings { display:flex; align-items:center; } /* And once more inside md-menu, which is a block: the dots are an inline-block 15.33 tall in the 18px line box it inherits, so they sat at the top of it. The centre line the rule above draws goes through md-menu, and md-menu was already centred - it was the dots within it that were 1.33px low, which is exactly the half of the 2.67px the line box has over them. */ .item-settings md-menu { display:flex; align-items:center; } /* angular-material stops every menu at 304px and scrolls the rest - six and a half entries of the 48px it draws them at. This one has nine now, and the two that #169 added went in at the bottom, so Chat, To Do and Open Link all landed below that line: drawn, but reachable only by first noticing there is more and scrolling to it. The three dots are the only control a folded header has, and on a header that has never had a conversation the menu is the ONLY way to start one - the icons beside the dots report a chat that exists rather than offer one. A way in that is hidden inside a scroll is the same defect #168 was filed about, one level further down. So the cap goes, and the window takes its place: as tall as the entries need, never taller than what is on screen, and overflow-y:auto is left alone underneath so a short window still scrolls rather than running the last entry off the bottom. Written against the element rather than through .item-settings because by the time this is on screen it is a clone hanging off the body - see the comment in item-settings.html. */ /* The subsection's menu, sized by what is in it. It carried width="3" - Angular Material's multiplier, 3 x 56px - which is a floor of 168 regardless of the words, and md-button under it has a 88px min-width of its own on top. Four short labels in a box built for none of them. max-content asks the four labels how wide they are; the padding is stated here so the answer has room either side rather than being flush to the text. Not scoped under .folders: ngMaterial lifts the menu out into a container appended to the body when it opens, so a descendant selector from the row would never reach it. */ md-menu-content.folder-menu { /* !important, and not from laziness. ngMaterial measures the menu when it opens and writes the result as an inline width - measured 160.406px against a widest label of 79 and a button of 120 - so an ordinary rule loses to the style attribute. This is the one lever that reaches it. */ width: max-content !important; min-width: 0 !important; padding: 6px 0; } /* The wrapper is where the measured width actually lands. ngMaterial appends the open menu to the body inside a div._md and writes the width there - measured 160.406px - so the menu inside it is only ever as wide as it is told. Naming .md-open-menu-container missed it: that is not the element in the chain. */ div._md:has(> md-menu-content.folder-menu) { width: max-content !important; min-width: 0 !important; } /* md-menu-item is what is actually 160 wide: measured, the button inside it is 120 and the item around it is 160, so the extra comes from ngMaterial's own sizing on the item rather than from the menu. The menu is only as wide as its widest child, so this is the child to correct. */ md-menu-content.folder-menu md-menu-item { width: max-content !important; min-width: 0 !important; height: 36px; min-height: 36px; } md-menu-content.folder-menu .md-button { min-width: 0; width: 100%; height: 36px; min-height: 36px; line-height: 36px; padding: 0 20px; text-align: left; } md-menu-content.item-menu { max-height:calc(100vh - 32px); } /* Reads as a way out rather than as another thing to open: a mark and a label, sized under the row's own text so it sits beside the dots without becoming the loudest thing on the line. Kept on one line because "SHOW INFO" wrapping mid-label would push the dots off the end of a narrow row. No box. It had an outline and a padded well, which drew it as a button - one more thing on the header to press, competing with the dots beside it - when what it is is the state's own x, the same one that ends a field row down in the panel. The padding is off rather than absent because .button carries 0 8px and would otherwise hold the mark away from the start of the chip. line-height is 1 rather than inherited so the chip is exactly as tall as its type. Left to the row's own line-height it stood a third again as tall as the letters in it, and the spare sat under them - the chip hanging below the dots beside it with nothing in the space. */ .state-exit { display:inline-flex; align-items:center; font-size:12px; line-height:1; letter-spacing:.04em; color:#6d6e71; padding:0; margin-right:8px; white-space:nowrap; } /* The gap the "X " used to be. */ .state-exit .mark-x { display:flex; margin-right:4px; cursor:pointer; } /* Only the mark closes the state, so only the mark answers to the pointer. The click was on the whole chip, which made a label you are meant to read into a target as wide as it is - and put the way out of a state under a word that names it. Darkens as .row-remove does rather than lightening the way .button would: the mark is grey at rest, and a control that fades toward the background as you reach for it reads as going away. */ .state-exit .mark-x:hover { color:#333; } /* The mark up 20% with the type, so the two keep their proportion. Sized here rather than in .mark-x because that one is the panel's, set against the bullet it shares a row with, and the two are not the same size on purpose. The baseline nudge it carries there is dropped: in a centred flex line there is no baseline to nudge off, and leaving it would only push the mark off the centre it was just put on. */ .state-exit .mark-x svg { width:9.23px; height:9.23px; vertical-align:0; } /* #248. ai-icon added to both. An unknown element is inline with no size of its own, and an svg with no width falls back to its intrinsic default - which is how the AI icon came out as a rectangle the height of the header instead of a 15px mark. It is the same size as the other two because it is the same kind of thing. */ chat-icon, todo-icon, ai-icon { padding-top: 0px; display: inline-block; vertical-align: text-top; } chat-icon > svg, todo-icon > svg, ai-icon > svg { width: 15px; margin-left: 8px; } chat-icon > svg text { fill: #ea168c !important; font-size: 24px; font-weight: 800; } /* Sized off 1713__TagsComparison.pdf: the box next to the Tags label sits at the cap height of its "T", the chips below at roughly the x-height. */ .tags-editor .input { /*display: inline-block;*/ background: #e8e7e7 !important; padding: 0 2px; border: 1px solid #ccc; margin-right: 10px; max-width: 220px; font-size: 11px; line-height: 13px; align-self: center; font-weight: 100; text-transform: uppercase; font-family: arial, sans-serif; } .tags-editor .input [type="text"] { /*display: inline-block;*/ background:transparent; border:0; padding: 0; font-size: 11px; line-height: 13px; height: 13px; } .tag-selector .tag { display: inline-block; background: #e8e7e7; padding: 0 2px; margin: 2px 2px 0 0; border: 1px solid #ccc; font-size: 10px; line-height: 10px; font-weight: 100; text-transform: uppercase; font-family: arial, sans-serif; cursor: default; } .tag-selector .tag i { color:white; cursor: pointer; } .breadcrumb .tag { display: inline-block; background: rgba(255, 255, 255, 0.31); padding: 0 2px; margin: 2px 2px 0 5px; border: 1px solid #ccc; font-size: 10px; line-height: 10px; font-weight: 100; text-transform: uppercase; font-family: arial, sans-serif; } .breadcrumb div:first-of-type { margin-left: 10px; } #active_users { float: right; display: inline-block; position: relative; margin: 0; padding: 0; opacity: .6; } #active_users.active { opacity: 1; } #active_users.active .count { color: #e9188b; font-weight: 900; } #active_users .indicator { color:white; } #active_user_list .user small { font-style: italic; color: #8e8e8e; } #attachment_modal .large-image-preview img { max-height:100%; } #feed_button { color:white; } #feed { background-color: #eeeeee; padding: 20px; } #feed > div[class$="-item"] { position: relative; background-color: #f7f7f7; border: 1px solid #E8E8E8; padding: 5px; margin-bottom: 10px; min-height: 50px; font: 14px/16px sans-serif; } #feed > div[class$="-item"] .convo.complete { opacity: .4; } #feed > div[class$="-item"] .day { color: #868686; font-weight: 600; font-size: 12px; } #feed > div[class$="-item"] .mention { color: #297abc; } #feed > div[class$="-item"] .time { color: #868686; font-weight: 100; font-size: 12px; } #feed > div[class$="-item"] .md-menu { position: absolute; top:-5px; right: 0; z-index: 10; } #feed > div[class$="-item"] .frame { margin: -5px -5px -5px -5px; } #feed > div[class$="-item"] .chat, #feed > div[class$="-item"] .todo { position:relative; margin-top:0; } #feed > div[class$="-item"] .chat .discussion-panel > div, #feed > div[class$="-item"] .todo .discussion-panel > div { position:relative; } #feed > div[class$="-item"] .convo { border:0; } .attachment.layout-fill > * { z-index: 10; } .preview .file .attachment .button { display:none; } /*.view-mode-small .file .attachment .button, .view-mode-large .file .attachment .button { display: block; }*/ /* --------------------------------------------------------------------------- Company field (item 1756) An item can carry several companies. The column stacks the first three and shows a +N beneath; the pencil - which only appears on hover - swaps in the editor. The editor floats above the row rather than sitting in the flow, so opening it doesn't resize the list. --------------------------------------------------------------------------- */ .company-field { display: inline-block; vertical-align: top; position: relative; max-width: 100%; } /* No left padding. The name, the qualifier and the company are the same kind of block in the same column - all three carry the 18px on the right for the +N and nothing on the left - and this one had 8px of its own, so in the header the company line started 8px inside the name above it. */ .company-display { position: relative; padding-right: 18px; /* The names read as one line separated by commas, so the trimming happens here rather than on each name, and the names carry no padding of their own or the comma would drift away from the name it belongs to. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* A value you can click into reads the same wherever it is - a company, a qualifier, a city. They share the look because they are the same offer: this is a list, and here is everything else on it. */ .company-link, .qualifier-name, .value-link, .company-placeholder { display: inline; color: #555; cursor: pointer; transition: color .25s ease; } .company-link:hover, .qualifier-name:hover, .value-link:hover, .company-placeholder:hover { color: #ccc; text-decoration: none; } .company-link:focus, .qualifier-name:focus, .value-link:focus, .company-placeholder:focus { text-decoration: none; } /* Without an address there is nothing to go to, so it stops looking like an offer. ng-href leaves the attribute off entirely when valuePath returns nothing, which is what a blank value does - and a blank is not a list. The same rule is what makes a company read as plain text on a row: the row is given no href, so it draws, hovers and takes a click exactly like the words around it. The opacity is the third of those and was the one left out. Colour and cursor were already answered here, so a name on a row rested and hovered like the words beside it - and then dimmed under the mouse, because bootstrap's a:active drops any anchor to .6 and nothing here named the property to beat it. It read as the name reacting to a click that was never its own. */ .company-link:not([href]), .qualifier-name:not([href]), .value-link:not([href]) { cursor: default; color: inherit; opacity: 1; } .company-placeholder { opacity: .45; } .company-sep { color: #555; } /* What the item does at that company, after the name and a comma: "DNA, Agent". It was in brackets before, to keep it apart from the comma that separates one company from the next, but brackets read as an aside and the role is not one - it is half of what the line says. Quieter than the name, because the company is what is being named and the role is what qualifies it, and that grey is now also what tells the two commas apart on an item that holds more than one company. */ .company-qualifier { color: #777; } /* The +N only appears where the field was given show-rest, which is the item view. A row has none, so nothing here reaches one. */ .company-more { display: inline; margin-left: 4px; color: #999; cursor: pointer; font-size: .85em; } .company-more:hover, .company-more:focus { color: #ccc; text-decoration: none; } /* One line is right for a row, which is why the display trims itself. Opened as an item the names are allowed to run on, or the ones the +N just revealed would fall off the end of a line that cannot grow. */ .company-field-full .company-display { overflow: visible; white-space: normal; } .company-pencil { position: absolute; top: 0; right: 0; color: #555; cursor: pointer; font-size: 11px; opacity: 0; transition: opacity .2s ease; } .company-field:hover .company-pencil, .contact-summary:hover .company-pencil { opacity: .55; } .company-pencil:hover { opacity: 1; color: #555; text-decoration: none; } .company-editor { position: absolute; top: -6px; left: 0; z-index: 60; min-width: 230px; padding: 8px; background: #fff; border: 1px solid #d8d5d5; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 11.5pt; white-space: normal; } .company-rows { list-style: none; margin: 0 0 6px; padding: 0; } .company-row { display: flex; align-items: center; padding: 3px 0; } .company-row .handle { cursor: move; opacity: .3; margin-right: 6px; font-size: 11px; } .company-row .company-remove { color: #555; cursor: pointer; font-size: 12px; } /* Grey, black under the pointer, nav-blue once set - the one behaviour the mark has wherever it appears. It was black at rest and stayed black on the way past, and it was carrying the remove's 12px besides, so on this row the mark sat on a line two points under the one the type is on. See .name-row .name-star. */ .company-row .company-star { color: #bbb; cursor: pointer; margin-right: 3.507px; } .company-row .company-star:hover { color: #555; } .company-row input { min-width: 0; background: none; border: 0; border-bottom: 1px solid transparent; padding: 1px 0; font-size: 11.5pt; text-overflow: ellipsis; } /* The company is what the row is for and gets the room. What the item does there follows it, label first and entry after, the way the qualifier rows read. */ .company-row .company-name { flex: 1.4; margin-right: 8px; } .company-row .company-type { flex: 0 0 62px; margin-right: 6px; opacity: .7; } .company-row .company-qualifier-value { flex: 1; opacity: .85; } .company-row input:hover { border-bottom-color: #d8d5d5; } .company-row input:focus { outline: 0; border-bottom-color: #555; } .company-row .company-remove { opacity: .35; margin-left: 6px; } .company-row .company-remove:hover { opacity: 1; text-decoration: none; } .company-editor .company-input { display: block; width: 100%; border: 0; border-bottom: 1px solid #d8d5d5; padding: 3px 0; margin-bottom: 8px; font-size: 11.5pt; } .company-editor .company-input:focus { outline: 0; border-bottom-color: #555; } .company-actions { text-align: right; } .company-actions .button { font-size: 11.5pt; } .company-created { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 230px; margin-top: 4px; padding: 8px; background: #fff; border: 1px solid #d8d5d5; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 12px; white-space: normal; } .company-created-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 0; } .company-created-dismiss { display: inline-block; margin-top: 4px; color: #555; opacity: .55; cursor: pointer; } /* --> edit view : every field an item can carry, filled or not */ .edit-view .scrollable-content { background: #fff; } .edit-view-form { max-width: 720px; padding: 20px 30px 60px; } .edit-view-section { margin-bottom: 26px; } .edit-view-section h4 { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #e6e3e3; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #888; } .edit-view-field { display: flex; align-items: center; padding: 3px 0; } .edit-view-field > label { flex: 0 0 130px; margin: 0; font-weight: normal; color: #888; font-size: 13px; } .edit-view-row { display: flex; align-items: center; padding: 3px 0; } .edit-view-row .row-type { flex: 0 0 130px; } /* The mark carries a vertical-align that puts its centre where a real bullet's would be, and in a flex row that property is ignored: the star is a flex item, so align-items centres its box in the row and nothing consults the text beside it. The row is not quite symmetrical about its text - the inputs pad 2px top and bottom and then draw a 1px rule under - so centred lands 0.52px below where the type wants it, and the mark read 4.56px above the baseline against the 5.08px it reads everywhere else. Given back here rather than by making the row align on baselines, which would throw away the vertical-align as well and leave the mark 1.2px lower still. */ .edit-view-row .row-star { position: relative; top: -0.516px; } /* An address is a block of lines rather than one line, so its handle, star and remove sit in the same left gutter its label would, stacked along the top of the block instead of down the middle of it. */ .edit-view-address { position: relative; padding: 6px 0 6px 130px; } .edit-view-address .row-handle { position: absolute; left: 0; top: 8px; } /* An address is a stack of lines, so its three controls sit in a gutter beside the whole block rather than on any one line, and this mark is placed rather than laid out. Placed at 6px it read 7.06px above the first line's baseline where every other mark in the app reads 5.08px - high enough to belong to the heading above it. 7.98px is the 6px plus the 1.98px of that difference, which puts it on the Type line the way the rest are on theirs. */ .edit-view-address .row-star { position: absolute; left: 24px; top: 7.98px; } .edit-view-address .row-remove { position: absolute; left: 48px; top: 6px; } .edit-view-form input { flex: 1; min-width: 0; background: none; border: 0; border-bottom: 1px solid #e6e3e3; padding: 2px 0; font-size: 11.5pt; } .edit-view-address input { display: block; width: 100%; margin-bottom: 2px; } .edit-view-form input:hover { border-bottom-color: #d8d5d5; } .edit-view-form input:focus { outline: 0; border-bottom-color: #555; } .edit-view-form .row-remove, .edit-view-form .row-star { text-align: center; color: #555; cursor: pointer; } .edit-view-form .row-remove { flex: 0 0 22px; } /* The star's column was 22px around a mark that filled it. Around a 7.4px bullet the same column is 7px of air on each side, and the word it belongs to ends up further from it than from the next word along. 3.668px of it now, ink to word: two thirds of the 5.5px the item form was showing when that spacing was approved by eye. One number for both frames, which they were not before - this row is a flex line, so the newline in the template between the mark and the word is dropped and the whole distance is this padding; the item form is inline, so the same newline collapsed to a Times word space and was silently doing most of the spacing there. That whitespace has been taken out of the templates so the gap is a number in this file in both places rather than a number here and an accident there. 3.507px and not 3.668px because the mark's 7.692px box holds 0.161px of air past the ink on that side. The column is 4px + the box + this. */ .edit-view-form .row-star { flex: 0 0 15.2px; padding: 0 3.507px 0 4px; } .edit-view-form .row-remove { opacity: .35; } .edit-view-form .row-remove:hover { opacity: 1; } /* A mark that is on stays on. The rest sit back until the row is reached for, so a filled bullet is the one thing in the column that reads at a glance. Sitting back is a lighter COLOUR here and not the opacity the remove beside it uses, because opacity on the wrapper multiplies down into the mark and there is no way back up from a child: the old rule set opacity:1 on the glyph inside a .35 parent and got .35, so the on state was only ever the darker grey and never the brighter one. A colour the mark inherits leaves .mark-bullet.on free to overrule it outright. */ .edit-view-form .row-star { color: #bbb; } .edit-view-form .row-star:hover { color: #555; } .edit-view-form .row-handle { flex: 0 0 18px; text-align: center; color: #555; opacity: .25; cursor: move; } .edit-view-form .row-handle:hover { opacity: .8; } /* The dragged row travels as itself rather than leaving the form to reflow around a gap the eye cannot follow. */ .edit-view-form .ui-sortable-helper { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .edit-view-form .row-add { display: inline-block; margin-top: 6px; font-size: 12px; opacity: .6; } /* What an address is - home, studio, the one the invoices go to. Quieter than the address itself, which is what is being said. Quieter in COLOUR and not in size any more. It carries a bullet, and a bullet drawn for the floor size in a line two points under it is a mark that does not belong to its own line: this label was the one place in the item form still at 12px and the only place the mark sat wrong. Grey does the whole of the stepping-back now. */ .address-label { color: #888; } /* One entry of the header, on one line, beginning at the column's left edge - the same edge the name, the qualifier line and the chips begin at. These were bootstrap rows with the type in a col-sm-4 and the value in a col-sm-8, which is a column two words wide holding a word that is often not there, and 119px of indent on every value in the header for the sake of it. */ .part-row { position: relative; padding-right: 16px; } /* Said before the value and only when there is one. Grey rather than smaller, the same step back .address-label takes - it is the label the entry was filed under, and the entry is the thing being read. */ .part-type { color: #888; } /* What the item is and where it is, a line each, like every other field in the header. They were one line with a comma between them, which read as one fact rather than two and left a gap between them whenever either ran long. Here rather than in the template because an h4's content model is phrasing content: wrapping each in a div would be asking the parser to keep something it is entitled to move out. The two elements survive their directives - neither replaces - so there is something to set this on. Inside the header only: on a collapsed row the same two fields belong side by side on the one line the row has. Both are inline-block in their own right - see .qualifier-field and .company-field - so without this the two sit on one line again, which is what they were before #190. */ .content-header h4 qualifier-field, .head-fields h4 qualifier-field, .content-header h4 company-field, .head-fields h4 company-field { display: block; } /* --------------------------------------------------------------------------- The resting header's fields (#205) One block per field, in the registry's order, which is the order the chip strip was last dragged into. The qualifier and the company are two of them now rather than a fixed line above them, so the gaps have to come from the block's position in the loop rather than from which element it happens to be. Said as a gap ABOVE each block rather than below. Below was what the four hand-written blocks used - .edit-block's 15px - and it cannot express this: the space between the company and the email under it belonged to the h4's container, so a company that is no longer above the emails takes the gap with it and the two run together. Above, the gap belongs to whatever is under it, wherever it lands. --------------------------------------------------------------------------- */ .head-fields > * { margin-top: 15px; } /* The first has none. The heading above it has already left the room - the same 0 the qualifier line has always had under the name, kept now that any field can be the one sitting there. */ .head-fields > *:first-child { margin-top: 0; } /* What the item is and where it works are two lines of one answer, so they pack against each other - but only against each other, and only while the strip has left them adjacent. Anything else that comes between them separates them, which is the right answer to a drag that deliberately put something there. */ .head-fields > .head-line { margin-bottom: 0; } .head-fields > .head-line + .head-line { margin-top: 0; } /* The face and the size the qualifier-and-company line has always had. It came from .content-header h4 while the line was inside the header; out here that selector no longer reaches, and inheriting the panel's Times at 11.5pt would be a change nobody asked for in a ticket about order. */ .head-fields h4 { font-family: 'Yanone Kaffeesatz', serif; font-weight: 500; margin: 0; } /* The header's own column, widened while the middle one is empty. 66.667% is bootstrap's col-sm-8, written out because the class it belongs to is the one being replaced; and inside the same breakpoint, because under it a col-sm-4 is already the full width and widening it would mean nothing. */ @media (min-width: 768px) { .header-wide { width: 66.66666667%; } /* #207. Widened, the header and the empty middle column are 100% between them, so the third column no longer fits on the line and floats down until it does. Bootstrap gives every .col-* a min-height of 1px, and one pixel of an otherwise empty column is all it takes: Status and Date sat at 205 in Full against 204 in Show info and Edit. Measured before it was touched - every margin in the row is 0, nothing collapses, and setting this to 0 in the live page brought the column up to 204 on its own. Said as "the column beside the widened one" rather than as a class of its own, because that is the whole condition: the middle column only has nothing in it while the header is wide, and it only costs the row a pixel while the two of them add up to the line. */ .header-wide + .col-sm-4 { min-height: 0; } } /* The +N under a phone, email, address or handle group in an opened item. Sits on a line of its own rather than trailing the last entry, because these groups are stacked blocks and not a comma-separated line the way the name, qualifier and company fields are. */ .part-more { display: block; margin-left: 4px; color: #999; cursor: pointer; font-size: .85em; } .part-more:hover, .part-more:focus { color: #ccc; text-decoration: none; } /* The same star in the item panel, where a row is click-to-edits in a grid rather than boxes in a form, so it cannot borrow the form's rules. 3.507px here matches the 3.507px the edit view pads with: 3.668px of daylight between the ink and the word once the mark's box gives back the 0.161px it holds past the ink. This used to be 1.5px and measured 5.5px, the difference being a Times word space the template was contributing from the newline after . The newline is gone; what is left is this. */ .content-form .row-star { color: #bbb; cursor: pointer; margin-right: 3.507px; } .content-form .row-star:hover { color: #555; } /* The other end of the same row, set to the same daylight: 3.668px between the word and the ink, whichever side of the word it is on. The generic 8px it had put the x nearly three times as far from the entry as the bullet is, which reads as the x belonging to the row rather than to the entry it takes away. Not the star's 3.507px, because the two marks hold different amounts of air inside the same box. The circle runs to its box - 0.161px a side - while the x is inscribed in that circle and stops 1.072px short of it, so an equal margin would be an unequal gap. The margin is the daylight minus the air the mark brings with it. */ .content-form .row-remove { margin-left: 2.594px; } .edit-view-form .row-add:hover { opacity: 1; } /* THE FIELD STRIP Every field an item can be given, in one line under the header. Nothing else: the five blocks that used to sit beneath this - each with its own "Add email" a foot under an Email chip that said the same thing - are the stack in the header now, which is where the fields are read and so where they are written. */ .field-panel { margin-top: 4px; padding-top: 10px; border-top: 1px solid #eee; } /* A fixed set of fields is a set you cannot see the edges of, and this is the edge. Wraps rather than scrolls - there is no count at which a field would rather be off screen than on a second line, and the customs anybody has named land on the end of it. */ .field-strip { display: flex; flex-wrap: wrap; margin-bottom: 12px; } /* A chip is a thing you can pick up, so it says so on the way past: it steps forward on hover and it is draggable. Every chip does one thing now - it adds - so there is no set state on it any more. What the item already has is in the header, with its own x. */ .field-chip { display: inline-flex; align-items: center; margin: 0 6px 6px 0; padding: 3px 10px; border: 1px solid #e0e0e0; border-radius: 12px; color: #999; cursor: pointer; white-space: nowrap; font-size: 13px; } .field-chip:hover, .field-chip:focus { color: #337ab7; border-color: #337ab7; text-decoration: none; } /* A "+" rather than a bullet. A bullet says "this one", and the chips were never a set to choose one from - they are eleven ways to add something, and the mark should say so before it is clicked rather than after. Set in the chip's own type rather than to the bullet's absolute 7.692px: this is a character on the line, not a mark drawn beside it. */ /* Not scoped to the chips any more. "Add time" was drawing an icon-font plus beside a strip of typeset ones - the same mark in two hands, and the icon's was the heavier of them by enough to read as a different control. There is one plus in the panel. */ .mark-plus { font-style: normal; margin-right: 3.507px; } /* Picked up. The strip is the target rather than a line inside it, so it says so as a whole - there is no thin strip to find. */ .field-panel-dragging { background: #fafcff; outline: 1px dashed #b8d4ee; } /* #202: the chip in hand. hidden rather than removed, because hidden it still holds its width - so the gap left in the strip is the gap the chip will land in, and nothing shifts at the moment it is let go. display:none would close the gap and make the strip jump twice for one move. */ .field-chip-carried { visibility: hidden; } /* Nothing here animates the chips into their new places. They are moved by ng-repeat re-ordering real elements, which a transform transition cannot see, and the FLIP dance that would see it is a lot of machinery for a strip that settles in one frame. The prompt cards this was ported from reflow the same way. */ /* THE FIELD STACK The fields the item actually has, one under the other in the header, which is where they are read and now where they are written. Nothing is side by side any more - a qualifier and a company sat on one line with a bare comma between them in the markup, and that comma was why neither could be taken away on its own. One size for the stack, and it is the size the type floor was settled at. Set here rather than per row so nothing inside can quietly be at 12 or 14: the marks are drawn to an absolute 7.692px and sit on the baseline of whatever they are beside, so a row two points under its neighbours is a mark that reads as belonging to a different line. */ .field-stack { font-size: 15.33px; /* The x sits at the end of its row, and the row is as wide as the column it is in, so without this the whole column of x's lands hard against the categories and the tags in the next third and reads as belonging to them. */ padding-right: 24px; } /* The gutter above is there to keep a column of x's off the categories in the next third. Readonly draws no x, so what it reserves is 24px of indent against nothing. */ .field-stack.readonly { padding-right: 0; } .field-group { margin-bottom: 4px; } /* The name of the group, over its rows, on the same left edge as everything under it. The 16px is the row's own padding-left said again rather than a number of its own, so the heading starts where the first mark on every row starts - the bullet on a single entry, the drag handle where there are several. Set at the stack's edge to begin with, which put it 16px left of everything it was naming. Quiet, and the same grey the entry's own label takes: it is not a value and it is not something to fill in, it is the answer to which field this is. Room above and none below, and its own line-height rather than the 18px it inherited for 11px text: a heading belongs to what follows it, and the leading under it was reading as a gap between the two. */ .group-label { margin: 14px 0 0; padding-left: 16px; color: #888; font-size: 11px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } /* Nothing above the first one - the stack has its own space at the top. */ .field-group:first-child .group-label { margin-top: 0; } /* Every row is the same row. The handle keeps a gutter of its own whether or not it is drawn - it only appears where there is more than one to reorder, and if it took its width with it the starred column would step in and out by 16px group by group. The gutter is reserved; only the icon comes and goes. */ .stack-row { position: relative; display: flex; align-items: baseline; padding-left: 16px; margin-bottom: 2px; } /* Every row in the stack is set at one size, the name included. The name used to keep the 30px it had as an h2, on the reasoning that it is what the item IS and the rows under it are only its details - and that reasoning cost more than it bought. A person's name is four boxes, and four boxes at 30px do not fit a third of a row: an empty one drew "- set - First Middle Last" as four grey words the size of a heading, which then wrapped and landed on top of the name below it. Sizing that back down only while the cursor was in the line fixed the typing and left the resting state as it was. The name is still the name in the viewer, where it is read rather than filled in. Edit mode is a form, and every line of a form is the same line. */ /* The name is not in the readonly stack at all. The viewer's h2 holds it in both modes now and showGroup hands the name groups back to it - see content-viewer.html and fieldStack.directive. Three rules stood here, and every one of them was an attempt to make a second element look like the first: #184 gave it the h2's face, #191 took off the bullet and the 16px handle gutter, #193 matched the leading and the left edge. All three go with the element they were dressing. The difference none of them could have closed is the reason: the h2 wraps a long name (.name-field-full, further down) and this row clipped it with an ellipsis, so the two agreed about every short name and disagreed about every long one. Matching is a promise two elements make; one element does not have to make it. Not the pronouns either - a field of their own since #123, drawn in the same h2. */ /* In the row rather than beside it. Absolute at left:0 put the handle in the 16px gutter the row reserves, which is 16px to the LEFT of the bullet - so the one mark in the panel that is not part of a column hung out past every column there is, and read as belonging to the panel's edge rather than to its row. In flow it starts where the bullets start and carries its row 16px to the right, which is the whole of what it costs: a group that can be reordered is indented from one that cannot, by the width of the thing that says so. */ .row-handle { flex: 0 0 16px; color: #bbb; cursor: move; } .row-handle:hover, .row-handle:focus { color: #555; text-decoration: none; } /* Sized to what it holds rather than to the row, so the x that follows it lands against the end of the entry instead of out at the right margin. Stretching it was what gave the x a column of its own - a column of eight identical x's reads as a feature of the panel, where one x after a phone number reads as belonging to the phone number. */ .row-body { display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; } /* A name is one line of boxes rather than a type and a value, so it is not the two-column row the rest are. */ .field-group-name_person .row-body, .field-group-name_thing .row-body, .field-group-pronouns .row-body { display: block; } /* An address is a pair row whose value happens to be several lines. The street sits after "- set -" the way a number sits after "Mobile" - one inline flow, so the space between them is the space in the markup rather than a margin picked to look like one - and the rest of the address hangs under the street. Three rules stood here, all three for a layout that put the address on a line of its own beneath its type: display:contents to dissolve the body, a 100%-wide block ordered after everything else, an indent to stand it back where the dissolved box used to start. That layout left a whole row between the label and the thing it labels, and left the x sitting after the words "- set -" as though "- set -" were what it removed. Nothing is needed in their place. Left alone, the body is a box as wide as the address, the type and the lines flow inside it, and the x follows the box. */ /* Grey at rest, not invisible at rest. The old one was #ddd until the row was hovered, which is the same mistake the "+"s made: a control you cannot see is a control that is not there. */ .row-remove { margin-left: 8px; color: #bbb; cursor: pointer; } /* The x takes the whole entry away, so it belongs at the end of the whole entry - the last line of it, not the first. The row is a flex line set on its baseline, and a baseline is the first line's baseline however many lines follow it, so a value that wrapped left its x up on line one with the rest of the entry running on underneath. Written for every row rather than for the address alone, which is only the entry that is always several lines: any value long enough to wrap is the same case. Costs nothing on a row that does not wrap - there the body and the x are both 18px tall, so their bottoms are already where their baselines put them. */ .stack-row .row-remove { align-self: flex-end; } /* Darkens to the type it sits beside, the way the star does. It went red, which is the one colour in the panel that means "careful" - and a red warning on a control used to tidy up a row you have just added reads as a bigger act than it is. */ .row-remove:hover, .row-remove:focus { color: #333; text-decoration: none; } /* The label the entry was filed under - Work, Home, Mobile. Quieter and narrower than the entry, which is the one that matters. */ .field-stack .field-type { flex: 0 0 120px; color: #888; } .field-stack .field-value { flex: 1; min-width: 0; } /* The label the qualifier itself was filed under, said last because it labels the first box and not the row. Grey like the other label on the row, and held apart from the value by a space of its own - the boxes on either side of it are in inline flow and would otherwise run into it. */ .field-stack .field-extra { margin-left: 6px; color: #888; } /* A custom field names itself before it says its type, and that name is the closest thing it has to a label of its own, so it reads as one. */ .field-stack .field-label { flex: 0 0 120px; color: #555; } .field-stack .name-part { margin-right: 6px; } /* The gap is between the boxes, so the last one has nothing to be apart from. Left on, it put the name's x 6px further out than every other row's - the one row where the spacing was set by the word before the x rather than by the rule for all of them. */ .field-stack .name-part:last-child { margin-right: 0; } /* And a box with nothing in it is not one of the boxes. Readonly already draws nothing for an empty part - the input and the placeholder both go - but it was still an element with the 6px above on it, so a person with no first or middle name had Show info start the name 12px right of where the header draws it (#193). Editing keeps them: there the empty box is the offer to fill it in. */ .field-stack .name-part.readonly.empty { display: none; } /* Sized to what goes in it. The honorific is the one box here that is a plain input rather than a click-to-edit, because it has a list behind it - and it offers nothing until you type, a box that suggests "Mr" being told "Mr" more often than it is told the truth. */ .field-stack .name-honorific { width: 3em; border: none; background: none; font: inherit; padding: 0; } /* The one box on the line that cannot size itself to what is in it. Every other part of a name is a click-to-edit, which is a span until it is clicked, so it is exactly as wide as the word - and an input is as wide as it was told to be, so "Dr" sat in 3em and left a gap the width of another name before the first name. 3em stays as the floor for anything that cannot do this, because an input with width:auto is twenty characters wide, which is the same fault an order of magnitude worse. */ @supports (field-sizing: content) { .field-stack .name-honorific { field-sizing: content; width: auto; } } /* The one "Add" left anywhere in the editor. Time has no chip in the strip - when an item happened is not one of the things it is - so it is the one field that still offers its own way in. */ .field-add { display: inline-block; margin-top: 2px; color: #999; cursor: pointer; font-size: 13px; } .field-add:hover, .field-add:focus { color: #337ab7; text-decoration: none; } /* A custom element is inline until it is told otherwise, and this one holds two form-groups. Left inline, the margins the blocks carry collapse out through it and Status sits hard against the three dots above it - which reads as the column having lost its top margin rather than as the wrapper being the wrong kind of box. The rules beneath still key off .status-block and .time-block, which the shared template keeps, so nothing else in here had to move when the markup did. */ status-time { display: block; } /* Status sits above Date now, so the two have to be squared to the same left edge - see content-editor.html. The 10px is the status-editor's own, from where it used to sit inline after a label on a summary row; here it is under its label with a block beneath it that starts at zero, so the 10px reads as Status being indented from Date for no reason. Set on the block rather than taken off .status-editor, because the summary row still wants it: there the input follows the words on the same line. */ .status-block .status-editor { margin-left: 0; } /* .status-block .stack-row used to be padded by the star column's whole width - 16px of handle gutter, the bullet's box, and the daylight after it - so that the status would sit at the dates' TYPES rather than at their bullets, the two blocks reading as one stack. That was true while the labels sat above their values and every row in the column started at the same x. With the value beside its own label they do not: Status starts after "Status" and a date starts after "Date". There is no shared column left to line up to, so the indent is 24.7px of nothing. Taken off in .label-left below, along with the row's own 16px. */ /* THE HEADER'S TWO COLUMNS: the value beside its own label, not under it. Read down, a label above its value spends a whole line saying one word and puts the thing you came to read on the next one - eight lines for four fields, in two columns that are mostly white. Beside it, each field is one line that begins with what it is. Hugging, rather than in a label column of a fixed width: these are four fields with nothing to compare across them, so a column would only be white space with a ragged right edge in it. "Status" is six letters and "Categories" is ten, and there is no reading in which those two want to start their values at the same x. The wrap goes back to the COLUMN's left edge and not to the label's, which is what an inline flow does by default and the reason the whole of this is inline rather than a flex row: a hanging indent would put a second line of tags in a third column of its own, and the item is only three columns wide. Nothing is counted off as a +N and nothing is cut - the field wraps at the column and takes the lines it takes. */ .label-left > label { display: inline; float: none; margin: 0 0.45em 0 0; /* Categories' label is a .button, which is 8px of padding on each side. The other three labels are not, so that 8px was the Edit panel's alone and the value after it started 8px further right than the same value in Show info. The label reads as clickable the way everything else in these two columns does - a pointer and the hover colour - and none of that needs a box around it. */ padding: 0; } /* Nothing in these two columns carries a disclosure icon, and this one was carried by the one label that only exists in Edit. Font-awesome sets line-height:1 on .fa, so the caret was 15.3px tall in an 18px line and inline-block on the baseline: it made the Categories block 4px taller than the same block in Show info and pushed Tags 4px down with it, and its own glyph plus the .button padding started the category chips 25.6px further right. That is the centre column telling you which mode you are in, which is the one thing the three modes are not allowed to do. Kept while the picker is open, where it is the way to shut it again and where the layout is deliberately not the same anyway - see the comment on .expanded below and in content-editor.html: open, this stops being a value and becomes a tree. */ .label-left:not(.expanded) > label > .fa { display: none; } .label-left.expanded > label > .fa { margin-left: 0.35em; } /* Font-awesome sets line-height:1 on .fa, so an icon is 15.33px tall sitting on the baseline of an 18px line and pushes the line box 4px taller than a line of words does. Every icon in these two columns is Edit's - the caret above, the tick box on each category chip, the x on a tag - so the blocks BELOW them stood 4px lower in Edit than the same blocks in Show info, which is the centre column telling you which mode you are in. An icon on a line of text is a letter on that line, and is set as one. inline rather than font-awesome's inline-block for the same reason: an inline-block with no text in it - and these have none, the glyph arrives through :before - takes its baseline from the bottom of its own box, so the whole box stands above the line's baseline and the descender space is added underneath. Setting the line-height alone made that 1px worse. */ .label-left .fa { display: inline; line-height: inherit; } .label-left > .field-rows, .label-left > .categories { display: inline; } /* The rows keep their flex - a row is still a bullet, a type and a value, laid out in that order - and become inline-level so that they flow after the label and wrap at the column. The 16px is the handle gutter, reserved on every row in the stack so the starred column cannot step in and out group by group. Nothing in these two blocks is draggable, so here it is 16px of nothing in front of a value that has a label to the left of it already. */ .label-left .stack-row { display: inline-flex; padding-left: 0; margin-bottom: 0; } /* Date is the one field here that can hold more than one value, and a list is not a flowing value: entry two belongs under entry one, squared to it, not carried on after it like the next word in a sentence. So the rows go in a block of their own that sits beside the label, and inside it they stack. Add date is in that block rather than after it, which puts it on its own line at the rows' left edge instead of trailing the last date. It is the way into a NEW row, so it reads as the next row's place rather than as something belonging to the last one. */ .label-left.time-block > .field-rows { display: inline-block; vertical-align: top; } .label-left.time-block .stack-row { display: flex; } .label-left.time-block .field-add { display: block; } /* The stack pulled left by its own handle gutter, so that the thing the eye follows down the column - the bullet at the head of every row - starts where the chips under the header start. The gutter is 16px reserved on every row for a drag handle, which puts a row's left EDGE 16px to the left of its bullet; squaring the edges instead would set the bullets 16px in from the chips and the column would read as indented from the strip that belongs to it. The handle ends up in the panel's own left padding, which is where a handle wants to be anyway. Editing only. A readonly row has no handle and no bullet (#191), and its name has to land exactly where the header's h2 does. */ .field-stack:not(.readonly) { margin-left: -16px; } /* Readonly reserves nothing, because readonly draws nothing to reserve for: the handle is the only thing that ever stands in that gutter and its ng-if takes it away the moment the panel is not editable. Reserved anyway, it was 16px of indent against an absence - so Show info's whole column of bullets sat 16px right of Edit's, and of the chips under the header, for want of a control that mode does not have. The pull above and this are the same measure said two ways round. Edit keeps its gutter and moves the stack out from under it; Show has no gutter to move out from. */ .field-stack.readonly .stack-row { padding-left: 0; } /* The three dots out of the flow entirely, so the column beneath them starts at the top of the third and lines up with the Categories in the middle one. As a row above the column they made an 18px step that no rule in the header could explain: the two columns are the same field-block stack and only one of them began under something. Both panels use it, which is why content-editor.html had to be flattened out of its layout="column" first - a float does nothing inside a flex parent. */ .content-detail .dots-row { float: right; } /* A gap between one field and the next, in both columns and to the same measure - Categories to Tags reads exactly as Status to Date. With the labels inline the fields no longer have a column of white down their left to separate them, so what tells you Tags is a new field and not more Categories is the gap above it: it has to be big enough to say so and no bigger. Measured rather than guessed, because it was reported too big twice. A line in this column is 18px - label and rows are both line-height 18 - and the gap has never been two of them: 1.4em was 21px, one skipped line and a little over; 1em was 15.3px, a little under. One skipped line is still a hole, two fields with a whole empty line between them reading as two blocks rather than as one column. So there is nothing here to halve, and the answer is to take a third off what is left: .7em, 10.7px, a little over half a line - enough to say "new field" and not enough to break the column in two. On the gap between and not below, so the last field in a column does not push the panel's floor down by a line neither column is using. */ .label-left { margin-bottom: 0; } .label-left + .label-left { margin-top: 0.7em; } /* Categories, shut: the list of categories the item is IN, flowing after its label like any other value. The ul is Angular's recursive picker template, one li per category with the children nested inside, so the li has to lose its block-ness for the value to flow at all - and the nested list with it, since a branch drawn under a chip that is itself mid-line is a list starting in the middle of a sentence. Open, none of that applies: see content-editor.html. */ .label-left .categories, .label-left .categories li { display: inline; list-style: none; padding-left: 0; margin: 0; /* ul.categories is the main nav's list as well, and .categories li there is 14px DIN on a 22px line, uppercased. All of that arrived here with the class name: the same two categories were the panel's own face on an 18px line in Show info and the nav's face on a 22px line in Edit, which set the Categories block 5px taller in Edit and put Tags 4px below where Show info puts it. In this column a category is a value like any other and reads as the text around it. */ font: inherit; text-transform: inherit; } .label-left .categories li > .button { display: inline; /* The same daylight the viewer puts between two categories - see .label-left .cat, and no box around them: .button is 8px of padding on each side, which is 16px the viewer does not spend and the reason the same category read 118px wide in Edit and 102px wide in Show info. */ margin-right: 0.6em; padding: 0; } /* Shut, a category here is the name and nothing else, exactly as the viewer draws it. The tick boxes belong to the picker: every row in the shut list is a row the item is in, so every box in it is ticked, and a mark that is the same on every line is not telling you anything. Drawn, they made Edit's two categories 69px wider than Show info's two - wide enough to fall off the label's line and start a second one. */ .label-left:not(.expanded) .categories .fa { display: none; } .label-left.expanded .categories .fa { margin-right: 0.35em; } .label-left:not(.expanded) .categories li ul { display: none; } /* The picker, open. The rule above is suspended and the tree is a tree again: blocks, indented, one branch under another. */ .label-left.expanded .categories, .label-left.expanded .categories li, .label-left.expanded .categories li > .button { display: block; } .label-left.expanded .categories li ul { padding-left: 12px; } /* The viewer's categories and a folder's parent, which are names and not tick boxes - nothing is offered to click, so there is no chip and no box, only the words with enough daylight between them that two categories do not read as one. */ .label-left .cat { display: inline-block; margin-right: 0.6em; } /* A folder's Parent in the panel that lets you change it. The editor wraps the name in .button so there is something to click, and .button is padded 0 8px everywhere else in the app - which put the same word 8px further right in Edit than the viewer draws it. The two columns beside the name are the one thing the three modes may not disagree about, so the 8px in FRONT goes: a value's left edge is where the column starts. The daylight after it stays, which is what .cat spends its 0.6em on. Scoped to the direct child of a label-left block, because .button is padded on purpose everywhere it is a control with a box of its own, and this is the one place it stands in for a plain value. */ .label-left > .button { padding-left: 0; } /* The box that adds a tag, after the chips rather than instead of them. layout="row" is Material's flex row and would take the whole width on a line of its own; here it is the last thing on a line that already has the chips on it. */ .tags-editor.no-label { display: inline-flex; vertical-align: baseline; min-width: 80px; } /* The datepicker brings its own type size with it, and it was the last thing in the item still set under the floor - 14px beside the 15.33px of the "Edited" it sits next to on the same row. Its own furniture stays the size it was drawn; it is the text that has to agree with the line it is on. */ .time-block .md-datepicker-input { font-size: 15.33px; /* And no floor under its width. Material sets 120px of minimum, which is the box the x was measured from - see below. */ min-width: 0; } /* No rule under a date, in any mode. The container ships a 1px underline, Material drawing an input the way Material draws inputs, and nothing else in this panel is underlined: a status, a company, an email and a phone are all plain text you click into, and the date was the one entry announcing itself as a form field. The focused state is 2px of the same and goes with it. */ .time-block .md-datepicker-input-container, .time-block .md-datepicker-input-container.md-datepicker-focused { margin-left: 0; border-bottom: none; } /* Date is the one field drawn outside the stack, so it never picked up the measure the stack gives every other type - and both halves were the worse for it. Read, the two spans had no width at all and "Release Date" ran straight into "6/24/16". Edited, each type hugged its own text, so the dates started at a different place on every row while the phones above them held a column. The same 120px the stack uses, on both halves, because it is the same field seen from two sides. The 120px is gone with the column it was holding. That measure was there so the dates would start at the same x row after row, which is a thing worth having while the rows sit under a label of their own and line up under each other. They do not now: the first row starts after the word "Date" and the second starts at the column's left edge, so a fixed type box buys a ragged pair of dates and a hole after a short type. The gap it also provided - "Release Date" running into "6/24/16" - is kept, as a gap. */ .time-block .field-type { flex: 0 0 auto; margin-right: 0.45em; color: #888; } /* The datepicker ships two ways into the same calendar - the icon at the front of the line and a caret at the end of it - and the caret is the one that had to go: it sat hard against the x that takes the date away, so a click meant for the x opened the calendar instead. Nothing is lost with it. The icon opens the same pane. The x closes up behind it by the caret's width, which is the point - it ends up the same 2.594px from its entry as every other x in the panel. The entry it is measured from is the input's box, and that box is now the width of the date inside it - see datepickerFit.directive - so there is no daylight left between the two. It was 58px of it while the box was a fixed 120px, which is how the one correctly-measured x in the panel came to be the one that looked wrong. */ .time-block .md-datepicker-triangle-button { display: none; } /* THE CALENDAR MARK, and the box it is drawn in. The artwork is swapped for Material's in datepickerToday.directive; the size is decided here, for the reason given above the wheel - what a mark looks like is the mark's business, where it sits and how big it is belongs to the thing it sits in. 12px tall against the 24 it shipped at, and 9.6px wide - a quarter off the size, then a fifth off the width. The line it sits on is 15.33px text, so at 24 the mark was half again the height of the words beside it and read as the loudest thing in a row whose subject is a date. At 12 it sits under the type, which is where a mark that opens something belongs - present, not announcing itself. The narrowing is the artwork's own proportion answered: the traced glyph is very nearly square, and a square calendar in a line of text reads as a box; taking a fifth off the width gives it the upright proportion a page of a calendar actually has. Squashing needs preserveAspectRatio="none" on the svg, set where the mark is drawn in datepickerToday.directive. Without it a 9.6x12 box letterboxes a 24x24 viewBox - the drawing centres itself at 9.6 square and the two spare pixels go to whitespace, so the mark comes out smaller instead of narrower. The one cost is that the vertical strokes thin by the same fifth as the width; at this weight that is not visible, and it is what squashing means. The button comes down with it. md-icon-button is 40px square with 8px of padding (angular-material.css:788), which is a finger's target; leaving it at 40 around a 12px mark would have left 28px of empty circle and pushed the date along the row for no reason. 20 with 4px of padding gives the mark its 12 and keeps a border of the same proportion. Still comfortably clickable with a mouse, which is what this app is used with, and the only thing on the row it could crowd is an input 120px wide. min-height as well as height. .md-button carries min-height:36px, and md-icon-button overrides min-WIDTH only (angular-material.css:788) - so height alone left the box 36px tall around the mark, which is the row's line height decided by a button nobody can see the edges of. The mark is centred in that box by margin rather than by the padding, because the box is square and the mark is not: 4px each side of a 9.6px drawing does not add up to 20. WHERE IT SITS ON THE LINE. The mark stands on the baseline of the type beside it, the way a capital does, rather than floating in the middle of the line - it is read as a word in the row, not as furniture attached to the input. vertical-align:middle had it 2.56px low, hanging below the letters it sits between. baseline works here for a reason that is worth naming, because it is not the obvious one. An inline-block takes its baseline from its last line box, and this one has none: the mark is a block-level svg. The rule for that case puts the box's baseline at its bottom MARGIN edge - which would be 4px of padding BELOW the drawing - and yet the measurement says the drawing's own bottom lands exactly on the type's baseline. The around the svg is what does it: still an inline box, so it does establish a line box, and the block inside it puts that box's bottom at the drawing's bottom. Swept rather than reasoned into place - middle, 0, 1, 2, 2.5, 3, 4px measured against a zero-height baseline probe in the type - and 0 came back exactly 0. 2px each side rather than 4 on the right and none on the left. The box is 20 wide around a 9.6 drawing, so 5.2px of it is already air on each side; the margins are what is added to that, and unequal margins made the mark sit against the word before it (5.2px) and away from the date after it (9.2px) - it read as belonging to the type rather than to the date it opens. Even margins put 7.2px on both sides, which is the same air on each side of a mark that belongs to neither. No stroke here. The mark is a filled path traced from the artwork, holes and all, so currentColor fills it rather than drawing it - which is the one way it differs from .mark-cog, whose outline is stroked. Nothing sets the colour, so it inherits the app's #333 the way the bullet and the wheel do, rather than the 0.54 black Material gives its own icons: it belongs to the line of text it sits in. */ .md-datepicker-button.md-icon-button { width: 20px; height: 20px; min-height: 20px; padding: 4px; line-height: 12px; margin: 0 2px; vertical-align: baseline; } .mark-cal svg { display: block; width: 9.6px; height: 12px; margin: 0 auto; } .mark-cal svg path { fill: currentColor; } /* The calendar drawn three quarters the size it ships at. It is a month of a person's life in a box 340px wide - larger than the item it is being filed against, and it arrives over the top of that item, so the thing you are looking at disappears behind the way you were going to change one line of it. Scaled rather than resized, and that is not a shortcut. The calendar is a virtual repeater whose row height is a number in the library's JavaScript - 265px a month, 88px a year (angular-material.js:26098, :26714) - and it scrolls to a month by multiplying that number by how many months away it is (:26315, :26856). Give the cells a smaller height in CSS and the arithmetic is unchanged, so February scrolls to where February used to be and lands somewhere in the middle of March. A transform leaves every number the library holds exactly as it was and changes only the size of the box they are drawn in. On .md-pane-open rather than on the pane, because the pane's own rule is scale(0) - the closed end of the animation that opens it. Written here and not under .time-block because the pane is appended to the body, not to the row: there is no row selector that can reach it. Both pickers in the app get the same calendar, which is right. */ .md-datepicker-calendar-pane.md-pane-open { -webkit-transform: scale(0.75); transform: scale(0.75); } /* The strip the Today and month controls sit on, under the grid. See datepickerToday.directive. It is inside .md-datepicker-calendar, which is the box that fades in with the pane, so it arrives with the calendar rather than a moment before it. Its own background because the pane's is transparent - the white behind a calendar is the calendar's own, and this strip is beside the calendar rather than inside it. The word at one end and the arrows at the other: one names a day and the two move the month, and putting them apart is the only thing that says they are not a set of three. */ .md-datepicker-today-bar { background: #fff; padding: 0 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; } /* Set like the month label above it - the two are the calendar's own words rather than its numbers - and coloured like every other way out of a field in this app. */ .md-datepicker-today { border: 0; background: none; padding: 4px 8px; font-size: 14px; font-weight: 500; color: #337ab7; cursor: pointer; text-transform: uppercase; } .md-datepicker-today:hover, .md-datepicker-today:focus { color: #23527c; outline: none; } /* The two month arrows. Larger than the type beside them because a chevron drawn at text size is a few pixels of stroke, and at three quarters scale a few pixels is a smudge; the box each one sits in is what has to be worth aiming at, so the padding is set before the glyph is. Grey rather than blue: Today says what it does in a word, and these have only their shape to say it with, so they hold back until the pointer is on them. */ .md-datepicker-step button { border: 0; background: none; padding: 2px 10px; font-size: 20px; line-height: 20px; color: #999; cursor: pointer; } .md-datepicker-step button:hover, .md-datepicker-step button:focus { color: #337ab7; outline: none; } /* The month label is already the way to the year - clicking it swaps the grid of days for a grid of years - and it already carries a cursor and a small chevron that say so. Coloured as well, because at three quarters size the chevron is four pixels of grey beside grey type, and a heading is what a month name looks like until something says otherwise. Not the disabled one: the library marks a label disabled when the whole month is past the picker's max date, and gives it no click handler and no chevron. Colouring it would offer a press that does nothing. Scoped to md-calendar-month because the year view reuses the same class name for the year headings, and those are headings - the only thing to click in that view is a year in the grid. */ md-calendar-month .md-calendar-month-label:not(.md-calendar-month-label-disabled) { color: #337ab7; text-decoration: underline; } .edit-view-section .categories.selector ul { padding-left: 18px; list-style: none; } .edit-view-section .categories.selector { padding-left: 0; list-style: none; } /* --------------------------------------------------------------------------- Name field The name of an item reads as its starred rows separated by commas - a single name, a full name with an honorific, pronouns. It follows the company field's shape exactly: a row gets the names and nothing else, the item view also gets a +N that opens the rows that did not fit, and the editor - reached by the three-dot Edit - shows every row including the blank ones, with a star and a drag handle on each. The editor floats above the row rather than sitting in the flow, so opening it doesn't resize the list. --------------------------------------------------------------------------- */ .name-field { display: inline-block; vertical-align: top; position: relative; max-width: 100%; } .name-display { position: relative; padding-right: 18px; /* The rows read as one line separated by commas, so the trimming happens here rather than on each row, and the rows carry no padding of their own or the comma would drift away from the name it belongs to. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } .name-row-text, .name-sep { color: inherit; } .name-placeholder { display: inline; color: #555; cursor: pointer; opacity: .45; transition: color .25s ease; } .name-placeholder:hover, .name-placeholder:focus { color: #ccc; text-decoration: none; } /* The +N only appears where the field was given show-rest, which is the item view. A row has none, so nothing here reaches one. */ .name-more { display: inline; margin-left: 4px; color: #999; cursor: pointer; font-size: .85em; } .name-more:hover, .name-more:focus { color: #ccc; text-decoration: none; } /* One line is right for a row, which is why the display trims itself. Opened as an item the rows are allowed to run on, or the ones the +N just revealed would fall off the end of a line that cannot grow. */ .name-field-full .name-display { overflow: visible; white-space: normal; } .name-pencil { position: absolute; top: 0; right: 0; color: #555; cursor: pointer; font-size: 11px; opacity: 0; transition: opacity .2s ease; } .name-field:hover .name-pencil, .contact-summary:hover .name-pencil { opacity: .55; } .name-pencil:hover { opacity: 1; color: #555; text-decoration: none; } .name-editor { position: absolute; top: -6px; left: 0; z-index: 60; min-width: 300px; padding: 8px; background: #fff; border: 1px solid #d8d5d5; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 11.5pt; white-space: normal; } .name-rows { list-style: none; margin: 0 0 6px; padding: 0; } .name-row { display: flex; align-items: center; padding: 3px 0; } .name-row .handle { cursor: move; opacity: .3; margin-right: 6px; font-size: 11px; } /* The margin is the gap here, the mark being inline rather than in a column of its own, and the svg box carrying only 0.16px of air beside the ink. 3.507px is what the edit view pads with and what the item panel margins with: 3.668px of daylight, ink to word, in all three. */ /* One behaviour for the mark wherever it appears: grey at rest, black under the pointer, nav-blue once set. It read black at rest here and stayed black on the way past, so on this row alone the mark had nothing to say until it was clicked - and two of the three states looked the same. .mark-bullet.on is what makes it blue and is set on the mark itself, so it overrules either of these outright. */ .name-row .name-star { color: #bbb; cursor: pointer; margin-right: 3.507px; } .name-row .name-star:hover { color: #555; } /* The full-name row holds four boxes on one line, so they share the space the other rows give to a single box. */ .name-row .name-parts { flex: 1; min-width: 0; display: flex; } .name-row .name-parts > span { flex: 1; min-width: 0; display: flex; } .name-row input { flex: 1; min-width: 0; background: none; border: 0; border-bottom: 1px solid transparent; padding: 1px 0; margin-right: 4px; font-size: 11.5pt; text-overflow: ellipsis; } .name-row input:last-child { margin-right: 0; } .name-row input:hover { border-bottom-color: #d8d5d5; } .name-row input:focus { outline: 0; border-bottom-color: #555; } /* An honorific is a word or two, and letting it share equally would squeeze the three name boxes beside it. */ .name-row .name-honorific { flex: 0 0 42px; } .name-actions { text-align: right; } .name-actions .button { font-size: 11.5pt; } /* What an item is, beside where it is. Reads like the company field because it is the same shape: starred entries, commas between, a +N where the caller asked for one. The type is not shown in the collapsed view, only in the editor. */ .qualifier-field { display: inline-block; vertical-align: top; position: relative; max-width: 100%; } .qualifier-display { position: relative; padding-right: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } .qualifier-name, .qualifier-sep { color: #555; } .qualifier-placeholder { display: inline; color: #555; cursor: pointer; opacity: .45; transition: color .25s ease; } .qualifier-placeholder:hover { color: #ccc; text-decoration: none; } /* The +N only appears where the field was given show-rest, which is the item view. A row has none, so nothing here reaches one. */ .qualifier-more { display: inline; margin-left: 4px; color: #999; cursor: pointer; font-size: .85em; } .qualifier-more:hover, .qualifier-more:focus { color: #ccc; text-decoration: none; } .qualifier-field-full .qualifier-display { overflow: visible; white-space: normal; } .qualifier-pencil { position: absolute; top: 0; right: 0; color: #555; cursor: pointer; font-size: 11px; opacity: 0; transition: opacity .2s ease; } .qualifier-field:hover .qualifier-pencil, .contact-summary:hover .qualifier-pencil { opacity: .55; } .qualifier-pencil:hover { opacity: 1; color: #555; text-decoration: none; } .qualifier-editor { position: absolute; top: -6px; left: 0; z-index: 60; min-width: 280px; padding: 8px; background: #fff; border: 1px solid #d8d5d5; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 11.5pt; white-space: normal; } .qualifier-rows { list-style: none; margin: 0 0 6px; padding: 0; } .qualifier-row { display: flex; align-items: center; padding: 3px 0; } .qualifier-row .handle { cursor: move; opacity: .3; margin-right: 6px; font-size: 11px; } .qualifier-row .qualifier-remove { color: #555; cursor: pointer; font-size: 12px; } /* See .company-row .company-star: same mark, same three states, same 12px it was inheriting from the remove beside it. */ .qualifier-row .qualifier-star { color: #bbb; cursor: pointer; margin-right: 3.507px; } .qualifier-row .qualifier-star:hover { color: #555; } .qualifier-row input { min-width: 0; background: none; border: 0; border-bottom: 1px solid transparent; padding: 1px 0; font-size: 11.5pt; text-overflow: ellipsis; } /* The entry is the qualifier and the type is only the label it was filed under, so the entry gets the room and the type gets what is left. */ .qualifier-row .qualifier-type { flex: 0 0 84px; margin-right: 6px; opacity: .7; } .qualifier-row .qualifier-value { flex: 1; } .qualifier-row input:hover { border-bottom-color: #d8d5d5; } .qualifier-row input:focus { outline: 0; border-bottom-color: #555; } .qualifier-row .qualifier-remove { opacity: .35; margin-left: 6px; } .qualifier-row .qualifier-remove:hover { opacity: 1; text-decoration: none; } .qualifier-editor .qualifier-input { display: block; width: 100%; border: 0; border-bottom: 1px solid #d8d5d5; padding: 3px 0; margin-bottom: 8px; font-size: 11.5pt; } .qualifier-editor .qualifier-input:focus { outline: 0; border-bottom-color: #555; } .qualifier-actions { text-align: right; } .qualifier-actions .button { font-size: 11.5pt; } /* #235 - the header takes a dropped chip, and says so. The cue is a real child element, not ::after. A bootstrap .row spends BOTH its pseudo-elements on the clearfix that holds it open over its floated columns, so drawing the cue in ::after took that clearfix away: the row collapsed to its min-height the instant a chip crossed it, the panel below jumped up, the pointer fell outside the row, the mark came off, the layout went back - a flicker at the speed of the hand. Absolutely positioned when shown and display:none when not, so it never has an opinion about the layout it is drawn on. position:relative is permanent rather than only-while-lit, for the same reason: a cue that changes its own containing block on hover moves what is inside it. headchat covers the descendants that could disturb. Geometry, measured rather than guessed. The row is 325..1395 and the panel's own dashed box is 340..1380, so 15px in on each side makes the two exactly the same width and the pair reads as one shape. The top is inset by that same 15px so the gap above matches the gaps at the sides. The bottom is -4px because .field-panel carries margin-top:4px: the row's border box ends where that margin starts, and reaching across it is what makes this box's bottom edge and the panel box's top edge the same line. Tied to that margin - if it changes, this does. */ .content-detail { position: relative; min-height: 48px; } .content-detail .drop-cue { display: none; } .content-detail.field-drop-over .drop-cue { display: block; position: absolute; left: 15px; right: 15px; top: 0; bottom: -4px; /* Identical to .field-panel-dragging's outline - same width, same dash, same colour. It was 2px of a stronger blue, which made the header's box shout next to the strip's and read as a different kind of thing rather than the same mark moved. */ border: 1px dashed #b8d4ee; pointer-events: none; } /* One dotted box at a time. The chip is either being carried in the strip or over the header, never both, so the two marks hand over rather than pile up: leave the panel and the dotting flips from the box below to the box above, at the edge they share. Drawn together they read as one shape with a doubled seam, which is what looked like an overlap. The panel is a following sibling of the row - fieldPanel is replace:true - so ~ reaches it. Its background stays: the strip is still the thing in hand. */ .content-detail.field-drop-over ~ .field-panel.field-panel-dragging { outline-color: transparent; } /* #244 - the selection editor. Apply to list carries no styling of its own and reads fine on md-dialog's defaults, so only what the flat picker actually needs is here: a list that scrolls rather than growing the dialog past the window, and a path that reads as a second line rather than competing with the name. */ .edit-selection .sel-filter { width: 100%; margin: 8px 0; } .edit-selection .sel-list { max-height: 320px; overflow-y: auto; border: 1px solid #e0e0e0; } .edit-selection .sel-option { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #f2f2f2; } .edit-selection .sel-option:hover { background: #f7fafd; } /* The tick and the name on one line, the path under it. Indented past the tick so the two lines read as one entry rather than as an entry and a stray. */ .edit-selection .sel-option .sel-name { margin-left: 6px; } .edit-selection .sel-option .sel-path { display: block; margin-left: 22px; font-size: 11px; color: #999; } .edit-selection .sel-none, .edit-selection .sel-chosen { padding: 10px; color: #777; } /* Replace is the one button here that takes something away, and it is the only one in the app that can take it away from sixty records at once. It is coloured as a warning for that reason and sits at the end, away from Add. */ .edit-selection .sel-warn { color: #777; font-size: 12px; } .edit-selection .sel-has { color: #a94442; } .edit-selection .sel-gets { color: #3c763d; } /* #244 - the selection edited as a header. It stands where a list head stands, above the rows it speaks for, because that is what it is. The band across the top is the only part that is not an ordinary header: it says how many rows this is standing for and holds the SAVE, since nothing here writes until it is pressed. */ .selection-head { border-left: 3px solid #4a90d9; } .selection-head-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #f2f7fc; } .selection-head-bar .selection-head-note { color: #777; font-size: 12px; } /* Pushed to the right, away from Cancel, and the only filled control in the band: pressing it is the whole point of the header being open. */ .selection-head-bar .selection-save { margin-left: auto; font-weight: bold; color: #fff; background: #4a90d9; padding: 3px 12px; border-radius: 2px; } .selection-head-bar .selection-cancel { color: #777; } /* #243 - the history strip in the admin sidebar. Collapsed it reads as one more entry in the list above it, which is what it is; open, it becomes a scrolling list of what you have done, and the sidebar's own scroll is left alone so the toggle never walks off the top while you read. */ .history-panel .history-toggle { cursor: pointer; } .history-panel .history-count { color: #999; font-size: 11px; margin-left: 6px; } .history-panel .history-body { max-height: 42vh; overflow-y: auto; background: #fafafa; border-top: 1px solid #e6e6e6; } .history-panel .history-entry { padding: 7px 12px; border-bottom: 1px solid #eee; cursor: pointer; } .history-panel .history-entry:hover, .history-panel .history-entry.chosen { background: #f2f7fc; } /* An undone entry stays on the list. It is a record of what happened, and what happened includes the undoing - taking the line away would leave the log saying something that is not true. */ .history-panel .history-entry.undone .history-line { color: #aaa; text-decoration: line-through; } .history-panel .history-line { font-size: 12px; } .history-panel .history-when { font-size: 11px; color: #999; } .history-panel .history-undone { color: #c09853; margin-left: 6px; } .history-panel .history-actions { margin-top: 6px; } .history-panel .history-actions .button { font-size: 11px; margin-right: 8px; color: #4a90d9; } /* Where "back to here" stops being offered, drawn once on the last entry that still offers it. A rule you can see reads as a rule; the same option silently missing three rows further down reads as a control that has broken. */ .history-panel .history-boundary { margin: 6px -12px -7px; padding: 3px 12px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #aaa; background: #f0f0f0; border-top: 1px dashed #ddd; } .history-panel .history-empty, .history-panel .history-more, .history-panel .history-note { display: block; padding: 10px 12px; font-size: 12px; color: #888; } .history-panel .history-note { color: #a94442; background: #fdf3f3; } /* #243, the centre. Borrows the list's own furniture rather than inventing any: the search is the footer search, the ticks are the list's ticks, and the columns line up on the same twelve. Only what is particular to a log is written here. */ .history-page .history-controls { padding: 6px 15px; } .history-page .history-controls select { margin-right: 8px; } .history-page .history-range { color: #999; font-size: 12px; margin-left: 10px; } .history-page .history-row { border-bottom: 1px solid #eee; } .history-page .history-row-line { padding: 8px 0; cursor: pointer; margin: 0; } .history-page .history-row:hover { background: #f7fafd; } .history-page .history-when { color: #999; font-size: 12px; } /* An undone entry stays, struck through. The log records what happened, and what happened includes the undoing - dropping the line would leave it saying something that is not true. */ .history-page .history-row.undone .history-what { color: #aaa; text-decoration: line-through; } .history-page .history-undone { color: #c09853; font-size: 12px; } .history-page .history-detail { padding: 4px 15px 10px 8.33333%; color: #777; font-size: 12px; } .history-page .history-empty, .history-page .history-note { padding: 20px 15px; color: #888; } .history-page .history-note { color: #a94442; background: #fdf3f3; } /* The bin, drawn rather than set. It was fa-trash, which is a lid, a body and a set of vertical ribs at whatever weight the typeface chose - beside a tick box and a star drawn at 1.5 and 1.25 it read as a different family, because it was one. Same 18-unit box and the same 0.75px per unit as .mark-box and .mark-star, so all three stand on one baseline and share one line weight. 1.5 to match the BOX and not the star: a bin is four long strokes and a couple of corners, the same fat-angle shape the box is, where the star is a lattice of ten and needs the lighter step. */ /* The pencil was the last solid glyph left beside the drawn bin and box, and next to them it read as a blob - #247's swap covered the bin and stopped there. Same 18-unit box, same 0.75px per unit, so it stands on the one baseline as the rest. 1.25 and not the bin's 1.5: a pencil is a long narrow body about 4.7 units across, and a 1.5 stroke on both edges leaves barely 3 units of daylight down the middle - it fills in and reads as the solid glyph this replaces. The star is 1.25 for the same reason, and this is the finer of the two shapes. */ /* An icon standing next to a word. vertical-align:middle puts the box's middle on the baseline plus half the x-height, and against caps that landed the drawing 2.17px low - the same 2.17 for the bin and the pencil, so it was the alignment and not either icon. The word's optical centre is half its cap ascent above the baseline, which scales with the text; the drawing's centre is a fixed 6.244px above its own bottom edge, because the icon is 13.5px whatever the text does. One is font-relative and the other is not, which is why no single px or em value is right - calc holds both terms. 0.331em is half the cap-ascent ratio, measured: 10.14 at 15.33px. Scoped to the strip on purpose. Applied to .mark-trash everywhere it would move the detail-view bin, whose is absolutely placed with a 40px line box doing the centring - a different problem with a different answer. */ .list-group-item > .button > .mark-pencil, .list-group-item > .button > .mark-trash { display: inline-block; line-height: 0; vertical-align: calc(0.331em - 6.244px); } .list-group-item > .button > .mark-pencil svg, .list-group-item > .button > .mark-trash svg { display: block; } /* The last font glyph in the add/remove row. Centring the two boxes left the drawings 1.96px apart, because a glyph's ink is not centred in its em box and no amount of centring the box moves the ink inside it. Drawn instead, in the same 18-unit box, and deliberately given the BIN's ink centre - 9, 9.675, not the box centre - so the two sit on one line the moment their boxes are centred together. Ink spans 1.25 to 16.75 on both axes, which is the bin's own width, so they read at one size as well. 1.5 to match the bin and the box: two straight strokes, the same fat-angle family. */ .mark-plus svg { height: 13.5px; width: 13.5px; vertical-align: middle; } .mark-plus svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } /* Close, fullscreen and share, drawn into the same 18-unit box at 0.75px per unit as the bin, the box and the star. All three were font glyphs: the X and the fullscreen arrows at 25px, the share at 20px, standing beside a 13.5px drawing. 1.5 units is 1.125px on the page, which is the weight the small x already uses - 1.17 units in an 8-unit box at 7.692px is the same 1.125. The two systems have always agreed on line weight; only the box differed, which is why these can be drawn at icon size without reading heavier than the x they are meant to match. Ink centred on 9, 9.675 - the bin's own centre, not the box's - so a column of them lines up on one axis and reads at one size. */ .mark-close svg, .mark-expand svg, .mark-share svg, .mark-again svg, .mark-link svg, .mark-italic-i svg, .mark-clearfmt svg, .mark-align-left svg, .mark-align-center svg, .mark-align-right svg, .mark-dots svg { height: 13.5px; width: 13.5px; vertical-align: middle; } .mark-dots svg circle { fill: currentColor; stroke: none; } /* The chain joins the family at its weight, not at the reference's. The icon it is drawn from is a solid two-tone glyph; every other mark here is a single 1.5-unit line on an 18-unit box, and a filled chain beside a drawn bin reads as a different set. Same box, same stroke: two half-capsules facing each other with a bar between. */ .mark-close svg path, .mark-expand svg path, .mark-share svg path, .mark-again svg path, .mark-link svg path, .mark-italic-i svg path, .mark-clearfmt svg path, .mark-align-left svg path, .mark-align-center svg path, .mark-align-right svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } /* The x is the one exception to filling the box. A square-filling x reads larger than everything beside it, because its diagonals are longer than their sides - the same reason the panel's small x stops short of its own bullet. 12.8 across rather than 15.5. */ .mark-pencil svg { height: 13.5px; width: 13.5px; vertical-align: middle; } .mark-pencil svg path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; } .mark-trash svg { height: 13.5px; width: 13.5px; vertical-align: middle; } .mark-trash svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } /* The body tapers - wider at the lid than at the floor - and the lid is one straight line that overhangs it on both sides. That overhang is what makes it read as a bin at 13px rather than as a bucket, and it is the whole reason the lid is not simply the top edge of the body. */ /* The tile's bin sits BELOW the picture, not on it (asked for 2026-08-15). On the image it covered the thing it was offering to throw away, and on a dark photo it disappeared into it - the text-shadow that was there to rescue it is an admission of the same problem. The tile is the positioning context and .img-preview fills it, so the bin is pinned to the tile's bottom-left and the tile gains room underneath for it to stand in. Left and bottom are the same 5px, so the corner reads as a corner. */ /* The strip the bin stands in. Written against each view mode by name and not as `.files .file`, which is one class less specific than `.files.view-mode-small .file` and lost to it silently - the padding simply never applied and the bin sat back on the picture with nothing to say why. */ .files .file, .files.view-mode-small .file, .files.view-mode-large .file { position: relative; } /* The picture gives up the strip rather than the tile growing into its neighbours: a tile's footprint is what the grid is built on, and 18px is the bin plus its gap. */ .files .file .img-preview, .files.view-mode-small .file .img-preview, .files.view-mode-large .file .img-preview { height: calc(100% - 24px); } /* The is sized to the drawing and nothing more. Left as an inline box it carried line-height above and below the svg, so bottom:5px put the BOX 5px up and the ink about 8 - the left gap measured 5 and the bottom read larger, which is the uneven corner this was meant to fix. Equal means equal on the ink. */ /* The 24px strip exists to hold the bin below the picture. A collapsed subsection draws no bin, and its tiles are 40px, so reserving the strip there spent 24 of the 40 on nothing and left the picture 16px tall. No bin, no strip. */ .folders .folder.preview .files .file .img-preview { height: 100%; } /* #248. The link field, in place of window.prompt. Centred near the top rather than over the note: the note is what you are looking at while you decide what to link, and a box in the middle of it hides the words you selected. */ /* The link box. Hung under the words it is about, in one of two states. It used to be a bare field pinned to the top of the window, which is nowhere near the text it concerns - you had to look away from the thing you were linking to answer a question about it. */ .wd-link-box { position: absolute; z-index: 90; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fff; border: 1px solid #d8d8d8; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.14); font-size: 13px; white-space: nowrap; } .wd-link-box .wd-link-chain { font-size: 15px; color: #8a8a8a; line-height: 0; } .wd-link-box .wd-link-chain svg { height: 0.714em; width: 1.067em; } .wd-link-box input { width: 260px; height: 26px; padding: 0 6px; border: 1px solid #cfcfcf; border-radius: 3px; font-size: 13px; outline: none; } .wd-link-box input:focus { border-color: #999; } .wd-link-box .wd-link-apply { border: 0; background: none; padding: 0 2px; font-size: 13px; color: #333; cursor: pointer; } /* The state on an existing link: where it goes, then the three things you can do to it. */ .wd-link-box .wd-link-label { color: #8a8a8a; } .wd-link-box .wd-link-url { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Drawn marks, sized and seated by the same rule as the toolbar's - the pictograms a fifth under a capital, on the cap's own centre, with the browser resolving the cap. */ .wd-link-box .wd-link-act { font-size: 15px; border: 0; background: none; padding: 0; margin-left: 2px; line-height: 0; color: #555; cursor: pointer; } .wd-link-box .wd-link-act:hover { color: #000; } .wd-link-box .wd-link-act svg { height: 0.714em; width: 1.067em; vertical-align: baseline; position: relative; top: calc(0.4625em - 0.5cap); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } /* An empty line in the editor keeps its height. A paragraph with nothing in it collapses, and a collapsed line is one you can neither see nor put a caret in - which is what made the space under the last tile unreachable. Only in the editor: the resting note should not show gaps for lines that hold nothing. */ .note.edit .ta-bind p:empty, .note.edit .ta-bind .wd-pad { min-height: 1.2em; } /* #248. A link in a note, drawn as a tile. Block and not inline: it is a card standing on its own line, and letting it sit in a run of text would put a 64px-tall thing on a 20px line and push the paragraph apart. */ .note .link-card { position: relative; /* #249. inline-block, not block - and this is the whole of how a tile behaves in the editor. A block that is contenteditable="false" has no caret position beside it: a caret needs an editable text position, and between two blocks there is none. That is why the caret could not be put to the left or right of a tile, and why arrows stepped over it. The first answer to that was a caret the editor drew for itself - which then had to reimplement Backspace, undo and selection by hand, and got Backspace backwards. Inline, the tile is an atom in a line of text, exactly as an image is. The browser gives every one of those behaviours for nothing and gets them right: the real caret sits either side, arrows walk through it, shift+arrow and dragging select it, copy takes it, Backspace deletes it, and undo - the browser's own, which only ever saw edits it made itself - puts it back. width:100% keeps it looking the way it did, filling the line it is on. */ display: inline-block; width: 100%; vertical-align: top; margin: 8px 0; /* The right edge is kept clear for the X and the dots. They are absolutely placed, so without this the title and description run under them - and a two-line product title is exactly the case where they would meet. */ padding: 8px 30px 10px 8px; min-height: 90px; border: 1px solid #e0e0e0; border-radius: 3px; background: #fff; cursor: pointer; max-width: 520px; } /* The card contains its floated picture without clipping. It used overflow:hidden, which did contain the float and also cut off anything that left the box - so the three-dot menu was sliced at the card's edge. A flow root contains the float and clips nothing. */ .note .link-card::after { content: ''; display: table; clear: both; } .note .link-card:hover { border-color: #c8c8c8; } /* A collapsed subsection caps its note at 40px and hides the rest, so a 90px tile was shown as its top 40px: the picture sliced in half and the title cut through the middle of its first line. That is not the tile being too big for the space, it is the tile being the wrong thing for the space - a collapsed note is a glance, and a glance wants one line saying what the link is. So in the collapsed state the card is drawn as its title and nothing else. The picture, the price, the site, the description and the controls all go; what is left fits the cap with room for two of them. Purely a restyle of a tile that is already in the document. Expanding removes the class and the card is simply itself again - nothing is fetched, nothing is rebuilt, and there is no moment where the note shows a bare url waiting to become a card. */ .folders .folder.preview .note .link-card { min-height: 0; max-width: none; margin: 0; padding: 0; border: 0; background: none; } .folders .folder.preview .note .link-card::after { content: none; } .folders .folder.preview .note .link-card .lc-pic, .folders .folder.preview .note .link-card .lc-meta, .folders .folder.preview .note .link-card .lc-desc, .folders .folder.preview .note .link-card .lc-add, .folders .folder.preview .note .link-card .lc-tools, .folders .folder.preview .note .link-card .lc-more { display: none; } .folders .folder.preview .note .link-card .lc-title { max-height: none; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Inside textAngular the tile sits in a contenteditable. contenteditable="false" on the element keeps the caret out of it; this keeps the pointer honest about that - it is a card you press, not text you can put a cursor in. */ .note.edit .link-card, .ta-bind .link-card { user-select: none; -webkit-user-select: none; } .note .link-card .lc-pic { position: relative; float: left; width: 64px; height: 64px; margin-right: 10px; border-radius: 2px; background-color: #f4f4f4; background-size: cover; background-position: center; } .note .link-card .lc-body { display: block; overflow: hidden; } .note .link-card .lc-title { display: block; font-weight: 600; line-height: 1.25; /* two lines and then stop: a product title runs to 90 characters and would otherwise set the height of the whole card off the longest one in the note. */ max-height: 2.5em; overflow: hidden; } /* Price, stock and site on one line under the title: the three things you scan a saved product for, in the order you ask them. */ .note .link-card .lc-meta { display: block; margin: 2px 0; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; } /* The price reads at the description's size, not the meta line's. It sat with the site name at 11px uppercase, which is the size for things you glance past. A price is the thing you came back to the card to check, so it is set with the words rather than with the labels - still the darkest thing on the line, and still bold, but no longer shouting in caps a size smaller than the text under it. */ /* 13, a point above the description's 12. Level with it was the request and it was met - measured 12/12 on all three cards, in the same typeface, so the two really were identical. It still read as uneven, because the price is 600 at #333 against prose at 400 at #6d6e71 and bold dark text beside lighter grey looks like a different size whatever the number says. A point up settles it the other way: the price is now deliberately picked out rather than accidentally not matching. It is the thing you come back to a card to check. */ .note .link-card .lc-price { color: #333; font-weight: 600; /* 15, and deliberately past what the design wants. 12 was measured as equal to the description and read as uneven; 13 was invisible. If 15 also looks unchanged then this rule is not reaching the browser at all, and that - not the number - is the fault to chase. Tune down once it is visibly moving. */ font-size: 15px; text-transform: none; letter-spacing: 0; margin-right: 8px; /* A price is one thing and breaks nowhere. Holding the availability phrase together moved the break here instead: "$34.68 /sq. ft. ($186.60" then "/case)" beneath it. Every part of the meta row is now unbreakable, so the row wraps only between parts - price, then availability, then the site - and never through one. */ white-space: nowrap; } /* The availability phrase never breaks inside itself. "Covers 5.38 sq. ft." was wrapping between SQ. and FT., so the line read "COVERS 5.38 SQ." and then "FT. HOMEDEPOT.COM" underneath, with room to spare on the first line. The row is allowed to wrap BETWEEN its parts - price, availability, site - but each part moves as one thing. */ .note .link-card .lc-stock { margin-right: 8px; white-space: nowrap; } .note .link-card .lc-site { display: inline; white-space: nowrap; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; } .note .link-card .lc-desc { display: block; font-size: 12px; color: #6d6e71; line-height: 1.3; max-height: 2.6em; overflow: hidden; } /* Refresh and X together in the corner, in that order - the destructive one furthest from where the pointer arrives. Same corner treatment as the bin on a thumb: the drawing 5px from each side, with .button's side padding pushed away from the corner so the ink lands where the number says. */ .note .link-card .lc-tools { position: absolute; top: 5px; right: 5px; display: flex; gap: 6px; opacity: 0; } .note .link-card:hover .lc-tools { opacity: 1; } .note .link-card .lc-again, .note .link-card .lc-drop { display: block; line-height: 0; font-size: 0; padding: 0; color: #6d6e71; cursor: pointer; } .note .link-card .lc-again:hover, .note .link-card .lc-drop:hover { color: #333; } /* The + sits UNDER the picture, and is always there. It was in the picture's bottom-right corner and only on hover, which meant it was invisible against a light product shot and invisible again whenever the pointer was anywhere else - "the + for the image is often not visible". Beneath the picture it is on the card's own background at a known contrast, it does not cover the thing it would be filing, and it needs no hover to be found. */ .note .link-card .lc-add { position: absolute; display: block; line-height: 0; font-size: 0; /* Tucked under the picture's right corner, 2px clear of it. It was centred under the picture at the family's 13.5px, which read as a control belonging to the card rather than to the image, and pushed the card taller than it needed to be. Smaller and closer puts it plainly with the thing it acts on, and fits the card at any width. */ left: 8px; top: 74px; width: 64px; padding: 0; text-align: right; color: #8a8a8a; cursor: pointer; } /* Smaller than the drawn family on purpose - this is a modifier on the image, not one of the card's own controls, and at 13.5px it competed with them. */ .note .link-card .lc-add svg { width: 10px; height: 10px; } .note .link-card .lc-add:hover { color: #333; } /* Added, and says so - a one-way button with no state means pressing it twice and then going to look whether it landed twice. Pressing it again takes it back out. */ .note .link-card .lc-add.on { color: #4a90d9; } .note .link-card .lc-add.busy { opacity: .4; } /* The menu, under the two corner controls on the same right edge. One entry today; it is here so the next thing you can do with a page has somewhere obvious to go rather than becoming a fourth icon in a corner that already holds two. */ .note .link-card .lc-more { position: absolute; top: 24px; right: 5px; opacity: 0; z-index: 60; } .note .link-card:hover .lc-more, .note .link-card .lc-menu.open { opacity: 1; } .note .link-card .lc-dots { display: block; line-height: 0; font-size: 0; padding: 0; color: #6d6e71; cursor: pointer; } .note .link-card .lc-dots:hover { color: #333; } .note .link-card .lc-menu { display: none; position: absolute; /* Above the cards below it, which are later in the document and would otherwise be painted on top. */ z-index: 60; top: 18px; right: 0; /* As wide as its longest row and no wider. It had a 220px minimum, which is the width of the longest label I happened to write rather than a measurement of anything - so a two-word row sat in a box built for a sentence. The rows do not wrap, so the content sets the width on its own. */ width: max-content; background: #fff; border: 1px solid #c8c8c8; border-radius: 3px; box-shadow: 0 3px 14px rgba(0,0,0,.18); z-index: 40; text-align: left; } .note .link-card .lc-menu.open { display: block; } /* A menu row can carry a mark. It sits with the words rather than above them, so the row reads as one thing. */ .note .link-card .lc-menu-item .mark-again { display: inline-block; line-height: 0; margin-right: 7px; vertical-align: -2px; color: #8a8a8a; } .note .link-card .lc-menu-item .mark-again svg { width: 11px; height: 11px; } .note .link-card .lc-menu-item { display: block; padding: 7px 10px; font-size: 12px; line-height: 1.3; color: #333; white-space: nowrap; cursor: pointer; } .note .link-card .lc-menu-item:hover { background: #f4f4f4; } /* Nothing to add, and it says so rather than offering an action that would do nothing. */ .note .link-card .lc-menu-item.off, .note .link-card .lc-menu-item.working { color: #8a8a8a; cursor: default; background: none; } /* A bar filling left to right along the foot of the card while the page is being read. Only on the first sight of a url - after that the card comes from the store and is there immediately. Grey and 2px: it is a sign that something is happening, not a thing to look at. */ .note .link-card .lc-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #c8c8c8; } .note .link-card.waiting .lc-bar { animation: wd-lc-fill 14s cubic-bezier(.12,.72,.3,1) forwards; } /* 14 seconds is what a rendered page costs, so the bar is honest about the wait rather than looping to look busy. It eases towards the end instead of reaching it - a bar that sits full while still loading says the opposite of what it means. */ @keyframes wd-lc-fill { from { width: 0; } to { width: 92%; } } .note .link-card.waiting .lc-title { color: #8a8a8a; font-weight: 400; } .note .link-card.waiting .lc-pic { background-color: #f0f0f0; } .note .link-card.no-image .lc-body { min-height: 0; } /* A collapsed subsection is a glance, not a workspace: the tiles are there to say how many and what kind. Hover offering a delete on something you have not opened yet is a reach, and on the small preview tiles the bin covers most of what it would be deleting. It comes back when the subsection is open. */ .folders .folder.preview .tile-bin { display: none; } .files .file .tile-bin { position: absolute; display: block; line-height: 0; font-size: 0; bottom: 5px; left: 5px; /* .button carries 8px of side padding as its hit area. On every other bin that padding is invisible, but here it pushed the drawing 8px in from the 5px offset and the corner read 13 across against 5 down. The padding stays - a 13.5px target needs it - it just all goes to the side away from the corner. */ padding-left: 0; padding-right: 8px; padding-bottom: 0; opacity: 0; transition: opacity .2s ease; color: #666; z-index: 2; } /* On hover of the whole tile, not of the bin: a control you have to find before it appears is one you cannot find. */ .files .file:hover .tile-bin { opacity: 1; } .files .file .tile-bin:hover { color: #a94442; } /* #248. The title does not move when the subsection opens. Measured across the transition, four things changed at once: weight 700 to 400, size 17 to 15.33, leading 22 to 18, and the whole line shifted 5 right and 4.5 down. Opening a note is not a restyling of its name, and a title that jumps is the thing you notice instead of the note. The collapsed row's face is the one that wins, because it is the one that was designed - 17 on 22 at 700, set against the note's 15.33 beneath it. The 5px is click-to-edit's own padding: collapsed, .folder has no padding and the text column supplies the 10px inset; open, .folder's 10px padding is there AND the padding inside click-to-edit adds to it. Taking the inner padding off leaves both states at 10 from the card. */ .folders .folder:not(.preview) .folder-nav click-to-edit { font-size: 17px; line-height: 22px; font-weight: 700; padding: 0; } .folders .folder:not(.preview) .folder-nav click-to-edit > * { font-size: 17px; line-height: 22px; font-weight: 700; padding: 0; } /* #248. THE ROW'S ICONS, DRAWN These rules were lost: the script that wrote them aborted on an earlier failed match and never reached the append, so the new svg went onto the page with no styling at all. An svg shape with no fill declared fills black, which is why the AI icon appeared as a solid black speech bubble sitting over the three dots. The chat bubble is redrawn to match: it was two filled shapes with the unread count reversed out of the middle, a blob beside a row of drawn outlines. Both are now one stroke at the weight the pencil and the bin use. */ .folders .folder .folder-opts .chat-icon .bubble-body, .folders .folder .folder-opts .chat-icon .bubble-tail, .folders .folder .folder-opts .chat-icon .face-mouth { fill: none; stroke: #231F20; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; } /* The eyes are the one filled thing: a dot is a dot. */ .folders .folder .folder-opts .chat-icon .face-eye { fill: #231F20; stroke: none; } /* Lit while its own panel is open, so the icon says which one you are in - and it is the same icon you press to shut it again. */ .folders .folder .folder-opts .chat-icon.on .bubble-body, .folders .folder .folder-opts .chat-icon.on .bubble-tail, .folders .folder .folder-opts .chat-icon.on .face-mouth { stroke: #297abc; } .folders .folder .folder-opts .chat-icon.on .face-eye { fill: #297abc; } /* The count sits inside the bubble, where the face sits on the other one. */ .folders .folder .folder-opts .chat-icon text { fill: #231F20; font-size: 17px; text-anchor: middle; } /* #248. The last 5px of the title's jump. Measured: collapsed, the card has no padding and the text column supplies the 10px inset, so the title sits 10 from the card's left and 10.5 from its top. Open, the card's own 10px padding is there AND .folder-nav adds 5 more, which put the same title at 15 and 16 - it moved down and right the moment you opened the subsection. The nav's padding goes in the open state. The three dots do not move with it: they are absolutely positioned against the nav and take their offsets from its edges, not from its padding. */ .folders .folder:not(.preview) .folder-nav { padding-left: 0; padding-top: 0; } /* #248. The list scrolls, not the page. A flex item's min-height is auto, which means "at least as tall as my content" - so the discussion panel grew to fit the whole conversation and pushed past the bottom of the panel that was meant to bound it. Nothing ever overflowed, so nothing scrolled, and the wheel went to the page behind instead. min-height:0 lets it be shorter than its contents, which is what makes the overflow:auto on the box inside it mean anything. All three panels, since they share the geometry. */ .folder .chat .discussion-panel, .folder .todo .discussion-panel { min-height: 0; overflow: hidden; } /* The wheel stops here rather than carrying on into the page once the list is at one end of its travel. */ .folder .chat .discussion-panel > div, .folder .todo .discussion-panel > div { overscroll-behavior: contain; } /* #248. The panel starts level with the note beside it. .chat/.todo carry a 10px top margin from when they were absolutely positioned inside the column; in flow it pushes the panel down so its top edge sits below the note's, which is the gap at the top of the pair. */ .folder .chat, .folder .todo { margin-top: 0; } /* #249. The gap caret: the editor's own caret, for the places a real one cannot go. Drawn on the body rather than inside the note, so it is not part of the record and cannot be typed into, selected or saved. It blinks on the same beat as a real caret so the two do not read as different things. */ .wd-gap-caret { position: absolute; width: 2px; background: #333; z-index: 20; pointer-events: none; animation: wd-gap-blink 1.06s step-end infinite; } @keyframes wd-gap-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* #249. The caret pocket. A zero-width space in a box with its own font metrics, sitting either side of every tile. The caret is drawn at the height of the line box it is in, and a line holding a 113px tile has a 113px line box - which is why the caret overhung the card above and below. Measured against the pocket instead, it is the height of text. 4px wide, not zero: the width is what a mouse can aim at when you click just beside a card. Zero-width is invisible to the eye and to the pointer both. */ .note .wd-pocket { display: inline-block; vertical-align: middle; width: 4px; font-size: 14px; line-height: 17px; height: 17px; overflow: visible; } /* #252. THE PICTURE PICKER Every picture the page offered, with two things you can do to each: the + files it against the note, clicking the picture makes it the card's face. Switching is free - click another and the card changes again. On the body, not in the note, so it is never part of the record and cannot be typed into, selected or saved. */ /* Width and height are written by the picker itself - it measures the room beside the card's thumbnail so that picture stays visible while you choose its replacement. These are only the floor. */ .wd-pick { position: absolute; z-index: 40; min-width: 360px; overflow: auto; background: #fff; border: 1px solid #d8d8d8; border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); font: 13px/1.4 sans-serif; } .wd-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; } .wd-pick-title { color: #6d6e71; } .wd-pick-x svg { width: 13px; height: 13px; } .wd-pick-x svg path { fill: none; stroke: #8a8a8a; stroke-width: 2; stroke-linecap: square; } .wd-pick-x:hover svg path { stroke: #333; } .wd-pick-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; } .wd-pick-wait { color: #8a8a8a; padding: 6px 2px; } /* Each candidate: the picture, and its own + beneath. The same shape the tile has, so the + means here what it means there. */ .wd-pick-cell { position: relative; width: 150px; } .wd-pick-img { display: block; height: 110px; background: #f2f2f2 center/cover no-repeat; border: 1px solid #e0e0e0; border-radius: 2px; cursor: pointer; } .wd-pick-img:hover { border-color: #297abc; } /* The one the card is wearing. */ .wd-pick-cell.on .wd-pick-img { border-color: #297abc; box-shadow: 0 0 0 2px rgba(41,122,188,0.28); } .wd-pick-cell .wd-pick-add { display: block; text-align: center; padding-top: 3px; cursor: pointer; } .wd-pick-cell .mark-plus svg { width: 13px; height: 13px; } .wd-pick-cell .mark-plus svg path { fill: none; stroke: #8a8a8a; stroke-width: 1.8; stroke-linecap: square; } .wd-pick-cell .wd-pick-add:hover .mark-plus svg path { stroke: #297abc; } /* Filed, and it says so rather than looking like nothing happened. */ .wd-pick-cell.filing .wd-pick-add { opacity: .4; } .wd-pick-cell.filed .mark-plus svg path { stroke: #2e9e5b; } .wd-pick-cell.failed .mark-plus svg path { stroke: #c0392b; } /* #252. Add Info: the box you paste the page's product text into. Shares the picker's frame, because it is the same kind of thing - a panel over the note that closes on the x, on Escape, or on a click outside. */ .wd-pick.wd-info { height: auto; } .wd-info .wd-info-body { padding: 10px 12px 12px 12px; } .wd-info .wd-info-text { width: 100%; height: 260px; box-sizing: border-box; font: 13px/18px inherit; padding: 8px 10px; border: 1px solid #d6d6d6; border-radius: 3px; resize: vertical; } .wd-info .wd-info-text:focus { outline: none; border-color: #297abc; } .wd-info .wd-info-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .wd-info .wd-info-say { font-size: 12px; color: #666; } .wd-info .wd-info-go { border: 0; background: #297abc; color: #fff; padding: 6px 18px; border-radius: 3px; font-size: 13px; cursor: pointer; } .wd-info .wd-info-go:hover { background: #1f6099; } /* #252. The line a card shows when the site refused us. Quiet, but not hidden: the card is not broken and the user is not at fault, so it reads as a state with a next step rather than as an error. */ .note .link-card .lc-why { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #b08a3e; } .note .link-card .lc-why:empty { display: none; } /* #250. A long note keeps its header and its formatting tools in view. Two sticky things, one under the other. The head - title, chat and to-do icons, three dots - holds at the top of the scrollport; the editor's toolbar holds directly beneath it. Measured: the head is 27px and the toolbar 20px, so the toolbar's offset is the head's height and the text scrolls under both. Only when the subsection is open. A collapsed row is a single 61px line and has nothing to scroll past. The scrollport is .scrollable-content, and it already begins below the top bar and the list header - so top:0 here means the top of the visible list, not the top of the window. Nothing between these and the scrollport sets overflow, which is what lets sticky work at all; measured the whole ancestor chain before relying on it. */ .folders .folder:not(.preview) .folder-head { position: sticky; /* 6, not 0: the head halts six pixels short of the grey nav rather than against it. Only when stuck - nothing about the resting layout changes, so the header is the same height and the title is in the same place open or closed. */ top: 6px; z-index: 6; background: #fff; } /* The toolbar is NOT made sticky here, and must not be. It is lifted into the header row by position:absolute; top:-30px; right:37px - it sits between the title and the three dots, which is where it has always been. Setting position:sticky on it replaced that absolute placement, so it fell into the flow and drew as a band on its own line under the title. Measured against the screenshots: the tools belong on the title's line. Keeping them in view while scrolling is the head's job, not theirs. */ /* #248. The angle that widens AI Chat, beside its icon on the subsection's head. Same glyph and same weight as the list header's column toggle, so the two read as one idea: an angle pointing the way the thing will move. */ .folders .folder .folder-opts .ai-width { padding: 0 4px; vertical-align: middle; } .folders .folder .folder-opts .ai-width svg { height: 13px; width: 7px; } /* #248. The composer, to the Therapy Buddy spec. Field on the left, controls on the right, every control 44px so it is a real touch target - which is also why the field's min-height is 44: an empty composer is one clean line rather than a short box beside tall buttons. */ .chat .input-container { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; flex-shrink: 0; } .chat .input-container .textarea-container { position: relative; flex: 1; min-width: 0; /* a flex child will not shrink below its content without this */ } .chat .input-container .button-row { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-end; } .chat .button-row button { background-color: #f7f7f8; color: #6e6e80; border: 1px solid #e5e5e5; border-radius: 6px; padding: 0 10px; font-size: 14px; cursor: pointer; transition: all .2s; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } .chat .button-row button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* Listening and reading-aloud say so in colour, because both are states you can forget you left on - one is recording you, the other will start talking. */ .chat .button-row .speech-button.listening { background-color: #ec008c; color: #fff; border-color: #ec008c; } .chat .button-row .tts-button.enabled { background-color: #fff200; color: #343541; border-color: #fff200; } .chat .button-row .send-button { background-color: #297abc; color: #fff; border: none; padding: 0 18px; font-weight: 600; min-width: 0; } .chat .button-row .send-button[disabled] { background-color: #d1d5db; cursor: default; } /* Under 600 the row goes beneath the field rather than squeezing it to nothing. */ @media screen and (max-width: 600px) { .chat .input-container { flex-direction: column; align-items: stretch; } .chat .input-container .button-row { justify-content: flex-end; } } /* #248. With AI Chat opened out across the note, the formatting tools go. Measured: the note keeps its element at zero width, so the toolbar was crushed to a 5px sliver of squashed buttons rather than being absent. There is no text visible to format, so the row is removed rather than shrunk - and it comes straight back when the panel narrows. */ .folders .folder.ai-wide .ta-toolbar { display: none; } /* #248. The composer's controls at this app's scale, not the spec's. The Therapy Buddy spec sets 44px touch targets and signal colours in magenta and yellow. That is right for a phone-first product and wrong beside these icons, which are thin single-weight line drawings at 18px. So: the same shapes and the same states, sized and coloured like everything else here. */ .chat .input-container { gap: 6px; align-items: stretch; } .chat .input-container .textarea-container { display: flex; } /* The field reaches the controls. It was sitting short of them, leaving a strip of nothing between the text and the microphone. */ .chat .input-container .chat-input { width: 100%; flex: 1; box-sizing: border-box; } .chat .button-row { gap: 4px; align-items: stretch; } .chat .button-row button { height: auto; min-width: 28px; padding: 0 7px; border-radius: 3px; background: none; border: 1px solid #ddd; color: #6d6e71; } .chat .button-row button svg { width: 15px; height: 15px; stroke-width: 1.25; } .chat .button-row button:hover { border-color: #297abc; color: #297abc; } /* On, in the app's own blue rather than a signal colour. Listening and reading aloud are still unmistakable - the control is filled instead of outlined - without two hues that appear nowhere else in the product. */ .chat .button-row .speech-button.listening, .chat .button-row .tts-button.enabled { background: #297abc; border-color: #297abc; color: #fff; } .chat .button-row .send-button { background: #297abc; border: 1px solid #297abc; color: #fff; padding: 0 12px; font-size: 13px; font-weight: 600; } .chat .button-row .send-button[disabled] { background: #e3e3e3; border-color: #e3e3e3; color: #9a9a9a; cursor: default; } /* #248. The composer starts as one slim line and grows only when the text needs it. Everything on a single row - the field, mic, read-aloud, Send - aligned along the bottom. Type past one line and the field alone grows upward while the controls stay locked to the bottom right; the box gets taller, never wider or narrower. Two shapes were tried and both were wrong: a row that shared its width with the buttons squeezed eight words into eight lines, and a column that gave the field the full width started two lines tall when there was nothing in it. This is the field taking the room and the controls keeping their place. */ .chat.ai-panel .input-container { display: flex; flex-direction: row; align-items: flex-end; gap: 0; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fff; } .chat.ai-panel .input-container .textarea-container { flex: 1; min-width: 0; } .chat.ai-panel .input-container .chat-input { width: 100%; border: 0; border-radius: 0; margin: 0; min-height: 32px; max-height: 220px; padding: 6px 10px; resize: none; overflow-y: auto; box-sizing: border-box; display: block; } .chat.ai-panel .input-container .chat-input:focus { outline: none; box-shadow: none; } /* Locked to the bottom right, whatever height the field grows to. */ .chat.ai-panel .button-row { gap: 0; align-items: stretch; align-self: flex-end; flex-shrink: 0; } /* Square, and the divider is each control's own left edge - so a rule falls exactly between them, and none at either end. */ .chat.ai-panel .button-row button { width: 32px; min-width: 32px; height: 32px; padding: 0; border: 0; border-left: 1px solid #eee; border-radius: 0; background: none; } /* No rule at the left end - the box's own border is already there. */ .chat.ai-panel .button-row button:first-child { border-left: 0; } /* Send is as wide as its word, and the only thing here carrying colour. */ .chat.ai-panel .button-row .send-button { width: auto; min-width: 0; height: 32px; padding: 0 12px; background: none; color: #297abc; font-size: 13px; font-weight: 600; } .chat.ai-panel .button-row .send-button[disabled] { background: none; color: #c9c9c9; } /* #248/#250. A panel holds its own scrolling, and the page behind it does not move. overscroll-behavior stops the chain: reach the end of a conversation and the list underneath used to take over, carrying the note you were discussing off the screen. The same for the note's own editor. */ /* Containment goes on the element that actually scrolls, and nowhere else. It was also on .ta-scroll-window and .ta-bind, neither of which has its own overflow - so a wheel over the note text was trapped in an element that could not move and never reached .notes, which could. Measured: notes 0, inner 0, page 0 on a real wheel. */ .chat .discussion-panel { overscroll-behavior: contain; } /* The outright lock is GONE. body.wd-panel-open used to set overflow:hidden on .scrollable-content. It did stop the page moving behind a panel - and it also stopped the page moving at all, in every view, because the class outlived the panel by any route that did not pass the call site that cleared it. Reported as "no longer scrollable in any view", which is far worse than the chaining it was meant to fix. Containment on the panel itself is kept: that stops a conversation carrying the list with it when it reaches its end, and it cannot leave the page stuck if it goes wrong. */ /* #250. Nothing here sizes or clips the editor column. Every version that did took the formatting toolbar with it - the toolbar is lifted into the header row by top:-30px, so it sits above its own container and any overflow on an ancestor cuts it off. Left alone until there is a way to scroll the note that does not depend on clipping the thing above it. */ /* #250. The toolbar moved into the head, and every measurement came with it. These are the same rules as above with one prefix changed - the toolbar is a child of .folder-nav now, so .notes .note .ta-toolbar stopped matching and the buttons fell back to Bootstrap: 1120px wide, 34px tall, 5px gaps, against the 161/20/9 the layout is built on. Generated from the originals rather than retyped, so not one declaration differs. */ .folders .folder .folder-nav .ta-toolbar.wd-in-head { --wd-tool-gap: 9px; position:absolute; top: -30px; /* the dots' own column, plus the double gap. Measured to the dots' own left edge rather than reasoned from their box: at 34px the gap came out 15, because the glyph carries padding of its own. 37 puts it on 18, which is twice the 9 between marks. */ right: 37px; background: none; /* Above the sticky head. The head was given a white background and z-index 6 so scrolled text passes behind it. The toolbar is lifted into that same band by top:-30px but had no z-index of its own, so the head simply painted over it and the tools vanished - measured, the topmost element at a toolbar button was .folder-nav. One higher, and they are back on top of the band they sit in. */ z-index: 7; } .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group { margin: 0 0 0 var(--wd-tool-gap); } .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group:first-child { margin-left: 0; } .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group > .btn { width: auto; min-width: 0; height: 20px; padding: 0; margin: 0 0 0 var(--wd-tool-gap); border: 0; background: none; box-shadow: none; line-height: 20px; vertical-align: middle; /* An italic sans I is four pixels wide. Left to size itself it would sit in a hole twice as wide as every other gap, because the spacing is between boxes and its box is barely there. A floor under the width puts the ink back on the rhythm. */ min-width: 11px; text-align: center; } .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group > .btn:first-child { margin-left: 0; } .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group > .btn:hover { background: none; box-shadow: none; color: #000; } .folders .folder .folder-nav .ta-toolbar.wd-in-head [class^="mark-"], .folders .folder .folder-nav .ta-toolbar.wd-in-head [class*=" mark-"] { font-size: 15px; } .folders .folder .folder-nav .ta-toolbar.wd-in-head [class^="mark-"] svg, .folders .folder .folder-nav .ta-toolbar.wd-in-head [class*=" mark-"] svg { height: 1.067em; width: 1.067em; vertical-align: baseline; position: relative; /* Seated against the cap the browser reports, not one I measured. Every offset here used to be a number taken off a headless Chrome on this machine. If the browser actually looking at this resolves Helvetica Neue and that one falls back, the cap heights differ and the constants describe a rendering nobody sees - which is why the measurements kept reading "aligned" against a screen that plainly was not, and why B drifted worst: it was the only thing placed from those metrics. `cap` is the font's own cap height, resolved where the page is drawn. On the baseline an svg hangs by its bottom edge, so its ink centre sits half its height above the baseline; the cap's centre sits half a cap above. That difference is computed rather than supplied. The 0.071em taken off it is the one number here that is a judgement and not a measurement. Sat exactly on the cap's centre the marks read low beside B - they are a fifth shorter, and the eye weighs a short mark against the whole letter rather than against its middle. It is about a pixel, chosen by looking. */ top: calc(0.4625em - 0.5cap); } .folders .folder .folder-nav .ta-toolbar.wd-in-head .ta-letter { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 20px; /* No offset at all. A letter on its baseline already has its cap centred half a cap above that baseline, which is the thing everything else is now matched to - so the correct value here is nothing, and any number would be one more constant measured somewhere other than where it is read. */ vertical-align: baseline; } .folders .folder .folder-nav .ta-toolbar.wd-in-head .ta-bold { font-weight: 700; } .folders .folder .folder-nav .ta-toolbar.wd-in-head .ta-quote { font-size: 20px; line-height: 20px; position: relative; top: 5px; } .folders .folder .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn { border:0; border-radius:none; background:transparent; } /* #250. Where the moved toolbar sits on the row. LAST in the file on purpose: the block above copies every original rule, and those carry top:-30px - the lift that used to raise the toolbar out of the note and into this row. In the head it is already on the row, so that lift would push it 30px above it. Measured before this: the head at 88 and the tools at 48. right:37px is untouched - the dots' own column plus the double gap - so the horizontal placement is the one that was measured and agreed. */ .folders .folder .folder-nav .ta-toolbar.wd-in-head { top: 50%; bottom: auto; transform: translateY(-50%); z-index: 8; } /* #250. The toolbar's three remaining behaviours in the head. Centred on the dots, not on the row. The row is as tall as the title, the dots are shorter and sit centred in it, and the toolbar was centred on the row - so the two read as half a line apart. Both are now centred the same way. It moves over when a panel opens. The head spans the whole subsection, but the note under it does not: opening a panel takes 30% of that width, so tools measured from the head's right edge sat over the conversation. The offset follows the panel. And it goes when the subsection is collapsed. A closed row is one 61px line of title, note preview and pictures - there is nothing to format and nothing to format it in. */ .folders .folder .folder-nav .ta-toolbar.wd-in-head { display: flex; align-items: center; height: 20px; /* -14. Two more pixels up, to the position the toolbar briefly showed in before it was moved - which read better than where the centring put it. */ margin-top: -14px; /* was -12, and before that -10: two pixels up. Centring on the dots left the tools reading a shade low against them, which at this size is the difference between aligned and nearly. */ top: 50%; bottom: auto; transform: none; } .folders .folder.preview .folder-nav .ta-toolbar.wd-in-head { display: none; } /* 30% for a narrow panel, and the whole note when it is opened out - matching bodyFlex. */ .folders .folder.wd-panelled .folder-nav .ta-toolbar.wd-in-head { right: calc(30% + 37px); } .folders .folder.ai-wide .folder-nav .ta-toolbar.wd-in-head { display: none; } /* #250. The head's own row: clearance above, a rule below, and the icons squared up. The head is sticky, so when it meets the grey nav there was nothing between the two - the icons sat right against it. The padding is what keeps them off it, and because it is on the head itself the icons do not shift when the head locks: the space is already there before it sticks. The rule beneath is the line that separates this row from the note and the panel. It used to be the top of the note's own box, which scrolls away - so the moment the head stuck, the separation went with it. */ /* The rule stays on the head; the padding goes on the nav. On the head, that 6px strip belonged to no one - it sat above the row and swallowed clicks, so the top of an open header would not close it while the same click anywhere on a collapsed row opened it. On the nav it is part of the thing you are clicking. */ .folders .folder:not(.preview) .folder-head { border-bottom: 1px solid #e7e7e7; } /* No extra padding. It bought clearance from the grey nav and charged the header 6px of height for it - and moved the title down with it, so the title sat in one place closed and another open. The clearance now comes from where the head STOPS when it sticks, which costs the layout nothing. */ /* The chat, to-do and AI icons come down to sit level with the top of the dots. */ .folders .folder .folder-opts chat-icon, .folders .folder .folder-opts todo-icon, .folders .folder .folder-opts ai-icon { position: relative; top: 2px; } /* And the angle comes up, to centre on them rather than hang below. */ .folders .folder .folder-opts .ai-width { position: relative; top: -2px; } /* #250. No flicker on open. textAngular builds the toolbar inside the note and it paints there for a frame before it is moved into the head - two positions, one after the other, on every open. It is held invisible until it arrives. */ .notes .note .ta-toolbar:not(.wd-in-head) { visibility: hidden; } /* The six pixels the head stops short of the nav are painted white, so the note does not show through the gap as it passes underneath. */ .folders .folder:not(.preview) .folder-head { box-shadow: 0 -6px 0 #fff; } /* #250. The head's click area reaches the top of the card. .folder carries 10px of padding all round, so the strip above the head belongs to the card, not the header - and a click there did nothing while the same click on a collapsed row opened it. This covers that strip and hands its clicks to the head, which already toggles. Nothing is moved: it is an overlay of the space that already exists. */ /* NO position here. This said position:relative, to anchor the overlay below - and relative is not sticky, so it silently replaced the head's own position and the header stopped holding at the top. Sticky is already a positioned value: an absolutely positioned child anchors to it without any help, so the overlay works and the head keeps sticking. */ .folders .folder:not(.preview) .folder-head:before { content: ''; position: absolute; left: -12px; right: -12px; top: -12px; height: 12px; } /* #253. An open item's header starts where its collapsed row started. The row spends 59.5px on the tick and the star before the name. The open header had neither, so the name jumped left the moment you opened an item - the one thing that was supposed to stay still. The pair now stands in that same column, out of the flow so it costs the header no height, and the header's own content is pushed across by the width the row already gives them. */ .contact-detail { position: relative; } /* left:5 and a 45px indent are measured, not chosen: the row puts its tick at 337 and its name at 385, and the open header was landing them at 332 and 340. The 21px is where the header's own line starts: .content-form.group contributes 10px of margin and 10px of padding above it, over the panel's 1px. The 11.5 centres an 18px mark on the 41px name line. Set to 0 the pair sat a whole line above the title. */ .contact-detail > .detail-marks { position: absolute; left: 5px; top: 32.5px; width: 59.5px; padding: 0 12px; z-index: 2; } /* An open item's grey panel meets the row above it. The row keeps 15px of padding over its summary line and the panel adds 7px of its own margin; with the summary hidden both are white space between the line above and the grey, 22px of it. Neither is wanted while the panel is what the row is showing. */ .list-group-item.item-open { padding-top: 0; } .list-group-item.item-open > .contact-detail { margin-top: 0; } .contact-detail > content-viewer, .contact-detail > content-editor { display: block; } /* The indent goes on the row INSIDE the open item, not on .contact-detail - something later in this file sets that back to 0 and the header never moved. Measured: the row's name sits at 385 and the open header's was landing at 340. */ .contact-detail .row.content-detail { padding-left: 45px; } /* #254. Which install is this. The local stack and man4ge.com run the same code over two databases that no longer exchange anything, and they draw identically. A note typed into the wrong one is simply lost - there is no merge, and nothing on the page said which was which. Both marks are deliberately outside the flow. The frame is an inset shadow, which paints over the content box and reserves nothing; the tag is fixed and pointer-events:none, so it cannot take a click meant for what sits beneath the corner. Nothing here moves a single element, which is what keeps the batteries' y-coordinates valid. */ body.is-dev { box-shadow: inset 0 0 0 3px #e8a33d; } .dev-marker { position: fixed; right: 0; bottom: 0; z-index: 2147483647; pointer-events: none; padding: 3px 10px; background: #e8a33d; color: #241a08; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-radius: 3px 0 0 0; font-family: Helvetica, Arial, sans-serif; }