survis/styles/style.css

:root {
    --bgColor1: white;
    --bgColor2: #f3f3f3;
    --bgColor3: #ddd;
    --warningBgColor: #fcefa1;
    --errorBgColor: #fef1ec;
    --lightBorder: 1px solid silver;
    --strongBorder: 1px solid #999;
    --errorBorder: 1px solid #b46464;
    --defaultShadow: 1px 1px 5px #AAAAAA;
    --fontSmall: 10pt;
  }

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Calibri, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#page-container{ 
    display: grid;
    grid-template-areas: 
    'header header'
    'control result'
    'footer footer';
    grid-gap: 7px 14px;
    grid-template-columns: 3fr 4fr;
    grid-template-rows: min-content auto min-content;
    background-color: var(--bgColor3);
    width: 100%;
    height: 100%;
}

#page-container > div {
    padding: 10px;
    box-shadow: var(--defaultShadow);
    background-color: var(--bgColor1);
}

label {
    background: #FFFFEE;
    border: var(--strongBorder);
}

a {
    color: #223388;
    text-decoration: none;
}

iframe {
    border: none;
}

a:active {
    color: #223388;
}

a:visited {
    color: #223388;
}

.symbol {
    font-family: 'ModernPictogramsNormal';
    font-size: 16pt;
    margin: 0 2px;
}

.ui-dialog .ui-dialog-content {
    font-size: var(--fontSmall);
}

.button {
    border: var(--lightBorder);
    display: inline-block;
    margin: 5px 5px;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--bgColor2);
    color: #666666;
    font-size: var(--fontSmall);
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:hover {
    border: 1px solid #666666;
    background: #CCCCCC;
    color: black;
}

.ui-layout-resizer {
    background-color: white !important;
}

.ui-autocomplete {
    font-size: 8pt;
}

#header {
    grid-area: header;
    border-top: var(--strongBorder);
    padding-bottom: 0;
}

#title {
    border-bottom: var(--strongBorder);
    overflow: auto;
}

.electron #title {
    border-width: 0;
    float: left;
    width: 100px;
}

#title h1 {
    float: left;
    margin: 0 0;
}

#title h1 a {
    color: black;
    text-decoration: none;
}

#title img {
    float: right;
}

.electron #title img {
    float: left;
}

#paper {
    float: left;
    margin-top: 10px;
    margin-left: 30px;
}

#search {
    float: right;
    margin: 12px 0px 0px 0px;
}

#search input {
    width: 250px;
    font-size: 14pt;
}

#control {
    grid-area: control;
    margin-left: 7px;
    overflow-y: scroll !important;
}

#control h2 {
    font-size: 12pt;
    border-bottom: var(--strongBorder);
    clear: both;
    margin: 0 0 10px 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#control h2:hover {
    background: var(--bgColor3);
}

#control h2 .symbol {
    font-size: var(--fontSmall);
}

#control .tag_cloud_filter {
    font-size: 9pt;
    float: right;
    position: relative;
    height: 0;
    top: -1px;
    left: -100px;
    margin: 0;
}

#control .tag_cloud_filter input {
    width: 70px;
    font-size: 8pt;
}

#control .tag_occurrence {
    font-size: 9pt;
    float: right;
    position: relative;
    height: 0;
    top: -4px;
    left: -1px;
}

#control .button {
    text-align: center;
    display: inline-block;
    padding: 2px;
    min-width: 15px;
    height: 15px;
    font-size: 9pt;
}

#control .button.small {
    padding: 0;
}

#control .button .symbol {
    font-size: 11pt;
}

#control .label {
    font-size: var(--fontSmall);
    font-weight: bold;
    vertical-align: middle;
}

.tag_cloud {
    margin: 20px 0
}

#clusters .label {
    width: 100%;
    display: block;
    float: left;
}

#clustering_controls {
    font-size: 9pt;
}

