@import "catppuccin.css";

@font-face {
  font-family: 'GeistMono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-mono.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/**
 * main.
 */
:root {
    --fonts-proportional : Geist, -apple-system, "Segoe UI", system-ui, "Noto Sans", "Noto Sans Hebrew", Roboto, "Helvetica Neue", Arial;
    --fonts-monospace: GeistMono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
    --border-radius: 0;
    --border-radius-medium: 0;
    --border-radius-large: 0;
    --tab-size: 2;
    --color-text: #fff;
}

body {
    background-color: #151515;
    margin-inline: auto;
    max-width: 1200px;
    position: relative;
}

body::before, body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #FFFFFF1A;
    pointer-events: none;
    z-index: 9999;
}

body::before { left: calc(50% - 601px); }
body::after  { left: calc(50% + 600px); }

@media (max-width: 1200px) {
    body::before, body::after { display: none; }
}

input {
    background: transparent !important;
    border-radius: 0 !important;
}

button, a {
    border-radius: 0 !important;
}

img.avatar {
    border-radius: 50% !important;
}

* {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/**
 * footer.
 */

.page-footer {
    background-color: transparent;
    border-top: 1px solid #FFFFFF1A;
    justify-content: center;
    
    .left-links {
        display: none;
    }
    
    
    .right-links {
        gap: 8px;    
        
        & > a {
            border: none;
            margin: 0; padding: 0;
        }
    }
}

/**
 * navigation.
 */

nav#navbar {
    background: transparent;
    border-bottom: 1px solid #FFFFFF1A;
    padding: 4px 10px;
    
    #navbar-logo img {
        width: 24px;
    }
    
    #navbar-logo:hover {
        background: transparent;
    }
    
    .item {
        padding: 8px 16px;
        min-height: unset;
        text-transform: lowercase;
        font-family: GeistMono;
        
        &:has(span) > svg {
            display : none;
        }
        
        &.active {
            background-color: #C6A0F6;
            color: #151515;
            font-weight: 600;
        }
        
        &[target="_blank"] {
            display: none;
        }
    }
    
    position: relative;
    
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        
        background-image: url('../img/grain.png');
        background-repeat: repeat;
        mix-blend-mode: color-dodge;
        pointer-events: none;
    }
}

/**
 * home
 */
body > div:has(.page-content.home) {
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
}

.page-content.home {
    position: relative;
    overflow: hidden;
    height: 100%;
    
    img.cross {
        position: absolute;
        bottom: -200px;
        left: -100px;
        height: 67vh;
        pointer-events: none;
    }
    
    h1:has(.welcome) {
        padding-left: 32px;
        
        display: flex;
        flex-direction: column;
        
        .welcome {
            font-size: 24px;
            font-weight: 300;
        }
        
        .welcome-subtitle {
            font-size: 32px;
            color: #c6a0f6;
            font-weight: 600;
            line-height: 24px;
        }
    }
}

/**
 * auth.
 */

.page-content.user.signin {
    & > div > div {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .page {
        padding: 32px !important;
    }
    
    h4 {
        font-size: 24px;
        text-align: start;
        margin-bottom: 16px;
        padding: 0;
    }
    
    .ui.attached {
        border: 0;
        padding: 0;
        background: transparent;
    }
    
    .ui.fluid.container:nth-child(2) > div {
        align-items: flex-start !important;
    }
    
    #oauth2-login-navigator {
        padding: 0 !important;   
    }
    
    .divider {
        margin-block: 16px;   
    }
    
    @media (min-width: 760px) {
        .divider {
            display: none;
        }

        form > .field:has(button) {
            width: 280px;

            &, button {
                margin: 0;
            }
        }
    }
    
    form[action="/user/sign_up"] {
        #captcha {
            text-align: start;
        }
        
        .divider, #oauth2-login-navigator {
            display: none
        }
    }

    form[action="/user/login"] {
        padding-top: 16px;
    }

    .divider-text, .divider.divider-text:before, .divider.divider-text:after {
        border-color: #FFFFFF1A !important;
    }

    #oauth2-login-navigator-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        @media (width < 760px) {
            justify-content: center;
        }
        
        .github, .openidConnect {
            height: 48px;
            font-size: 0;
            padding: 0 !important;
            width: 64px !important;
            background: transparent;
            border: 0;

            img, svg {
                margin: 0 !important;
            }
        }    
    }
}

.page-content.user.link-account {
    padding: 0;

    .ui.secondary.pointing.menu {
        border-color: #FFFFFF1A !important;
    }

    .ui.top.attached.header.center {
        display: none;
    }

    .ui.attached:not(.header) {
        border: none;
        padding: 0;
        background: transparent;
    }
}

