mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
1 line
3.7 KiB
CSS
1 line
3.7 KiB
CSS
.header{border-bottom:8px solid var(--color-header-borderline);background:var(--color-header-background)}.header ::-moz-selection{background:var(--color-header-selection)}.header ::selection{background:var(--color-header-selection)}.header :focus{border-bottom:2px solid var(--color-header-navigation-link-hover)}.header :focus-visible{outline:2px solid var(--color-header-navigation-link-hover);border-color:transparent}.header-wrapper{padding-top:32px;padding-bottom:16px}.logo-wrapper{text-align:center}.logo-wrapper__logo{font-size:48px;font-weight:500;color:var(--color-header-logo);cursor:default}.menu-wrapper{margin-top:16px;align-self:center}.navigation{padding:0;list-style-type:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:8px}.navigation__item{font-size:16px;text-transform:uppercase}.navigation__item a{border-color:transparent;color:var(--color-header-navigation-link)}.navigation__item a:hover{border-color:var(--color-header-navigation-link-hover);color:var(--color-header-navigation-link-hover)}@media only screen and (min-width:540px){.header{border-bottom:32px solid var(--color-header-borderline);background:var(--color-header-background)}.header-wrapper{padding-top:64px;padding-bottom:16px}.menu-wrapper{margin-top:32px;align-self:center}}@media only screen and (min-width:720px){.header-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:64px}.logo-wrapper{width:50%;text-align:left}.menu-wrapper{width:50%;margin-top:0;align-self:flex-end}}@media only screen and (min-width:1024px){.logo-wrapper__logo{font-size:64px}}.footer{border-top:4px solid var(--color-footer-borderline)}.footer span{color:var(--color-footer-text)}.footer-wrapper{padding-top:32px;padding-bottom:32px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:32px}.created-by{align-self:flex-end}.created-by>span{padding-right:8px}.created-by>a{font-size:32px}.navigation-list{display:flex;flex-direction:row;justify-content:flex-start;gap:16px}.navigation-item.router-link-active,.navigation-item.router-link-exact-active{border-bottom:2px solid var(--color-link-hover);color:var(--color-link-hover);transition:all .5s ease;text-decoration:none}.list-item{max-width:100%;padding:16px;border:4px solid var(--color-b);border-radius:4px;justify-content:space-between}.list-item,.list-item__info{display:flex;flex-direction:column}.list-item__info{gap:16px}.list-item_selected .list-item__info span{color:var(--color-white)}.device-list{display:flex;flex-direction:row;justify-content:space-around;gap:16px}.message{width:100%;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:16px}@media only screen and (min-width:540px){.message{font-size:24px}}.pattern-item{width:100%;height:50px;padding:8px;border-radius:var(--number-border-radius);background:var(--color-pattern-button);display:flex;flex-direction:row;justify-content:flex-start;gap:8px;align-items:center;text-align:center;overflow:hidden;cursor:pointer}@media only screen and (min-width:540px){.pattern-item{width:200px}}.pattern-item ::-moz-selection{background-color:transparent}.pattern-item ::selection{background-color:transparent}.pattern-item_selected{background:var(--color-b)}.pattern-item__icon{font-size:24px}.pattern-item__info-container{display:flex;flex-direction:column;justify-content:space-between;text-align:left}.pattern-item__name{font-size:16px}.pattern-item__name,.pattern-item__type{white-space:nowrap;overflow:hidden;color:var(--color-pattern-text)}.pattern-item__type{font-size:12px}.pattern-list{display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;gap:16px}@media only screen and (min-width:540px){.pattern-list{display:flex;gap:32px}} |