123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
- app {
- position: fixed;
- height: 100vh;
- width: 100vw;
- box-sizing: border-box;
- border-right: 1px solid red;
- font-family: 'Roboto', sans-serif;
- overflow-y: auto;
- overflow-y: auto;
- padding-top: 64px;
- }
- app md-toolbar {
- top: 0px;
- position: fixed;
- user-select: none;
- }
- ul {
- margin: 0px;
- padding: 0px;
- list-style: none;
- box-sizing: border-box;
- }
- app .content {}
- /* header */
- .header-user {
- display: flex;
- align-items: center;
- }
- .header-user>*:not(:first-child) {
- margin: 0px 12px;
- display: flex;
- }
- .header-user ul {
- display: flex;
- flex-direction: column;
- font-size: 15px;
- }
- .header-user>:first-child {
- font-size: 46px;
- }
- .header-user ul li:last-child {
- font-size: 12px;
- color: rgba(255, 255, 255, 0.75);
- }
- /* fim do header */
- .login-input-container .material-icons {
- position: absolute;
- left: 0px;
- color: rgba(0, 0, 0, .5);
- }
- .noticias-container {
- overflow: auto
- }
- .noticias-painel {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- margin: 40px 30px;
- flex-wrap: wrap;
- list-style: none;
- box-sizing: border-box;
- }
- .noticia {
- text-decoration: none;
- cursor: pointer;
- width: 280px;
- max-width: 340px;
- height: 300px;
- background: #fefefe;
- color: rgba(0, 0, 0, 0.7);
- overflow: hidden;
- max-height: 340px;
- margin: 10px;
- display: flex;
- box-shadow: 0 1px 7px rgba(0, 0, 0, .05);
- border: 1px solid #00000017;
- border-radius: 6px;
- flex-direction: column;
- position: relative;
- justify-content: space-between;
- }
- .noticia-actions {
- display: flex;
- justify-content: space-between;
- /* background: #0000000d; */
- /* border-radius: 54px; */
- /* margin: 10px; */
- font-size: 15px;
- align-items: center;
- }
- .noticia-actions li {
- padding: 0 10px;
- display: flex;
- }
- figure {
- margin: 1em 0px;
- }
- .publicado-em {
- font-size: 12px;
- color: rgba(0, 0, 0, .5);
- }
- .tags {
- display: flex;
- flex-wrap: wrap;
- }
- .tags li {
- background: #00000012;
- padding: 5px 8px;
- box-sizing: border-box;
- font-size: 12px;
- border-radius: 5px;
- margin-right: 10px;
- margin-top: 7px;
- }
- .noticia>:not(:first-child) {
- padding: 8px
- }
- .noticia-img {
- overflow: hidden;
- background: #00000017;
- height: 80px;
- min-height: 80px;
- }
- .noticia-img img {
- width: 100%;
- transform: translateY(-60px);
- opacity: 0.8;
- }
- .avatar {
- border-radius: 50%
- }
- .noticia-header-box>div {
- margin-bottom: 10px
- }
- .noticia-h3 {
- letter-spacing: -.02em;
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0;
- font-size: 15px;
- line-height: 24px;
- letter-spacing: -.29px;
- }
- .login {
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- background-color: #77aa77;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
- background-attachment: fixed;
- background-size: cover;
- }
- .login-container {
- box-shadow: 0 0 4px #000000a6;
- background: #fff;
- height: 500px;
- width: 450px;
- border-radius: 5px;
- display: grid;
- grid-template-rows: auto 1fr;
- box-sizing: border-box;
- }
- .logo-container {
- padding: 40px 20px 0px;
- transition: all var(--duration-step) ease-out;
- /* height: 200px; */
- height: 100px;
- justify-content: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- box-sizing: border-box;
- }
- .project-name {
- color: #7d7d7d;
- margin: 0px 10px;
- font-size: 20px;
- transition: all var(--duration-step) cubic-bezier(0.45, 0.05, 0.55, 0.95);
- box-sizing: border-box;
- }
- .reduce {
- height: 100px;
- /* flex-direction: row; */
- /* justify-content: start; */
- }
- .logo {
- transition: all var(--duration-step) cubic-bezier(0.45, 0.05, 0.55, 0.95);
- height: 100px;
- width: 100px;
- }
- .reduce .logo {
- transform: translate(-170px);
- height: 48px;
- }
- .reduce .project-name {
- font-size: 16px;
- transform: translate(-84px, -34px);
- }
- .login-step-container {
- /* border: 1px solid blue; */
- display: flex;
- /* flex-direction: row; */
- /* overflow-x: scroll; */
- /* flex-wrap: nowrap; */
- /* overflow-y: hidden; */
- /* flex-basis: 1; */
- /* overflow: hidden; */
- /* flex-flow: wrap; */
- overflow: hidden;
- box-sizing: border-box;
- }
- .login-step-container>ul {
- display: flex;
- flex-direction: row;
- }
- .login-step {
- /* border: 1px solid forestgreen; */
- height: 100%;
- width: 450px;
- /* transform: translateY(-340px); */
- transition: all var(--duration-step) ease;
- box-sizing: border-box;
- }
- .user-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .user-data {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .user-data span:first-child {
- font-size: 18px;
- }
- .user-data span:last-child {
- font-size: 14px;
- }
- .avatar {
- border-radius: 50%;
- height: 64px;
- width: 64px;
- }
- .login-input-container {
- padding: 25px 40px;
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- .login-input-container li {
- padding: 10px;
- }
- .signin-actions {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- }
- .signin-actions a {
- text-decoration: none;
- font-weight: 500;
- font-size: 16px;
- }
- .login-reset .signin-actions {
- justify-content: flex-end;
- }
- .login-input-container .reset-text {
- align-items: flex-start;
- }
- .login-input-container .user-data {
- align-items: flex-start;
- justify-content: flex-start;
- }
- .login-error {
- transition: all .15s ease-out;
- margin: 0px;
- font-size: 14px;
- color: #b12a21;
- margin-left: 12px;
- margin-top: -6px;
- }
|