.page-content.user.signin.webauthn-prompt {
     .top.attached {
        display: none;
    }
}

/**
 * explore.
 */

.explore {
    & > .secondary-nav {
        border-bottom: 1px solid #FFFFFF1A !important;
    }
    
    & > .container {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        
        .divider, .flex-item {
            border-color: #FFFFFF1A !important;
        }
        
        .flex-item {
            padding-inline: 16px;
            padding-top: 12px;
            padding-bottom: 10px;
            
            svg {
                opacity: .5;
            }
            
            
            .flex-item-header {
                font-family: GeistMono
            }
        }
    }
}

/**
 * profile.
 */

#profile-avatar-card {
    background: transparent;
    border: none;
}

/**
 * repository
 */
.page-content.repository {
    #manage_topic, #repo-topics {
        display: none;
    }
    
    .secondary-nav {
        position: relative;
        overflow: hidden;
        margin-bottom: 0 !important;
        
        &::before {
            content: '';
            position: absolute;
            inset: 0;

            background-image: url('../img/grain.png');
            background-repeat: repeat;
            mix-blend-mode: color-dodge;
            pointer-events: none;
        }
        
        .ui.container {
            position: relative;
            width: 100% !important;
            max-width: 100% !important;
            padding-right: 18px;
            padding-left: 24px;
        }

        .repo-header {
            .flex-item-leading {
                position: absolute;
                left: 4px;
                top: 24px;
                opacity: .05;
                scale: 5;
                rotate: -18deg;
            }
            
            .flex-item-main {
                font-family: GeistMono;
            }

            .repo-buttons {
                gap: 12px;
                padding-right: 14px;
                
                .ui.button {
                    border: none;
                    background: transparent;
                    color: white;
                    padding: 8px;

                    span {
                        display: none;
                    }
                }

                .ui.label {
                    border: none;
                    background: transparent;
                    color: white;
                    padding: 0;
                }

                .ui.button.labeled {
                    gap: 4px;
                }
            }
        }

        .repo-description {
            padding-right: 18px;
            color: #999999;
        }

        #repo-desc > .link {
            display: block;
        }
        
        .secondary.menu {
            border: none !important;
        }
        
        .tabs.divider {
            position: relative;
            border-color: #FFFFFF1A !important;
            margin-bottom: 0 !important;
        }

        .overflow-menu-items {
            margin-top: 4px;
            
            .item {
                border-radius: 0;
                color: #999999;
                gap: 8px;
                padding-block: 14px !important;

                .svg {
                    margin: 0;
                }
            }

            .item.active, .item.active:hover, .item.active:focus {
                color: white;
            }
        }
    }
    
    & > .ui.container {
        margin: 0 !important;
        max-width: unset !important;
        width: 100% !important;
        
        & > .repository-summary {
            display: flex;
            flex-direction: column-reverse;
            
            border-radius: 0;
            border-inline: 0;
            border-top: 0;
            margin-top: 0 !important;
            border-color: #FFFFFF1A !important;
            
            &, & > .segment {
                background: transparent !important;
            }

            .item {
                height: 36px !important;
            }

            #language-stats, .slice {
                height: 6px !important;
            }
        }
        
        .code-search {
            border-inline: none;
            background-color: transparent !important;
            border-color: #FFFFFF1A !important;
        }
        
        #repo-files-table {
            background: transparent;
            border: none;
            border-bottom: 1px solid #FFFFFF1A;
            border-radius: 0;
            
            tr > td, tbody > tr > td {
                border-top: 1px solid #FFFFFF1A;
            }
            
            tr:first-child > td, tbody > tr:first-child > td {
                border-top: none;
            }
            
            thead > tr > th {
                background: transparent;
                border-radius: 0;
                position: relative;
                
                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;

                    background-image: url('../img/grain.png');
                    background-repeat: repeat;
                    mix-blend-mode: color-dodge;
                    pointer-events: none;
                }
            }
        }
        
        #readme {
            h4 {
                display: none !important;
            }
            
            & > div {
                border-radius: 0;
                border: none;
                background: transparent;
                
                .file-view.markup.markdown {
                    padding-block: 0;
                }
            }
        }
    }

    &.quickstart {
        & > .ui.container > .ui.grid {
            margin: 0;
        }
        
        .sixteen.wide.column.content {
            padding: 0;
        }
        
        .ui.top.attached.header {
            display: none;    
        }

        .empty-repo-guide {
            background: transparent;
            border-radius: 0;
            border: none;

            small {
                display: none;
            }

            .divider {
                border-color: #FFFFFF1A;
                margin-block: 0 !important;
            }

            .item:nth-child(1) > .repo-button-row {
                margin-bottom: 0;
            }
        }
    }
}