Mercurial
diff .cms/css/base.css @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.cms/css/base.css Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,127 @@ +#base { + display: grid; + gap: 1rem; + overflow-y: auto; + max-height: 100%; +} + +@media (max-width: 1023px) { +#base { + padding: 1rem 0.4rem 1rem 0.4rem; + } +} + +@media (min-width: 1024px) { + #base { + grid-template-columns: 17rem 1fr; + grid-template-rows: auto; + padding: 1rem; + } +} + +#base .db-settings { + grid-column: 1/2; + background-color: var(--windows); + background-image: var(--noise); + box-shadow: var(--shadows); + border-radius: 0.3rem; +} +@media (max-width: 1023px) { + #base .db-settings { + padding: 1rem 0.7rem 1rem 0.7rem; + } +} +@media (min-width: 1024px) { + #base .db-settings { + padding: 1rem; + } +} + +#base form { + display: grid; + row-gap: 2rem; +} + +#base form > div { + position: relative; + display: grid; + row-gap: 1rem; +} +#base .create { + font-size: 1rem; + color: var(--names); + text-align: center; + user-select: none; +} + + +#base form div > div div:not(.password-eye) { + font-size: 1rem; + margin-bottom: 3px; + color: var(--windows-font); +} + +#base form .pro-btn { + cursor: pointer; + text-align: center; + padding: 0.3rem; + border: 1px solid var(--bg-3); + border-radius: 0.2rem; + color: var(--link); + user-select: none; +} +#base form .pro { + display: none; +} +#base form.show-pro .pro { + display: grid; +} + + + +#base form .password-widget { + display: grid; + grid-template-columns: 1fr auto; + gap: 5px; +} +#base form .password-widget input { + grid-column: 1/-1; + grid-row: 1/2; +} + +#base form input { + border-radius: 4px; + font-size: 0.875rem; + font-family: var(--monospace); + padding: 0 0.54rem 3px 0.54rem; + min-height: 35px; + height: 35px; + width: 100%; + color: var(--input-font); + background-color: var(--input-bg); + border: 2px solid var(--input-border); +} +#base form input[name="password"] { + grid-column: 1 / -1; + grid-row: 1 / 2; + padding-right: 2.2rem; +} + +#base form > div > div { + position: relative; +} +#base form .password-eye { + grid-column: 2 / 3; + grid-row: 1 / 2; + width: 34px; + height: 34px; + z-index: 1; + cursor: pointer; + background-repeat: no-repeat; + background-size: 20px; + background-position: center; + background-image: var(--eye-off); +} +#base form .password-eye.showed { + background-image: var(--eye-on); +}