.n_clusters {
    clear: both;
    float: left;
    margin: 0 10px;
}

.clustering_criteria {
    margin-top: 1px;
    float: left;
    margin-right: 10px;
}

.clustering_criteria input {
    position: relative;
    top: 3px;
    margin-left: 10px;
    display: inline-block;
}

#create_clustering {
    position: relative;
    top: -2px;
    float: left;
}

.tag {
    color: #888888;
    display: inline-block;
    padding: 0 12px 0 0;
    margin: 1px;
    cursor: pointer;
}

.tag:hover {
    background: var(--bgColor3);
}

.tag.active, .author.active {
    background: #C0C0C0;
}

.tag.inverted .text {
    text-decoration: line-through;
}

.tag_cloud .authorized {
    color: black;
}

.tag_cloud .tag .tag_frequency {
    font-size: 8pt;
    position: relative;
    top: 2px;
    left: 1px;
}

.tag_cloud .freq1 {
    font-size: 9pt;
}

.tag_cloud .freq2 {
    font-size: 10pt;
}

.tag_cloud .freq3 {
    font-size: 11pt;
}

.tag_cloud .freq5 {
    font-size: 12pt;
}

.tag_cloud .freq10 {
    font-size: 13pt;
}

.tag_cloud .freq20 {
    font-size: 14pt;
}

.tag_cloud .freq35 {
    font-size: 15pt;
}

.tag_cloud .freq50 {
    font-size: 16pt;
}

.tag_cloud .freq80 {
    font-size: 17pt;
}

.tag_cloud .freq120 {
    font-size: 18pt;
}

.tag_cloud .tag .terms {
    margin-left: 15px;
    font-size: 9pt;
}

.clustering {
    margin: 10px 0;
}

#result {
    grid-area: result;
    display: grid;
    grid-template-rows: min-content auto;
    margin: 0;
    margin-right: 7px;
    padding: 0 !important;
    overflow: auto;
}

#result_header {
    padding: 5px;
    border-bottom: var(--lightBorder);
}

#stats {
    display: inline-block;
    margin-right: 20px;
    height: 19px;
    font-weight: bold;
}

#sorting_description {
    font-size: var(--fontSmall);
    display: inline-block;
}

#result_body {
    padding: 10px;
    overflow-y: scroll;
}

#show_more_entries {
    clear: both;
    float: left;
}

#show_all_entries {
    float: left;
}

#footer {
    grid-area: footer;
    font-size: var(--fontSmall);
}

#footer .button {
    margin-top: 0;
    margin-bottom: 0;
    top: -3px;
    position: relative;
}

#extra_pages_list {
    float: right;
    height: 19px;
}

#menu {
    float: left;
    height: 19px;
}

#menu div {
    cursor: pointer;
}

#menu .button .symbol {
    font-size: 14pt;
}

#add_entry {
    margin-left: 50px;
}

#rename_form {
    margin-top: 10px;
}

#rename_query {
    width: 500px;
}

.CodeMirror {
    margin-top: 2px;
    margin-bottom: 2px;
    border: var(--lightBorder);
    font-size: 8pt;
    height: 300px;
    clear: both;
}

.bibtex_status {
    font-size: 8pt;
}

.bibtex_status .info {
    border: var(--lightBorder);
    background: #f7f7f7;
    margin: 5px 0;
    padding: 5px;
}

.bibtex_status .error {
    border: var(--errorBorder);
    background: var(--errorBgColor); 
    margin: 5px 0;
    padding: 5px;
}

#notifications {
    position: absolute;
    bottom:5;
    right:5;
}

#notifications div {
    background: var(--warningBgColor);
    border: var(--lightBorder);
    padding: 2px;
    margin: 5px;
    position: relative;
    z-index: 1000;
    box-shadow: var(--defaultShadow);
    font-size: var(--fontSmall);
}

#notifications div.error {
    background: var(--errorBgColor);
    border: var(--errorBorder);
}