/**
* SeekQuarry/Yioop --
* Open Source Pure PHP Search Engine, Crawler, and Indexer
*
* Copyright (C) 2009 - 2026 Chris Pollett chris@pollett.org
*
* LICENSE:
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*
* END LICENSE
*
* @author Chris Pollett chris@pollett.org
* @license https://www.gnu.org/licenses/ GPL3
* @link https://www.seekquarry.com/
* @copyright 2009 - 2026
* @filesource
*/
/*
search.css
Main stylesheet for Yioop search engine
*/
/*
The colors the interface is drawn in, named once here so that a rule
below asks for the color it wants rather than repeating what that
color happens to be.
The greys are a ladder from black to white numbered by how light each
rung is, so --gray-0 is black, --gray-100 is white, and --gray-33 sits
a third of the way up. Where two rungs are close together the
stylesheet was already using both.
The four beneath them are what a site sets for itself on the Appearance
screen. Those used to be written into the head of every page along with
every selector that used them; a page now sends just these four values
and the rules that read them stay here, where a browser can keep them.
--control-height is how tall a thing you can press or type into stands:
an icon button, a select, a search field. It was written out seven times
over, which is why a row of controls that ought to line up does not.
--toolbar-control-height is a touch taller, the height the resource
toolbar's row settles at: a dropdown there carries an inner list item
whose own height comes out near 2.17rem, so the row is set to 2.2rem to
hold the tallest control without cutting any off.
Two tokens above the type sizes make things fluid: --fluid-onset is the
viewport width (68.75rem) at and below which type and the page-content
widths sit at their base size, and above which they grow; --fluid-rate
is how fast they grow per unit of viewport past that onset. Each fluid
size is a clamp of a floor at its base, a middle that grows with the
viewport once past the onset, and a ceiling a few points above.
The type sizes are the seven the stylesheets lean on, smallest first.
--font-size-base is the size body text is set in, and it is the one a
browser would have chosen anyway: 12pt is 16px, the default. Naming
them gathers what was 142 declarations into seven values, so that
saying type in a unit a screen understands rather than a printer
becomes a change to seven lines here.
*/
:root
{
/* The site is light by default, so light-dark() below resolves to its
first value and the page looks exactly as it did. When a site turns
on light/dark in Appearance, the layout adds color-scheme-auto to the
root, color-scheme becomes "light dark", and every light-dark() pair
follows the visitor's prefers-color-scheme. The dark values invert
the ladder end for end, so a gray used as text (near 0) becomes light
on dark and a gray used as a panel (near 100) becomes dark, and the
whole interface turns over from this one place. */
color-scheme: light;
--gray-0: light-dark(#000000, #ffffff);
--gray-13: light-dark(#222222, #e8e8e8);
--gray-20: light-dark(#333333, #dddddd);
--gray-27: light-dark(#444444, #cccccc);
--gray-33: light-dark(#555555, #bbbbbb);
--gray-40: light-dark(#666666, #aaaaaa);
--gray-47: light-dark(#777777, #9a9a9a);
--gray-50: light-dark(#808080, #909090);
--gray-53: light-dark(#888888, #888888);
--gray-60: light-dark(#999999, #777777);
--gray-67: light-dark(#aaaaaa, #666666);
--gray-73: light-dark(#bbbbbb, #555555);
--gray-80: light-dark(#cccccc, #444444);
--gray-82: light-dark(#d0d0d0, #3a3a3a);
--gray-87: light-dark(#dddddd, #333333);
--gray-88: light-dark(#e0e0e0, #2c2c2c);
--gray-93: light-dark(#eeeeee, #262626);
--gray-94: light-dark(#f0f0f0, #222222);
--gray-100: light-dark(#ffffff, #1a1a1a);
--color-background: var(--gray-100);
--color-foreground: var(--gray-100);
--color-sidebar: var(--gray-94);
--color-topbar: light-dark(#eeeeff, #23233a);
--fluid-onset: 68.75rem;
--fluid-rate: 0.005;
--font-size-1: clamp(10pt,
calc(10pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 12pt);
--font-size-2: clamp(11pt,
calc(11pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 13pt);
--font-size-3: clamp(12pt,
calc(12pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 15pt);
--font-size-4: clamp(13pt,
calc(13pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 16pt);
--font-size-5: clamp(14pt,
calc(14pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 18pt);
--font-size-6: clamp(16pt,
calc(16pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 20pt);
--font-size-7: clamp(18pt,
calc(18pt + (100vw - var(--fluid-onset)) * var(--fluid-rate)), 22pt);
--font-size-base: var(--font-size-3);
--control-height: 2rem;
--toolbar-control-height: 2.2rem;
/* The least width a page-resource folder gives one card in its grid
layout. The folder divides the width it is handed by this figure to
decide how many columns fit, so it is what a thumbnail and the name
under it need to stay readable rather than a column count. */
--resource-card-min: 16.5rem;
/* The least width the name column of the folder's list layout keeps.
Below this the name stops giving room back to the columns beside
it, which is the point at which those columns are dropped. */
--resource-name-min: 8rem;
}
/* The layout adds this class to the root only when the site has turned on
light/dark in Appearance. It widens color-scheme so the light-dark()
pairs above follow the visitor's prefers-color-scheme; without it the
root stays "light" and the site keeps its single built-in appearance. */
:root.color-scheme-auto
{
color-scheme: light dark;
}
/*
What those four settable colors are painted onto.
*/
body
{
background-color: var(--color-background);
}
.frame,
.icon-upload,
.current-activity,
.light-content,
.small-margin-current-activity,
.suggest-list li span.unselected
{
background-color: var(--color-foreground);
}
.foreground-color,
.icon-upload
{
color: var(--color-foreground);
}
.seen-resource,
.cookie-consent,
#nav-container
{
background-color: var(--color-sidebar);
}
.light-content
{
border: 3px solid var(--color-sidebar);
}
.sidebar-color
{
color: var(--color-sidebar);
}
.top-color,
.suggest-list li span.selected,
.search-button:hover,
.search-box-inner:focus-within .search-reset-button:hover,
.search-box
{
background-color: var(--color-topbar);
}
.top-container,
.top-container .inner-bar
{
background: var(--color-topbar);
}
.display-ad p,
p.start-ad
{
background-color: #DFD;
}
html, body, .subsearch ul
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/*
We begin with some generic global styles
and classes
*/
h1.slim,
h2,
h3,
h4
{
margin-bottom: 0;
margin-top: 0;
}
h1.slim
{
font-size: 24pt;
}
p
{
margin: 0;
padding: 0;
width: auto;
}
input:disabled
{
color:var(--gray-33);
}
ol li li
{
list-style-type: lower-alpha;
}
ol li li li
{
list-style-type: lower-roman;
}
.echo-link
{
color: var(--gray-50);
font-size: var(--font-size-2);
overflow-wrap: break-word;
word-wrap: break-word;
}
.hidden
{
visibility: hidden;
}
.no-bullet
{
list-style-type: none;
}
.disabled {
pointer-events: none;
text-decoration: none;
}
.left
{
float: left;
}
.right
{
float: right;
}
.clear
{
clear:both;
}
.none
{
display:none;
}
.no-bold
{
font-weight:normal;
}
.nowrap
{
white-space: nowrap;
}
.no-margin
{
margin: 0;
}
.no-min-height
{
min-height: unset !important;
}
.inline div,
.inline form,
.inline p
{
display: inline-block;
}
.inline ul,
.inline li
{
display: inline;
list-style-type: none;
}
.inline li
{
border-right: 2px solid var(--gray-0);
padding:0.3rem;
}
.inline li:first-child
{
border-left: 2px solid var(--gray-0);
padding:0.18rem;
}
.indent
{
text-indent: 1.5rem;
}
span.indent1
{
margin-left: 1.5rem;
}
span.indent2
{
margin-left: 3rem;
}
span.indent3
{
margin-left: 4.5rem;
}
span.indent4
{
margin-left: 6rem;
}
span.indent5
{
margin-left: 7.5rem;
}
.html-ltr .float-opposite,
.html-rtl .float-opposite
{
float: inline-end;
}.html-ltr .float-same,
.html-rtl .float-same
{
float: inline-start;
}.align-right
{
text-align: right;
}
.align-left
{
text-align: left;
}
.align-center
{
text-align: center;
}.html-ltr .align-opposite,
.html-rtl .align-opposite
{
text-align: end !important;
}.html-ltr .align-same,
.html-rtl .align-same
{
text-align: start !important;
}.top-space
{
position:relative;
top: 0.5rem;
}
.no-padding
{
padding: 0px !important;
}
.small-padding
{
padding: 2px;
}
.medium-padding
{
padding: 0.25rem;
}
.large-padding
{
padding: 0.5rem;
}
.top-space-medium
{
position:relative;
top: 0.25rem;
}
.top-space-px
{
position:relative;
top: 1px;
}
.blockquote
{
margin-left: 1.8rem;
margin-right: 1.8rem;
}
.no-decoration
{
text-decoration: none;
}
.underline-hover
{
text-decoration: none;
}
.underline-hover:hover
{
text-decoration: underline;
}
.tiny-font
{
font-size:9.5pt !important;
}
.medium-large
{
font-size:20pt !important;
}
.small-font
{
font-size: var(--font-size-3) !important;
}
.smaller-font
{
font-size:smaller !important;
}
.medium-font
{
font-size: var(--font-size-6) !important;
}
.big-font
{
font-size:20pt !important;
}
.bigger-font
{
font-size: larger !important;
}
.huge-font
{
font-size:26pt !important;
}
.underline
{
text-decoration: underline;
}
.dotted-underline
{
border-bottom: 2px dotted;
}
.black,
.black-inside *
{
color: var(--gray-0);
}
.red,
.red-inside *
{
color: #D00;
}
.field-error
{
border: 1px solid #D00;
box-shadow: 0px 0px 3px 2px #D00;
}
.field-ok
{
border: 1px solid green;
box-shadow: 0px 0px 3px 2px green;
}
.required-star
{
color: #D00;
font-size: 1.4em;
font-weight: bold;
vertical-align: middle;
margin-left: 0.25em;
}
.password-requirements-text
{
display: block;
max-width: 11.4rem;
}
.purple,
.purple-inside *
{
color: purple;
}
.green,
.green-inside *
{
color: green;
}
.podcast-spin
{
display: inline-block;
vertical-align: middle;
transform-origin: center center;
animation: podcast-spin-rotate 1.2s linear infinite;
}
.podcast-controls-row
{
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.podcast-controls-row .media-controls
{
flex: 1 1 auto;
margin-bottom: 0;
}
.podcast-controls-row #podcast-status-body
{
margin-top: 0;
margin-bottom: 0;
line-height: 1;
position: relative;
top: 0.1875rem;
}
@keyframes podcast-spin-rotate
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.white,
.white-inside *
{
color: var(--gray-100);
}
.highlight,
.back-red
{
background-color: red;
}
.back-aliceblue
{
background-color: aliceblue;
}
.back-gold
{
background-color: #fafad2;
}
.back-ghostwhite
{
background-color: ghostwhite;
}
.back-ivory
{
background-color: ivory;
}
.back-honeydew
{
background-color: honeydew;
}
.back-floralwhite
{
background-color: floralwhite;
}
.back-lavender
{
background-color: lavender;
}
.back-green
{
background-color: green;
}
.back-light-coral
{
background-color: lightcoral;
}
.back-light-blue
{
background-color: lightblue;
}
.back-blue
{
background-color: blue;
}
.back-light-green
{
background-color: lightgreen;
}
.back-green
{
background-color: green;
}
.back-light-gray
{
background-color: var(--gray-93);
}
.back-gray
{
background-color: var(--gray-82);
}
.back-ghost
{
background-color: ghostwhite;
}
.gray
{
color: var(--gray-33);
}
.light-gray
{
color: var(--gray-73);
}
.back-dark-gray
{
background-color: var(--gray-80);
}
.gray-link,
.gray-link a
{
color: var(--gray-33);
text-decoration: none;
}
.gray-link:hover,
.gray-link a:hover
{
text-decoration: underline;
}
.gray-text
{
color: var(--gray-33);
}
.white
{
color: var(--gray-100);
}
a.echo-link,
a.hover-link,
.echo-link a,
.hover-link a
{
text-decoration: none;
}
a.echo-link:hover,
a.hover-link:hover,
.echo-link a:hover,
.hover-link a:hover
{
text-decoration: underline;
}
.hover-lightgray:hover
{
background-color: var(--gray-82);
border-radius:5px;
}
.back-yellow
{
background-color: yellow;
}
.center-page
{
left: 0;
margin: auto;
max-width: 90%;
overflow-wrap: break-word;
position: fixed;
right: 0;
text-align: center;
top: 30%;
}
.warning
{
color:red;
}
.clear
{
clear: both;
}
.rounded *
{
border-radius: 8px;
}
.width-half
{
width:50%;
}
.width-three-quarter
{
width:75%;
}
.width-half img,
.width-three-quarter img
{
width:100%;
}
.frame
{
border: 1px solid var(--gray-80);
position: relative;
}
.solid-border {
border: 1px solid var(--gray-80);
border-radius: 8px;
}
.dashed-border {
border: 1px dashed var(--gray-80);
border-radius: 8px;
}
.very-narrow-field
{
width: 6rem;
font-size: var(--font-size-1);
height:1.5625rem;
}
.narrow-field
{
width: 11.4rem;
}
.wide-field
{
width: 18rem;
}
.extra-wide-field
{
width: 30rem;
}
.range-field
{
border: 1px solid var(--gray-50);
display:inline-block;
margin: 0.1875rem;
padding: 0.1875rem;
}
.range-field hr
{
width: 7%;
}
.tall-text-area
{
height: 24rem;
width: 100%;
}
.no-resize
{
resize: none;
}
.formatted-share-wall
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
margin: 0.1875rem;
max-height: 24rem;
overflow-y: scroll;
padding: 0;
resize: none;
}
.formatted-share-wall > div
{
counter-reset: line;
display: table;
font: 0.8125rem monospace;
line-height: 1.2rem;
white-space: pre;
width: 100%;
}
.formatted-share-wall > div > div
{
display: table-row;
}
.formatted-share-wall > div > div:before
{
background-color: var(--gray-94);
counter-increment: line;
content: counter(line) ".";
display: table-cell;
overflow-x: scroll;
text-align: right;
width:3em;
}
.share-wall
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
height: 24rem;
margin: 0.1875rem;
padding: 0;
resize: none;
width: 99%;
}
.small-text-area
{
height: 15rem;
width: 100%;
}
/* auto-fill fits as many card columns as the folder's own width allows and
shares any width left over between them, so the folder answers the room
it is given rather than a column count picked per screen size. */
.grid-container
{
display: grid;
gap: 0.6rem;
grid-template-columns:
repeat(auto-fill, minmax(var(--resource-card-min), 1fr));
}
.dragging-resource,
.dragging-resource td
{
opacity: 0.5;
}
.resource-drag-count
{
background-color: var(--gray-93);
border-radius: 4px;
border: solid 1px var(--gray-50);
color: var(--gray-0);
left: -1000px;
padding: 4px 8px;
position: absolute;
top: -1000px;
}
.selected-resource,
.selected-resource td
{
/* the same fill the mail list marks a chosen row with, so choosing
several resources looks the same as choosing several messages */
background-color: #e0d8f5;
}
.selected-resource:hover,
.selected-resource:hover td
{
background-color: #d6cce8;
}
.grid-resource
{
border: 1px solid var(--gray-0);
border-radius: 5px;
overflow-x: auto;
padding: 0.3rem;
text-align: center;
}
tr.parent-folder-row
{
background-color: #eef2fb;
border-bottom: 1px solid #b9c4dd;
}
tr.parent-folder-row td
{
border-bottom: 1px solid #b9c4dd;
}
.parent-folder-link
{
color: blue;
text-decoration: underline;
font-weight: bold;
}
.grid-resource.parent-folder-row
{
border: 2px solid blue;
background-color: #eef2fb;
}
.parent-folder-detail
{
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
margin-bottom: 0.375rem;
border: 2px solid blue;
border-radius: 5px;
background-color: #eef2fb;
}
.grid-resource input
{
text-align:center;
max-width:100%;
}
.seen-resource input
{
background-color: inherit;
}
.seen-resource input:focus-within
{
background-color: var(--gray-100);
}
.list-resource button,
.list-resource .media-anchor-button,
.grid-resource .media-anchor-button,
.grid-resource button,
h2.resource-field .media-anchor-button,
h2.resource-field button,
.media-detail-description button
{
display: none;
}
#info-item
{
background-color: var(--gray-100);
border: 2px solid var(--gray-50);
border-radius: 15px;
display: none;
height: calc(100% - 12rem);
left:3rem;
opacity: 1.0;
padding: 0.3125rem;
position: fixed;
top: 7.5rem;
width: calc(100% - 12rem);
z-index: 100;
}
#detail-item
{
border: 1px solid var(--gray-0);
display: block;
height: 26.4rem;
}
#info-item iframe
{
border-radius: 15px;
height: calc(100% - 3rem);
margin-left:1.2rem;
width: calc(100% - 2.4rem);
}
#detail-item iframe
{
height: 100%;
width: 100%;
}
.detail-container
{
display: flex;
flex-direction: row;
height: 9.6rem;
overflow-x: auto;
vertical-align: bottom;
}
.detail-resource
{
border: 1px solid var(--gray-0);
border-radius: 5px;
display: inline-block;
margin: 0.3rem;
overflow-x: hidden;
padding: 0.3rem;
text-align: center;
min-width: 12rem;
max-width: 12rem;
}
.detail-resource img
{
height: 6rem;
}
.resource-thumb
{
position: relative;
}
.grid-resource img
{
height:7.8rem;
}
.resource-description
{
overflow-wrap: break-word;
white-space: pre;
}
div[data-badge]::after,
.badge
{
border: 1px solid var(--gray-0);
border-radius: 10px;
display: inline-block;
font-size: var(--font-size-1);
left: 1.25rem;
padding: 2px;
position: absolute;
top: 0;
}
div[data-badge]::after
{
background-color: green;
color: var(--gray-100);
content: attr(data-badge);
top: -0.9375rem;
left: -0.625rem;
}
.detail-container div[data-badge]::after,
grid-container div[data-badge]::after,
.detail-container .badge,
.grid-container .badge
{
font-size: var(--font-size-6);
left:0px;
}
.resizable
{
resize: horizontal;
overflow: auto;
}
h2.resource-field input
{
font-size: 24pt;
font-weight: bold;
text-align: center;
}
/* The width left after the row's action buttons, which stay in the flow
whether or not they are showing so the field does not change width when
the row is focused. There is no floor under it: the column the field
sits in already keeps a minimum, and a floor here was what stopped the
folder narrowing past about five hundred pixels. */
.resource-field input
{
border:0;
color:var(--gray-0);
min-width: 0;
padding:2px;
width:calc(100% - 3.125rem);
}
/* The name is the column a reader reads and renames in, so it is the
column given any width left over; the columns beside it take what
their content needs. Their widths are set by the folder's grid
template rather than here. */
.resource-modified-column
{
white-space: nowrap;
}
.resource-field .user-accounts-edit-toolbar
{
vertical-align: middle;
display: none;
}
.list-resource:focus-within .resource-field .user-accounts-edit-toolbar,
.grid-resource:focus-within .resource-field .user-accounts-edit-toolbar,
.resource-field:focus-within .user-accounts-edit-toolbar,
.media-detail-description:focus-within .user-accounts-edit-toolbar
{
display: inline-flex;
}
.user-accounts-edit-btn
{
vertical-align: middle;
}
.resource-field input:hover
{
border:1px var(--gray-50) solid;
border-radius:5px;
text-decoration:underline;
}
.info-link
{
padding: 0.3125rem;
text-decoration:none;
}
.info-link:hover
{
border: 1px solid blue;
background-color:var(--gray-93);
border-radius: 5px;
color:blue;
}
.resource-field:focus-within input
{
border:1px var(--gray-50) solid;
border-radius:5px;
color:var(--gray-0);
text-decoration:none;
}
.list-resource .resource-field:focus-within input,
.grid-resource .resource-field:focus-within input
{
width: calc(100% - 10.3125rem);
}
.user-accounts-edit-btn
{
line-height: 1;
justify-content: center;
vertical-align: middle;
box-sizing: border-box;
}
.resource-field .user-accounts-edit-btn
{
min-height: 1.6em;
}
.resource-more-glyph
{
display: block;
line-height: 1;
margin-top: -0.5em;
}
.grid-resource:focus-within button:not(.user-accounts-edit-btn),
h2.resource-field:focus-within button:not(.user-accounts-edit-btn),
.list-resource:focus-within button:not(.user-accounts-edit-btn),
.media-detail-description:focus-within button:not(.user-accounts-edit-btn)
{
background-color: #F0F0F6;
border: 1px solid var(--gray-50);
border-radius: 5px;
color: var(--gray-0);
display: inline;
font-size: var(--font-size-2);
font-weight: bold;
}
.grid-resource:focus-within .user-accounts-edit-btn,
h2.resource-field:focus-within .user-accounts-edit-btn,
.list-resource:focus-within .user-accounts-edit-btn,
.media-detail-description:focus-within .user-accounts-edit-btn
{
display: inline-flex;
}
.grid-resource:focus-within .resource-more-menu,
h2.resource-field:focus-within .resource-more-menu,
.list-resource:focus-within .resource-more-menu,
.media-detail-description:focus-within .resource-more-menu
{
display: inline-block;
}
.media-detail-description:focus-within div
{
margin: 0.3125rem;
text-align:center;
}
.grid-resource:focus-within .media-anchor-button,
h2.resource-field:focus-within .media-anchor-button,
.list-resource:focus-within .media-anchor-button
{
background-color: #F0F0F6;
border:1px solid var(--gray-50);
border-radius:5px;
color:var(--gray-0);
display:inline-block;
font-size: var(--font-size-2);
font-weight:bold;
}
.list-resource:focus-within button svg,
.grid-resource:focus-within button svg,
.resource-field:focus-within button svg
{
width: 1.375rem;
height: 1.375rem;
}
.seen-resource:focus-within button,
.seen-resource:focus-within button,
.seen-resource:focus-within .media-anchor-button,
.seen-resource:focus-within .media-anchor-button
{
background-color: var(--gray-100);
}
.grid-resource:focus-within button:hover,
.list-resource:focus-within button:hover
{
background-color: var(--gray-82);
}
.media-detail-description
{
margin:auto;
width:60%;
}
.media-detail-description textarea
{
border:0;
color:var(--gray-0);
padding:2px;
width:100%;
height: 9rem;
}
.media-detail-description textarea:hover
{
border:1px var(--gray-50) solid;
border-radius:5px;
text-decoration:underline;
}
.media-detail-description:focus-within textarea
{
border:1px var(--gray-50) solid;
border-radius:5px;
color:var(--gray-0);
text-decoration:none;
}
.medium-text-area
{
height: 15rem;
width: 100%;
}
.short-text-area
{
width: 98%;
height: 6rem;
}
.short-text-area-two
{
font-family: Arial, Helvetica, sans-serif;
font-size: var(--font-size-6);
height: 6rem;
}
.short-text-area-three
{
font-family: Arial, Helvetica, sans-serif;
font-size: var(--font-size-6);
height: 4.2rem;
}
.center,
.center-inside *
{
margin: 0 auto 0 auto;
text-align: center;
}
.bold
{
font-weight: bold;
}
.sides-margin
{
margin-left:3.6rem;
margin-right:3.6rem;
}
.reduce-top
{
position: relative;
top: -0.6rem;
}
.top-margin
{
margin-top: 1.2rem;
}
.top-bottom-margin
{
margin: 1.2rem 0 1.2rem 0;
}
.small-top-bottom-margin
{
margin: 0.6rem 0 0.6rem 0;
}
.bottom-margin
{
margin-bottom: 1.2rem;
}
.no-margin
{
margin: 0 !important;
}
.tiny-margin
{
margin: 1px !important;
}
.small-margin
{
margin: 2px !important;
}
.medium-margin
{
margin: 0.25rem !important;
}
.large-margin
{
margin: 0.5rem !important;
}
.box
{
border: 1px ridge var(--gray-80);
padding: 0.1875rem;
}
.black-box
{
border:2px ridge var(--gray-0);
padding:0.3125rem;
}
.light-gray-box
{
border:2px ridge var(--gray-73);
padding:0.3125rem;
}
.slight-pad
{
padding: 0.6rem;
}
.border-top
{
border-top:2px solid var(--gray-0);
padding-top:0.3125rem;
}
.align-top
{
vertical-align: top;
}
fieldset
{
border-color:var(--gray-0);
}
/* set up prefixes for left-to-right, right-to-left and vertical text support*/
.html-tb
{
-ms-block-progression: tb;
}
.html-rl
{
-ms-block-progression: rl;
}
.html-lr
{
-ms-block-progression: lr;
}
.html-rtl
{
direction: rtl;
text-align: right;
}
.html-ltr
{
direction: ltr;
text-align: left;
}
body.html-rl-tb
{
}
body.html-lr-tb
{
writing-mode: horizontal-tb;
}
body.html-tb-rl
{
writing-mode: vertical-rl;
}
body.html-tb-lr
{
writing-mode: vertical-lr;
}
/* set up global font preferences */
body
{
font-family: Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
padding: 0;
width: auto;
}
/* Narrow phones are handled by the @media (max-width: 600px) block at
the end of this file -- an attempt has been made to make the default
wide version of the page work with tablets
*/
.body-container
{
border: 0;
margin: auto;
/* the content column holds its designed width on a normal window and
is allowed to grow toward the viewport on a wide one, up to a
ceiling; below the onset the middle term is at or under the floor,
so nothing changes from how it was. making the floor larger will
affect help visibility. both the width and the floor beneath it are
held to the window as well, because a floor the window cannot meet
is what made every page wider than its own window between the phone
layout's cutoff and the width the floor asks for. */
width: min(100%, clamp(57rem,
calc(57rem + (100vw - var(--fluid-onset)) * 0.5), 72rem));
min-width: min(66rem, 100%);
padding: 0;
}
.search-body
{
width: min(100%, clamp(75rem,
calc(75rem + (100vw - var(--fluid-onset)) * 0.5), 90rem));
min-width: min(75rem, 100%);
}
.html-ltr .body-container,
.html-ltr .top-container,
.html-rtl .body-container,
.html-rtl .top-container
{
transition: margin-left .25s ease-in;
}/* bar on which web, images, video subsearches and sign-in stuff live
for many of the below things we need to handle them different on the landing
page from pages where search results appear
*/
.top-container
{
height: 4.0625rem;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
z-index: 10;
}
.top-container.landing
{
background-color: var(--gray-100);
}
.top-container .inner-bar
{
height: 3.75rem;
margin: 0;
}
.top-container.landing .inner-bar
{
background-color: var(--gray-100);
}
.acting-as .top-container
{
top: 2.5rem;
}
.acting-as .body-container
{
padding-top: 2.5rem;
}
.acting-as #nav-container
{
top: 2.5rem;
height: calc(100% - 2.5rem);
}
.top-landing-spacer
{
clear:both;
height:12rem;
}
/* this is for informational messages when settings are changed or admin stuff
done
*/
#message
{
left: 12rem;
position: fixed;
right: 12rem;
text-align: center;
top: 0.6rem;
width:auto;
z-index: 13;
}
.display-message
{
color:#D00;
}
/*
top nav bar and settings toggle
*/
/* less the padding either side, which sits outside the width being
floored, so the bar gives way to a window narrower than its design */
.nav-bar
{
min-width: min(57rem, calc(100% - 0.625rem));
padding: 0.3125rem;
}
.landing .nav-bar
{
min-width: unset;
width: 4.0625rem;
}
.nav-bar .title-block
{
margin:0;
min-width: min(54rem, 100%);
max-width:60rem;
padding:0;
text-align: center;
}
.nav-bar h1
{
display: inline;
}
.nav-bar h1 img
{
position:relative;
top: 2px;
}
.nav-bar .nav-span
{
display: inline-block;
font-family: Arial;
font-size: 2rem;
font-weight: 700;
height: 32pt;
margin: 2px;
max-width: 42rem;
padding: 0;
position: relative;
top:-1.25rem;
white-space: nowrap;
}
/* The account bar holds one activity name beside the home button and
nothing else, so it is laid out as a centered row and the little house
sits level with the word. The group bar keeps the inline-block above,
because it carries a group-name link, colons, and several icon buttons
whose own alignment the row layout would disturb. */
.nav-bar .nav-span.activity-nav
{
align-items: center;
display: inline-flex;
}.html-ltr .nav-bar .nav-span,
.html-rtl .nav-bar .nav-span
{
text-align: start;
}.wide-bar-item,
.group-title-item,
.bar-item
{
display: inline-block;
margin: 0;
max-width: 12rem;
overflow: hidden;
padding: 0;
position: relative;
text-overflow: ellipsis "[..]";
top: 0.625rem;
}
/* The group's name is an inline-block in a row of plain text and icon
buttons. Left on the baseline it rides high, because an inline-block
aligns by the baseline of its last line rather than by its middle;
asked to align by its middle it sits level with the counts beside it,
where the name of the row's subject belongs. */
.group-title-item
{
top: 0;
vertical-align: middle;
}
.wide-bar-item
{
max-width: 24rem;
}
.html-ltr #nav-container,
.html-rtl #nav-container
{
height: 100%;
inset-inline-start: -18.75rem;
overflow-y: scroll;
position: fixed;
top: 0;
transition: inset-inline-start .25s ease-in;
width: 18.75rem;
z-index:100;
}.html-ltr .menu-options,
.html-rtl .menu-options
{
position: relative;
z-index: 100;
}#admin-menu-options
{
display: none;
}
.menu-options h2
{
font-size: var(--font-size-4);
padding: 0;
margin: 0 0.1875rem 0 0.1875rem;
}
.menu-option-heading,
.option-heading
{
margin: 0 2px 0 2px;
padding: 0;
}.html-ltr .menu-option-heading,
.html-rtl .menu-option-heading
{
position:relative;
inset-inline-start:-2.22rem;
}.menu-toggle
{
font-size: var(--font-size-4);
margin: 0;
padding: 0 0.6rem 0 0.6rem;
}
.menu-options ul
{
font-size: var(--font-size-3);
margin-bottom: 0.3125rem;
margin-top: 1px;
}
.menu-options li
{
padding: 1px;
}
.menu-options select
{
font-size: var(--font-size-4);
}
#menu-options-background {
background-color: var(--gray-0);
display: none;
min-height: 100%;
left: 0px;
opacity: 0.15;
position: fixed;
top: 0px;
transition: all 2s ease-in;
width: 100%;
z-index:50;
}
/* controls */
.anchor-button,
.anchor-button-consent,
.vote-button
{
background-color: var(--gray-94);
border: ridge 1px var(--gray-87);
color: var(--gray-0);
cursor: pointer;
display: inline-block;
font-weight: bold;
margin: 2px;
padding: 0.25rem;
text-align: center;
text-decoration: none;
}
.source-anchor-button
{
background-color: #E9E9ED;
border: ridge 1px var(--gray-0);
border-radius: 5px;
color: var(--gray-0);
cursor: pointer;
display: inline-block;
font-size: var(--font-size-6);
margin: 0.1875rem;
padding: 0.375rem 0.3125rem 0.3125rem 0.3125rem;
position: relative;
text-align: center;
text-decoration: none;
top: 1px;
}
.vote-button
{
background-color: var(--gray-87);
border-radius: 5px;
color: var(--gray-33);
margin: 1px;
min-width:0.9rem;
padding: 1px;
}
.anchor-button-consent
{
background-color: var(--gray-40);
border-radius: 5px;
color: var(--gray-100);
}
.anchor-button:hover
{
text-decoration: underline;
}
.anchor-button-consent:hover,
.vote-button:hover
{
background-color: var(--gray-20);
color: var(--gray-100);
}
.button-anchor
{
background:inherit;
border: 0;
color: blue;
font-size: 1rem;
padding: 0;
text-decoration:underline;
}
.user-accounts-edit-toolbar
{
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 0.25rem;
vertical-align: middle;
}
.user-accounts-edit-btn
{
padding: 0 0.3125rem;
background-color: var(--gray-100);
border: 1px solid var(--gray-80);
border-radius: 3px;
cursor: pointer;
color: var(--gray-33);
font-size: var(--font-size-2);
line-height: 1.4;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.user-accounts-edit-btn:hover
{
background-color: var(--gray-94);
color: var(--gray-20);
}
.user-accounts-rename-input
{
display: inline-block;
width: 100%;
max-width: 100%;
padding: 2px 0.375rem;
border: 1px solid var(--gray-80);
border-radius: 3px;
font-size: inherit;
font-family: inherit;
box-sizing: border-box;
vertical-align: middle;
}
.resource-more-menu
{
display: inline-block;
}
.resource-more-options
{
position: absolute;
z-index: 10;
margin-top: 2px;
background-color: var(--gray-100);
border: 1px solid var(--gray-80);
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
.resource-more-options a
{
display: block;
padding: 0.25rem 0.625rem;
color: var(--gray-33);
text-decoration: none;
font-size: var(--font-size-2);
}
.resource-more-options a:hover
{
background-color: var(--gray-94);
color: var(--gray-20);
}
.media-anchor-button
{
background:inherit;
color: var(--gray-0);
font-size: var(--font-size-5);
display: inline-block;
margin: 2px;
padding: 2px;
position:relative;
text-decoration:none;
}
.media-anchor-button:hover
{
background-color:var(--gray-82) !important;
border-radius:5px;
}
.button-container
{
display:inline-block;
position:relative;
}
div[aria-label]:focus-visible:after,
div[aria-label]:hover:after,
span[aria-label]:focus-visible:after,
span[aria-label]:hover:after
{
background: var(--gray-0);
border-radius: 3px;
content: attr(aria-label);
color: var(--gray-100);
display: block;
font-size: var(--font-size-1);
padding: 0.1875rem;
position: absolute;
word-break: normal;
z-index: 1000;
}
#discuss-button
{
display:inline-block;
}.html-ltr #discuss-button span[aria-label]:focus-visible:after,
.html-ltr #discuss-button span[aria-label]:hover:after,
.html-rtl #discuss-button span[aria-label]:focus-visible:after,
.html-rtl #discuss-button span[aria-label]:hover:after
{
inset-inline-end:0px;
}/*
ComponentView styles
*/
.same-container,
.opposite-container
{
margin-left: 1%;
margin-right: 1%;
max-width: 20%;
min-width: 14%;
}.html-ltr .same-container,
.html-rtl .same-container
{
float: inline-start;
}.html-ltr .opposite-container,
.html-rtl .opposite-container
{
float: inline-end;
}.sub-top-container
{
margin: 0;
margin-top: 4.0625rem;
}
.center-container
{
margin-left: 3rem;
margin-right: 3rem;
margin-top: 0px;
}
/* the margins either side are what the window has to cover beyond this
floor, so the floor gives way to them rather than to the window itself */
.search-body .center-container
{
min-width: min(69rem, calc(100% - 6rem));
}
.center-container .landing
{
margin: auto;
}
.footer
{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: var(--gray-100);
text-align: center;
}
.cookie-consent
{
bottom: 0;
left: 0;
padding: 0.4375rem;
position: fixed;
text-align: center;
width: 100%;
}
/*
Landing page (www.yioop.com) specific css
*/
.small-top
{
position: relative;
top:-4.8rem;
}
.medium-top
{
margin-left:1.8rem;
margin-right:1.8rem;
position: relative;
top:-4.8rem;
}
.square-list
{
list-style-type: square;
}
/*
Style tweaks for blog, privacy, bot, settings, and admin pages
*/
/*
Styles to control logo (image + adjacent text) on various pages
*/
.logo
{
margin: 0 auto 0 auto;
left: 0.6rem;
position: relative;
right: 0.6rem;
top: -0.3rem;
}
.request-add
{
font-size: var(--font-size-3);
height:0;
position:relative;
top:-1.5625rem;
}
.group-request-add
{
font-size: var(--font-size-3);
height:0;
}
.feed-back-link
{
font-size: var(--font-size-3);
}
.group-feed-back-link
{
font-size: var(--font-size-3);
margin-left:10.5rem;
margin-right:10.5rem;
}
.group-wiki-title select,
.group-feed-title select
{
border-radius:6px;
font-size: var(--font-size-6);
font-weight:bold;
padding:0.25rem;
}
.admin-heading
{
margin-left: 0.36rem;
margin-right: 0.36rem;
}
.group-heading
{
margin: 0.6rem auto 2.4rem auto;
text-align:center;
}
.group-heading span
{
position: relative;
top: -1.875rem;
}
.group-heading span select
{
border-radius:6px;
font-size: var(--font-size-3);
font-weight:bold;
padding:0.25rem;
position: relative;
top:-2px;
}
.landing .logo
{
min-width: min(36rem, 100%);
position: relative;
text-align: center;
top: 0;
}
.landing.non-search
{
clear: both;
margin-top: 9rem;
}
.logo img
{
border: 0;
width:12rem;
}
.group-heading img.logo
{
width: 9rem;
}
.group-comment
{
margin: 0.625rem 0.5rem 0.625rem 0.5rem !important;
}
.landing .logo img
{
border: 0;
width: 18rem;
}
.logo span
{
position: relative;
top: -1.8rem;
}
.html-ltr b.logo-subsearch,
.html-rtl b.logo-subsearch
{
font-size: var(--font-size-3);
inset-inline-start: 4.375rem;
position: fixed;
top: 2.8125rem;
transition: inset-inline-start .25s ease-in;
}
.logo-subsearch
{
font-size: 30pt;
position: relative;
text-align: center;
top: -3.125rem;
}
/*
Styles for footers on various pages
*/
.footer-element
{
clear:both;
margin:auto;
margin-top: 1.5625rem;
text-align:center;
}
.signin-exit
{
clear: both;
margin: 1.5rem auto 1.5rem auto;
width: 42rem;
text-align: center;
}
.html-ltr .signin-exit li,
.html-rtl .signin-exit li
{
text-align: start;
list-style-type: square;
margin-inline-start:13.8rem;
}
/*
If query information is available then web_layout will
render statistics about all the SQL and search engine
queries that were executed for a page. These styles
control how this diagnostic info renders
*/
.query-statistics
{
border-top: 2px solid var(--gray-50);
color: var(--gray-40);
margin-top: 2.4rem;
}
.query
{
border: 1px solid var(--gray-50);
margin: 0.6rem;
padding: 0.3rem;
}
/*
Styles for the login, settings, and register pages
*/
.html-ltr .cancel,
.html-rtl .cancel
{
text-align: end;
}
.login
{
font-size: var(--font-size-6);
width: 30rem;
margin: 0 auto 0 auto;
}
#settings-toggle-icon,
#settings-toggle-icon-b
{
position:relative;
top:0.3125rem;
}
#settings-toggle-icon-b:hover,
#settings-toggle-icon:hover
{
background-color: var(--gray-100);
border: 1px solid var(--gray-0);
border-radius: 10px;
height:3.6rem;
width:2.52rem;
z-index:1001;
}
.settings .top
{
font-size:0.875rem;
margin:0;
padding:0;
position:relative;
top:0.3125rem;
}
.settings .bottom
{
margin:0;
padding:0;
position:relative;
top:-0.625rem;
}.html-ltr .top-container .settings,
.html-rtl .top-container .settings
{
color: var(--gray-33);
float: inline-start;
font-size: 3.125rem;
height: 4.8rem;
position: relative;
text-align: center;
top: -0.3125rem;
width: 2.5rem;
z-index: 10;
}.register
{
font-size: var(--font-size-5);
width: 36rem;
margin: auto;
}
.login input
{
font-size: var(--font-size-6);
margin: 0.3125rem;
}
.register input
{
font-size: var(--font-size-6);
margin: 0.3125rem;
width: 80%;
}
.login button,
.register button
{
font-size: var(--font-size-6);
}
.register select
{
font-size: var(--font-size-1);
width:90%;
}
.user-icon-td
{
vertical-align: top;
width: 8.4rem;
}
.user-icon
{
margin: auto;
width: 7.8rem;
}
.upload-file
{
background-color: var(--gray-80);
border: 3pt var(--gray-60) solid;
border-radius:13px;
height: 3rem;
margin: 1.2rem;
overflow-wrap: break-word;
padding: 2px;
width: 12rem;
word-wrap: break-word;
}
.full-width
{
width: 100%;
}
.small-icon
{
height: 3rem;
position:relative;
top:0.625rem;
width: 3rem;
}
.icon-upload
{
left:1rem;
padding-right:2px;
position:relative;
width: 9.6rem;
}
/*
Styles for the statistics for a crawl page
*/
.stats {
position: relative;
top: 0.6rem;
}
.statistics
{
left: 0.6rem;
position: relative;
right: 0.6rem;
}
/*
Styles for search and search result pages
*/
.search-results
{
width:inherit;
}
.edit-search-result
{
position: relative;
top: 0.4375rem;
}
.edit-search-result ul > li:first-child
{
border-color: var(--gray-82) !important;
color: var(--gray-50) !important;
height: 1.25rem;
padding: 0 0.3125rem 0.25rem 0.3125rem;
}.html-ltr .search-stats,
.html-rtl .search-stats
{
color: var(--gray-40);
font-size: var(--font-size-5);
float: inline-end;
padding: 0.3125rem;
z-index:-1;
}.search-callout
{
border-radius: 10px;
border: 3px solid var(--gray-87);
padding: 0.3125rem;
margin-top: 4.0625rem;
min-height: 2.8125rem;
width:15rem;
}
.news-result
{
min-height:7.2rem;
}
.news-result img
{
border-radius: 10px;
clear: inline-start;
height:8.125rem;
margin-right: 0.3125rem;
width:15rem;
}
.news-result,
.result
{
border: 1px solid transparent;
clear: inline-start;
line-height: 1.4;
margin-bottom:0.75rem;
margin-top:0.75rem;
padding: 2px;
width:54rem;
}
.news-result h2 a,
.result h2 a
{
text-decoration: none;
}
.result h2 a:hover,
.news-result h2 a:hover
{
text-decoration: underline;
}
.result table tr td
{
padding: 0 0.3125rem 0 0.3125rem;
}
.result-extras
{
padding: 0.625rem;
display: none;
}
.word-cloud-spacer
{
font-weight: bold;
color : var(--gray-50);
}
.word-cloud-1
{
font-size: var(--font-size-6);
color: #080;
text-decoration: none;
}
.word-cloud-2
{
font-size: 15pt;
color: #090;
text-decoration: none;
}
.word-cloud-3
{
font-size: var(--font-size-5);
color: #0A0;
text-decoration: none;
}
.word-cloud-4
{
font-size: var(--font-size-4);
color: #0B0;
text-decoration: none;
}
.word-cloud-5
{
font-size: var(--font-size-3);
color: #0C0;
text-decoration: none;
}
.word-cloud:hover
{
text-decoration: underline;
}
.no-search-results
{
color: var(--gray-60);
font-size: var(--font-size-7);
padding-bottom:3%;
padding-top:5%;
}
.continuous-result-separator
{
line-height: 1;
position:relative;
top:-0.625rem;
padding-right: 0.25rem;
}.html-ltr .continuous-result-separator,
.html-rtl .continuous-result-separator
{
float: inline-start;
}.access-result
{
box-shadow: 0px 0px 3px 3px var(--gray-80);
font-size: var(--font-size-3);
padding: 0.3125rem;
margin:0.625rem;
word-break: break-all;
}
.more-groups
{
margin:0.75rem;
}
#results-container
{
padding-top: 0.3125rem;
max-height: 36rem;
overflow-y: scroll;
}
#feed-clipboard
{
border: 2px solid var(--gray-50);
border-radius: 5px;
background-color:var(--gray-100);
padding: 2px;
margin: 2px;
}
#clips-container
{
padding-top: 0.3125rem;
max-height: 18rem;
overflow-y: scroll;
}
.feed-heading
{
margin:0 auto 0 auto;
padding: 0;
width: 42rem;
}
.page-list-header-footer
{
padding: 0;
margin: 0 auto 0 auto;
width: 42rem;
}
.wiki-page-list-result
{
border-radius:5px;
box-shadow: 0px 0px 3px 3px var(--gray-80);
font-size: var(--font-size-3);
padding: 0.3rem 0.6rem 1.5rem 0.6rem;
margin: 0.875rem auto 0.875rem auto;
width:42rem;
}
.group-result
{
border-radius:5px;
box-shadow: 0px 0px 3px 3px var(--gray-80);
padding: 0.3rem 0.6rem 1.5rem 0.6rem;
margin: 0.5rem auto 0.5rem auto;
}
.small-group-result
{
border-radius:5px;
box-shadow: 0px 0px 2px 2px var(--gray-80);
padding: 0.12rem 0.6rem 0.12rem 0.6rem;
margin: 0.4375rem auto 0.4375rem auto;
min-height:3.12rem;
}
.button-group-result
{
padding: 0.6rem 0.6rem 0.3rem 0.6rem;
margin:auto;
}
.button-group-result h2,
.news-result h2,
.result h2,
.small-group-result h2,
.group-result h2
{
font-size: var(--font-size-6);
font-weight: normal;
}
.result-more
{
border-radius: 5px;
border: 1px solid var(--gray-82);
color: var(--gray-50);
font-size: var(--font-size-5);
padding: 1px;
margin: 0.1875rem;
}
.result-more:hover
{
background-color: var(--gray-82);
color: var(--gray-100);
}
.result-fav
{
width: 1rem;
height: 1rem;
}
div.button-group-result,
div.small-group-result,
div.group-result
{
font-size: var(--font-size-3);
width:42rem;
}
.spell
{
color: var(--gray-40);
display:none;
font-size: var(--font-size-5);
padding-bottom:0.625rem;
padding-top:0.625rem;
z-index: 20;
}
/*
The next styles are for the built-in search box that comes with
Yioop rather than the search boxes which can be inserted on wiki pages.
*/
*:focus
{
outline: none;
}
::-webkit-search-cancel-button
{
-webkit-appearance: none;
}
.subsearch.footer-element,
.subsearch.copyright
{
position:relative;
top: -0.625rem;
}
.copyright
{
margin-top: 1.5625rem;
}
/* less the padding and border either side, which sit outside the width */
.search-box
{
border-color: var(--gray-67);
border-radius: 5px;
border-style: solid;
border-width: 2px;
padding: 0.25rem;
margin:auto;
width: min(48rem, calc(100% - 0.75rem));
}
.search-box-inner
{
background-color: var(--gray-100);
border-radius: 5px;
padding: 2px;
}
.search-box-inner input
{
appearance: none;
background-color: var(--gray-100);
border: 0;
font-size: var(--font-size-7);
margin: 0;
padding: 0.3125rem;
width: min(42.9rem, calc(100% - 0.625rem));
}
.inner-bar .search-box
{
width: min(45rem, calc(100% - 0.75rem));
}
.inner-bar .search-box-inner
{
border: 1px solid var(--gray-67);
display: inline-block;
position: relative;
top: -1.375rem;
z-index:20;
}
.inner-bar .search-box-inner input
{
width: min(39rem, calc(100% - 0.625rem));
}
.search-box-inner:focus-within .search-reset-button:hover
{
color: blue;
}
.search-reset-button,
.search-button
{
background-color: var(--gray-100);
border: 0 var(--gray-100);
padding: 0.1875rem 0.3125rem 0.1875rem 0.3125rem;
font-size: var(--font-size-7);
}
.search-reset-button
{
font-size: var(--font-size-5);
visibility: hidden;
}
.search-box-inner:focus-within .search-reset-button
{
border-radius: 15px;
background-color: var(--gray-93);
color: var(--gray-0);
visibility: visible;
}
.search-button:hover
{
border-radius: 3px;
border:1px solid var(--gray-0);
}
.button-box img
{
left:-1px;
position:relative;
top:0.1875rem;
}
.search-field
{
position: relative;
min-width:15rem;
top: -1.5625rem;
}
.search-field input[type="search"]
{
appearance: none;
border: 0;
font-size: var(--font-size-6);
height: 2.3125rem;
margin: 0;
padding: 0.1875rem;
appearance: none;
width:53%;
}
.serp-links-score
{
color: var(--gray-40);
}
/*
The next styles are for the search boxes which can be inserted
into wiki pages
*/
.small-search-box
{
margin: 0.25rem;
position: static;
width: 15.6rem;
}
.small-search-box .search-input
{
position: static;
width: 10.8rem;
}
.medium-search-box
{
margin: 0.25rem;
position: static;
width: 24.6rem;
}
.medium-search-box .search-input
{
position: static;
width: 19.8rem;
}
.large-search-box
{
margin: 0.25rem;
position: static;
width: 33.6rem;
}
.large-search-box .search-input
{
position: static;
width: 28.8rem;
}
.search-input
{
font-size: 1.32rem!important;
padding: 2px!important;
position: relative!important;
margin: 0!important;
top: -0.1875rem!important;
}
/*
Styles for the word suggest drop down on search pages
*/
.dropdown
{
border-bottom-left-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
border-bottom-style: solid;
border-color: var(--gray-67);
border-left-style: solid;
border-right-style: solid;
border-top-style: none;
border-width: 1px;
left: 11.25rem;
margin: auto;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 0;
position: fixed;
top: 3.125rem;
width: 33.72rem;
z-index:13;
}
.landing .dropdown
{
border-width: 2px;
left: -1.8rem;
position: relative;
top:0;
width: 44.28rem;
}
.suggest-list
{
background-color: var(--gray-100);
border: 0;
font-size: var(--font-size-6);
margin: 0;
padding: 0;
visibility: hidden;
width: min(30.9rem, 100%);
}
.landing .suggest-list
{
width: min(44.4rem, 100%);
}
.suggest-list li
{
cursor: pointer;
font-size: var(--font-size-6);
list-style:none;
margin-left: 0;
margin-right: 0;
padding:0px;
padding-left:2px;
padding-right:2px;
width: 36.48rem;
}
.landing .suggest-list li
{
width: 46.8rem;
}
.suggest-list li span
{
color: var(--gray-0);
display: block;
height: 18pt;
margin: 0;
padding: 0;
text-decoration: none;
z-index: 15;
}
/*
Styles for the bottom of search results links to additional
pages of search results
*/
.pagination
{
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.html-ltr .pagination ul,
.html-ltr .pagination ul li,
.html-rtl .pagination ul,
.html-rtl .pagination ul li
{
display: inline;
font-size: var(--font-size-5);
padding-inline-start: 0;
padding-inline-end: 0.5rem;
}
.html-ltr .pagination ul li a.item,
.html-rtl .pagination ul li a.item
{
border-color: blue;
border-style: solid;
border-width: 2px;
display: block;
float: inline-start;
height: 1.5625rem;
margin-inline-end: 0.5rem;
padding-bottom: 0px;
padding-top: 1px;
text-align: center;
text-decoration: none;
width: 1.5625rem;
}.micro-pagination ul li a.item:hover,
.pagination ul li a.item:hover
{
background-color: #88F;
color: var(--gray-100);
}
.html-ltr .pagination ul li span.item
{
border-color: var(--gray-0);
border-style: solid;
border-width: 3px;
display: block;
float: inline-start;
height: 1.5625rem;
margin-inline-end: 0.5rem;
padding-top: 1px;
position: relative;
text-align: center;
top: -1px;
width: 1.5625rem;
}
.html-rtl .pagination ul li span.item
{
border-color: var(--gray-0);
border-style: solid;
border-width: 5px;
display: block;
float: inline-end;
height: 1.5625rem;
margin-inline-start: 0.5rem;
position: relative;
text-align: center;
top: -1px;
width: 1.5625rem;
}
.html-ltr .pagination ul li span.end,
.html-rtl .pagination ul li span.end
{
display:block;
float: inline-start;
margin-inline-end: 0.5rem;
padding-top: 1px;
}
.micro-pagination
{
display:inline;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.micro-pagination ul,
.micro-pagination ul li
{
display: inline;
font-size: 8pt;
margin:0;
padding:0;
position:relative;
top:-1px;
}
.micro-pagination ul li a.item
{
border-color: var(--gray-50);
border-style: solid;
border-width: 2px;
padding: 2px;
margin: 2px;
height: 0.75rem;
text-align: center;
text-decoration: none;
width: 0.75rem;
}
/*
Styles for video subsearch page
*/
.html-ltr .video-link,
.html-rtl .video-link
{
float: inline-start;
margin: 0;
height: 5.625rem;
padding-top: 0.3rem;
width: 8rem;
}
.video-link .thumb
{
height: 5rem;
width: 7.5rem;
}
.html-ltr .video-play,
.html-rtl .video-play
{
height: 1.875rem;
inset-inline-start: 2.5rem;
position: relative;
top: -3.75rem;
width:2.5rem;
}
/*
Styles for image subsearch page
*/
.video-list,
.image-list
{
margin-top: 0.625rem;
width: 54rem;
}
.sub-video-list,
.sub-image-list
{
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
}
.image-list .image-detail
{
display: inline-block;
margin: 0.3125rem;
padding: 0.3125rem;
position:relative;
max-width: 15rem;
}
.image-list .image-detail figcaption div
{
font-size: var(--font-size-1);
height: 12pt;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-list .image-detail figcaption a
{
color: var(--gray-0);
text-decoration: none;
}
.image-list .image-detail figcaption:hover
{
text-decoration: underline;
}
.image-dim
{
background-color: var(--gray-0);
bottom: 2.625rem;
color: var(--gray-100);
opacity: 0.7;
padding: 2px;
position:absolute;
}.html-ltr .image-dim,
.html-rtl .image-dim
{
inset-inline-end: 0.375rem;
}.image-list img
{
border: 1px solid var(--gray-50);
height:9rem;
}
.video-list .video-detail
{
border: 1px solid var(--gray-0);
border-radius: 10px;
display: inline-block;
margin: 0.3125rem;
position:relative;
width: 15rem;
}
.video-list .video-detail figcaption
{
height: 4.5rem;
line-height: 1.5;
padding:0.1875rem;
}
.video-list .video-detail figcaption div
{
font-size: var(--font-size-1);
margin: 0.1875rem;
}
.video-list .video-detail figcaption a
{
color: var(--gray-0);
text-decoration: none;
}
.video-list .video-detail figcaption a:hover
{
text-decoration: underline;
}
.video-detail .result-fav
{
margin-left: 2px;
margin-right: 2px;
}
.video-quality
{
background-color: #fcc200;
border-radius: 3px;
top: 0px;
color: var(--gray-100);
margin: 2px;
padding: 0.25rem;
position:absolute;
}.html-ltr .video-quality,
.html-rtl .video-quality
{
inset-inline-end: 0.1875rem;
}.video-duration
{
background-color: var(--gray-0);
bottom: 5.3125rem;
color: var(--gray-100);
opacity: 0.8;
padding: 2px;
position:absolute;
}.html-ltr .video-duration,
.html-rtl .video-duration
{
inset-inline-end: 0.1875rem;
}.video-list .video-thumb
{
border-top-left-radius: 0.625rem;
border-top-right-radius: 0.625rem;
max-height: 10.5rem;
width: 100%;
}
.video-play-button
{
position:absolute;
font-size: 4.2rem;
top:2.7rem;
left:5.4rem;
}
.video-play-button a
{
text-decoration: none;
}
/*
Styles for tables on login and admin pages
*/
.html-ltr .table-label,
.html-rtl .table-label
{
text-align: end;
}.html-ltr .table-input,
.html-rtl .table-input
{
text-align: start;
}/*
Styles for different admin page elements
*/
.content
{
background-color: var(--gray-100);
font-size: var(--font-size-3);
margin-left: 3rem;
margin-right: 3rem;
min-height: 18rem;
padding: 0.5rem;
position: relative;
width: 48rem;
}
.content p,
.content div
{
padding-bottom: 0.5rem;
}
.round-padded-button-box,
.round-button-box
{
border-radius: 5px;
font-size: var(--font-size-5);
text-align: center;
text-decoration: none;
}
.round-padded-button-box
{
padding: 0.375rem;
}.html-ltr .button-box,
.html-rtl .button-box
{
background-color: #E9E9ED;
border-radius: 5px;
border: 1px ridge var(--gray-0);
color: var(--gray-0);
font-size: var(--font-size-6);
height:2.34rem;
margin-inline-start: 0;
position: relative;
text-align: center;
text-decoration: none;
top: 0.09rem;
}
.tiny-button-box
{
font-size: var(--font-size-3);
margin:1px;
padding:1px;
}
.presentation-activity
{
clear:both;
}
.current-activity
{
border: 1px solid var(--gray-80);
border-radius: 8px;
font-size: var(--font-size-6);
margin-bottom: 4.0625rem;
margin-left:10%;
margin-right:10%;
min-height: 39rem;
min-width: 48rem;
width: clamp(48rem,
calc(48rem + (100vw - var(--fluid-onset)) * 0.5), 60rem);
max-width: 48rem;
padding-bottom: 0.6rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
position:relative;
top: 0.9375rem;
}
.current-activity-header
{
margin: auto;
min-width: 54rem;
position:relative;
top: 0.9rem;
}
.current-activity-footer
{
min-width: 54rem;
position: relative;
top:1.8rem;
}
/* The panel holds its designed width whenever the column around it can
give it that much and otherwise gives way to the column, less the
padding either side, which sits outside the width being floored. A
floor that could not give way is what pushed this panel past the
window between the phone layout's cutoff and its own designed width. */
.small-margin-current-activity
{
font-size: var(--font-size-6);
margin: auto;
max-width: 54rem;
min-height: 39rem;
min-width: min(54rem, calc(100% - 1.2rem));
padding-left: 0.6rem;
padding-right: 0.6rem;
padding-bottom: 0.6rem;
position: relative;
top: 0.9375rem;
}
.static
{
position:relative;
top: 0px;
}
.current-activity h2,
.small-margin-current-activity h2
{
margin-top: 0.3rem;
padding-top: 0.3rem;
}
.current-activity input,
.small-margin-current-activity input
{
font-size: var(--font-size-6);
position: relative;
top: 2px;
}
.adjacent-button-field
{
border: 1px solid var(--gray-50);
border-radius: 3px;
height: 1.92rem;
margin: 0.06rem;
}
.current-activity object,
.small-margin-current-activity object
{
height: 12rem;
min-width: 36rem;
width: 48rem;
}
.current-activity select,
.small-margin-current-activity select
{
font-size: var(--font-size-6);
}
.current-activity pre,
.small-margin-current-activity pre
{
font-size: var(--font-size-1);
}
.small-photo img
{
image-orientation: from-image;
min-width:16.875rem;
margin: 0.5rem;
max-height: 85%;
max-width: 85%;
width:16.875rem;
}
.medium-photo img
{
image-orientation: from-image;
min-width:33.75rem;
margin: 0.5rem;
max-height: 85%;
max-width: 85%;
width:33.75rem;
}
.large-photo img
{
image-orientation: from-image;
min-width:67.5rem;
margin: 0.5rem;
max-height: 85%;
max-width: 85%;
width:67.5rem;
}
.media-detail-body
{
min-width: 100%;
width: 100%;
}
.media-container .photo,
.media-container .video
{
border: solid var(--gray-0) 0.12rem;
height:70%;
image-orientation: from-image;
margin: 0.54rem;
max-height: 90%;
max-width: 90%;
min-width:40%;
padding: 0.54rem;
}
.media-detail-body .media-container .photo,
.media-detail-body .media-container .video
{
min-width:17.5rem;
width:17.5rem;
max-height: 85%;
max-width: 85%;
}
.photo-container,
.video-container
{
border: solid var(--gray-0) 0.12rem;
height: 42rem;
margin: 0.54rem;
max-height: 90%;
max-width: 90%;
padding: 0.54rem;
position: relative;
}
.photo-container .photo-360
{
height: 25%;
image-orientation: from-image;
left: 0;
position: absolute;
top: 0;
width: 25%;
z-index: 12;
}
.photo-container .canvas-360
{
background-color: var(--gray-50);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.media-container .audio
{
padding:1.2rem;
width:70%;
}
.table-margin
{
font-size: var(--font-size-5);
}
.table-center
{
margin:auto;
}
.tiny-field
{
font-size: var(--font-size-3);
height: 13pt;
width: 3.6rem;
}
.stat-table,
.stat-table th,
.stat-table td
{
border: 1px solid var(--gray-0);
font-size: var(--font-size-4);
padding: 1px;
}
.table-margin
{
position: relative;
top: 1.08rem;
}
.table-margin img
{
position: relative;
top: 0.3rem;
}
.admin-table
{
border:0;
border-collapse: collapse;
font-size: var(--font-size-3);
min-width: 80%;
max-width: 100%;
}
.classifiers-table
{
border:0;
border-collapse: collapse;
}
.classifiers-table td,
.classifiers-table th,
.admin-table td,
.admin-table th
{
border: 1px ridge var(--gray-0);
padding: 0.1875rem;
overflow-wrap: anywhere;
}
.admin-table select,
.admin-table option
{
font-size: var(--font-size-4);
padding:0;
margin:0;
}
.admin-form-row
{
border: 1px ridge var(--gray-0);
padding: 0.1875rem;
}
#browse-state,
#browse-state option
{
font-size: var(--font-size-7);
font-weight: bold;
margin: 0.1875rem;
appearance: menulist-button;
}
.name-table,
.name-table th,
.name-table td
{
border:0;
border-collapse: collapse;
padding: 0.3125rem;
}
.role-list
{
max-width: 11.4rem;
overflow-wrap: break-word;
}
.role-activity-table
{
border:0;
border-collapse: collapse;
margin:0.1875rem;
}
.role-activity-table td,
.role-activity-table th
{
border: 1px ridge var(--gray-0);
padding: 0.1875rem;
word-wrap: break-word;
}
.delete-modifier
{
background-color: #DFDFFF;
border-radius: 6px;
display: inline-block;
margin: 0.1875rem;
padding: 0.25rem;
}
.delete-modifier a
{
color: var(--gray-0);
text-decoration: none;
}
.delete-modifier:after
{
border-left:1px solid var(--gray-50);
content: 'X';
font-size: var(--font-size-5);
padding: 2px;
margin: 2px;
}
.delete-modifier:hover:after,
.delete-modifier:hover a
{
text-decoration: underline;
}
th.no-border,
td.no-border
{
border:0;
border-collapse: collapse;
font-size: var(--font-size-4);
padding:0;
}
.tab-menu-list
{
border-bottom: 2px solid var(--gray-0);
margin-bottom: 0px;
padding: 0px;
z-index: 10;
}
.tab-menu-list li
{
display: inline;
list-style-type: none;
}
.tab-menu-list a
{
background-color:var(--gray-93);
border: 1px solid var(--gray-0);
border-bottom: 0px;
margin: 0;
overflow: hidden;
padding: 0.3125rem 0.3125rem 0px 0.3125rem;
text-decoration: none;
}
.tab-menu-list a.active
{
background-color: var(--gray-100);
border-bottom: 3px solid var(--gray-100);
}
.tab-menu-content
{
border: 1px solid var(--gray-0);
border-top: none;
padding: 0.625rem;
z-index: 12;
}
.file-types-table,
.file-types-table td,
.search-page-table,
.search-page-table td
{
border: 1px ridge var(--gray-0);
border-collapse: collapse;
padding: 2px;
}
.search-sources-table td,
.search-sources-table th
{
padding: 1px;
}
.search-sources-table pre
{
margin: 2px;
max-width: 30rem;
overflow-wrap: break-word;
text-overflow: ellipsis;
white-space: pre-wrap;
}
td.instruct
{
max-width: 30rem;
}
.source-test
{
overflow-wrap: break-word;
white-space: pre-wrap;
}
.source-test textarea
{
width:95%;
height:30rem;
color:var(--gray-0);
}
.scrapers-table
{
max-width: 39rem;
}
.scrapers-table td,
.scrapers-table th
{
max-width:30rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.html-ltr .file-types-table,
.html-ltr .file-types-all td,
.html-ltr .search-page-table,
.html-ltr .search-page-all td,
.html-rtl .file-types-table,
.html-rtl .file-types-all td,
.html-rtl .search-page-table,
.html-rtl .search-page-all td
{
margin-inline-start: 1.8rem;
vertical-align: top;
}.html-ltr .bonus-table th,
.html-rtl .bonus-table th
{
text-align: end;
}.machine-table,
.machine-table td,
.machine-table th
{
border: 1px ridge var(--gray-0);
margin: 1px;
padding: 0.1875rem;
}
.machine-table-hr,
.machine-table-hr td
{
border: none;
margin: 0;
padding: 0;
}
.toggle-table,
.toggle-table td
{
border: 1px ridge var(--gray-0);
}
.file-types-table td,
.translate-table,
.translate-table td,
.translate-table th
{
border: 1px ridge var(--gray-0);
}
.classifiers-table td.check
{
padding: 0;
text-align: center;
}
.classifiers-table,
.indexing-plugin-table
{
border-collapse: collapse;
margin-top:0.1875rem;
margin-left: 1.8rem;
margin-right: 1.8rem;
padding: 0.1875rem;
}
.indexing-plugin-table,
.indexing-plugin-table td,
.indexing-plugin-table th
{
border: 1px ridge var(--gray-0);
text-align: center;
}
.indexing-plugin-table th
{
padding: 0.24rem;
}
.html-ltr .indexing-plugin-table td.check,
.html-rtl .indexing-plugin-table td.check
{
padding: 0.6rem;
text-align: start;
}
.indexing-plugin-lightbox
{
background-color:var(--gray-50);
display: none;
height:100%;
left: 0;
right:0;
opacity:0.95;
position:fixed;
top: 0;
width:100%;
z-index:100;
}
.light-content
{
border-radius: 10px;
height: 65%;
left:15%;
margin:auto;
overflow: auto;
padding: 1rem;
position: fixed;
right:15%;
top:15%;
width: 60%;
z-index:101;
}
.restrict-sites-by-url
{
height:1.5rem;
width: 1.5rem;
}
.overlay
{
margin:6.25rem auto;
}
/** Feed styles*/
.feed-user-link
{
position:relative;
top:-0.375rem;
}
.feed-icon-container
{
height: 1.25rem;
position: relative;
top:-0.625rem;
}
.feed-icon-container .user-spacer
{
padding: 0 1.25rem 0 1.25rem;
}
.feed-user-icon
{
padding-top: 0.9rem;
width: 4.375rem;
}
.small-feed-user-icon
{
padding-top: 0.6rem;
width: 1.5625rem;
}
.html-ltr .feed-item-body,
.html-rtl .feed-item-body
{
margin-inline-start:4.8rem;
overflow: scroll;
padding-top: 0.6rem;
}
/* The small variant is not a mirror of the wide one: reading left to
right it is inset by a trailing margin of a smaller size, right to left
by a leading margin the wide size, so each direction keeps its own rule
with the side named logically. */
.html-ltr .small-feed-item-body
{
margin-block: 0;
margin-inline: 0 1.8rem;
overflow: scroll;
padding: 0.6rem;
}
.html-rtl .small-feed-item-body
{
margin-inline-start:4.8rem;
overflow: scroll;
padding-top: 0.6rem;
}
.feed-item-body
{
min-height:4.2rem;
}
.small-feed-item-body img,
.small-feed-item-body video,
.feed-item-body img,
.feed-item-body video
{
max-width:100%;
}
.feed-item-body pre
{
white-space: pre-wrap;
}
/* The folder is the query container both its layouts measure themselves
against, so each answers the width of this box rather than the width of
the window. The two differ: the page's middle column keeps a set width
on a desktop, so a window narrowed to eight hundred pixels leaves the
folder exactly as wide as it was, and a folder shown inside anything
narrower than the page would have been told the window's width and
reflowed for a room it does not have. */
.wiki-resources
{
border: 1px solid var(--gray-50);
container-name: wiki-resources;
container-type: inline-size;
height: 36rem;
overflow: auto;
}
/* The list layout is a grid rather than a table so its columns can be
sized by the folder's width. The rows take the table's own tracks
through subgrid, which is what keeps a column lined up down the whole
list; the table markup is kept because the list is a table of resources
and a browser still reports its rows and cells as such. */
.wiki-resources > table
{
display: grid;
grid-template-columns:
auto auto minmax(var(--resource-name-min), 1fr) auto auto;
width: 100%;
}
.wiki-resources > table > thead,
.wiki-resources > table > tbody
{
display: contents;
}
.wiki-resources > table > thead > tr,
.wiki-resources > table > tbody > tr
{
align-items: center;
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
/* The row groups no longer form boxes of their own, so the heading row is
what stays put against the top of the folder as the list scrolls, and
it carries the fill that keeps the rows beneath from showing through. */
.wiki-resources > table > thead > tr
{
background-color: var(--gray-100);
position: sticky;
top: 0;
z-index: 2;
}
/* A cell is a grid item, and a grid item is by default kept at least as
wide as its content, which would let a long resource name widen the
name column past the share of the folder it was given. */
.wiki-resources > table th,
.wiki-resources > table td
{
min-width: 0;
}
/* The heading above the marker and thumbnail covers both of their columns.
A column count is how a table says that and a span is how a grid says
it, so the one the markup carries is read as the other. */
.wiki-resources > table th[colspan="2"]
{
grid-column: span 2;
}
.wiki-resources th
{
border-bottom: 1px solid var(--gray-50);
}
/* Narrow enough that the size and modified columns cost the name more room
than they are worth, so the list keeps the marker, the thumbnail and the
name and drops the other two. This asks the folder's width, so a folder
in a narrow column on a wide screen is treated as narrow. */
/* Between a phone and the width the page's middle column has on a desktop
the folder is real estate the desktop card minimum cannot divide: at
around five hundred pixels it leaves room for one card and stretches it
across the whole row. A smaller minimum there fills the row instead.
The figure sits clear of the width the folder has on a desktop, which a
container query reports as the content box inside the folder's border,
so the desktop keeps the wider card it was given. */
@container wiki-resources (width < 50rem)
{
.grid-container
{
--resource-card-min: 11.5rem;
}
}
@container wiki-resources (width < 30rem)
{
.wiki-resources > table
{
grid-template-columns:
auto auto minmax(var(--resource-name-min), 1fr);
}
.wiki-resources > table .hide-narrow
{
display: none;
}
.grid-container
{
--resource-card-min: 9.5rem;
}
}
.wiki-resource-noresource
{
color: green;
margin: auto;
left: 1.8rem;
position: relative;
top: -24rem;
width: 90%;
}
.wiki-resource-image
{
max-width:100%;
}.html-ltr .wiki-resource-download,
.html-rtl .wiki-resource-download
{
height: 0;
float: inline-end;
position:relative;
inset-inline-end: 1.875rem;
top: -3.125rem;
}.ebook,
.wiki-resource-object
{
border: 1px solid var(--gray-0);
height:100%;
margin:1%;
min-height:36rem;
padding:0.5%;
width:99%;
}
.ebook-range
{
width:70%;
}
.wiki-history-discuss
{
position:relative;
top:1.5625rem;
}
.theme-dropdown
{
background-color: var(--gray-94);
border: solid 1px var(--gray-50);
border-radius: 5px;
box-sizing: border-box;
height: auto;
padding: 0.1875rem;
position: relative;
top:1px;
vertical-align: middle;
appearance: none;
}
/* The theme dropdown and the buttons beside it are boxes of unrelated
sizes: the buttons take their height from the glyph they show, which
differs from platform to platform, while the dropdown took its height
from a figure written here that could only match them by luck. Laying
the row out as a row lets the dropdown take whatever height the
buttons come out as, so they line up wherever the page is read. The
label is centered against them rather than stretched. */
.theme-row
{
align-items: stretch;
display: flex;
}
.theme-row label
{
align-self: center;
}
.media-controls
{
margin-bottom: 0.5rem;
}
/* The toolbar stays end-aligned inline-blocks (text-align: end on
.align-opposite), but its controls came out at different heights and on
different lines: the Go button and filter box set their own taller
heights, the sort and overflow dropdowns were pushed down by a fixed
top nudge, and the icon groups sat on the text baseline. Giving every
direct control the one named control height and centering them all on
the middle line makes the row one height without disturbing the
end alignment. */
.media-controls > a,
.media-controls > div,
.media-controls > button,
.media-controls > .dropdown-container
{
box-sizing: border-box;
height: var(--toolbar-control-height);
vertical-align: middle;
}
/* The sort and overflow dropdowns are a <ul><li> whose li set its own
taller min-height and added padding and a border, so the dropdown boxes
stood taller than the icon groups, the Go button and the clipboard. Held
to the control height as border-boxes, and with the li filling that
height rather than setting a larger one, every control in the row shows
the same box. */
.media-controls .dropdown-container
{
position: static;
top: auto;
}
.media-controls #page-sort-fields,
.media-controls #group-sort
{
top: 0;
}
.media-controls ul.link-dropdown,
.media-controls ul.popup-dropdown
{
height: 100%;
}
.media-controls ul.link-dropdown > li,
.media-controls ul.popup-dropdown > li
{
box-sizing: border-box;
height: var(--toolbar-control-height);
min-height: 0;
}
.media-controls .button-box,
.media-controls .filter-container
{
height: var(--toolbar-control-height);
min-height: 0;
top: 0;
}
/* The filter box holds a search input that carries a large font and a
negative top offset of its own, which rode it up out of the box so its
text clipped at the bottom. Inside the toolbar the offset is cleared and
the input is held a few pixels short of the box and centered, so the
text sits clear of both edges. */
.media-controls .filter-container
{
align-items: center;
display: inline-flex;
}
.media-controls .filter-container input
{
box-sizing: border-box;
height: calc(var(--toolbar-control-height) - 0.25rem);
top: 0 !important;
}
/* A little breathing room between the Go button and the clipboard that
follows it, so the two do not read as one control. */
.media-controls #clipboard-toggle
{
margin-inline-start: 0.1875rem;
}
.media-controls ul.link-dropdown li,
.media-controls ul.popup-dropdown li
{
min-height:1.92rem;
}
.media-controls ul.popup-dropdown li
{
min-height:1.44rem;
}
.icon-button-container,
.media-buttons-container
{
align-items: center;
border: 1px solid var(--gray-50);
border-radius: 5px;
box-sizing: border-box;
display: inline-flex;
height: var(--control-height);
justify-content: center;
margin: 1.5px;
padding: 0;
width: var(--control-height);
}
.icon-button-container.small-icon,
.media-buttons-container.small-icon,
.git-icon-control.small-icon
{
height: 1.75rem;
width: 1.75rem;
}
.wiki-buttons .icon-button-container
{
box-sizing: content-box;
display: inline-block;
font-size: var(--font-size-7);
height: 1.8rem;
margin: 1px;
padding: 0.3125rem;
text-align: center;
vertical-align: middle;
width: 1.5rem;
}
.icon-button-group
{
align-items: center;
border: 1px solid var(--gray-50);
border-radius: 5px;
box-sizing: border-box;
display: inline-flex;
height: var(--control-height);
margin: 1.5px;
padding: 0 2px;
vertical-align: middle;
}
.icon-button-container .icon-anchor-button,
.media-buttons-container .icon-anchor-button,
.icon-button-container .media-anchor-button,
.media-buttons-container .media-anchor-button
{
margin: 0;
padding: 0;
}
.icon-glyph
{
font-size: 1.25rem;
line-height: 1;
display: inline-block;
white-space: nowrap;
}
.social-icon-row
{
/* inline-flex keeps the row inline with the floated filter
group on the Join Groups / My Groups pages. In the Mail
and Messages side columns the column has a min-width wide
enough to hold every icon on one row, so this does not
normally wrap; if a viewport is narrow enough to force a
wrap it stays a tidy centered block rather than clipping
or scrolling. overflow is left visible so the data-badge
overhang and hover tooltips are not clipped. */
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 0.25rem;
align-items: center;
vertical-align: top;
}
.icon-button-container
{
text-align: center;
vertical-align: middle;
}
.position-context
{
display: inline-block;
position: relative;
}
.icon-button-container a,
.media-buttons-container a
{
color: var(--gray-0);
text-decoration: none;
}
.icon-button-container a:hover,
.media-buttons-container a:hover
{
text-decoration: underline solid var(--gray-0);
}
.media-buttons-container.white
{
border:1px solid var(--gray-100);
}
.media-buttons-container.white a
{
color: var(--gray-100);
}
.media-buttons-container.white a:hover
{
text-decoration: underline solid var(--gray-100);
}
.media-buttons-container .selected
{
background-color: var(--gray-67);
border-radius: 5px;
padding:0.1875rem;
}
#syntax-link
{
margin: 0;
}
.search-filter-container,
.filter-container
{
border: 1px solid var(--gray-50);
border-radius: 5px;
display: inline-block;
margin:0;
min-height: 2.22rem;
padding:0;
vertical-align: middle;
}
.search-filter-container input,
.filter-container input
{
border: 0 none;
border-radius: 3px;
}
.unread-messages
{
background-color: var(--gray-67);
border-radius: 6px;
border: solid 1px var(--gray-0);
color: var(--gray-100);
display:inline-block;
padding:0.1875rem;
margin:1.125rem 0.9375rem 1.125rem 0.9375rem;
}.html-ltr .unread-messages,
.html-rtl .unread-messages
{
float: inline-end;
}.message-filter
{
position: relative;
margin: 0 2px 0 2px;
top: -2px;
}
.message-filter input
{
font-size: var(--font-size-5);
padding-top:0.3125rem;
}
#clipboard
{
border: 0.3rem solid var(--gray-94);
border-radius: 5px;
background-color:var(--gray-100);
height: 9rem;
padding: 2px;
margin: 2px;
width:98%;
}
.dropdown-container
{
display: inline-block;
padding: 0;
margin: 0;
}
#page-sort-fields,
#group-sort
{
position: relative;
top: 0.8125rem;
}
ul.link-dropdown,
ul.popup-dropdown
{
display: inline-block;
font-family: Arial, Verdana;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
ul.link-dropdown li,
ul.popup-dropdown li
{
background: var(--gray-100);
display: block;
margin: 0;
padding: 2px 0.3125rem 2px 0.3125rem;
white-space: nowrap;
}
.html-ltr ul.link-dropdown li,
.html-rtl ul.link-dropdown li
{
float: inline-start;
text-align: start;
position: relative;
}
ul.link-dropdown li ul
{
display: none;
margin: 0;
padding: 0;
list-style-type: none;
}
ul.link-dropdown > li,
ul.link-dropdown ul li,
ul.popup-dropdown ul li
{
border-left: 1px solid var(--gray-60);
border-right: 1px solid var(--gray-60);
}
ul.link-dropdown > li,
ul.link-dropdown ul li:first-child,
ul.popup-dropdown ul li:first-child
{
border-top: 1px solid var(--gray-60);
border-top-left-radius: 0.3125rem;
border-top-right-radius: 0.3125rem;
}
ul.link-dropdown > li,
ul.link-dropdown ul li:last-child,
ul.popup-dropdown ul li:last-child
{
border-bottom: 1px solid var(--gray-60);
border-bottom-left-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
}
.dropdown-selector
{
background: var(--gray-100);
border: 0;
font-size: unset;
font-weight: bold;
position: unset;
top: unset;
vertical-align: middle;
width: unset;
}
.dropdown-selector:hover
{
border: 0;
text-decoration: underline;
}
.hover-selector .dropdown-selector:hover
{
background: var(--gray-82);
border-radius: 5px;
padding: 2px;
}
ul.link-dropdown li a,
ul.popup-dropdown li a
{
text-decoration: none;
color: var(--gray-0);
}
ul.link-dropdown > li:focus,
ul.popup-dropdown > li
{
padding: 0;
}
ul.link-dropdown li:focus a.opt-group
{
padding-left: 0.625rem;
padding-right: 0.625rem;
}
ul.link-dropdown:focus-within li li,
ul.popup-dropdown:focus-within li li
{
float: none;
z-index: 5;
}
ul.link-dropdown:focus-within li:hover,
ul.link-dropdown:focus-within li a:hover,
ul.popup-dropdown li a:hover
{
background: var(--gray-93);
}
ul.link-dropdown:focus-within li a:hover,
ul.popup-dropdown li a:hover
{
text-decoration: underline;
z-index: 4;
}
ul.link-dropdown:focus-within li ul,
ul.popup-dropdown li ul
{
position: absolute;
display: block;
}.html-ltr .inward-align ul.link-dropdown:focus-within li ul,
.html-ltr .inward-align ul.popup-dropdown li ul,
.html-rtl .inward-align ul.link-dropdown:focus-within li ul,
.html-rtl .inward-align ul.popup-dropdown li ul
{
inset-inline-end: 0;
}
.account-info > h2
{
display: inline-block;
}
.account-info > h2 > span
{
display: inline-block;
}
.account-info > div
{
position: relative;
top: -0.1875rem;
}
.inline-block
{
display: inline-block;
}
.home-icon
{
border: 2px solid lightblue;
border-radius: 17px;
position: relative;
top: 0.5625rem;
width:2.1875rem;
}
.feed-icon-container ul.link-dropdown li
{
padding-top: 0;
padding-bottom: 0;
}
.upload-box
{
background-color: var(--gray-82);
color: var(--gray-0);
font-size: var(--font-size-1);
padding: 2px;
margin: 0.25rem 0;
text-align: center;
width: 100%;
}
.media-upload-box
{
background-color: var(--gray-80);
border:1px solid var(--gray-0);
border-radius: 5px;
font-size: var(--font-size-1);
margin-bottom: 0.25rem;
min-height: 2.1rem;
width: 100%;
}
/* Captcha settings styles */
.captcha {
padding: 0.3125rem;
width: 12.6rem;
}
/**
* Styles for wiki pages
*/
table.wikitable
{
background:var(--gray-100);
border:1px var(--gray-67) solid;
border-collapse: collapse;
margin:1em 0;
}
table.histotable
{
background:var(--gray-100);
border:1px var(--gray-67) solid;
border-collapse: collapse;
margin:1.25rem auto 1.25rem auto;
width:80%;
}
table.histotable tr th:first-child
{
text-align:right;
}
table.histotable tr td:last-child
{
width: 85%;
}
table.histotable tr td:last-child div
{
border: 1px solid var(--gray-0);
background-color: blue;
}
table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td
{
border:1px var(--gray-67) solid;
padding:0.2em;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th
{
text-align:center;
background:var(--gray-100);
font-weight:bold
}
table.wikitable > caption,
table.histotable > caption
{
font-weight:bold;
}
table.histotable > caption
{
margin:0.4375rem;
}
ul.wiki-sorter
{
display:flex;
flex-direction:column;
gap:0.375rem;
list-style:none;
margin:0;
padding:0;
}
ul.wiki-sorter li[data-cutoff]
{
align-items:center;
display:flex;
gap:0.5rem;
margin:2px 0;
pointer-events:none;
}
ul.wiki-sorter li[data-cutoff] span
{
border-top:1.5px dashed #4f8ef7;
flex:1;
}
ul.wiki-sorter li:not([data-cutoff]),
li.wiki-sorter-dragging
{
align-items: center;
background:var(--gray-100);
border:1px solid var(--gray-73);
border-radius:6px;
cursor:grab;
display:flex;
gap:0.625rem;
min-height: 2.75rem;
padding:0.625rem 0.75rem;
touch-action: none;
user-select:none;
}
ul.wiki-sorter li:not([data-cutoff]) *.rank,
li.wiki-sorter-dragging *.rank
{
color:var(--gray-60);
font-size: var(--font-size-2);
min-width:1rem;
text-align:center;
}
ul.wiki-sorter li:not([data-cutoff]) *.rank-label,
li.wiki-sorter-dragging *.rank-label
{
flex:1;
font-size:15pt;
}
.wiki-sorter-dragging
{
opacity: 0.4;
}
.wiki-sorter-over
{
background: #eef4ff;
border-color: #1a5fcc;
}
.wiki-sorter-grabbed
{
background: #e8f0fe;
border-color: #1a5fcc;
outline: 3px solid #1a5fcc;
outline-offset: 2px;
}
.csv-form-field
{
margin-bottom: 0.625rem;
margin-top: 0.625rem;
}
.csv-form-field input[type=checkbox]
{
margin: 0.3125rem;
position: relative;
top: -2px;
}.html-ltr .csv-form-field label,
.html-rtl .csv-form-field label
{
padding-inline-end: 0.3125rem;
}.csv-star
{
color: var(--gray-50);
font-size: 20pt;
padding: 0.1875rem;
position: relative;
top: 0.3125rem;
}
.rel-type-current
{
border:2px solid var(--gray-0);
border-radius:8px;
text-align:center;
background:var(--gray-100);
padding:0.25rem;
}
.rel-type-bottom
{
border-bottom:thick double var(--gray-0);
}
.rel-type-top
{
border-top:thick double var(--gray-0);
}
.rel-type-td
{
width:0.625rem;
}
.rel-type-hr
{
border:1px solid var(--gray-0);
}
.resource-actions
{
min-width:12rem;
}
.list-resource th
{
vertical-align: middle;
text-align: center;
width: 12rem;
}
.view-indicator
{
color:green;
}
.list-resource img
{
border-radius: 5px;
margin-right: 0.3125rem;
height: 3.75rem;
width: 6rem;
}
.list-resource img.default-thumb
{
margin-left:1.25rem;
margin-right:1.25rem;
width: auto;
}
/*
Styles for the classifiers settings pages
*/
#update-accuracy.disabled
{
color: var(--gray-33);
}
#label-docs-form th,
#label-docs-queue .actions
{
font-weight:normal;
padding:0.6rem 1.2rem 0.6rem 0;
width:6rem;
}
#label-docs-queue .actions
{
padding: 0.6rem;
}
#label-docs-queue
{
font-size: var(--font-size-2);
}
#label-docs-queue td
{
vertical-align: top;
padding-top: 0.625rem;
}
#label-docs-queue .labelled td
{
background-color: var(--gray-94);
}
#label-docs-queue .notinclass td
{
background-color: #FFE0E0;
}
#label-docs-queue .inclass td
{
background-color: #F0FFF0;
}
#label-docs-queue tr.inclass a.inclass,
#label-docs-queue tr.notinclass a.notinclass,
#label-docs-queue tr.skip a.skip
{
color: var(--gray-0);
cursor: default;
font-weight: bold;
text-decoration: none;
}
#label-docs-queue p
{
width: auto;
margin: 0.1875rem 0px;
}
#label-docs-queue .info
{
padding-left: 0.4375rem;
}
#label-docs-queue .description
{
color: var(--gray-40);
}
#label-docs-queue .description b
{
color: var(--gray-0);
}
#transfer
{
background-color: var(--gray-0);
color: var(--gray-100);
height: 100%;
left: 0px;
opacity: 0.7;
position: fixed;
text-align:center;
top: 0px;
vertical-align: middle;
visibility: hidden;
width: 100%;
z-index: 200;
}
#help
{
margin-top:0.9375rem;
}
.html-ltr #small-margin-help,
.html-rtl #small-margin-help
{
position: absolute;
inset-inline-end:2%;
width: 24rem;
z-index:20;
}
#mobile-help
{
clear:both;
float:none;
margin: 1.5%;
position: absolute;
top: 3.625rem;
width: 22.5rem;
}
.help-pane
{
display : none;
width: 100%;
border: 2px solid #06f;
}
.small-margin-help-pane
{
border: 2px solid #06f;
border-radius:8px;
display: none;
top: 1rem;
width: 23.75rem;
}
.help-title
{
background: #06f;
color:var(--gray-100);
font-size: var(--font-size-6);
margin: 0;
padding: 0.3rem;
}
#help-frame
{
resize: both;
overflow: auto;
min-width: 15rem;
min-height: 7.5rem;
max-width: 96vw;
max-height: 90vh;
}
#help-frame-head
{
cursor: move;
position: sticky;
top: 0;
z-index: 1;
}
#help-frame-body
{
padding:0.25rem;
}
.help-pane p
{
color:var(--gray-20);
padding:0.625rem;
}
.help-pane pre
{
overflow:scroll;
}
.help-button
{
bottom: 3.125rem;
cursor: pointer;
border: 1px solid #2d2bdb;
font-size: 1.25rem;
line-height: 0.5px;
padding: 0.625rem 0.1875rem;
}
button.default
{
background: var(--gray-82);
color: var(--gray-0);
}
.close
{
cursor: pointer;
font-weight: bold;
line-height: 0.5px;
padding: 0.3125rem 0px 0.25rem 0.25rem;
}
#help-close {
color: var(--gray-100);
position: relative;
z-index: 2;
}
.sidebar
{
top : 11.25rem;
}
.new-thread-icon
{
margin-bottom : -0.3125rem;
}
.top-adscript
{
padding: 0.3rem;
max-width:48rem;
}
.top-ad-static,
.group-ad-static
{
position: relative;
top:0.9375rem;
}
/* The two directions inset this to different top offsets, so they stay as
a pair; only the side it floats to is named logically. */
.html-ltr .side-adscript
{
float: inline-end;
height:0;
position:relative;
top: 1.75rem;
}
.html-rtl .side-adscript
{
float: inline-end;
height: 0;
position:relative;
top: 0px;
}
.display-ad
{
margin-left:0.1875rem;
margin-right:0.1875rem;
margin-top:5rem;
}
.display-ad p
{
border-radius: 10px;
width : 53.4rem;
padding-bottom: 0.625rem;
padding-top: 0.625rem;
}
.ad-preview img,
.display-ad img
{
height:2.5625rem;
width:3.125rem;
float:left;
}
.display-ad img
{
margin-left: 1.25rem;
}
.ad-preview span,
.display-ad span
{
display: block;
}
.html-ltr .ad-preview,
.html-rtl .ad-preview
{
inset-inline-start: 27rem;
min-width: 21rem;
position: relative;
top: -24.6rem;
}p.start-ad
{
font-family: Arial, Helvetica, sans-serif;
min-height: 3rem;
width: 18rem;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 0.4375rem;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.trending-container
{
display:flex;
overflow-x: scroll;
max-width:57rem;
}
.serp .trending
{
text-align:center;
}
h2.trending
{
margin-top: 0.3125rem;
}
h2.trending select,
h2.trending option
{
font-size: var(--font-size-6);
font-weight:bold;
}
.trending-float
{
float: left;
padding:0.375rem;
}
.trending-table
{
border: 1px solid var(--gray-0);
border-collapse: collapse;
table-layout: fixed;
width: 15rem;
}
.trending-tr
{
border: 1px solid var(--gray-0);
}
.trending-th,
.trending-td
{
margin: 0;
padding: 0.3125rem;
overflow: hidden;
width: 70%;
word-wrap: break-word;
}
.trend-score
{
width: 30%;
}
.trending-td a
{
text-decoration: none;
}
.trending-td a:hover
{
text-decoration: underline;
}
.trending-footer
{
padding: 0.6rem;
text-align:center;
}
.trending-highlight
{
margin:auto;
margin-top: 0.625rem;
left:1.875rem;
position: relative;
right:1.875rem;
width:34.5rem;
}
.trending-highlight li
{
display:inline;
}
.trending-highlight li a
{
white-space:nowrap;
}
.feed-highlight li:before,
.trending-highlight li:before {
content: '-';
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.trending-highlight li:last-child:after
{
content: '-';
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.feed-highlight
{
margin:auto;
margin-top: 0.625rem;
left:1.875rem;
overflow:hidden;
position: relative;
right:1.875rem;
width:34.5rem;
}
.feed-highlight li
{
list-style-type: none;
margin-top:0.625rem;
}
#contact-actions
{
font-size: var(--font-size-6);
left: -0.375rem;
position: relative;
top: 0.8125rem;
}
#contact-actions .link-dropdown li,
#contact-actions .link-dropdown li a
{
background-color: var(--gray-93);
}
#test-results
{
width:min-content;
}
/* === Mail activity (item 52) === */
.user-accounts-group
{
margin-top: 0.75rem;
padding: 0.25rem;
border-top: 1px solid #CDE;
}
.user-accounts-group:first-of-type
{
border-top: 0;
}
.user-accounts-group:last-of-type
{
border-bottom: 1px solid #CDE;
}
.user-accounts-active .user-accounts-name
{
color: #0050a0;
}
.user-accounts-cloning
{
background-color: #e6f4ea;
}
.user-accounts-cloning .user-accounts-name
{
/* The badge sits as a flex sibling of .user-accounts-toggle;
space-between would push them to opposite edges of the
row. Switch this row's flex to start-aligned and let a
small gap separate them. */
justify-content: flex-start;
gap: 0.4em;
}
.user-accounts-cloning-badge
{
/* Single inline whole for the parens + link so the flex
container treats it as one item. */
white-space: nowrap;
font-size: var(--font-size-1);
}
.user-accounts-cloning-link
{
margin: 0;
}
/* Defense-in-depth: even if a stale cached mailmessages.js
manages to inject the rename input or the toolbar onto a
cloning row, hide them via CSS so the user can't actually
complete a rename / add-folder action against an account
whose IMAP credentials are mid-use. The JS gates in
enterAccountEditMode / enterFolderEditMode block this at
the source; the rules below are the safety net. */
[data-cloning="1"] .user-accounts-rename-input,
[data-cloning="1"] .user-accounts-edit-toolbar,
[data-cloning="1"] .user-accounts-new-folder-box
{
display: none;
}
.mail-clone-failed-link
{
/* The Failed count itself is the toggle: render it as a
clickable link when there are errors to show. */
cursor: pointer;
text-decoration: underline;
}
.mail-clone-errors-row
{
/* Full panel width (outside the narrow status table) so a
long error message is readable rather than wrapping inside
a tight column. */
margin-top: 0.5em;
}
.mail-clone-errors
{
/* Scrollable so a long run of transient failures does not
push the rest of the status panel off-screen. */
max-height: 12em;
overflow-y: auto;
font-size: 9pt;
}
.mail-clone-error
{
color: #a00;
padding: 2px 0;
border-bottom: 1px solid var(--gray-93);
}
.mail-clone-error.resolved
{
/* A failure that later succeeded a different way is kept
visible but de-emphasized so the user can see it was
recovered rather than silently dropped. */
color: var(--gray-47);
text-decoration: line-through;
}
.mail-clone-error-resolved
{
text-decoration: none;
font-style: italic;
}
.user-accounts-name
{
font-size: var(--font-size-2);
margin: 0 0 0.25rem 0;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.user-accounts-controls a
{
margin-left: 0.25rem;
font-size: 9pt;
text-decoration: none;
}
.user-accounts-folders
{
list-style: none;
margin: 0;
padding: 0;
}
.user-accounts-toggle
{
cursor: pointer;
user-select: none;
}
.user-accounts-triangle
{
font-size: 8pt;
color: var(--gray-40);
}
.user-accounts-folders-collapsed
{
display: none;
}
.user-accounts-folders li
{
margin: 2px 0;
}
.user-accounts-folders a
{
display: block;
padding: 0.25rem 0.375rem;
border-radius: 3px;
text-decoration: none;
color: var(--gray-20);
}
.user-accounts-folders a:hover
{
background-color: #e8e8ee;
}
.user-accounts-folder-active
{
background-color: #d8d8e8;
font-weight: bold;
}
.user-accounts-folder-noselect
{
padding: 0.25rem 0.375rem;
color: var(--gray-60);
}
.mail-domain-list
{
list-style: none;
margin: 0.25rem 0 0.5rem 0;
padding: 0;
}
.mail-domain-item
{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
border: 1px solid var(--gray-87);
border-radius: 3px;
margin-bottom: 0.25rem;
max-width: 30em;
}
.mail-domain-text
{
flex: 1 1 auto;
font-family: monospace;
font-weight: normal;
}
.mail-domain-remove,
.secure-domain-edit,
.domain-route-apply
{
background: transparent;
border: 1px solid var(--gray-80);
border-radius: 5px;
color: inherit;
cursor: pointer;
font: inherit;
font-weight: normal;
height: 1.9em;
line-height: 1;
min-width: 1.9em;
padding: 2px 0.5rem;
vertical-align: middle;
}
.mail-domain-remove:hover,
.secure-domain-edit:hover,
.domain-route-apply:hover
{
background-color: var(--gray-93);
}
.domain-route-panel
{
display: flex;
align-items: center;
flex-basis: 100%;
flex-wrap: wrap;
gap: 0.5rem;
font-weight: normal;
padding: 0.25rem 0 2px 0;
}
.domain-route-panel .domain-route-group
{
font-weight: normal;
}
.domain-route-panel .robots-config-link
{
flex-basis: 100%;
}
.mail-domain-add-row
{
display: flex;
align-items: center;
gap: 0.5rem;
max-width: 30em;
}
.mail-domain-add-row input
{
border-radius: 5px;
font-weight: normal;
height: 2.34rem;
box-sizing: border-box;
}
.mail-port-links
{
list-style-type: none;
margin: 0.5rem 0;
padding: 0;
}
.mail-port-links li
{
display: inline;
margin-right: 1rem;
}
.mail-dns-records
{
display: none;
font-family: monospace;
font-weight: normal;
white-space: pre;
overflow: auto;
max-height: 16em;
max-width: 40em;
margin: 0.25rem 0 0.5rem 0;
padding: 0.5rem;
border: 1px solid var(--gray-87);
border-radius: 3px;
background: var(--gray-94);
}
.machine-services-table
{
border-collapse: collapse;
margin: 0.25rem 0 0.5rem 0;
max-width: 100%;
width: auto;
}
.machine-services-table th,
.machine-services-table td
{
border: 1px ridge var(--gray-0);
padding: 0.25rem 0.5rem;
vertical-align: middle;
}
.machine-services-table td.machine-services-name
{
text-align: start;
font-weight: normal;
}
.machine-services-log
{
text-align: center;
white-space: nowrap;
}
.machine-services-toggle
{
width: 1%;
white-space: nowrap;
}
.icon-inline
{
margin-inline-start: 0.375rem;
text-decoration: none;
}
.machine-box
{
clear: both;
margin-bottom: 0.5rem;
}
.paging-clearfix
{
margin-bottom: 0.25rem;
overflow: hidden;
}
.machine-details > .machine-summary
{
align-items: center;
cursor: pointer;
display: flex;
font-weight: bold;
gap: 0.5rem;
list-style: none;
padding: 0.25rem 0;
}
.machine-details > .machine-summary > .icon-inline
{
margin-inline-start: auto;
}
.machine-details > .machine-summary::-webkit-details-marker
{
display: none;
}
.machine-details > .machine-summary::before
{
content: "\25B6";
display: inline-block;
font-size: 0.7em;
margin-inline-end: 0.375rem;
transition: transform 0.15s;
}
.machine-details[open] > .machine-summary::before
{
transform: rotate(90deg);
}
.html-rtl .machine-details > .machine-summary::before
{
content: "\25C0";
}
.html-rtl .machine-details[open] > .machine-summary::before
{
transform: rotate(-90deg);
}
.machine-details-body
{
padding: 0.25rem 0 0.25rem 1.125rem;
}
.machine-detail-tag
{
background-color: var(--gray-93);
border-radius: 3px;
color: var(--gray-20);
display: inline-block;
font-family: monospace;
font-size: 0.85em;
margin-inline-end: 0.375rem;
padding: 2px 0.375rem;
}
.dim
{
color: var(--gray-53);
}
.impersonation-banner
{
background-color: #FDE68A;
color: #663C00;
text-align: center;
padding: 0.375rem 0.625rem;
font-weight: bold;
border-bottom: 1px solid #C9A227;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
height: 2.5rem;
box-sizing: border-box;
z-index: 2000;
white-space: nowrap;
opacity: 0.8;
}
.impersonation-banner a
{
color: #663C00;
text-decoration: underline;
margin-left: 0.5rem;
}
.impersonation-stop:not(.none)
{
display: inline-block;
margin-left: 0.5rem;
}
.impersonation-banner input[type="password"]
{
height: 1.75rem;
box-sizing: border-box;
vertical-align: middle;
margin: 0 0.375rem;
font-size: var(--font-size-3);
}
.html-ltr .impersonation-banner .button-box.impersonation-go,
.html-rtl .impersonation-banner .button-box.impersonation-go
{
height: 1.75rem;
box-sizing: border-box;
padding: 0 0.625rem;
margin: 0 2px;
font-size: var(--font-size-4);
line-height: 1.5rem;
top: 0;
vertical-align: middle;
}
/*
Styles for a Git repository wiki page shown in read mode as a file
browser: the clone address, the branch and path bar, the file and
folder listing, a single file's contents, and a rendered README.
*/
.git-repository
{
margin: 0.1875rem;
}
.git-panel
{
display: none;
}
.git-panel.git-open
{
display: block;
}
.git-clone-line
{
align-items: center;
display: flex;
gap: 0.3125rem;
margin-bottom: 0.5rem;
}
.git-clone-cmd
{
align-items: center;
background-color: var(--gray-94);
border: 1px var(--gray-67) solid;
border-radius: 3px;
box-sizing: border-box;
display: inline-flex;
flex: 1;
font: 1rem monospace;
min-height: 1.75rem;
min-width: 0;
overflow-x: auto;
padding: 0.25rem 0.375rem;
white-space: nowrap;
}
.git-icon-control
{
align-items: center;
background: transparent;
border: 1px solid var(--gray-50);
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font-size: 1rem;
height: 1.75rem;
justify-content: center;
padding: 0;
width: 1.75rem;
}
.git-app-message
{
margin-bottom: 0.5rem;
}
.git-app-row
{
align-items: center;
display: flex;
gap: 0.25rem;
}
.git-app-row input,
.git-app-row select
{
box-sizing: border-box;
font-size: 1rem;
height: 1.75rem;
margin: 0;
padding: 0 0.375rem;
}
.git-stats
{
margin-top: 1rem;
}
.git-stats-rows
{
overflow-y: auto;
}
.git-stats-authors
{
max-height: 15rem;
}
.git-stats-months
{
max-height: 30rem;
}
.git-stats-types
{
max-height: 15rem;
}
.git-stats-group
{
margin-bottom: 0.75rem;
}
.git-stat-row
{
align-items: center;
display: flex;
gap: 0.5rem;
margin-bottom: 2px;
}
.git-stat-label
{
flex: 0 0 auto;
overflow: hidden;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
width: 30%;
}
.git-stat-track
{
background-color: var(--gray-94);
border-radius: 3px;
flex: 1 1 auto;
height: 0.875rem;
overflow: hidden;
}
.git-stat-bar
{
background-color: #6699CC;
display: block;
height: 100%;
}
.git-stat-count
{
flex: 0 0 auto;
width: 3em;
}
.git-search-line
{
margin-bottom: 0.5rem;
text-align: end;
}
.git-search-field
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
font: 0.8125rem sans-serif;
padding: 0.25rem 0.375rem;
width: 18rem;
}
.git-action
{
margin-inline-end: 0.375rem;
text-decoration: none;
}
.git-path-download
{
float: inline-end;
font-size: inherit;
text-decoration: none;
}
.git-sort
{
text-decoration: none;
}
.git-diff-file
{
margin-bottom: 0.75rem;
}
.git-diff-body
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
font: 0.75rem monospace;
overflow-x: auto;
padding: 0.375rem 0.5rem;
white-space: pre-wrap;
}
.git-diff-head
{
font-weight: bold;
}
.git-diff-author
{
color: var(--gray-50);
font-weight: normal;
}
.git-diff-added
{
color: green;
}
.git-diff-removed
{
color: darkred;
}
.git-diff-modified
{
color: darkslateblue;
}
.git-bar
{
align-items: center;
background-color: var(--gray-94);
border: 1px var(--gray-67) solid;
border-radius: 3px;
display: flex;
flex-wrap: wrap;
gap: 0.3125rem;
margin-bottom: 0.5rem;
padding: 0.375rem 0.625rem;
}
.git-branch
{
align-items: center;
display: inline-flex;
}
.git-branch-select,
.git-ref-button
{
border: 1px solid var(--gray-50);
border-radius: 3px;
box-sizing: border-box;
font: 0.8125rem monospace;
height: 1.75rem;
padding: 0 0.375rem;
}
.current-activity .git-branch-select
{
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--gray-50) 50%),
linear-gradient(135deg, var(--gray-50) 50%, transparent 50%);
background-position: right 0.75rem center, right 0.4375rem center;
background-repeat: no-repeat;
background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
font-size: 0.8125rem;
padding-right: 1.375rem;
}
.git-ref,
.git-download
{
display: inline-flex;
position: relative;
}
.git-ref-button
{
align-items: center;
background: transparent;
cursor: pointer;
display: inline-flex;
gap: 0.25rem;
}
.git-bar-actions
{
align-items: center;
display: inline-flex;
gap: 0.25rem;
margin-left: auto;
}
.git-caret
{
font-size: 0.625rem;
}
.git-ref-menu,
.git-download-menu
{
background-color: var(--gray-100);
border: 1px var(--gray-67) solid;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
max-height: 24rem;
min-width: 12rem;
overflow-y: auto;
position: absolute;
top: 100%;
z-index: 5;
}
.git-download-menu
{
right: 0;
}
.git-ref-menu a,
.git-download-menu a
{
display: block;
padding: 0.25rem 0.625rem;
text-decoration: none;
white-space: nowrap;
}
.git-ref-menu a:hover,
.git-download-menu a:hover
{
background-color: aliceblue;
}
.git-ref-head
{
border-top: 1px solid var(--gray-88);
font-weight: bold;
}
.git-ref-menu a:first-child
{
border-top: 0;
}
.git-icon-button
{
background: transparent;
border: 0;
cursor: pointer;
padding: 2px;
}
.git-icon
{
font-size: 1rem;
}
.git-path
{
font-family: monospace;
margin-bottom: 0.5rem;
padding: 0 2px;
}
.git-path a,
.git-listing a
{
text-decoration: none;
}
.git-path a:hover,
.git-listing a:hover
{
text-decoration: underline;
}
.git-listing-box
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
max-height: 30rem;
overflow-y: auto;
}
.resource-path-warning
{
background-color: #FDECEA;
border: 1px solid #E0B4B0;
border-radius: 4px;
color: #922;
margin: 0.6rem 0;
padding: 0.6rem 0.9rem;
}
.git-listing
{
border-collapse: collapse;
width: 100%;
}
.git-listing td
{
border-top: 1px solid var(--gray-88);
padding: 0.375rem 0.625rem;
}
.git-listing tr:first-child td
{
border-top: 0;
}
.git-listing th .resizable,
.git-issue-list th .resizable
{
box-sizing: border-box;
display: block;
min-width: 100%;
width: 100%;
}
.git-listing th
{
background-color: var(--gray-100);
border-bottom: 1px solid var(--gray-82);
border-right: 1px solid var(--gray-88);
cursor: pointer;
padding: 0.375rem 0.625rem;
position: sticky;
text-align: left;
top: 0;
user-select: none;
z-index: 1;
}
.git-listing th:last-child
{
border-right: 0;
text-align: right;
}
.git-listing th:hover
{
text-decoration: underline;
}
.git-listing tr:hover td
{
background-color: aliceblue;
}
.git-name-col
{
white-space: nowrap;
}
.git-commit-col
{
color: var(--gray-50);
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.git-author-col
{
color: var(--gray-50);
white-space: nowrap;
}
.git-age-col
{
color: var(--gray-50);
text-align: right;
white-space: nowrap;
}
.git-history thead th
{
border-bottom: 1px solid var(--gray-88);
color: var(--gray-50);
font-weight: bold;
padding: 0.375rem 0.625rem;
text-align: left;
}
.git-date-col,
.git-author-col,
.git-actions-col
{
white-space: nowrap;
}
.git-date-col,
.git-author-col
{
color: var(--gray-50);
}
.git-msg-col
{
max-width: 20rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.git-actions-col a
{
margin-right: 0.5rem;
}
.wiki-read h1,
.wiki-read h2,
.wiki-read h3,
.wiki-read h4,
.wiki-read h5,
.wiki-read h6
{
scroll-margin-top: 4.5rem;
}
.git-readme-icon
{
font-size: 0.9375rem;
}
.git-file h3
{
font: 0.8125rem monospace;
margin: 0 0 0.375rem 0;
}
.git-blob
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
font: 0.8125rem monospace;
max-height: 36rem;
overflow: auto;
padding: 0.625rem;
white-space: pre;
}
.git-readme-box
{
border: 1px var(--gray-67) solid;
border-radius: 3px;
margin-top: 0.75rem;
overflow: hidden;
}
.git-readme-bar
{
align-items: center;
background-color: var(--gray-94);
border-bottom: 1px var(--gray-67) solid;
display: flex;
justify-content: space-between;
padding: 0.375rem 0.625rem;
}
.git-readme-title
{
align-items: center;
display: flex;
font-weight: bold;
gap: 0.375rem;
}
.git-readme-toc-toggle
{
background: transparent;
border: 0;
cursor: pointer;
padding: 2px;
}
.git-readme-toc
{
border-bottom: 1px var(--gray-67) solid;
list-style: none;
margin: 0;
max-height: 18rem;
overflow-y: auto;
padding: 0.375rem 0;
}
.git-readme-toc a
{
color: var(--gray-33);
display: block;
padding: 0.1875rem 0.75rem;
text-decoration: none;
}
.git-readme-toc a:hover
{
background-color: var(--gray-94);
color: var(--gray-20);
}
.git-toc-level2 a
{
padding-left: 1.75rem;
}
.git-toc-level3 a
{
padding-left: 2.75rem;
}
.git-toc-level4 a
{
padding-left: 3.75rem;
}
.git-readme
{
overflow-wrap: break-word;
overflow-x: auto;
padding: 0.75rem 1rem;
}
.git-readme pre
{
overflow-x: auto;
}
.git-readme img
{
max-width: 100%;
}
.git-note,
.git-empty
{
color: var(--gray-50);
font-style: italic;
}
.git-issue-bar
{
align-items: center;
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.git-issue-search-box
{
align-items: center;
display: flex;
flex: 1;
gap: 0.25rem;
}
.git-issue-search
{
box-sizing: border-box;
flex: 1;
height: var(--control-height);
padding: 0.3125rem 0.5rem;
}
.current-activity .git-issue-search
{
top: 0;
}
.git-issue-filter-wrap
{
position: relative;
}
.git-issue-filter-menu
{
background-color: var(--gray-100);
border: 1px solid var(--gray-50);
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
position: absolute;
right: 0;
top: 2.25rem;
z-index: 5;
}
.git-issue-filter-menu a
{
color: var(--gray-33);
display: block;
font-size: var(--font-size-2);
padding: 0.25rem 0.625rem;
text-decoration: none;
white-space: nowrap;
}
.git-issue-filter-menu a:hover
{
background-color: var(--gray-94);
color: var(--gray-20);
}
.git-issue-filter-button.git-issue-filter-active
{
background-color: #e6f0ff;
border-color: #4a80c0;
}
.git-issue-filter-check
{
color: #2a7a2a;
font-weight: bold;
}
.git-issue-search-hint
{
color: var(--gray-53);
font-size: var(--font-size-1);
margin: 2px 0 0.375rem;
}
.git-issue-new-button
{
margin-left: auto;
}
.git-issue-form
{
background-color: var(--gray-100);
border: 1px solid var(--gray-82);
border-radius: 6px;
margin-bottom: 0.875rem;
padding: 0.875rem;
}
.git-issue-title,
.git-issue-body
{
box-sizing: border-box;
margin-bottom: 0.75rem;
padding: 0.4375rem 0.5625rem;
width: 100%;
}
.git-issue-body
{
min-height: 7.5rem;
resize: vertical;
}
.git-issue-form-foot
{
align-items: center;
display: flex;
gap: 0.5rem;
}
.git-issue-select
{
height: var(--control-height);
padding: 0 0.375rem;
}
.current-activity .git-issue-select
{
font-family: monospace;
font-size: 0.8125rem;
}
.git-issue-submit
{
margin-left: auto;
padding: 0.4375rem 1rem;
}
.current-activity .git-issue-submit
{
font-size: 0.8125rem;
}
.git-issue-list-box
{
max-height: 24em;
overflow-y: auto;
}
.git-issue-list
{
border-collapse: collapse;
width: 100%;
}
.git-issue-list th,
.git-issue-list td
{
border: 1px solid var(--gray-82);
padding: 0.5rem 0.625rem;
text-align: left;
}
.git-issue-list th
{
background-color: var(--gray-100);
box-shadow: inset 0 -1px 0 var(--gray-82);
cursor: pointer;
position: sticky;
top: 0;
user-select: none;
z-index: 1;
}
.git-issue-list th:hover
{
text-decoration: underline;
}
.git-issue-list td a
{
color: inherit;
display: block;
text-decoration: none;
}
.git-issue-back
{
color: var(--gray-33);
text-decoration: none;
}
.git-issue-back:hover
{
text-decoration: underline;
}
.git-issue-detail-head
{
align-items: baseline;
display: flex;
gap: 0.625rem;
justify-content: space-between;
margin-bottom: 0.625rem;
}
.git-issue-detail-number
{
font-weight: bold;
}
.git-issue-detail-info
{
border: 1px solid var(--gray-82);
border-radius: 6px;
padding: 0.75rem 0.875rem;
}
.git-issue-history
{
border: 1px solid var(--gray-88);
list-style: none;
margin: 0 0 0.75rem 0;
max-height: 10em;
overflow-y: auto;
padding: 0.375rem 0.625rem;
}
.git-issue-history li
{
padding: 2px 0;
}
.git-issue-history-when
{
color: var(--gray-47);
font-family: monospace;
margin-right: 0.5rem;
}
.git-issue-change,
.git-issue-priority-form
{
align-items: center;
display: flex;
gap: 0.5rem;
margin-bottom: 0.625rem;
}
.git-issue-change-field
{
align-items: center;
display: none;
gap: 0.375rem;
}
.git-issue-change-field input
{
box-sizing: border-box;
height: var(--control-height);
}
.git-issue-arrow
{
box-sizing: border-box;
cursor: pointer;
height: var(--control-height);
padding: 0 0.625rem;
}
.git-issue-detail-label
{
color: var(--gray-33);
}
.git-issue-detail-line
{
color: var(--gray-33);
margin-bottom: 0.5rem;
}
.git-issue-detail-title-row
{
align-items: center;
display: flex;
gap: 0.5rem;
justify-content: space-between;
margin: 0.625rem 0 0.375rem 0;
}
.git-issue-detail-title
{
margin: 0;
}
.git-issue-comment-controls
{
align-items: center;
display: flex;
gap: 0.375rem;
}
.git-issue-comment-add,
.git-issue-comment-latest
{
background: none;
border: 1px solid var(--gray-82);
border-radius: 4px;
cursor: pointer;
padding: 2px 0.5rem;
}
.git-issue-comments
{
border: 1px solid var(--gray-88);
max-height: 16em;
overflow-y: auto;
padding: 0.375rem 0.625rem;
}
.git-issue-comment
{
border-bottom: 1px solid var(--gray-94);
padding: 0.375rem 0;
}
.git-issue-comment-head
{
color: var(--gray-47);
font-size: 0.75rem;
margin-bottom: 2px;
}
.git-issue-comment-who
{
color: var(--gray-33);
font-weight: bold;
}
.git-issue-comment-body img
{
height: auto;
max-width: 100%;
}
.git-issue-comment-form
{
margin-top: 0.5rem;
}
.git-issue-list tr:hover td
{
background-color: aliceblue;
}
.git-issue-num-col
{
white-space: nowrap;
width: 1%;
}
.git-issue-summary-col
{
width: 60%;
}
.git-issue-priority-col
{
text-align: center;
white-space: nowrap;
width: 1%;
}
.git-priority
{
align-items: center;
color: var(--gray-100);
display: inline-flex;
font-size: 0.6875rem;
font-weight: bold;
height: 1.375rem;
justify-content: center;
line-height: 1;
width: 1.375rem;
}
.git-priority-low
{
background-color: #3AA655;
border-radius: 50%;
}
.git-priority-medium
{
align-items: flex-end;
background-color: #D08A1E;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
padding-bottom: 0.1875rem;
}
.git-priority-high
{
background-color: #CC3333;
clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%,
30% 100%, 0 70%, 0 30%);
}
.show-narrow
{
display: none;
}
.center-wide
{
margin: 0 auto 0 auto;
text-align: center;
}
.configure-lang-shift
{
position: relative;
top: -3.2em;
}
/* A visitor who has asked the system to reduce motion should not be
given the sliding panels, the spin, or the other easing this file
sets. The animation is cut to a single held frame rather than removed
so anything that waits on its end still advances, and the transitions
are made instant so a state still changes but without the travel. */
@media (prefers-reduced-motion: reduce)
{
*,
*::before,
*::after
{
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* The compact layout is wanted on a phone in either orientation, but a
width-only test misses a phone held sideways: it is wide (around 850px)
yet short. Adding a short-height test brings the compact rules in when
the viewport is either narrow (portrait phones, narrow windows) or short
(landscape phones, whose height is at or under 480px, while a tablet
held sideways stays well above that). */
@media (max-width: 600px), (max-height: 480px)
{
.git-hide-narrow
{
display: none;
}
.hide-narrow
{
display: none;
}
.show-narrow
{
display: revert;
}
.center-wide
{
margin: 0;
text-align: start;
}
.configure-lang-shift
{
position: static;
top: 0;
}
.stack-narrow > td
{
display: block;
width: auto;
}
p
{
min-width:18.75rem;
width:auto;
}
pre
{
white-space:pre-wrap;
}
.indent
{
text-indent: 0.625rem;
}
span.indent1
{
margin-left: 0.625rem;
}
span.indent2
{
margin-left: 1.25rem;
}
span.indent3
{
margin-left: 1.875rem;
}
span.indent4
{
margin-left: 2.5rem;
}
span.indent5
{
margin-left: 3.125rem;
}
.blockquote
{
margin-left: 1.5625rem;
margin-right: 1.5625rem;
}
.small-font
{
font-size: var(--font-size-1) !important;
}
.medium-font
{
font-size: var(--font-size-3) !important;
}
.big-font
{
font-size: var(--font-size-5) !important;
}
.huge-font
{
font-size:20pt !important;
}
.very-narrow-field
{
width: 5rem;
}
.narrow-field
{
width: 6.25rem;
}
.wide-field
{
width: 9.375rem;
}
.extra-wide-field
{
width: 12.5rem;
}
.tall-text-area
{
width: 90%;
}
#info-item
{
height: calc(100% - 1.875rem);
left: 0.625rem;
width: calc(100% - 1.875rem);
}
#detail-item
{
border: 1px solid var(--gray-0);
display: block;
height: 22.8rem;
}
.detail-resource
{
max-width: 9.6875rem;
}
.grid-resource img
{
margin-left: 1.125rem;
}
.detail-resource img
{
height:6.6rem;
margin-left: 2.1875rem;
}
div[data-badge]::after
{
left:-0.4375rem;
}
.badge
{
left: 0;
}
.media-detail-description
{
margin:auto;
width:90%;
}
.medium-text-area
{
width: 90%;
}
.short-text-area
{
width: 90%;
}
.top-margin
{
margin-top: 0.375rem;
}
.top-bottom-margin
{
margin: 0.375rem 0 0.375rem 0;
}
.small-top-bottom-margin
{
margin: 0.1875rem 0 0.1875rem 0;
}
.slight-pad
{
padding: 0.1875rem;
}
body
{
left: 0;
margin: 0;
min-height: 0;
width: auto;
}
.search-body, .body-container
{
width: unset;
min-width: auto;
}
.top-container
{
top: -0.3125rem;
min-width: 0;
}
.top-landing-spacer
{
clear:both;
height:4.375rem;
}
#message
{
left: 1.25rem;
right: 1.25rem;
width: 100%;
}
.bar-item
{
font-size: var(--font-size-2);
max-height: 14pt;
max-width: 3.9375rem;
top: 0.1875rem;
}
.wide-bar-item
{
font-size: var(--font-size-2);
max-height: 14pt;
max-width: 9.375rem;
top: 0.1875rem;
}
.group-title-item
{
max-width: 11.25rem;
vertical-align: top;
}
.nav-bar
{
min-width: unset;
width: 100%;
}
.nav-bar .title-block
{
min-width: unset;
width: 100%;
}
.nav-bar h1
{
font-size: var(--font-size-5);
min-width: unset;
max-width: unset;
}
.nav-bar .nav-span
{
font-size: var(--font-size-5);
max-width:15.625rem;
}
.nav-bar img
{
max-width:3.75rem;
}
.menu-options li
{
padding: 1px;
}
.menu-options h2 img
{
max-height: 4.6875rem;
max-width: 9.375rem;
}
.source-anchor-button
{
font-size: var(--font-size-5);
}
:not() .resource-more-btn
{
margin-top: -0.25rem;
}
#clipboard-toggle
{
height: 1.5625rem;
position:relative;
top:2px;
}
/* The narrow-screen rule above shrinks the clipboard toggle wherever it
appears, but inside the resource toolbar it is one of the row's
controls and must stay the row's height; the id in the selector beats
the bare id rule so the toolbar clipboard lines up with its
neighbors on a phone too. */
.media-controls #clipboard-toggle
{
height: var(--toolbar-control-height);
top: 0;
}
.center-container
{
margin-left: 0px;
margin-right: 0px;
min-width: unset;
max-width: unset;
}
.small-top
{
position: relative;
top:0;
}
.non-search
{
left: 0.625rem;
position: relative;
right: 0.625rem;
top: 0.625rem;
}
.non-search .logo
{
margin: 0 auto 0 auto;
position: relative;
text-align: inherit;
top: 1.25rem;
}
.test
{
position: relative;
top: -1.08rem;
}
.request-add, .group-request-add
{
position:relative;
top:-0.625rem;
}
.admin-heading
{
position: absolute;
top: 0.3125rem;
width:22.5rem;
}
.group-heading
{
position: absolute;
top: 0.3125rem;
}
.group-heading span
{
position: relative;
top: 0px;
}
.landing .logo
{
min-width: 0px;
}
.group-comment
{
margin: 0.625rem 0.875rem 0.625rem 0.875rem !important;
}
.logo img
{
left: -0.5rem;
position: relative;
top: 0.875rem;
width: 3.125rem;
z-index: 5;
}
.admin-heading img
{
position: relative;
top: 0px;
}
.group-heading img.logo
{
left: 0.25rem;
position: relative;
top: 1.0625rem;
width: 3.125rem;
}
.landing .logo img
{
position: relative;
left: 0px;
top: 0.875rem;
width: 12.5rem;
}
.admin-heading img
{
left: 5rem;
position: relative;
right: 5rem;
top: 1.875rem;
width: 3.125rem;
}
.logo span
{
position: relative;
top: 0;
}
.html-ltr b.logo-subsearch,
.html-rtl b.logo-subsearch
{
inset-inline-start: 3.125rem;
position: fixed;
top: 2.5rem;
}
.logo-subsearch
{
font-size: 20pt;
margin: 0;
padding: 0;
position: relative;
text-align: center;
top: -1.5625rem;
z-index: 15;
}
.admin-heading
{
left: 4.375rem;
position: relative;
right: 4.375rem;
top: 1.25rem;
}
.non-search .logo span
{
left: 1.25rem;
position: relative;
right: 1.25rem;
top: -1.8rem;
width: 12.5rem;
}
.non-search .logo img
{
left: 1.25rem;
position: relative;
right: 1.25rem;
top: -1.25rem;
width: 3.125rem;
}
.footer-element
{
margin-top: 3.75rem;
}
.signin-exit
{
min-width:0;
}
.signin-exit
{
margin-top: 2.4rem;
position: relative;
text-align: inherit;
min-width:0;
top: -1.25rem;
width: 90%;
}
.html-ltr .signin-exit li,
.html-rtl .signin-exit li
{
margin-inline-start: 0;
margin-left: 20%;
margin-right: 20%;
}
.query-statistics
{
position: relative;
overflow-wrap: break-word;
top: 12.5rem;
word-wrap: break-word;
}
.login, .register
{
font-size: var(--font-size-5);
left: 0.3125rem;
position: relative;
right: 0.3125rem;
width: 100%;
}
.register .table-label
{
max-width: 9rem;
overflow-wrap: break-word;
white-space: normal;
}
.login button, .register button
{
font-size: var(--font-size-5);
}
.register select
{
font-size: var(--font-size-3);
}
.user-icon-td
{
width:5.625rem;
}
.user-icon
{
width:5rem;
}
.upload-file
{
width: 9.375rem;
height: 1.875rem;
}
.small-icon
{
height: 1.875rem;
width: 1.875rem;
}
.icon-upload
{
left:-0.3125rem;
position:relative;
font-size: var(--font-size-2);
width:5.375rem;
}
.statistics
{
font-size: var(--font-size-5);
left: 0.3125rem;
position: relative;
right: 0.3125rem;
width: 100%;
}
.stats span
{
left: -0.625rem;
position: relative;
top: -0.625rem;
width: 12.5rem;
}
.stats img
{
left: 0px;
position: relative;
top: 0px;
width: 3.125rem;
}
.search-callout
{
border: 3px solid var(--gray-87);
padding: 0.3125rem;
margin: 0.5rem 0.1875rem 0.1875rem 0.1875rem;
width: 20rem;
}
.news-result img
{
margin-top:0.3125rem;
max-height:4.375rem;
top:0.4375rem;
width:7.5rem;
}
.news-result, .result
{
width:inherit;
}
.page-list-header-footer
{
padding: 0;
margin: 0 auto 0 auto;
width: 21.25rem;
}
.wiki-page-list-result
{
width:21.25rem;
}
div.small-group-result, div.group-result
{
margin: 0.5rem 1px 0.5rem 1px;
width: auto;
}
div.button-group-result
{
margin: 0.5rem 1px 1px 1px;
padding: 2px 2px 1px 2px;
width: auto;
}
.search-box
{
width: calc(100% - 3.125rem);
margin-top: 0.5rem;
}
.search-box-inner input
{
font-size: var(--font-size-5);
width: calc(100% - 5rem);
}
.inner-bar .search-box
{
width: calc(100% - 8.75rem);
}
.inner-bar .search-box-inner
{
width: calc(100% - 7.5rem);
}
.inner-bar .search-box-inner input
{
width: calc(100% - 5rem);
}
.search-button
{
font-size: var(--font-size-5);
}
.search-reset-button
{
font-size: var(--font-size-3);
}
.button-box img
{
left:-2px;
position:relative;
top:1px;
}
.search-field
{
position: relative;
width:85%;
top: -1.5625rem;
}
.search-field input[type="search"]
{
border-radius:1px;
width:58%;
}
.search-field .button-box
{
background-color:var(--gray-93);
border-radius:1px;
height:2.3125rem;
left:0;
position: relative;
top: 0.1875rem;
width:2.5rem;
}
.search-field .button-box img
{
left:-0.625rem;
position:relative;
top:1px;
}
.small-search-box
{
position:static;
width: 11.25rem;
}
.medium-search-box
{
position: static;
width: 13.75rem;
}
.large-search-box
{
position: static;
width: 16.25rem;
}
.small-search-box .search-input
{
position: static;
width: 6.75rem;
}
.medium-search-box .search-input
{
position: static;
width: 9.25rem;
}
.large-search-box .search-input
{
position: static;
width: 11.75rem;
}
.dropdown
{
display: none;
}
.suggest-list
{
display: none;
}
.video-list, .image-list
{
margin-left: 2px;
margin-right: 2px;
padding: 2px;
position: relative;
top: 0.3125rem;
width: 100%;
}
.image-detail
{
max-width: 7.4375rem;
}
.image-list img
{
height: 4.375rem;
padding: 2px;
}
.video-detail
{
width: 10.8rem;
}
.video-list .video-thumb
{
max-height: 7.5rem;
}
.video-play-button
{
font-size: 4.2rem;
top:1.2rem;
left:3.3rem;
}
.table-input select
{
width: 11.875rem;
}
.table-input input
{
width: 9.375rem;
}
.content
{
clear: both;
position: relative;
left: 0;
margin: 0.1875rem;
right: 0;
top: 0;
width: 100%;
}
.button-box
{
background-color: #E9E9ED;
border-radius: 5px;
border: 1px ridge var(--gray-0);
font-size: var(--font-size-5);
height: 2.125rem;
margin: 0 0.25rem 1px 0.25rem;
top: unset;
}
.current-activity-header
{
min-width: 20rem;
width:100%;
}
.wiki
{
position:relative;
top: -2.1875rem;
}
.current-activity-footer
{
min-width: 20rem;
width:100%;
}
#feedstatus
{
position: relative;
top: 3.4375rem;
}
.current-activity, .small-margin-current-activity
{
clear:both;
font-size: var(--font-size-3);
margin:auto;
min-height: 12.5rem;
min-width: 0;
padding: 0 0.1875rem 0.1875rem 0.1875rem;
position: relative;
top: 0.3125rem;
width: 96%;
}
textarea
{
font-size: var(--font-size-5);
}
.adjacent-button-field
{
height: 1.75rem;
margin: 2px;
}
.current-activity select, .small-margin-current-activity select
{
font-size: var(--font-size-3);
}
.current-activity img, .small-margin-current-activity img
{
max-width:95%;
}
.media-container .photo
{
max-width: 18.75rem;
}
.media-container .photo-container
{
height: 28.75rem;
max-width: 18.75rem;
}
.admin-form-row
{
min-width: 21.25rem;
}
#browse-state, #browse-state option
{
font-size: var(--font-size-5);
}
.search-sources-table pre
{
max-width: 14.375rem;
}
.scrapers-table
{
max-width: 21.25rem;
}
.scrapers-table td, .scrapers-table th
{
font-size: 0.6875rem;
max-width:15.625rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-types-table,
.file-types-all td,
.search-page-table,
.search-page-all td
{
margin-left: 2px;
margin-right: 2px;
vertical-align: top;
}
.indexing-plugin-lightbox
{
left: 0px;
right: 0px;
}
.light-content h2
{
font-size: var(--font-size-3);
padding:1.25rem;
}
.light-content
{
left:0.625rem;
padding: 0.9375rem;
right:0.625rem;
width:16.25rem;
}
.wiki-resources table
{
width: 100%;
}
.wiki-resources th:first-child
{
width: 3.5rem;
}
.wiki-resources th:last-child
{
width:17.5rem;
}
.ebook-range
{
width:10.3125rem;
}
.ebook, .wiki-resource-object
{
min-height:18.75rem;
width:22.5rem;
}
.icon-button-container
{
/* shrunk so the full 4-6 icon socialcontrols row fits one
line on a narrow phone viewport without wrapping */
font-size: var(--font-size-3);
padding: 2px;
width: 1.2rem;
margin: 1px;
}
.media-buttons-container
{
font-size: var(--font-size-2);
height: min-content;
margin:0px;
padding: 2px;
position:relative;
top:1px;
}
.access-result .media-buttons-container
{
top: 2px;
}
.media-buttons-container a
{
height: min-content;
margin: 0;
padding: 1px;
}
.media-buttons-container .selected
{
padding: 1px;
}
.search-filter-container, .filter-container
{
min-height: 1.875rem;
margin: 0px;
position:relative;
top:-1px;
}
.search-filter-container input
{
font-size: var(--font-size-4);
}
.filter-container
{
max-width: 4.5rem;
}
.search-filter-container input, .filter-container input
{
min-height: 1.75rem;
}
.filter-container input:focus-within
{
min-height: var(--control-height);
position:relative;
top:-1px;
width: 12.5rem;
z-index:100;
}
.html-ltr .filter-container input:focus-within,
.html-rtl .filter-container input:focus-within
{
inset-inline-end:7.8125rem;
}
.media-filter-button
{
font-size: var(--font-size-1);
height: 1.875rem;
padding: 1px;
position:relative;
margin-left: 2px;
margin-right: 2px;
top: 0px;
}
.filter-container input
{
height: 1.5625rem;
width: 100%;
}
ul.link-dropdown, ul.popup-dropdown
{
margin: 0 0 2px 0;
}
.link-dropdown, .popup-dropdown
{
max-width: 15rem;
}
.wiki-history-discuss
{
position:relative;
top:1.25rem;
}
.upload-box
{
margin: 0 0.3125rem 0 0.3125rem;
text-align: center;
width:88%;
}
.media-upload-box
{
width: 88%;
}
.resource-actions
{
min-width:6.25rem;
}
.list-resource
{
width:100%;
}
.list-resource th
{
width: unset;
}
.resource-thumb
{
width: 2.1875rem;
}
.view-indicator
{
width: 1.5625rem;
}
.list-resource img
{
margin: 0;
height: 1.875rem;
width: 3rem;
}
.list-resource img.default-thumb
{
margin: 0;
}
.list-resource input
{
width: calc(min(100% - 3.125rem, 18.75rem));
}
.top-adscript
{
padding: 1px;
width:90%;
}
.top-ad-static
{
position: relative;
top: 0px;
}
.group-ad-static
{
position: relative;
top: 6.25rem;
}
.top-adscript iframe
{
transform: scale(0.63);
transform-origin: 0 0;
}
.display-ad p
{
max-width: 92%;
padding-bottom: 0.625rem;
padding-top: 0.625rem;
margin: inherit;
width : auto;
}
.trending-container
{
display:block;
overflow-x: scroll;
max-width:20rem;
}
.trending
{
position:static;
margin-top:1.5625rem;
}
.trending-float
{
float: none;
position:static;
}
.trending-table
{
border: 1px solid var(--gray-0);
border-collapse: collapse;
table-layout: fixed;
width: 17.5rem;
}
.trending-footer
{
margin-bottom: 5rem;
}
.trending-highlight
{
left:0.625rem;
right:0.625rem;
width:20.625rem;
}
.feed-highlight
{
left:0.625rem;
right:0.625rem;
width:20.625rem;
}
.git-search-field
{
width: 55vw;
}
.git-listing-box
{
max-height: 60vh;
}
.git-author-col
{
display: none;
}
.wiki-read h1, .wiki-read h2, .wiki-read h3,
.wiki-read h4, .wiki-read h5, .wiki-read h6
{
scroll-margin-top: 13.2rem;
}
.search-body .center-container
{
min-width: unset;
}
.inner-bar .search-box
{
width: calc(100% - 3.125rem);
}
.detail-container .badge
{
left: 0;
}
.detail-container div[data-badge]::after
{
left: -0.4375rem;
}
.image-list .image-detail
{
max-width: 9.6875rem;
}
.video-list .video-detail
{
width: 90%;
}
.html-ltr .button-box,
.html-rtl .button-box
{
top: 0;
}
.nav-bar h1 img
{
position: relative;
top: 0.3125rem;
}
.list-resource .resource-field:focus-within input
{
width: 90%;
}
h2.resource-field input
{
font-size: var(--font-size-3);
}
.micro-pagination ul li
{
padding: 0.1875rem;
}
.group-heading span select
{
font-size: var(--font-size-3);
}
.search-sources-table pre
{
white-space: pre-wrap;
}
}
.git-file-audio
{
width: 100%;
}
.git-file-video
{
max-height: 40rem;
max-width: 100%;
}
.git-file-image
{
max-height: 40rem;
max-width: 100%;
}
.git-file-pdf
{
height: 40rem;
width: 100%;
}
.toc
{
border: 1px ridge var(--gray-0);
width: 70%;
padding: 0.1875rem;
margin: 0.375rem;
}
- Yioop Repo - Seekquarry