github.com/choria-io/go-choria@v0.28.1-0.20240416190746-b3bf9c7d5a45/docs/themes/hugo-theme-relearn/static/css/variant.css (about)

     1  @import "variant-internal.css";
     2  
     3  html {
     4      color-scheme: only var(--INTERNAL-BROWSER-theme);
     5  }
     6  
     7  body {
     8      background-color: var(--INTERNAL-MAIN-BG-color);
     9      color: var(--INTERNAL-MAIN-TEXT-color);
    10      font-family: var(--INTERNAL-MAIN-font);
    11  }
    12  
    13  a,
    14  .anchor,
    15  .topbar-button button,
    16  #R-searchresults .autocomplete-suggestion {
    17      color: var(--INTERNAL-MAIN-LINK-color);
    18  }
    19  
    20  a:hover,
    21  a:active,
    22  a:focus,
    23  .anchor:hover,
    24  .anchor:active,
    25  .anchor:focus,
    26  .topbar-button button:hover,
    27  .topbar-button button:active,
    28  .topbar-button button:focus{
    29      color: var(--INTERNAL-MAIN-LINK-HOVER-color);
    30  }
    31  
    32  #R-sidebar {
    33      background: var(--INTERNAL-MENU-SECTIONS-BG-color);
    34  }
    35  
    36  #R-header-wrapper {
    37      background-color: var(--INTERNAL-MENU-HEADER-BG-color);
    38      color: var(--INTERNAL-MENU-SEARCH-color);
    39  }
    40  
    41  .searchbox {
    42      border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
    43      background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
    44  }
    45  
    46  #R-sidebar .searchbox > :first-child,
    47  #R-sidebar .searchbox > :last-child {
    48      color: var(--INTERNAL-MENU-SEARCH-color);
    49  }
    50  
    51  .searchbox input::-webkit-input-placeholder,
    52  .searchbox input::placeholder {
    53      color: var(--INTERNAL-MENU-SEARCH-color);
    54  }
    55  
    56  #R-sidebar .collapsible-menu label,
    57  #R-sidebar .menu-control,
    58  #R-sidebar :is( a, span ) {
    59      color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
    60  }
    61  
    62  #R-sidebar select:hover,
    63  #R-sidebar .collapsible-menu li:not(.active) > label:hover,
    64  #R-sidebar .menu-control:hover,
    65  #R-sidebar a:hover {
    66      color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
    67  }
    68  
    69  #R-sidebar ul.enlarge > li.parent,
    70  #R-sidebar ul.enlarge > li.active {
    71      background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
    72  }
    73  
    74  #R-sidebar li.active > label,
    75  #R-sidebar li.active > a {
    76      color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
    77  }
    78  
    79  #R-sidebar li.active > a {
    80      background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
    81  }
    82  
    83  #R-sidebar ul li > a .read-icon {
    84      color: var(--INTERNAL-MENU-VISITED-color);
    85  }
    86  
    87  #R-sidebar .nav-title {
    88      color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
    89  }
    90  
    91  #R-content-wrapper hr {
    92      border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color);
    93  }
    94  
    95  #R-footer {
    96      color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
    97  }
    98  
    99  mark {
   100      background-image: linear-gradient(
   101          to right,
   102          color-mix( in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent ),
   103          color-mix( in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent ) 4%,
   104          color-mix( in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent )
   105      );
   106  }
   107  
   108  kbd {
   109      color: var(--INTERNAL-TEXT-color);
   110      font-family: var(--INTERNAL-CODE-font);
   111  }
   112  
   113  h1 {
   114      color: var(--INTERNAL-MAIN-TITLES-H1-color);
   115      font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
   116  }
   117  
   118  h2 {
   119      color: var(--INTERNAL-MAIN-TITLES-H2-color);
   120      font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
   121  }
   122  
   123  h3, .article-subheading {
   124      color: var(--INTERNAL-MAIN-TITLES-H3-color);
   125      font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
   126  }
   127  
   128  h4 {
   129      color: var(--INTERNAL-MAIN-TITLES-H4-color);
   130      font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
   131  }
   132  
   133  h5 {
   134      color: var(--INTERNAL-MAIN-TITLES-H5-color);
   135      font-family: var(--INTERNAL-MAIN-TITLES-H5-font);
   136  }
   137  
   138  h6 {
   139      color: var(--INTERNAL-MAIN-TITLES-H6-color);
   140      font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
   141  }
   142  
   143  div.box {
   144      background-color: var(--VARIABLE-BOX-color);
   145      border-color: var(--VARIABLE-BOX-color);
   146  }
   147  
   148  div.box > .box-label {
   149      color: var(--VARIABLE-BOX-CAPTION-color);
   150  }
   151  
   152  div.box > .box-content {
   153      background-color: var(--VARIABLE-BOX-BG-color);
   154      color: var(--VARIABLE-BOX-TEXT-color);
   155  }
   156  
   157  .cstyle.info {
   158      --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
   159      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
   160  }
   161  
   162  .cstyle.warning {
   163      --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
   164      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
   165  }
   166  
   167  .cstyle.note {
   168      --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
   169      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
   170  }
   171  
   172  .cstyle.tip {
   173      --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
   174      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
   175  }
   176  
   177  .cstyle.primary {
   178      --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
   179      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
   180  }
   181  
   182  .cstyle.secondary {
   183      --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
   184      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
   185  }
   186  
   187  .cstyle.accent {
   188      --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
   189      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
   190  }
   191  
   192  .cstyle.blue {
   193      --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
   194      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
   195  }
   196  
   197  .cstyle.green {
   198      --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
   199      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
   200  }
   201  
   202  .cstyle.grey {
   203      --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
   204      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
   205  }
   206  
   207  .cstyle.orange {
   208      --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
   209      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
   210  }
   211  
   212  .cstyle.red {
   213      --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
   214      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
   215  }
   216  
   217  .cstyle.code {
   218      --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
   219      --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
   220      --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
   221      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
   222  }
   223  
   224  .cstyle.transparent {
   225      --VARIABLE-BOX-color: transparent;
   226      --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
   227      --VARIABLE-BOX-BG-color: transparent;
   228      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
   229  }
   230  
   231  code,
   232  kbd,
   233  pre:not(.mermaid),
   234  samp {
   235      font-family: var(--INTERNAL-CODE-font);
   236  }
   237  
   238  code {
   239      background-color: var(--INTERNAL-CODE-INLINE-BG-color);
   240      border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
   241      color: var(--INTERNAL-CODE-INLINE-color);
   242  }
   243  
   244  pre:not(.mermaid) {
   245      background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
   246      border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
   247      color: var(--INTERNAL-CODE-BLOCK-color);
   248  }
   249  
   250  div.highlight > div {
   251      background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
   252      border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
   253  }
   254  
   255  table {
   256      background-color: var(--INTERNAL-MAIN-BG-color);
   257  }
   258  
   259  .lightbox-back img{
   260      background-color: var(--INTERNAL-MAIN-BG-color);
   261  }
   262  
   263  #R-topbar {
   264      background-color: var(--INTERNAL-MAIN-BG-color);
   265  }
   266  
   267  .topbar-sidebar-divider {
   268      border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
   269  }
   270  @media screen and (max-width: 47.999rem) {
   271      .topbar-sidebar-divider {
   272          border-inline-start-color: transparent;
   273      }
   274  }
   275  
   276  #R-body a[aria-disabled="true"],
   277  #R-searchresults .autocomplete-suggestion > .context {
   278      color: var(--INTERNAL-MAIN-TEXT-color);
   279  }
   280  
   281  #R-searchresults .autocomplete-suggestion > .breadcrumbs {
   282      color: var(--INTERNAL-PRIMARY-color);
   283  }
   284  
   285  .copy-to-clipboard-button {
   286      background-color: var(--INTERNAL-CODE-INLINE-BG-color);
   287      border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
   288      color: var(--INTERNAL-CODE-INLINE-color);
   289      font-family: var(--INTERNAL-CODE-font);
   290  }
   291  
   292  .copy-to-clipboard-button:hover {
   293      background-color: var(--INTERNAL-CODE-INLINE-color);
   294      color: var(--INTERNAL-CODE-INLINE-BG-color);
   295  }
   296  
   297  div.highlight > div table + .copy-to-clipboard-button,
   298  div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
   299  pre:not(.mermaid) .copy-to-clipboard-button {
   300      border-color: transparent;
   301      color: var(--INTERNAL-MAIN-LINK-color);
   302  }
   303  
   304  div.highlight > div table + .copy-to-clipboard-button:hover,
   305  div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover,
   306  pre:not(.mermaid) .copy-to-clipboard-button:hover {
   307      background-color: var(--INTERNAL-MAIN-LINK-color);
   308      border-color: var(--INTERNAL-MAIN-LINK-color);
   309      color: var(--INTERNAL-CODE-BLOCK-BG-color);
   310  }
   311  
   312  .expand > label {
   313      color: var(--INTERNAL-MAIN-LINK-color);
   314  }
   315  
   316  .expand > label:hover,
   317  .expand > label:active,
   318  .expand > label:focus,
   319  .expand > input:hover + label,
   320  .expand > input:active + label,
   321  .expand > input:focus + label{
   322      color: var(--INTERNAL-MAIN-LINK-HOVER-color);
   323  }
   324  
   325  .svg-reset-button {
   326      border-color: transparent;
   327      color: var(--INTERNAL-MAIN-LINK-color);
   328  }
   329  .svg-reset-button:hover {
   330      background-color: var(--INTERNAL-MAIN-LINK-color);
   331      border-color: var(--INTERNAL-MAIN-LINK-color);
   332      color: var(--INTERNAL-MAIN-BG-color);
   333  }
   334  
   335  #R-homelinks {
   336      background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
   337  }
   338  
   339  #R-homelinks a {
   340      color: var(--INTERNAL-MENU-HOME-LINK-color);
   341  }
   342  
   343  #R-homelinks a:hover {
   344      color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
   345  }
   346  
   347  #R-homelinks hr {
   348      border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
   349  }
   350  
   351  .topbar-content {
   352      background-color: var(--INTERNAL-MAIN-BG-color);
   353  }
   354  
   355  .btn {
   356      background-color: var(--VARIABLE-BOX-color);
   357  }
   358  
   359  .btn > * {
   360      border-color: var(--VARIABLE-BOX-color);
   361      color: var(--VARIABLE-BOX-CAPTION-color);
   362  }
   363  
   364  .btn.interactive > *:hover,
   365  .btn.interactive > *:active,
   366  .btn.interactive > *:focus {
   367      background-color: var(--VARIABLE-BOX-BG-color);
   368      color: var(--VARIABLE-BOX-TEXT-color);
   369  }
   370  
   371  .btn.cstyle.transparent {
   372      --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
   373  }
   374  
   375  .btn.cstyle.interactive.transparent:hover,
   376  .btn.cstyle.interactive.transparent:focus,
   377  .btn.cstyle.interactive.transparent:active,
   378  .btn.cstyle.interactive.transparent:has(a:hover),
   379  .btn.cstyle.interactive.transparent:has(a:focus),
   380  .btn.cstyle.interactive.transparent:has(a:active) {
   381      background-color: var(--INTERNAL-BOX-NEUTRAL-color);
   382  }
   383  
   384  .btn.cstyle.transparent > * {
   385      --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
   386      --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
   387  }
   388  
   389  #R-body .tags {
   390      --VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
   391      --VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
   392  }
   393  
   394  #R-body .tags a.term-link {
   395      background-color: var(--VARIABLE-TAGS-BG-color);
   396      color: var(--VARIABLE-TAGS-color);
   397  }
   398  
   399  #R-body .tags a.term-link:before {
   400      border-right-color: var(--VARIABLE-TAGS-BG-color);
   401  }
   402  
   403  #R-body .tags a.term-link:after {
   404      background-color: var(--VARIABLE-TAGS-color);
   405  }
   406  
   407  .badge > * {
   408      border-color: var(--VARIABLE-BOX-TEXT-color);
   409  }
   410  
   411  .badge > .badge-content {
   412      background-color: var(--VARIABLE-BOX-color);
   413      color: var(--VARIABLE-BOX-CAPTION-color);
   414  }
   415  
   416  .badge.cstyle.transparent{
   417      --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
   418  }
   419  
   420  article ul > li > input[type="checkbox"] {
   421      background-color: var(--INTERNAL-MAIN-BG-color); /* box background */
   422      color: var(--INTERNAL-MAIN-TEXT-color);
   423  }
   424  
   425  #R-body .tab-nav-button {
   426      color: var(--INTERNAL-MAIN-LINK-color);
   427  }
   428  #R-body .tab-nav-button:not(.active):hover,
   429  #R-body .tab-nav-button:not(.active):active,
   430  #R-body .tab-nav-button:not(.active):focus {
   431      color: var(--INTERNAL-MAIN-LINK-HOVER-color);
   432  }
   433  
   434  #R-body .tab-nav-button.active {
   435      background-color: var(--VARIABLE-BOX-color);
   436      border-bottom-color: var(--VARIABLE-BOX-BG-color);
   437      color: var(--VARIABLE-BOX-TEXT-color);
   438  }
   439  
   440  #R-body .tab-nav-button > .tab-nav-text{
   441      border-bottom-color: var(--VARIABLE-BOX-color);
   442  }
   443  #R-body .tab-nav-button.active > .tab-nav-text{
   444      background-color: var(--VARIABLE-BOX-BG-color);
   445  }
   446  #R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
   447  #R-body .tab-nav-button:not(.active):active > .tab-nav-text,
   448  #R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
   449      border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
   450  }
   451  
   452  #R-body .tab-content{
   453      background-color: var(--VARIABLE-BOX-color);
   454      border-color: var(--VARIABLE-BOX-color);
   455  }
   456  
   457  #R-body .tab-content-text{
   458      background-color: var(--VARIABLE-BOX-BG-color);
   459      color: var(--VARIABLE-BOX-TEXT-color);
   460  }
   461  
   462  .tab-panel-style.cstyle.initial,
   463  .tab-panel-style.cstyle.default {
   464      --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
   465  }
   466  
   467  .tab-panel-style.cstyle.transparent {
   468      --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
   469      --VARIABLE-BOX-BG-color: transparent;
   470  }
   471  
   472  #R-body .tab-panel-style.cstyle.initial.tab-nav-button.active,
   473  #R-body .tab-panel-style.cstyle.default.tab-nav-button.active,
   474  #R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
   475      background-color: var(--VARIABLE-BOX-BG-color);
   476      border-left-color: var(--VARIABLE-BOX-color);
   477      border-right-color: var(--VARIABLE-BOX-color);
   478      border-top-color: var(--VARIABLE-BOX-color);
   479  }
   480  
   481  #R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){
   482      --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
   483  }
   484  
   485  #R-body .tab-panel-style.cstyle.initial.tab-content,
   486  #R-body .tab-panel-style.cstyle.default.tab-content,
   487  #R-body .tab-panel-style.cstyle.transparent.tab-content{
   488      background-color: var(--VARIABLE-BOX-BG-color);
   489  }
   490  
   491  #R-topbar {
   492      border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color);
   493  }
   494  
   495  #R-header-topbar {
   496      border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color);
   497  }
   498  @media screen and (max-width: 47.999rem) {
   499      .mobile-support #R-header-topbar {
   500          border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
   501      }
   502  }
   503  
   504  #R-header-wrapper,
   505  #R-homelinks,
   506  #R-content-wrapper > * {
   507      border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
   508  }
   509  
   510  #R-sidebar ul.collapsible-menu li.active > a{
   511      border-bottom-color: var(--INTERNAL-MENU-BORDER-color);
   512      border-top-color: var(--INTERNAL-MENU-BORDER-color);
   513      border-inline-start-color: var(--INTERNAL-MENU-BORDER-color);
   514      border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color);
   515  }