1  @import url("agregore://theme/vars.css");
  2  
  3  :root {
  4    --top-height: 2.5em;
  5    --border-width: 1px;
  6  }
  7  
  8  html, body {
  9    width: 100%;
 10    height: 100%;
 11    padding: 0;
 12    margin: 0;
 13    display: flex;
 14    flex: 1;
 15    flex-direction: column;
 16    background: var(--ag-color-white);
 17    font-family: var(--ag-theme-font-family);
 18  }
 19  
 20  #view {
 21    flex:1
 22  }
 23  
 24  #toptop {
 25    display: flex;
 26    flex-direction: row;
 27  }
 28  
 29  #search {
 30    flex: 1;
 31  }
 32  
 33  .hidden {
 34    display: none !important;
 35  }
 36  
 37  omni-box {
 38    display: block
 39  }
 40  
 41  .omni-box-header {
 42    display: flex;
 43    flex-direction: row;
 44    border-bottom: var(--border-width) solid var(--ag-theme-primary);
 45    background: var(--ag-theme-background);
 46    color: var(--ag-theme-text);
 47    height: calc(100% - var(--border-width));
 48  }
 49  
 50  .omni-box-form, .find-menu-form {
 51    display: flex;
 52    flex-direction: row;
 53    flex:1;
 54    border: none;
 55  }
 56  
 57  .omni-box-input, .find-menu-input, .omni-box-target-input {
 58    flex: 1;
 59    border:none;
 60    background: none;
 61    padding: 0.5em;
 62    color: inherit;
 63    font-size: inherit;
 64    font-family: inherit;
 65  }
 66  
 67  .nav-options {
 68    display: flex;
 69    flex-direction: column;
 70    margin: 0px;
 71    padding: 0px;
 72    border: var(--border-width) solid var(--ag-theme-primary);
 73    background: var(--ag-theme-background);
 74    color: var(--ag-theme-text);
 75  }
 76  
 77  .nav-options [data-selected] {
 78    border: 1px solid var(--ag-theme-secondary);
 79  }
 80  
 81  .nav-options:empty {
 82    display: none;
 83  }
 84  
 85  .omni-box-button, .find-menu-button, .browser-actions-button {
 86    color: inherit;
 87    font-size: inherit;
 88    padding: 0.5em;
 89    border: none;
 90    background: none;
 91    font-family: inherit;
 92  }
 93  
 94  .omni-box-nav-item {
 95    border: 1px solid var(--ag-theme-primary);
 96    display: flex;
 97    flex-direction: row;
 98    overflow: hidden;
 99    white-space: nowrap;
100    text-overflow: ellipsis;
101  }
102  
103  find-menu {
104    border: var(--border-width) solid var(--ag-theme-primary);
105    border-top: none;
106    display: flex;
107    flex-direction: row;
108    background: var(--ag-theme-background);
109    color: var(--ag-theme-text);
110  }
111  
112  browser-actions {
113    height: calc(var(--top-height) - calc(var(--border-width) * 3));
114    border-bottom: var(--border-width) solid var(--ag-theme-primary);
115    border-left: var(--border-width) solid var(--ag-theme-primary);
116    display: flex;
117    flex-direction: row;
118    background: var(--ag-theme-background);
119    color: var(--ag-theme-text);
120    justify-content: center;
121    align-items: center;
122    padding: var(--border-width);
123  }
124  .browser-actions-button {
125    padding: 0 calc(var(--border-width) * 2);
126    height: calc(100% - calc(var(--border-width) * 2));
127    width: auto;
128    position: relative;
129  } .browser-actions-button>img {
130    height: 100%;
131    width: auto;
132  }
133  .browser-actions-badge {
134    border-radius: 0.25em;
135    position: absolute;
136    bottom: 0px;
137    min-width: 1em;
138    min-height: 1em;
139    left: 50%;
140    transform: translateX(-50%);
141    background: var(--ag-theme-background);
142    color: var(--ag-theme-text);
143  }
144  
145  browser-actions:empty {
146    display: none;
147  }
148  
149  *:focus {
150    outline: var(--border-width) solid var(--ag-theme-secondary);
151  }