cookie-manager.css

* {
    box-sizing: border-box;
}

body {
    /* TODO: If you ever decide to change the font, check the media
     * queries that use the "ch" unit, since the "ch" unit for media
     * queries does not account for the overridden font. */
    font-size: 1rem;
}

#searchform > * {
    display: inline-block;
    padding: 0.5em;
    border: 1px solid #CCC;
    width: 100%;
}
#searchform .flex-grid {
    display: flex;
    padding: 0;
}
.flex-grid > * {
    flex: 1;
    min-width: 5ch;
    padding: 0.5em;
    border: 1px solid #CCC;
}
#searchform label:hover,
#searchform input:hover,
#searchform select:hover {
    background-color: #EEE;
}
#search-button {
    flex: 2;
    font-weight: bold;
}


#exportform,
#importform,
#editform {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 2.5em;
    padding: 1em;
    background: white;
    overflow: auto;

    display: none;
}
#editform fieldset > label {
    display: block;
}
#editform input[type=datetime-local],
#editform input[type=text],
#editform input[type=url] {
    width: 100%;
}
#editform label[for] {
    display: flex;
    white-space: nowrap;
    align-items: center;
}
#editform label[for] > input {
    align-self: baseline;
}

#editform label[for] input[type=radio] {
    flex-shrink: 0;
}
#editform label[for] input[type=text],
#editform label[for] input[type=datetime-local] {
    flex: 1;
}
#editform #editform\.sessionFalseExpired:checked + span {
    color: red;
}

/* custom fieldset because flexbox is not supported in Chrome - https://crbug.com/375693 */
.flexible-fieldset {
    border: 1px solid;
    padding: 1em;
}
.flexible-fieldset > legend {
    align-self: baseline;
    font-weight: bold;
    margin-top: -1em; /* undo padding from flexible-fieldset */
    transform: translateY(-50%); /* vertically center on the border */
    padding: 0 1ch;
    background: white;
}
.stretched-textarea-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.stretched-textarea-container > div {
    flex-shrink: 0;
}
.stretched-textarea-container > output {
    flex-shrink: 0;
    word-break: break-all;
    display: block;
}
.stretched-textarea-container > textarea {
    min-height: 6em;
    flex-grow: 1;
}

#whitelist-unlock-prompt {
    z-index: 1; /* to be laid over the footer with the controls and buttons */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
}
.whitelist-unlocker-description {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 60ch;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;
}
#whitelist-unlock-yes,
#whitelist-unlock-confirm {
    height: 2rem;
    width: 50%;
    float: left;
    clear: left;
}
#whitelist-unlock-no {
    height: 4rem;
    width: 50%;
}
#whitelist-lock-again {
    /* TODO: Draw attention. */
    color: blue;
    font-weight: bold;
}

body.exporting-cookies,
body.importing-cookies,
body.editing-cookie {
    overflow: hidden;
}
.exporting-cookies #exportform,
.importing-cookies #importform,
.editing-cookie #editform {
    display: block;
}
.exporting-cookies #footer-controls > select,
.importing-cookies #footer-controls > select,
.editing-cookie #footer-controls > select,
.exporting-cookies #footer-controls > button:not(.exportbutton),
.importing-cookies #footer-controls > button:not(.importbutton),
.editing-cookie #footer-controls > button:not(.editbutton),
#footer-controls > button.exportbutton,
#footer-controls > button.importbutton,
#footer-controls > button.editbutton {
    display: none;
}
#footer-controls > button#whitelist-lock-again:not([hidden]),
.exporting-cookies #footer-controls > button.exportbutton,
.importing-cookies #footer-controls > button.importbutton,
.editing-cookie #footer-controls > button.editbutton {
    display: block;
}


table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
th {
    /* we want the th's to have the same font style as the td, so that the
     * "ch" unit of the "th" is equal to the "ch" unit of the "td". */
    font-weight: normal;
}
th span {
    font-weight: bold;
}


table.no-results {
    text-align: center;
    font-style: italic;
    white-space: pre-wrap;
    min-width: auto;
}
table.no-results thead,
table.no-results tfoot {
    display: none;
}

tbody tr {
    border-top: 1px solid #DDD;
}
tbody tr:hover {
    outline: 1px solid orange;
}
.cell-content {
    box-sizing: content-box;
    white-space: normal;
    overflow-x: hidden;
}
.name_,
.valu_,
.doma_,
.path_ {
    word-break: break-all;
}
th:nth-child(even),
td:nth-child(even) {
    background-color: #EEE;
}
.cookie-removed td {
    opacity: 0.4;
}
.cookie-edited {
    font-style: italic;
}
.highlighted,
.highlighted td {
    background-color: #FFA;
}
.highlighted td:nth-child(even) {
    background-color: #FF6;
}
.action-buttons {
    text-align: center;
}
.action-buttons button {
    /* cell-content's height is at least 3em.
     * Two buttons should fit in this space, so 1.5em per button.
     * One line height is 1.2em, so we have 0.3em left for padding + border. */
    padding: 0.15em 1ch;
    border: 1px outset black;
    /* for "Restore" (or "Edit"). */
    max-width: 8ch;
}
.cookie-removed .action-buttons button {
    visibility: hidden;
}

#show-more-results-button {
    width: 100%;
    height: 3em;
}

#multi-selection-tool:not([hidden]) {
    z-index: 1; /* to be laid over the footer with the controls and buttons */
    position: fixed;
    top: 0;
    left: 0;
    transform-origin: 0;
    border: 1px solid black;
    padding: 4px;
    display: inline-block;
    background: white;
    text-align: center;
}
#multi-selection-tool > button {
    display: block;
    width: 100%;
}


#other-action {
    font-size: 1rem;
}

.footer-space {
    height: 3em;
}
#footer-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    background-clip: content-box;
    border: 0 none;
    border-top: 0.5em solid;
    border-image: linear-gradient(to bottom, transparent, white) 50;

    display: flex;
}
#footer-controls > select,
#footer-controls > button {
    flex: 1;
    margin: 0 1px 1px;
}

@media (max-width:700px) {
    #footer-controls > button {
        font-size: 0.6em; /* fit 3 visible lines in the button */
    }
}

@media (min-width: 100ch) {
    table {min-width: 100ch; } /* sum of all columns = 85, allow at least 15ch for value */
    .col_name { width: 20ch; } /* cookie names are typically not that long */
    .col_valu { width: auto; } /* take the rest of the space - min width is enforced in table's min-width */
    .col_doma { width: 20ch; } /* domains are significant, try to fit them all */
    .col_path { width: 15ch; } /* often just a slash. Not really important. */
    .col_flag { width: 11ch; } /* big enough to fit httpOnly, private, secure and containerTab */
    .col_expi { width: 11ch; } /* big enough to fit a date and split the time to the next line */
    .col_butt { width:  8ch; } /* big enough to fit a edit/restore button. */
    .cell-content {
        /* 2.5 lines (assuming line-height:1.2): */
        max-height: 3em;
        padding-left: 1ch;
    }
}

/* NOTE: media queries' ch unit is based on the initial font size, disregarding any overrides. */
/* On Firefox Mobile (57), for instance, 1ch = 10px) */
@media (max-width:100ch) {
    /* allow auto-sized cells to be at least 11in each */
    table {min-width: 74ch;}
    .col_name { width: auto; }
    .col_valu { width: auto; }
    .col_doma { width: auto; }
    .col_path { width: auto; }
    .col_flag { width: 11ch; }
    .col_expi { width: 11ch; }
    .col_butt { width:  8ch; }
    .cell-content {
        /* 3.5 lines (assuming line-height:1.2): */
        max-height: 4.2em;
        padding-left: 0.5ch;
    }
}
@media (max-width:74ch) {
    /* allow auto-sized cells to be at least 11in each */
    table {min-width: 66ch;}
    .col_name { width: auto; }
    .col_valu { width: auto; }
    .col_doma { width: auto; }
    .col_path { width:  7ch; } /* The path is not really that important */
    .col_flag { width:  7ch; } /* httpOnly, private and secure still fit without break */
    .col_expi { width: 11ch; }
    .col_butt { width:  8ch ;}
    .cell-content {
        /* 4.5 lines (assuming line-height:1.2): */
        max-height: 5.4em;
        padding-left: 1px;
    }
    /* The "New Cookie" option is also available from the menu. */
    #show-new-form {
        display: none;
    }
}